let boxW, hboxW;

let cells;

let gfx;

let _shader;

​

function setup() {

  createCanvas(800, 800);

  gfx = createGraphics(width, height);

​

  numCells = 10;

  boxW = width / numCells;

  hboxW = boxW / 2;

​

  cells = [];

  for (let r = 0; r < numCells; r++) {

    cells[r] = [];

    for (let c = 0; c < numCells; c++) {

      if (r == 0 || c == 0 || r == numCells - 1 || c == numCells - 1)

        cells[r][c] = null;

      else

        cells[r][c] = {

          angle: random(0, TWO_PI),

          col: random(40, 220),

          x: c * boxW,

          y: r * boxW,

          update: random([-1, 1]) * (random([PI, TWO_PI]) / random(64, 256)),

          alpha: random(0, 220),

          ease: random(0.01, 0.1),

          tgt: null,

        };

    }

  }

  // console.log(cells)

  background(20);

  gfx.background(20);

}

​

function draw() {

  gfx.background(color(20, 20, 20, 10));

​

  let pts = [];

  gfx.noFill();

​

  for (let r = 0; r < numCells; r++) {

    for (let c = 0; c < numCells; c++) {

      let cell = cells[r][c];

​

      if (cell != null) {

        gfx.noStroke();

        // fill(color(20, 20, 20, cell.alpha));

        // rect(cell.x, cell.y, boxW, boxW);

​

        gfx.stroke(220);

​

        let x1 = cell.x + hboxW;

        let y1 = cell.y + hboxW;

        let x2 = x1 + (hboxW - 1) * cos(cell.angle);

        let y2 = y1 + (hboxW - 1) * sin(cell.angle);

​

        pts.push({ x: x2, y: y2 });

​

        gfx.line(x1, y1, x2, y2);

​

        cell.angle += cell.update;

​

        if (cell.tgt == null) {

          if (random(0, 999) > 99) {

            cell.tgt = getTarget();

            // console.log(cell.tgt)

          }

        } else {

          let tgt = {

            x: cells[cell.tgt.r][cell.tgt.c].x,

            y: cells[cell.tgt.r][cell.tgt.c].y,

          };

​

          let dx = tgt.x - cell.x;

          cell.x += dx * cell.ease;

          let dy = tgt.y - cell.y;

          cell.y += dy * cell.ease;

​

          if (dist(cell.x, cell.y, tgt.x, tgt.y) < 0.1) {

            cell.x = tgt.x;

            cell.y = tgt.y;

            cell.tgt = null;

            // cells[cell.tgt.r][cell.tgt.c].tgt = getTarget();

          }

        }

      }

    }

  }

​

  // shuffleArray(pts);

  // noFill();

  // stroke(color(140,40,140,220));

  // beginShape(LINES);

  // for (let p of pts) vertex(p.x, p.y)

  // endShape(CLOSE);

  // noLoop()

​

  image(gfx, 0, 0);

}

​

function shuffleArray(array) {

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

    const j = Math.floor(Math.random() * (i + 1));

    [array[i], array[j]] = [array[j], array[i]];

  }

}

​

function getTarget() {

  let _r = int(random(1, numCells - 2));

  let _c = int(random(1, numCells - 2));

  return { r: _r, c: _c };

}

​

function keyPressed() {

  if (key == "s") saveGif("loops.gif", 10);

}

​