nerual-AnimatedLoop

"a cursory moment" (get it?)

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();
}

}