// 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);

  thickness = 45;

  //gif exporter

  pixelDensity(1);

  createLoop({

    duration: 1,

    gif: true

  });

  background(255, 192, 203);

}

​

function draw() {

  background(255, 192, 203, 50);

​

  rectMode(CENTER);

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

  fill(col2,50,70);

  angle = animLoop.theta;

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

  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);

}