let squares;

let eraser, eraserActive, nextErase, erases;

let shad;

​

function drawShadow(b) {

  drawingContext.shadowOffsetX = 0;//5;

  drawingContext.shadowOffsetY = 0;//5;

  drawingContext.shadowBlur = b;

  drawingContext.shadowColor = "black";

}

​

function newSquare() {

  let _c = colors[getRandomInt(0, colors.length)];

  let _s = 10;

  if (random() > 0.95 || eraserActive) {

    _s = 50;

    _c = colors[0];

  }

  // if (random() > 0.9)

  //   _c = colors[0];

  return {

    size: _s,

    radius: 1,

    theta: 0,

    rotation: 0,

    color: _c,

    life: 255,//random(500),

  };

}

​

function getRandomInt(min, max) {

  min = Math.ceil(min);

  max = Math.floor(max);

  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive

}

​

function setup() {

  eraserActive = false;

  angleMode(RADIANS);

  squares = [];

  // https://kgolid.github.io/chromotome-site/ ## winter-night

  colors = [

    color(235, 235, 235, 255),

    color(18, 36, 56, 255),

    color(221, 103, 46, 255),

    color(135, 199, 202, 255),

  ];

  // yuma-punk

  // colors = [

  //   color(22,22,22,255),

  //   color(240,95,29,255),

  //   color(235,222,196,255),

  //   color(254,219,31,255)

  // ];

​

  createCanvas(1000, 1000);

  background(colors[0]);

  nextErase = 1000;// int(random(500,1000));

  shad = 10;

  eraser = {

    x: 0,

    y: 0,

    color: colors[0],

    vx: random(1, 10),

    vy: random(1, 10),

    size: random(10,50),

  };

​

  squares.push(newSquare());

  erases = 0;

  // noStroke();

  // fill(0);

  // rect(0, 0, 40, height);

  // rect(0, 0, width, 40);

  // rect(width - 40, 0, 40, height);

  // rect(0, height - 40, width, 40);

}

​

function draw() {

  // if (!eraserActive) {

    for (let i = squares.length - 1; i >= 0; i--) {

      push();

      // if (random() > 0.9)

      // translate(random(width), random(height));

      // else

      translate(width / 2, height / 2);

      let s = squares[i];

      noStroke();

      // s.color._array[3] = map(s.life, 500, 0, 255, 0) / 255;

      s.color._array[3] = map(s.life, 0, 500, 255, 0) / 255;

      fill(s.color);

​

      if (random() < 0.9) rotate(s.rotation);

      if (!eraserActive) {

        if (frameCount < nextErase/4)

          shad = map(frameCount,0,nextErase/4,40,500);

        else if (frameCount < nextErase/2)

          shad = map(frameCount,nextErase/4,nextErase/2,500,25);

        else

          shad = map(frameCount,nextErase/2,nextErase,0,100);

        drawShadow(shad);

      } else {

        shad = map(frameCount,nextErase,nextErase+100,25,100);

        if (frameCount < nextErase+100)

          drawShadow(shad);

      }

      rect(s.radius * cos(s.theta), s.radius * sin(s.theta), s.size);

​

      s.rotation++;

      s.theta += random(TWO_PI / 16);

      s.radius += random(5);

      pop();

​

      s.life--;

      if (s.life <= 0) squares.splice(i, 1);

    }

​

    if (frameCount % 10 == 0)

      for (let i = 0; i < int(random(25)); i++) squares.push(newSquare());

​

    if ((frameCount % nextErase) == 0) {

      console.log("eraser time");

    //   squares = [];

      erases++;

      eraserActive = true;

      if (erases == 2) { noLoop(); console.log("done"); }

    //   eraser.size = random(10,50);

    //   eraser.vx = random(1,10);

    //   eraser.vy = random(1,10);

    //   eraser.x = 0;

    //   eraser.y = 0;

    //   nextErase = nextErase + int(random(500,1000));

    }

//   } else {

//     noStroke();

//     fill(eraser.color);

//     rect(eraser.x, eraser.y, eraser.size);

//     eraser.x += eraser.vx;

//     eraser.y += eraser.vy;

//     if (eraser.x > width || eraser.y > height) {

//       eraserActive = false;

//     }

//   }

  push();

  noStroke();

  // blendMode(SOFT_LIGHT);

  let _c = colors[0];

  _c._array[3] = 1.0;

  fill(_c);

  let frame_o = 50;

  rect(0,0,width,frame_o);

  rect(0,0,frame_o,height);

  rect(0,height-frame_o,width,frame_o);

  rect(width-frame_o,0,frame_o,height);

  _c = colors[1];

  _c._array[3] = 1.0;

  fill(_c);

  rect(frame_o-5,frame_o-5,5,height-(2*frame_o)+10);

  rect(frame_o,frame_o-5,width-(2*frame_o),5);

  rect(width-frame_o-5,frame_o,5,height-(2*frame_o)+5);

  rect(frame_o-5,height-frame_o,width-(2*frame_o),5);

  pop();

  // blendMode(BLEND);

​

  // if (squares.length === 0) {

  //   console.log("done");

  //   noLoop();

  // }

}

​