Perhaps it isn't worthy of a title, but I would like to informally dub it "A Cursory Moment."
The Process:
Some sketches:
I was going to follow up the idea of the mouse and pop signs by making the mouse "click" on a place and then bounce off it, like the force of the click sent it flying. I got as far as making it move in the right physics-like snapping motion with the elastic function, but I didn't get the mouse to rotate, so I decided to play with contrast and repetition to make it look more interesting instead.
This was actually where I was going to stop:
I thought it looked like the James Bond opening, so I wanted to rotate the finger to make it a finger gun. I ended up with the rotated lines of circles lining up on accident and with some tweaking, I got all circles to line up. I thought it looked more interesting that way.
I felt like this work definitely turned out a lot better than expected(although I expected very little at that point). I like the way the repetition and the appearance of the hand go with the elastic movement. It's kind of rhythmic.
It definitely lacks a lot of the mathematical complexity that I would have liked to explore. The black and white was partially an aesthetic choice and mostly a practical one. The elastic movement is rather sloppy. Overall it's very simple. Way back in the beginning I had hoped to made something more along the lines of, well, lines, and I was really disappointed I couldn't manage to incorporate that at all. I think that with more time however, I definitely could have expanded on the concept or at least made the final product smoother.
I later went back and tweaked it a bit more:
Code (easing function from p5.func):
// based on p5.func examples - easing3_animation
// the sound is from the example
// I<3DM rld
var ease = new p5.Ease();
var speed = 0.02;
var t = 0.;
var doclear;
var x, y, tx, ty, x1, y1;
var osc, rev;
var pause = 0;
var pauseTime = 60;
var fc=0;
var padding = 20;
var ex1,ey1,ex2,ey2,ex3,ey3,ex4,ey4;
var left,right;
var phase;
var startx,starty;
var radius, mr;
var debug = false;
function setup()
{
frameRate(70);
createCanvas(640, 640);
radius = 120;
mr = radius*0.1;
ex1 = left;
ey1 = height/5;
ex2 = right;
ey2 = height/3 + height/6;
ex3 = left;
ey3 = ey2 + height/;
ey4 = 700;
left = width/4;
right = 3*left;
phase = 0;
background(255);
startx = left;
starty = -radius;
x = startx;
y = starty;
tx = startx;
ty = starty;
}
function draw()
{
background(0);
drawTheThing();
if (debug){
push();
background(255);
stroke(255);
text(frameCount, 20,20);
pop();
}
if (frameCount > 30 && frameCount < 100 && (frameCount%4 ==0)){
var filename = "myZoetrope_" + nf(frameCount,2) + ".png";
saveCanvas(filename, 'png');
}
}
function doPhase(){
switch(phase){
case 0:
ty = starty;
tx = left;
phase++;
break;
case 1:
ty = ey1;
tx = left;
phase++;
break;
case 2:
ty = ey2;
tx = right;
phase++;
break;
case 3:
ty = ey3;
tx = left;
phase++;
break;
case 4:
ty = ey4;
tx = right;
phase=0;
phase++;
break;
default:
ty += height/6;
if (tx==left) tx=right;
else if(tx==right) tx=left;
else tx = left;
phase=0;
redraw();
break;
}
}
function drawTheThing(){
var func = "elasticOut";
var q = ease[func](t*2.5);
var diff = frameCount - fc;
if (diff > pauseTime){
doPhase();
t = 0.;
fc = frameCount;
}
else if (phase==0)
doPhase();
x1 = map(q, 0., 1., x, tx);
y1 = map(q, 0., 1., y, ty);
fill(255);
stroke(0);
ellipse(x1, y1, radius,radius);
ellipse(x1+left, y1, radius,radius);
ellipse(x1-left, y1, radius,radius);
drawMouse(width-x1, height-y1, mr);
drawMouse(width-x1+left, height-y1, mr);
drawMouse(width-x1-left, height-y1, mr);
t+=speed;
if(t>1.) {
t=1.;
x = tx;
y = ty;
}
}
function drawMouse(y,x,s) {
push();
stroke(255);
noFill();
strokeWeight(10);
ellipse(x,y, 9*s,9*s);
stroke(0);
strokeWeight(5);
translate(-1.5*s,0,5);
rect(x,y,4*s,3*s,5);
rect(x,y-3.5*s,s,3.5*s,5,5,0,0);
rect(x+s,y-s,s,s,5,5,0,0);
rect(x+2*s,y-s,s,s,5,5,0,0);
rect(x+3*s,y-s,s,s,5,5,0,0);
rect(x-s,y,s,2*s,5);
pop();
}
}