2/22/2024
Assignment
Resources
This week, I worked with the InkDrop example from class.
I started by using drag instead of mouse press to swirl paint around.
if (mouseIsPressed){
let newInkDrop = new InkDrop(mouseX, mouseY, 20)
for (let i=0; i<inkDrops.length; i++){
let drops = inkDrops[i]
drops.distort(mouseX, mouseY, 20)
}
inkDrops.push(newInkDrop)
}
Moving the color out of the constructor and into show just updates the color of all the drops.
Instead I tried using mouseReleased() to select a new color that gets passed into the constructor. The very first drop changes color with every new drop but the subsequent drops stay different colors.
Next, I wanted to emulate an ink drop spreading out after being dropped.
I tried using an emitter because conceptually, I imagined ink spreading out or more ink emitting from a center point.
However, it gets laggy after a few drops since I’m not using the lifetime to splice any of the newly created inkdrops being emitted. I tried remedying the load by emitting fewer drops, but I realized there was probably a better way to visually achieve the same effect.
So, I started by refactoring the original sketch by making the points into particles and organizing the particles into a circle in a particle system.
Since I wanted the ink drops to grow over time, I figured I could make the individual points a particle and give it a velocity related to its position in the circle to have it move outwards. Then, I could tie acceleration to lifetime so it slows down its expansion gradually overtime.
//particle system: passing in translated x and y for circular position and non translated for velocity direction
this.particles.push(new Particle(x + centerX, y + centerY, x, y))
//particle: setting position and velocity; euler integration in update()
this.position = createVector(x, y)
this.velocity = createVector(vx, vy).normalize()
//particle: update(), also decelerating with lifetime
let deceleration = createVector(this.velocity.x, this.velocity.y);
deceleration.mult(-1 * (255 - this.lifetime) / 255);
this.applyForce(deceleration);
this.lifetime -= 0.1;
In the end, I wasn’t really sure how to have the distortion continue as the ink spread, or how to have the particles spread in the distorted direction.
The challenge lying in that the distortion is calculated at first drop and the position is updated. However, to have a more animated or gradual effect, I would need to apply a vector force to change the point position of the previous drops that is timed with the new drop’s spread.
The issue I had was that the distort() was being called once each mousePressed(), while I needed a more continuous distortion() that would update in draw. So, I needed to create a new function within the class that would go in draw that utilizes the original distort() vector direction at the very least. A possible route to check is to store the mouse press positions into an array and match it to the droplet array indexes. But since I just didn’t see a straightforward way of doing it, I left it for now.
my sketch
original example
In the top photo, the ink drops spread outwards and ends up overlapping some of the initial drops. However, in the bottom photo, the ink drops are being molded around but not really breaking nor overlapping.
I used begin/end shape in the particle system to fill in the ink drops and swapped to hsb (random hue but same saturation and brightness values for a cohesive random color palette). I was seeing what I could do with the points from the individual particles, and making a rectangle gave it a fun outline, especially since it used the previous drop’s color.
