var size2 = 120;

var size3 = 180;

var size4 = 240;

var size5 = 300;

var size6 = 360;

var size7 = 420;

var size8 = 480;

var size9 = 540;

var c = 1;

var c2 = 1;

var s = 0.01;

​

​

function setup() {

  createCanvas(800, 800);

  //slider. use the sliders when the animation is running to change the color of the squares

  var colorSlider = createSlider(1, 255, 1);

  function updateColor() {

    c = colorSlider.value();

    redSquares();

  }

  colorSlider.input(updateColor);

  var colorSlider2 = createSlider(1, 255, 1);

  function updateColor2() {

    c2 = colorSlider2.value();

    blueSquares();

  }

  colorSlider2.input(updateColor2);

  //stop button. use the stop button to stop the animation and play with the sliders to alterate the parttern.

  var stopButton = createButton('Stop!');

  stopButton.mousePressed(stop);

  stopButton.style('color', 'rgb(45,28,243)');

  var saveButton = createButton('Save');

  saveButton.mousePressed(saveSquare);

  saveButton.style('color', 'rgb(45,28,243)');

  redSquares();

  blueSquares();

​

}

​

function saveSquare() {

  save("squares.png");

}

function redSquares() {

  var sizeStarter = 30;

  var speed = 1.03;

  push();

  rectMode(CENTER);

  translate(width / 2, height / 2);

  noFill();

  strokeWeight(2);

  stroke(255, c, 0);

  square(0, 0, size);

  square(0, 0, size2);

  square(0, 0, size3);

  square(0, 0, size4);

  square(0, 0, size5);

  square(0, 0, size6);

  square(0, 0, size7);

  square(0, 0, size8);

  square(0, 0, size9);

  size *= speed;

  size2 *= 1.04;

  size3 *= 1.03;

  size4 *= 1.04;

  size5 *= 1.03;

  size6 *= 1.04;

  size7 *= 1.03;

  size8 *= 1.04;

  size9 *= 1.03;

  if (size > width) {

    size = sizeStarter;

  }

  if (size2 > width) {

    size2 = sizeStarter;

  }

  if (size3 > width) {

    size3 = sizeStarter;

  }

  if (size4 > width) {

    size4 = sizeStarter;

  }

  if (size5 > width) {

    size5 = sizeStarter;

  }

  if (size6 > width) {

    size6 = sizeStarter;

  }

  if (size7 > width) {

    size7 = sizeStarter;

  }

  if (size8 > width) {

    size8 = sizeStarter;

  }

  if (size9 > width) {

    size9 = sizeStarter;

  }

  pop();

}

​

function blueSquares() {

  var y = (height * 10.1) / 20;

  var color = "blue";

  var sizeStarter = 30;

​

  push();

  rectMode(CENTER);

  translate(width / 2, y);

  noFill();

  strokeWeight(2);

  stroke(0, c2, 255);

  square(0, 0, size);

  square(0, 0, size2);

  square(0, 0, size3);

  square(0, 0, size4);

  square(0, 0, size5);

  square(0, 0, size6);

  square(0, 0, size7);

  square(0, 0, size8);

  square(0, 0, size9);

  size *= 1.03;

  size2 *= 1.04;

  size3 *= 1.03;

  size4 *= 1.04;

  size5 *= 1.03;

  size6 *= 1.04;

  size7 *= 1.03;

  size8 *= 1.04;

  size9 *= 1.03;

  if (size > width) {

    size = sizeStarter;

  }

  if (size2 > width) {

    size2 = sizeStarter;

  }

  if (size3 > width) {

    size3 = sizeStarter;

  }

  if (size4 > width) {

    size4 = sizeStarter;

  }

  if (size5 > width) {

    size5 = sizeStarter;

  }

  if (size6 > width) {

    size6 = sizeStarter;

  }

  if (size7 > width) {

    size7 = sizeStarter;

  }

  if (size8 > width) {

    size8 = sizeStarter;

  }

  if (size9 > width) {

    size9 = sizeStarter;

  }

  pop();

}

​

function draw() {

  background(1);

  rectMode(CENTER);

  fill("red");

  rect(width / 2, height / 2, width, height);

  fill("black");

  rect(width / 2, height / 2, width, height);

​

  redSquares();

  blueSquares();

​

  fill("white");

  text(size, 50, 20);

  text(size2, 50, 40);

  text(size3, 50, 60);

  text(size4, 50, 80);

  text(size5, 50, 100);

  text(size6, 50, 120);

  text(size7, 50, 140);

  text(size8, 50, 160);

  text(size9, 50, 180);

}

​

function stop() {

  noLoop();

}

​

​

​

​

​

​

​

​

​

​

​

​

​