<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Circle Collision NFT</title>
<script src="
cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
body { margin: 0; padding: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script>
let balls = [];
const numBalls = 7;
let bgColor1, bgColor2, targetBgColor1, targetBgColor2;
const bgColorChangeSpeed = 0.005;
let draggedBall = null;
class Ball {
constructor(x, y, r) {
this.position = createVector(x, y);
this.velocity = p5.Vector.random2D().mult(3);
this.r = r;
this.m = r * 0.1;
this.color = color(random(255), random(255), random(255));
this.targetColor = color(random(255), random(255), random(255));
this.colorChangeSpeed = 0.01;
this.isDragging = false;
}
update() {
if (!this.isDragging) {
this.position.add(this.velocity);
}
this.updateColor();
}
updateColor() {
this.color = lerpColor(this.color, this.targetColor, this.colorChangeSpeed);
if (this.color.toString() === this.targetColor.toString()) {
this.targetColor = color(random(255), random(255), random(255));
}
}
checkBoundaryCollision() {
if (this.position.x > width - this.r || this.position.x < this.r) {
this.velocity.x *= -1;
this.position.x = constrain(this.position.x, this.r, width - this.r);
}
if (this.position.y > height - this.r || this.position.y < this.r) {
this.velocity.y *= -1;
this.position.y = constrain(this.position.y, this.r, height - this.r);
}
}
checkCollision(other) {
let distanceVect = p5.Vector.sub(other.position, this.position);
let distanceVectMag = distanceVect.mag();
let minDistance = this.r + other.r;
if (distanceVectMag < minDistance) {
let distanceCorrection = (minDistance - distanceVectMag) / 2.0;
let correctionVector = distanceVect.copy().normalize().mult(distanceCorrection);
other.position.add(correctionVector);
this.position.sub(correctionVector);
let theta = distanceVect.heading();
let sine = sin(theta);
let cosine = cos(theta);
let bTemp = [createVector(), createVector()];
bTemp[1].x = cosine * distanceVect.x + sine * distanceVect.y;
bTemp[1].y = cosine * distanceVect.y - sine * distanceVect.x;
let vTemp = [createVector(), createVector()];
vTemp[0].x = cosine * this.velocity.x + sine * this.velocity.y;
vTemp[0].y = cosine * this.velocity.y - sine * this.velocity.x;
vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y;
vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x;
let vFinal = [createVector(), createVector()];
vFinal[0].x = ((this.m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) / (this.m + other.m);
vFinal[0].y = vTemp[0].y;
vFinal[1].x = ((other.m - this.m) * vTemp[1].x + 2 * this.m * vTemp[0].x) / (this.m + other.m);
vFinal[1].y = vTemp[1].y;
bTemp[0].x += vFinal[0].x;
bTemp[1].x += vFinal[1].x;
let bFinal = [createVector(), createVector()];
bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
other.position.x = this.position.x + bFinal[1].x;
other.position.y = this.position.y + bFinal[1].y;
this.position.add(bFinal[0]);
this.velocity.x = cosine * vFinal[0].x - sine * vFinal[0].y;
this.velocity.y = cosine * vFinal[0].y + sine * vFinal[0].x;
other.velocity.x = cosine * vFinal[1].x - sine * vFinal[1].y;
other.velocity.y = cosine * vFinal[1].y + sine * vFinal[1].x;
}
}
display() {
noStroke();
fill(this.color);
ellipse(this.position.x, this.position.y, this.r * 2);
}
contains(px, py) {
let d = dist(px, py, this.position.x, this.position.y);
return d < this.r;
}
drag(px, py) {
this.position.x = px;
this.position.y = py;
}
}
function setup() {
createCanvas(710, 400);
for (let i = 0; i < numBalls; i++) {
let x = random(width);
let y = random(height);
let r = random(20, 40);
balls.push(new Ball(x, y, r));
}
bgColor1 = color(random(255), random(255), random(255));
bgColor2 = color(random(255), random(255), random(255));
targetBgColor1 = color(random(255), random(255), random(255));
targetBgColor2 = color(random(255), random(255), random(255));
}
function draw() {
bgColor1 = lerpColor(bgColor1, targetBgColor1, bgColorChangeSpeed);
bgColor2 = lerpColor(bgColor2, targetBgColor2, bgColorChangeSpeed);
if (bgColor1.toString() === targetBgColor1.toString()) {
targetBgColor1 = color(random(255), random(255), random(255));
}
if (bgColor2.toString() === targetBgColor2.toString()) {
targetBgColor2 = color(random(255), random(255), random(255));
}
for(let y = 0; y < height; y++){
let inter = map(y, 0, height, 0, 1);
let c = lerpColor(bgColor1, bgColor2, inter);
stroke(c);
line(0, y, width, y);
}
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
b.update();
b.display();
b.checkBoundaryCollision();
for (let j = i + 1; j < balls.length; j++) {
b.checkCollision(balls[j]);
}
}
}
function mousePressed() {
for (let i = balls.length - 1; i >= 0; i--) {
if (balls[i].contains(mouseX, mouseY)) {
draggedBall = balls[i];
draggedBall.isDragging = true;
break;
}
}
}
function mouseDragged() {
if (draggedBall) {
draggedBall.drag(mouseX, mouseY);
}
}
function mouseReleased() {
if (draggedBall) {
draggedBall.isDragging = false;
draggedBall = null;
}
}
</script>
</body>
</html>
chrismartz
HIGHER LOOP 🌐
fireflies
new watch
ditto
HIGHER HTML
151371 $ENJOY ↑BALL UP TOP (INTERACTIVE!!!)
BALL UP TOP
huewave highlight
COURT
WATCHER
wheel
knot derivative
star array
RE-ZORB - interior study
WOODGRAIN
MATERIA
crystallized mako. “Meteor Fall” 333333 $enjoySplotch
BRYCE-One
top
SEAGLASS ONE
$ZRTK
0xf3cdca11108780008d04491ac699e962abeff151
Current Price : $0.6797 USD
-
Swap ETH to ZRTK on Uniswap
Bridge ETH to Zora via the official zora bridge
bridge.zora.energy/
or
relay.link/bridge/zora
🪙
THIS POSTS COSTS ONE ZORA TOKEN
still not seeing enough text mints
sediment pattern
grain window
layered outlines
made via custom diffusion model trained on my artwork - then retouched in procreate
roadz
0_0
sediment-3a
sediment-2a
sediment-1a
memorex2
memorex-1
DANCE
DANCE - LEG
GAME
yes man.... yes 50000 $enjoyWhat game? 777777 $enjoyfree mint
Dark Sequence
why do you think that is?
sound off in the comments
thanks,
CM
I feel like i don't see enough text mints
funny
100000 $enjoy
Enjoy Dot Tech
CENTRE
RADAR
Fees split 8020 with 747airlines✈.eth
PEGBOARD
ZORB INSIDE OF OYSTER SHELL
Mint ended over there so i made it OE and infinite here
Airplane Mode - (747Airilines Wallpaper)
10000 $enjoy
ENJORB IN THE DISTANCE
ENJORB IN THE DISTANCE
ENJORB IN THE DISTANCE
Spaces-Green-Shadows
slightly expected a fluorescent flicker 111,111 $enjoysound spirit
2024
˚ ༘ ೀ⋆｡˚ 11111 $ENJOY ˚ ༘ ೀ⋆｡˚
EMOJIS
Dude
Dude
Rewards
GLYPHS
Interactive HTML
Runs Forever
Special Thanks to John Provencher and Fruitful School
Chris Martz
2024
sorry about the degen comment, mind is broken right now
Test Post
Elclipse 2
10000 $En
LAND ABOVE THE WORLD
INSIDE A RAINBOW
PART OF A SERIES
Mint ALL 5 to collect free animated piece
CM
2024
* 50000 $enjoyLOVE AND HONESTY
Collect All 5 to get free mint of animation
Chris Martz
2024
🤍 50000 $enjoyPlane Bagels
$CRASH x $BAGEL
I
747-rotate -v2
CRASH
Free-To-Fly-Across-World
Freedom-747-Airlines
Always Follow Safety Protocol (747 Airlines)
1 sh0ms token
SEQUENCE
🔥🔥🔥🔥🔥🔥🔥
HORSE
"a horse in the rain"
4-5 MORE are coming
collect all to recieve a special animation with audio
5555 $ENJOY
An instant favorite from @chrismartz
Likely track conditions given rain: Sloppy
Unexpected horse racing movie recommendation: “Phar Lap”
👓 🔵
DAYDREAM
2023
DANCE
Darkness into blackness
There and back, it's always black
Oh-ah, it screeched across the sky
Nothing to do but lie
NITEZORBY
MAKE
MAKE