Cluster One

var gB, fullRes, windowRes;

var requiredFrames = 60;

​

function setup() {

  windowRes = min(windowWidth, windowHeight);

  createCanvas(windowRes, windowRes);

  imageMode(CENTER);

  gB = createGraphics(fullRes = 1024, fullRes);

  gB.colorMode(HSB, 360);

  gB.rectMode(CENTER);

  gB.fill(360);

}

​

function randPow(multiplier, min, max, power) {

  for (var i = 0; i < power; i += 1) {

    multiplier *= random(min, max);

  }

  return multiplier;

}

​

function draw() {

  gB.clear();

  gB.resetMatrix();

  gB.stroke(0);

  gB.strokeWeight(8);

  var squares = 64;

  for (var i = -0.5; i <= 0.5; i += 1 / squares) {

    for (var j = -0.5; j <= 0.5; j += 1 / squares) {

      gB.push();

      // Just inside canvas limits

      var xPos = map(i, -0.5, 0.5, fullRes * 0.025, fullRes * 0.975);

      var yPos = map(j, -0.5, 0.5, fullRes * 0.025, fullRes * 0.975);

      // Just over the canvas limits

      var xPos = map(i, -0.5, 0.5, fullRes * -0.025, fullRes * 1.025);

      var yPos = map(j, -0.5, 0.5, fullRes * -0.025, fullRes * 1.025);

​

      gB.translate(xPos, yPos);

      let weighting = 1;

      let progress = (frameCount/requiredFrames) % 1 * TAU;

      weighting *= cos(i * j + progress);

      weighting *= sin(j - abs(i * 256) - progress);

      weighting = map(weighting, -1, 1, 0, fullRes / squares / 0.5);

      gB.strokeWeight(weighting);

      gB.point(0, 0);

      gB.pop();

    }

  }

  background(360);

  displayBuffer(gB);

}

​

function keyPressed() {

  if (key === "r") {

    windowRes = 512;

    resizeCanvas(512, 512);

    saveGif('export', requiredFrames, {

      delay: 0,

      units: "frames"

    });

  }

  if (key === "s") {

    saveCanvas();

  }

}

​

function displayBuffer(buffer) {

  image(buffer, windowRes / 2, windowRes / 2, windowRes, windowRes);

}

​

function windowResized() {

  windowRes = min(windowWidth, windowHeight);

  resizeCanvas(windowRes, windowRes);

}