let dim = 250;

let grados = 0;

let fMin = 0.7;

let fps = 30;

let num_cuadros = nb;

let colors = ["#f657c5","#8645e4","#03c3fa", "#ffffff"]

let loopFlag = true;

​

function setup() {

  createCanvas(500, 400); 

  stroke(random(colors))

  sliderNb = createSlider(nb, nb*20, nb, 1);

  sliderNb.position(120, height);

  let labelNumCuadros = createSpan('Núm cuadros:');

  labelNumCuadros.position(0, height);

  sliderFMin = createSlider(0.1, fMin, fMin, 0.01);

  sliderFMin.position(120, height+25);

  let labelFMin = createSpan('% Cuadro menor:');

  labelFMin.position(0, height+25)

  sliderFps = createSlider(1, fps, fps, 1);

  sliderFps.position(370, height+25);

  let labelFps = createSpan('Velocidad:');

  labelFps.position(270, height+25)

​

  rectMode(CENTER);

  frameRate(fps);

}

​

function draw() {

  /*Dibuja una serie de cuadrados rotados y escalados a partir de un 

  cuadrado original

  */

  background(0)

  translate(width/2,height/2);

  noFill();

  numCuadros = sliderNb.value();

  fMin = sliderFMin.value();

  frameRate(sliderFps.value());

  for (let i=0; i < numCuadros; i++){

    let f = map(i, 0, numCuadros-1, 1, fMin); 

    square(0, 0, f * dim);

    rotate(grados*PI/180)

  }

  grados += 1;

  if (grados == 90){

    grados = 0;

  }

}

​

function mouseClicked() {

  /*Pausa o ejecuta la animacion si se da click dentro del canva.

  */

  if (mouseX > width)return null;

  if (mouseY > height)return null;

  if (mouseX < 0)return null;

  if (mouseY < 0)return null;

  if (loopFlag){

    noLoop();    

  }else{

    loop();

  }

  loopFlag = !loopFlag;

}

​

function keyPressed() {

  /*Toma una captura del frame actual y lo guarda en el archivo myCanvas.png

  */

  if (key === 's') {

    saveCanvas('myCanvas.png');

  }

}