Shifting

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(100);

}

​

function draw() {

  circle(mouseX, mouseY, 20);

}var screenSize;

var gB;

var gBRes = 1024;

​

function setup() {

  sizeWindow();

  pixelDensity(1);

  createCanvas(screenSize, screenSize);

  colorMode(HSB, 360);

  initiate();

​

  gB = createGraphics(gBRes, gBRes);

  gB.colorMode(HSB, 360);

  gB.rectMode(CENTER);

}

​

function initiate() {}

​

function draw() {

  // Draw something to the graphics buffer

  gB.clear();

  gB.stroke(0, 270);

  gB.strokeWeight(gBRes * 0.001);

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

    for (var j = 0; j <= 1; j += 0.025) {

      var xPos = map(i, 0, 1, -0.1 * gB.width, 1.1 * gB.width);

      var yPos = map(j, 0, 1, -0.1 * gB.height, 1.1 * gB.height);

      var theta = map(noise(xPos * 0.0005, yPos * 0.0005, frameCount * 0.005), 0, 1, 0, TAU * 1.5);

      gB.push();

      gB.translate(xPos, yPos);

      for (var k = 0; k <= 1; k += 0.025) {

        var xPoint = lerp(0, 128 * cos(theta), k);

        var yPoint = lerp(0, 128 * sin(theta), k);

        xPoint += random(-64, 64) * random() * random() * random();

        yPoint += random(-64, 64) * random() * random() * random();

        gB.point(xPoint, yPoint);

      }

      gB.pop();

    }

  }

​

  // Render image to canvas

  background(360, 30);

  image(gB, 0, 0, width, height);

}

​

function sizeWindow() {

  screenSize = min(windowWidth, windowHeight);

}

​

function windowResized() {

  sizeWindow();

  resizeCanvas(screenSize, screenSize);

}

​

function mouseClicked() {

  initiate();

}