BézierMoire

var gB, gN, gBRes, cRes;

var requiredFrames = 720;

var v1, v2, v3, v4;

​

function setup() {

  var squareSize = min(windowWidth, windowHeight);

  createCanvas(squareSize, squareSize);

  imageMode(CENTER);

  gB = createGraphics(gBRes = 2048, gBRes);

  gB.colorMode(HSB, 360);

  gN = createGraphics(gBRes, gBRes);

  gN.colorMode(HSB, 360);

  v1 = random(-2, 2) * random();

  v2 = random(-2, 2) * random();

  v3 = random(-2, 2) * random();

  v4 = random(-2, 2) * random();

}

​

function draw() {

  background(360);

  gB.stroke(0, 330);

  var animationProgress = map((frameCount / requiredFrames) % 1, 0, 1, 0, TAU);

  gB.push();

  gB.translate(gBRes * 0.5, gBRes * 0.5);

  gB.rotate(animationProgress);

  gB.scale(sqrt(2));

  var x1 = -0.5 * gBRes,

    y1 = -0.5 * gBRes;

  var x2 = v1 * sin(animationProgress) * gBRes,

    y2 = v2 * cos(animationProgress) * gBRes;

  var x3 = v3 * cos(animationProgress) * gBRes,

    y3 = v4 * sin(animationProgress) * gBRes;

  var x4 = 0.5 * gBRes,

    y4 = 0.5 * gBRes;

  gB.stroke(0, map(animationProgress, 0, TAU, 360, 0));

  gB.strokeWeight(map(animationProgress, 0, TAU, 0, 6));

  gB.fill(360, map(animationProgress, 0, TAU, 2, 0));

  gB.bezier(x1, y1, x2, y2, x3, y3, x4, y4);

  gB.pop();

  displayBuffer(gB);

  displayBuffer(gN);

​

  if (frameCount === requiredFrames) {

    noLoop();

  }

​

  // Noise

  gN.noFill();

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

    var xP = gBRes * random();

    var yP = gBRes * random();

    gN.stroke(map(yP, 0, gBRes, 330, 180) + 30 * random(), 30);

    gN.strokeWeight(1 + random() * random());

    gN.beginShape();

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

      xP += random(-1, 1) * noise(0.1 * xP, 0.1 * yP);

      yP += random(-1, 1) * noise(0.1 * xP, 0.1 * yP);

      gN.curveVertex(xP, yP);

      var theta = map(noise(xP * 0.01 + frameCount, yP * 0.01 + frameCount), 0, 1, 0, TAU) * random(TAU);

      xP += 16 * cos(theta);

      yP += 16 * sin(theta);

    }

    gN.endShape();

  }

​

}

​

function displayBuffer(buffer) {

  var squareSize = min(windowWidth, windowHeight);

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

}

​

function windowResized() {

  var squareSize = min(windowWidth, windowHeight);

  resizeCanvas(squareSize, squareSize);

}

​

function mouseClicked() {

  saveCanvas();

}