let colorIndex;

let x, y;

let vx, vy;

let step, theta, r;

​

let timer = 100;

let frametimer = 1000;

let state;

let paused;

​

let bg;

let fg;

let fg_x, fg_y, fg_vx, fg_vy;

​

function keyPressed() {

  if (key === " ") paused = !paused;

}

function setup() {

  angleMode(RADIANS);

​

  //https://www.colourlovers.com/palette/9362/Powerpuff_Girls!

  colors = [

    // color("#000000"),

    color("#FFFFFF"),

    color("#00D0FF"),

    color("#F91D8B"),

    color("#81F400"),

  ];

​

  for (let i = 0; i < colors.length; i++) colors[i]._array[3] = 0.0;

​

  createCanvas(800, 800);

  fg = createGraphics(width, height);

  bg = createGraphics(width, height);

  fg.clear();

  background(0);

  colorIndex = 0;

​

  x = random(width);

  y = random(height);

  vx = random(-3, 3);

  vy = random(-3, 3);

​

  r = random(50, 200);

  theta = random(TWO_PI);

  step = TWO_PI / 8; //64;

​

  smooth();

  frameRate(60);

  fg.translate(width / 2, height / 2);

  fg_x = fg_y = 0;

  fg_vx = random(-2, 2);

  fg_vy = random(-2, 2);

  state = 0;

}

​

function draw() {

  if (!paused) {

    if (state == 0) {

      bg.background(0);  

      let _col = color(255, 255, 255, 255);

      for (let _y = 10; _y < height; _y += 10) {

        for (let _x = 10; _x < width; _x += 10) {

          bg.fill(_col);

          bg.stroke(_col);

          bg.point(_x, _y);

        }

      }

      image(bg, 0, 0);

      state = 1;

    } else {

      // fg.translate(width / 2, height / 2);

      // rotate(theta);

​

      x = r * cos(theta);

      y = r * sin(theta);

​

      // background(0);

      fg.stroke(colors[colorIndex]);

      fg.fill(colors[colorIndex]);

      fg.point(x, y);

​

      // colors[colorIndex]._array[3] += 0.1;

      // if (colors[colorIndex]._array[3] >= 1.0) colors[colorIndex]._array[3] = 0.0;

​

      colors[colorIndex]._array[3] = map(

        colors[colorIndex]._array[3],

        0,

        0.5, //1.0,

        200,

        50

      );

​

      theta += step;

      if (timer > 90) {

        r -= 0.1;

        timer -= 0.1;

      } else if (timer > 10) {

        // r--;

        r -= random(0.2, 1.0);

        timer--;

      } else if (timer > 0) {

        // r -= 0.5;

        r -= random(0.2, 0.6);

        timer -= 0.1;

      } else {

        timer = 100;

        r = random(50, 200);

        if (random() > 0.9) r = 1000;

        // colorIndex++;

        // if (colorIndex > colors.length-1) colorIndex = 0;

​

        step = TWO_PI / random(16, 64);

      }

​

      // if (random() > 0.8)

      //   {

      //     push();

      //     colors[2]._array[3] = 1.;

      //     stroke(colors[2]);

      //     fill(colors[2]);

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

      //     pop();

      //   }

​

      //   x += vx;

      //   y += vy;

​

      //   if (random() > 0.99) vx = random(-4,4);

      //   if (random() > 0.99) vy = random(-4,4);

​

      //   if (x < 0 || x > width) vx *= -1;

      //   if (y < 0 || y > height) vy *= -1;

​

      image(fg, fg_x, fg_y);

      fg_x += fg_vx;

      fg_y += fg_vy;

      if (fg_x * 2 > width || fg_x < -width / 2) fg_vx *= -1;

      if (fg_y * 2 > height || fg_y < -height / 2) fg_vy *= -1;

​

      if (random() > 0.99) {

        fg_vx = random(-2, 2);

        fg_vy = random(-2, 2);

        colorIndex++;

        if (colorIndex > colors.length - 1) colorIndex = 0;

      }

    }

​

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

      print("let's rewind");

      image(bg, 0, 0);

    }

  }

}

​