var g = 35;

var b = 35;

var diam = 5;

var expanding = true;

var rot = 0;

var squareSize = 10;

​

function setup() {

  createCanvas(800, 800);

  noFill();

  frameRate(60);

}

​

function draw() {

  background(0,0,0,30);

​

  //circle animation

  stroke(r,g,b);

  ellipse(400,400,diam,diam);

  stroke (0,0,0);

  if(expanding == true) {

    ellipse(400,400,diam-2,diam-2);

  } else {

    ellipse(400,400,diam+2,diam+2);

  }

  if (diam < 805 && expanding == true) {

    diam += 20;

  } else if (diam == 805) {

    expanding = false;

    diam -= 20;

  } else if (diam > 5 && expanding == false) {

    diam -= 20;

  } else if (diam == 5) {

    expanding = true;

    diam += 20;

  }

​

  drawSquare();

  // color changing

  if(r == 245 && g >= 35 && g < 245 && b == 35){

    g += 5;

  } else if (r <= 245 && r > 35 && g == 245 && b == 35) {

    r -= 5;

  } else if (r == 35 && g == 245 && b >= 35 && b < 245) {

    b += 5;

  } else if (r == 35 && g <= 245 && g > 35 && b == 245) {

    g -= 5;

  } else if (r >= 35 && r < 245 && g == 35 && b == 245) {

    r += 5;

  } else {

    b -= 5;

  }

}

​

function drawSquare() {

  stroke(r,g,b);

  translate(400,400);

  rotate(rot);

  rect(0-squareSize/2,0-squareSize/2,squareSize,squareSize);

  rot ++;

  squareSize +=10;

  if (squareSize > 420) {

    rect(210-squareSize/2, 210-squareSize/2, squareSize-420, squareSize-420);

  } else {

      rect(0-(210+squareSize/2), 0-(210+squareSize/2), squareSize+420, squareSize+420);

  }

  if (squareSize > 840) {

    squareSize = 5;

  }

}

​

​

​