var cubic;

var x=0.0;

var nFramesInLoop = 100;

function setup() {

  createCanvas(400, 400);

  t = 0.0;

  cubic = 0.5*TWO_PI*TWO_PI*TWO_PI+2*TWO_PI+5;

  //noLoop();

}

​

function draw() {

  background(220);

  var frameInLoop = frameCount%nFramesInLoop;

  var percent = frameInLoop/nFramesInLoop;

  //x = (x+4)%width;

  var y = map(x, 0, width, 0, 1);

  var x1 = pow(y, 5.0);

  var x2 = map(x1, 0, 1, 0, width);

  var l = abs(50*sin(5*t));

  //text(l, 50, 150);

  x = map(sin(t), -1, 1, -145, width-5);

  //var y = map(x * x, -145, width-5, 0, width);

  rectFromArcs(x2, 50, 150, 75, t);

  noStroke();

  var cubed = 0.5*t * t * t + 2 * t + 5;

  var hue = (map(x, -145, width-5, 0, 220));

  fill(hue);

  arc(x, 100-l, 35, 35, 0, TWO_PI);

  fill(0);

  arc(map(cubed, 5, cubic, 0, width+100), map(x, -145, width-5, -10, height+10), 40, 40, 0, TWO_PI);

  t = (t+0.01)%TWO_PI;

  var cw = 150;

  var ch = 100;

  var centerAng = 120; 

  var deflectionA = 50;

  var deflectionB = 10;

  var angA = 0+deflectionB*sin(percent*TWO_PI);

  var angBd = centerAng+deflectionA*sin(percent*TWO_PI);

  var angBr = radians(angBd);

  fill(map(angBd-angA, 270, 270, 100, 200));

  arc(x, 100+map(x*x, 145*145, (width-5)*(width-5), 100, 200), 50+cw/2, ch/2, angA, angBr);

  if(x > width || x < width) x = 0;

  push();

  translate(200, 200);

  rotate(millis()/1000.0);

  //rect(-25, -50, 50, 100);

  push();

  translate(25, 50);

  rotate(millis()/100.0);

  fill(hue*sin(t), 0, 0);

  rect(0, 0, 30, 30);

  pop();

  pop();

  arc(width-40*sin(t), height-40*sin(t), 80*sin(t), 80*sin(t), 5*sin(t)-radians(-120), 5*sin(t)+radians(210)); 

​

}

​

function rectFromArcs(rx, ry, rw, rh, t){

  fill(255);

  noStroke();

  push();

  translate(width/2, height/2);

  rotate(TWO_PI*abs(0.5*sin(t)));

  arc(-200, 200, width, height, -HALF_PI, 0);

  arc(0, 0, width, height, 0, HALF_PI);

  //arc(200, 200, width, height, PI, 3*HALF_PI); 

  arc(0, 0, width, height, PI, 3*HALF_PI);

  //arc(-200, -200, width, height, 0, HALF_PI);

  arc(0, 0, width, height, HALF_PI, PI);

  arc(0, 0, width, height, HALF_PI*3, TWO_PI);

  fill(220);

  arc(0, 0, 350, 350, HALF_PI, PI);

  arc(0, 0, 350, 350, HALF_PI*3, TWO_PI);

  pop();

  //stroke(255, 0, 0);

  //rect(rx, ry, rw, rh); 

  var m = map(sin(t), -1, 1, 0, 255);

  //stroke(-m/2, 20, m);

  fill(m, -m/2, 20);

  //var def = TWO_PI;

  push();

  translate(100, (100+ry+rh/2));

  rotate(millis()/1000.0);

  push();

  translate(-50, 0);

  arc(0, 0, rw, rh, -HALF_PI, PI/3);

  pop();

  push();

  translate(200, 200);

  rotate(millis()/1000.0);

  //arc((rx+rw)*sin(t), (100+ry+rh/2)*sin(5*t), rw*sin(t), rh/5, -HALF_PI, -HALF_PI);

  pop();

  pop();

  //arc(rx+rw/2, ry, rw, rh, 0, -PI, CHORD);

  //arc(rx+rw/2, ry+rh, rw, rh, -PI, 0, CHORD);

  stroke(255);

  fill(255);

  //text(m, rx, 100);

}