​

let r,t,s;

let size1, size2, size3;

let dir = true;

​

function drawShadow(b) {

  drawingContext.shadowOffsetX = 0;//5;

  drawingContext.shadowOffsetY = 0;//5;

  drawingContext.shadowBlur = b;

  drawingContext.shadowColor = "black";

}

​

function setup() {

  angleMode(RADIANS);

  r = 50;

  t = 0;

  s = PI/32;

  // chromotome - sneaker

  bg = color(255, 255, 255, 255);

  colors = [

    color(232, 22, 91, 255),

    color(64, 30, 56, 255),

    color(102, 195, 180, 80),

    color(238, 119, 36, 255),

    color(88, 64, 152, 255),

  ];

​

  createCanvas(800, 800);

  background(colors[4]);

​

  size1 = width/2;

  size2 = width/4;

  size3 = width/8;

}

​

function draw() {

  push();

  translate(width/2,height/2);

  drawShadow(50);

  noStroke();

  fill(colors[2]);

  circle(r*cos(t),r*sin(t),size1);

  pop();

  push();

  translate(width/2,height/2);

  drawShadow(0);

  noStroke();

  fill(colors[4]);

  rotate(t);

  square(r*cos(t),r*sin(t), size2);

  pop();

  push();

  translate(width/2,height/2);

  drawShadow(25);

  noStroke();

  let _c = colors[0];

  // _c._array[3] = 0.25;

  fill(_c);

  rotate(t);

  let x1 = -size3/2;

  let x2 = size3/2;

  let y1 = -size3/2;

  let y2 = size3/2;

  let x3 = 0.5*(x1+x2);

  let y3 = 0.5*(y1+y2);

  // x3 = x3+(0.5*sqrt(3));

  y3 = y3-(105*(5/2)*sqrt(3));

  triangle(x1,y1,x2,y2,x3,y3);

  pop();

  t+=s;

  if (dir) {

    size1 = map(frameCount,0,2000,width/2,width/4);

    size2 = map(frameCount,0,2000,width/4,width/16);

    size3 = map(frameCount,0,2000,width/8,width/32);

  //   colors[2]._array[3] = map(frameCount,0,2000,255,0)/255;

  // colors[4]._array[3] = map(frameCount,0,2000,255,0)/255;

  } else {

    size1 = map(frameCount,2000,4000,width/4,width/2);

    size2 = map(frameCount,2000,4000,width/16,width/4);

    size3 = map(frameCount,0,2000,width/32,width/8);

  //   colors[2]._array[3] = map(frameCount,2000,4000,0,255)/255;

  // colors[4]._array[3] = map(frameCount,2000,4000,0,255)/255;

  }

  let o = 20;

  fill(colors[0]);

  noStroke();

  rect(0,0,width,o);

  rect(0,0,o,height);

  rect(width-o,0,o,height);

  rect(0,height-o,width,o);

  if (frameCount == 2000) {

    dir = false;

    console.log("flip");

    // noLoop();

  } else if (frameCount == 4000) {

    console.log("done");

    noLoop();

  }

}

​