let particles = null; const numParticles = 1000; const radius = 5; const gravity = 0.1; const repulsionStrength = 0.5; const interactionRadius = 20; const viscosity = 0.98; const mouseRepulsionStrength = 0.5; const mouseInteractionRadius = 150; let floatingBox; let isDragging = false; let dragPoint; const dragStrength = 0.005; draw = function() { if(particles === null) { resizeCanvas(500, 500) particles = []; for (let i = 0; i < numParticles; i++) { particles.push(new Particle(random(width), random(height))); } floatingBox = new FloatingBox(width / 2, height / 2, 60); } background(220); let mouseForce = createVector(mouseX, mouseY); for (let particle of particles) { particle.applyForce(createVector(0, gravity)); if(!isDragging) particle.interactWithMouse(mouseForce); particle.update(); } for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { particles[i].interact(particles[j]); } } if (isDragging) { let mousePos = createVector(mouseX, mouseY); let dragForce = p5.Vector.sub(mousePos, floatingBox.pos); dragForce.mult(dragStrength); floatingBox.applyForce(dragForce); } floatingBox.update(particles); renderWater(); floatingBox.display(); } mousePressed = function() { if (floatingBox.isMouseOver()) { isDragging = true; dragOffset = createVector(mouseX - floatingBox.pos.x, mouseY - floatingBox.pos.y); } } mouseReleased = function() { isDragging = false; } function renderWater() { noStroke(); // Draw particles for (let particle of particles) { let velocity = particle.getVelocity(); let speed = velocity.mag(); let size = map(speed, 5, 0, radius * 0.5, radius * 2); size = constrain(size, radius * 0.5, radius * 2); let horizontalSize = map(speed, 25, 0, radius * 0.5, radius * 2); horizontalSize = constrain(horizontalSize, radius * 0.5, radius * 2); push(); translate(particle.pos.x, particle.pos.y); rotate(velocity.heading() + 1.5708); fill(0, 150, 255, 150); ellipse(0, 0, size * 2, horizontalSize * 2); pop(); } } class Particle { constructor(x, y) { this.pos = createVector(x, y); this.vel = createVector(random(-1, 1), random(-1, 1)); this.oldPos = createVector(x + random(-1, 1), y + random(-1, 1)); this.acc = createVector(0, 0); this.radius = radius; this.mass = 1; } applyForce(force) { let f = p5.Vector.div(force, this.mass); this.acc.add(f); } update() { let vel = p5.Vector.sub(this.pos, this.oldPos); vel.mult(viscosity); // Apply viscosity // Save current position this.oldPos.set(this.pos); // Perform Verlet integration this.pos.add(vel).add(this.acc); this.acc.set(0, 0); // Contain particles within the canvas if (this.pos.x < this.radius || this.pos.x > width - this.radius) { let vel = p5.Vector.sub(this.pos, this.oldPos); this.pos.x = constrain(this.pos.x, this.radius, width - this.radius); this.oldPos.x = this.pos.x + vel.x * 0.8; // Bounce with some energy loss } if (this.pos.y < this.radius || this.pos.y > height - this.radius) { let vel = p5.Vector.sub(this.pos, this.oldPos); this.pos.y = constrain(this.pos.y, this.radius, height - this.radius); this.oldPos.y = this.pos.y + vel.y * 0.8; // Bounce with some energy loss } //this.pos.x = constrain(this.pos.x, this.radius, width - this.radius); //this.pos.y = constrain(this.pos.y, this.radius, height - this.radius); } interact(other) { let distance = p5.Vector.dist(this.pos, other.pos); if (distance < interactionRadius) { let force = p5.Vector.sub(other.pos, this.pos); force.normalize(); let strength = map(distance, 0, interactionRadius, repulsionStrength, 0); force.mult(strength); this.applyForce(force.copy().mult(-1)); other.applyForce(force); } } getVelocity() { return p5.Vector.sub(this.pos, this.oldPos); } interactWithMouse(mousePos) { let distance = p5.Vector.dist(this.pos, mousePos); if (distance < mouseInteractionRadius && (mouseIsPressed)) { let force = p5.Vector.sub(mousePos, this.pos); force.normalize(); let strength = map(distance, 0, mouseInteractionRadius, mouseRepulsionStrength, 0); force.mult(strength); if (mouseButton === RIGHT) { force.mult(-1); // Reverse force for repulsion } this.applyForce(force); } } } class FloatingBox { constructor(x, y, w) { this.pos = createVector(x, y); this.vel = createVector(0, 0); this.width = w; this.angle = 0; this.angularVel = 0; this.mass = 5; this.restitution = 0.6; // Coefficient of restitution for bouncing } isMouseOver() { let d = dist(mouseX, mouseY, this.pos.x, this.pos.y); return d < this.width / 2; } update(particles) { let gravity = createVector(0, 0.1); // Downward force to simulate gravity this.applyForce(gravity); let totalTorque = 0; // Interact with nearby particles for (let particle of particles) { if (this.isNearby(particle)) { let force = p5.Vector.sub(this.pos, particle.pos); let distance = force.mag(); let boxForce = force; boxForce.normalize(); boxForce.mult(0.01); this.applyForce(boxForce); if (this.checkInside(particle)) this.pushOutParticle(particle); //let waterForce = force; //waterForce.normalize(); //waterForce.mult(-0.1); //particle.applyForce(waterForce); force.normalize(); // Calculate torque let r = p5.Vector.sub(particle.pos, this.pos); let torque = r.x * force.y + r.y * force.x; totalTorque += torque * (1 - distance / this.width); // Scale torque based on distance } } // Update position and rotation this.vel.mult(0.99); // Add some damping this.pos.add(this.vel); // Update angular velocity and angle this.angularVel += totalTorque * 0.0001; this.angularVel *= 0.95; this.angle += this.angularVel; // Contain within canvas this.handleWallCollision(); } handleWallCollision() { let collision = false; let newVel = this.vel.copy(); if (this.pos.x < this.width/2 + 20) { this.pos.x = this.width/2 + 20; newVel.x = abs(this.vel.x) * this.restitution; collision = true; } else if (this.pos.x > width - this.width/2 - 20) { this.pos.x = width - this.width/2 - 20; newVel.x = -abs(this.vel.x) * this.restitution; collision = true; } if (this.pos.y < this.width/2 + 20) { this.pos.y = this.width/2 + 20; newVel.y = abs(this.vel.y) * this.restitution; collision = true; } else if (this.pos.y > height - this.width/2 - 20) { this.pos.y = height - this.width/2 - 20; newVel.y = -abs(this.vel.y) * this.restitution; collision = true; } if (collision) { this.vel = newVel; // Add some random rotation on collision this.angularVel += random(-0.05, 0.05); } } applyForce(force) { this.vel.add(force); } isNearby(particle) { return dist(this.pos.x, this.pos.y, particle.pos.x, particle.pos.y) < this.width; } checkInside(particle) { // Check if the particle is inside the box let relativePos = p5.Vector.sub(particle.pos, this.pos).rotate(-this.angle); return abs(relativePos.x) < this.width/2 && abs(relativePos.y) < this.width/2; } pushOutParticle(particle) { // Calculate the point of intersection let relativePos = p5.Vector.sub(particle.pos, this.pos).rotate(-this.angle); // Determine which side to push out from and calculate normal let normal = createVector(0, 0); if (abs(relativePos.x) > abs(relativePos.y)) { relativePos.x = (relativePos.x > 0) ? this.width/2 : -this.width/2; normal.x = (relativePos.x > 0) ? 1 : -1; } else { relativePos.y = (relativePos.y > 0) ? this.width/2 : -this.width/2; normal.y = (relativePos.y > 0) ? 1 : -1; } // Rotate normal back to world space normal.rotate(this.angle); // Set the new position relativePos.rotate(this.angle); let newPos = p5.Vector.add(this.pos, relativePos); // Calculate velocity let vel = p5.Vector.sub(particle.pos, particle.oldPos); // Calculate reflection let dot = p5.Vector.dot(vel, normal); let reflection = p5.Vector.sub(vel, p5.Vector.mult(normal, 2 * dot)); reflection.mult(0.8); // Dampen the bounce // Update particle position and oldPos particle.oldPos = particle.pos; particle.pos = newPos; particle.oldPos = p5.Vector.sub(particle.pos, reflection); } display() { push(); translate(this.pos.x, this.pos.y); rotate(this.angle); fill(150, 75, 0); rectMode(CENTER); rect(0, 0, this.width, this.width); pop(); } }

Codecasts

Made by awesome people

Recently Published