Jelly Blobs, Easing and Elastic | Creative Coding with Processing.js for Windows 8 JavaScript applic

[EDN Admin]

See easing/elastics sketch in action
Now that we can render elements to the stage, we expand our sketches to include mouse interaction. In this sketch, we create a Jelly Blob effect by nesting multiple circles with individual elastic settings to constantly follow the mouse or pointer position on screen. We also introduce the core easing algorithm and explain how it works.
To follow along in Visual Studio, please download the Processing Sketchbook projection.
The finished sketch for this lesson can be found below:

int totalBlobs = 10;
Blob[] blobs = new Blob[totalBlobs];
int width, height;
color strokeColor = color(255, 0, 0);
color fillColor = color(255, 255, 255);
float targetX, targetY;

void setup() {
width = 500;
height = 550;
targetX = width / 2;
targetY = height / 2;
size(width, height);
noStroke();
smooth();
background(0);
for (int i = 0; i < totalBlobs; i++) {
Blob blob = new Blob();
blob.x = random(width);
blob.y = random(height);
blob.easingX = .02 + random(.10);
blob.easingY = .02 + random(.10);
blob.strokeSize = 100 + random(160.0);
blob.fillSize = blob.strokeSize - 20.0;
blobs = blob;
}
};

void draw() {
background(0);
fill(strokeColor);
for (int i = 0; i < totalBlobs; i++) {
blobs.springToward(targetX, targetY);
blobs.renderStroke();
}
fill(fillColor);
for (int i = 0; i < totalBlobs; i++) {
blobs.renderFill();
}
}

void pointerMove(TouchEvent e){
targetX = e.offsetX;
targetY = e.offsetY;
}

class Blob{
float x = 0.0;
float y = 0.0;
float vx = 0.0;
float vy = 0.0;
float easingX = 0.0;
float easingY = 0.0;
float strokeSize = 180.0;
float fillSize = 160.0;

void renderStroke() {
ellipse(this.x, this.y, this.strokeSize, this.strokeSize);
}

void renderFill() {
ellipse(this.x, this.y, this.fillSize, this.fillSize);
}

void springToward(float _x, float _y) {
this.vx += (_x - this.x) * this.easingX;
this.vy += (_y - this.y) * this.easingY;
this.vx *= .92;
this.vy *= .90;
this.x += this.vx;
this.y += this.vy;
}
}

View the full article