let paused = false;

let gfxs;

let drawn;

const Y_AXIS = 1;

const X_AXIS = 2;

​

function setup() {

  createCanvas(1000, 1000);

  noiseDetail(8, 0.25);

​

  background(20);

  stroke(220);

  noFill();

  fill(20);

​

  angleMode(RADIANS);

​

  grid = [];

  circles = [];

  drawn = [];

  gfxs = [];

​

  for (let y = 0; y < height; y++) {

    grid[y] = [];

    for (let x = 0; x < width; x++) {

      let n = noise(x * 0.01, y * 0.01);

      grid[y][x] = map(n, 0.0, 1.0, -TWO_PI, TWO_PI);

    }

  }

​

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

    circles.push(newCircle(i));

​

    let g = createGraphics(width, height);

    g.noStroke(); //stroke(220);

    g.fill(20);

    gfxs.push(g);

​

    g.drawingContext.shadowOffsetX = 0;

    g.drawingContext.shadowOffsetY = 0;

    g.drawingContext.shadowBlur = 10;

    g.drawingContext.shadowColor = color(20);

  }

  setGradient(0, 0, width, height, color(random(20)), color(random(80)), Y_AXIS)

}

​

function newCircle(idx) {

  life = random(50, 550);

  let d = 2;

  let c = {

    idx: idx,

    x: random(0, width - 1),

    y: random(0, height - 1),

    d: d,

    r: d / 2,

    life: life,

    olife: life,

  };

  return c;

}

​

function circCollision(x1, y1, r1, x2, y2, r2) {

  return dist(x1, y1, x2, y2) <= r1 + r2;

}

​

function draw() {

  if (!paused) {

    // for (let c of circles) {

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

      let c = circles[i];

​

      let valid = true;

      //       for (let check of drawn) {

      //         if (circCollision(c.x, c.y, c.r, check.x, check.y, check.r) && (c.idx != check.idx)) {

​

      //           valid = false;

      //           break;

      //         }

      //       }

​

      if (valid) {

        let col = lerpColor(

          color(20, 0, 20, 0),

          color(120, 0, 120, 120),

          map(c.life, c.olife, 0, 0.0, 1.0)

        );

​

        gfxs[c.idx].fill(col);

​

        gfxs[c.idx].circle(c.x, c.y, c.d);

        // drawn.push({ x: c.x, y: c.y, r: c.r, idx: c.idx });

​

        let a = grid[int(c.y)][int(c.x)];

        c.x += 1 * cos(a);

        c.y += 1 * sin(a);

​

        c.d += 0.5; //= map(c.life, c.olife, 0, 1, 20);

        // c.d = constrain(c.d, 0, 20);

        c.r = c.d / 2;

​

        c.life--;

        if (

          c.life <= 0 ||

          c.x < 0 ||

          c.x > width - 1 ||

          c.y < 0 ||

          c.y > height - 1

        ) {

          circles.splice(i, 1);

          // let _c = newCircle();

          // c.x = _c.x;

          // c.y = _c.y;

          // c.life = _c.life;

          // c.olife = _c.olife;

          // c.d = _c.d;

        }

      } else {

        circles.splice(i, 1);

      }

    }

  }

​

//   for (let g of gfxs) {

//       image(g, 0, 0);

//     }

  if (circles.length == 0) {

    for (let g of gfxs) {

      image(g, 0, 0);

    }

    console.log("done");

    noLoop();

  }

}

​

function keyPressed() {

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

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

​

  if (axis === Y_AXIS) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis === X_AXIS) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

}

​