// Uses https://www.npmjs.com/package/p5.createloop

// Be sure that the following script is included in index.html:

// https://unpkg.com/p5.createloop@0.2.8/dist/p5.createloop.js

var unitSize;

var thickness;

​

function setup() {

  createCanvas(600, 600);

  unitSize = width / 3; //i.e. 200

  thickness = 45;

  pixelDensity(1);

  //gif exporter

  createLoop({

    duration: 2,

    gif: true

  });

  background(255, 192, 203);

}

​

function draw() {

  background(255, 192, 203,50);

​

  rectMode(CENTER);

​

  var period = 2000;

  var progress = (millis() % period) / period;

  var theta = progress * HALF_PI;

  var col2 = map(cos(animLoop.theta), -1, 1, 100, 200);

  var colur = map(sin(animLoop.theta), -1, 1, 100, 200);

  //sorry for the following bit being a bit messy

  //when I added a forloop it kept crashing

  fill(col2,50,70);

  angle = animLoop.theta;

  let radius = map(sin(angle), -1, 1, 0, 100);

  for(var i = 0; i < 4; i++){

    for(var j = 0; j < 4; j++){

      rect((width / 3) * i, (height /3) * j, 50, 50, radius);

    }

  }

  // rect(width / 3, height *2/3, 50, 50, radius);

  // rect(width / 3, height / 3, 50, 50, radius);

  // rect(width * 2/3, height / 3, 50, 50, radius);

  // rect(width * 2/3, height *2/3, 50, 50, radius);

  // rect(0, 0, 50, 50, radius);

  // rect(0, height / 3, 50, 50, radius);

  // rect(0, height *2/3, 50, 50, radius);

  // rect(0, 600, 50, 50, radius);

  // rect(600, 0, 50, 50, radius);

  // rect(width/3, 0, 50, 50, radius);

  // rect(width *2/3, 0, 50, 50, radius);

  // rect(600, height/3, 50, 50, radius);

  // rect(600, height*2/3, 50, 50, radius);

  // rect(600,600,50,50, radius);

  // rect(width/3, 0, 50, 50, radius);

  // rect(width/3, 600, 50, 50, radius);

  // rect(width*2/3, 600, 50, 50, radius);

​

​

​

​

​

  fill(colur, 50, 70);

​

  for (var row = 0; row < 3; row++) {

    for (var col = 0; col < 3; col++) {

      var x = map(col, 0, 2, width * 1 / 6, width * 5 / 6);

      var y = map(row, 0, 2, height * 1 / 6, height * 5 / 6);

​

      var unitProgress = (animLoop.progress + col * 0.5 + row * 0.5) % 1.0;

      var rotAng = pow(unitProgress, 2.5) * PI + ((row + col) % 2) * PI;

      drawUnit(x, y, rotAng);

    }

  }

}

​

function drawUnit(x, y, rotAng) {

  rectMode(CENTER);

  noStroke();

​

  push();

  translate(x, y);

  rotate(rotAng);

  rect(0, 0 - unitSize / 2 + thickness, unitSize - thickness, thickness, thickness / 2);

  rect(0, 0, unitSize - thickness, thickness, thickness / 2);

  rect(0, 0 + unitSize / 2 - thickness, unitSize - thickness, thickness, thickness / 2);

  pop();

}