Bézier 34771

var gB, gBRes, cRes;

var requiredFrames = 180;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);

  gB = createGraphics(gBRes = 1024, gBRes);

  gB.colorMode(HSB, 360);

  background(100);

}

​

function draw() {

  gB.resetMatrix();

  gB.background(360);

  gB.stroke(0);

  gB.strokeWeight(2);

  var animationProgress = (frameCount / requiredFrames) % 1;

  if (animationProgress < 0.5) {

    animationProgress = animationProgress * 2;

  } else {

    animationProgress = (1 - animationProgress) * 2;

  }

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

  var gridSize = 8;

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

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

      gB.push();

      var mappedI = map(i, 0, gridSize - 1, gBRes * -0.4, gBRes * 0.4);

      var mappedJ = map(j, 0, gridSize - 1, gBRes * -0.4, gBRes * 0.4);

      renderBezier(mappedI, mappedJ, (gBRes * 0.8) / (gridSize - 1), animationProgress)

      gB.pop();

    }

  }

  displayBuffer(gB);

}

​

function renderBezier(xPos, yPos, size, time) {

  var sPX = size * map(noise(100 * xPos + 53827, 100 * yPos + 33726), 0, 1, -0.75, 0.75);

  var sPY = size * map(noise(100 * xPos + 35827, 100 * yPos + 34352), 0, 1, -0.75, 0.75);

  var c1X = size * map(noise(100 * xPos + 35526, 100 * yPos + 66742), 0, 1, -0.95, 0.95);

  var c1Y = size * map(noise(100 * xPos + 47256, 100 * yPos + 82723), 0, 1, -0.95, 0.95);

  var c2X = size * map(noise(100 * xPos + 68275, 100 * yPos + 33771), 0, 1, -0.95, 0.95);

  var c2Y = size * map(noise(100 * xPos + 36827, 100 * yPos + 98884), 0, 1, -0.95, 0.95);

  var ePX = size * map(noise(100 * xPos + 37626, 100 * yPos + 71610), 0, 1, -0.75, 0.75);

  var ePY = size * map(noise(100 * xPos + 36662, 100 * yPos + 53347), 0, 1, -0.75, 0.75);

  gB.translate(xPos, yPos);

  gB.noFill();

  gB.stroke(0);

  gB.bezier(sPX, sPY, c1X, c1Y, c2X, c2Y, ePX, ePY);

  gB.ellipse(sPX, sPY, size * 0.05);

  gB.ellipse(ePX, ePY, size * 0.05);

  var newX = bezierPoint(sPX, c1X, c2X, ePX, time);

  var newY = bezierPoint(sPY, c1Y, c2Y, ePY, time);

  gB.fill(360);

  gB.stroke(0);

  gB.ellipse(newX, newY, size * 0.1);

}

​

function displayBuffer(buffer) {

  image(buffer, windowWidth / 2, windowHeight / 2, min(windowWidth, windowHeight), min(windowWidth, windowHeight));

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}