Moiré

var screenSize;

var gB;

var gBRes = 512;

​

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, 60);

  gB.strokeWeight(gBRes * 0.0005);

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

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

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

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

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

      gB.push();

      gB.translate(xPos, yPos);

      gB.line(gBRes * sqrt(1) * cos(PI + theta), gBRes * sqrt(1) * sin(PI + theta), gBRes * sqrt(1) * cos(theta), gBRes * sqrt(1) * sin(theta));

      gB.pop();

    }

  }

​

  // Render image to canvas

  background(360);

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

}

​

function sizeWindow() {

  screenSize = min(windowWidth, windowHeight);

}

​

function windowResized() {

  sizeWindow();

  resizeCanvas(screenSize, screenSize);

}

​

function mouseClicked() {

  initiate();

}