Masquerade

var screenSize;

var gB;

var gBRes = 2048;

var oscillatingFunction, oscillatingFunctionLength;

var hSegments, vSegments, hSize, vSize, segmentSize, rotation;

​

function setup() {

  sizeWindow();

  pixelDensity(1);

  createCanvas(screenSize, screenSize);

  colorMode(HSB, 360);

  imageMode(CENTER);

  rectMode(CENTER);

  initiate();

​

  gB = createGraphics(gBRes, gBRes);

  gB.colorMode(HSB, 360);

  gB.rectMode(CENTER);

}

​

function initiate() {

  hSegments = 16 + ~~random(16);

  hSize = 1 / hSegments;

  vSegments = 16 + ~~random(16);

  vSize = 1 / vSegments;

  segmentSize = gBRes * random() * random() * random() * random();

  oscillatingFunctionLength = 2 + ~~random(16);

  oscillatingFunction = [];

  rotation = ~~random(4);

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

    oscillatingFunction.push( random( 0, i%2 == 0 ? 1 : -1 ) );

  }

}

​

function draw() {

  gB.clear();

  gB.stroke(0);

  gB.strokeWeight(gBRes * 0.00125);

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

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

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

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

      gB.push();

      gB.translate(xPos, yPos);

      gB.rotate(rotation * PI * 0.5);

      var position = ~~map(i * j, 0, 1, 1, oscillatingFunction.length);

      var currentOF = oscillatingFunction[position];

      var prevOF = oscillatingFunction[position - 1];

      var midVal = lerp(currentOF, prevOF, i);

      gB.rotate(midVal * TAU);

      gB.line(-segmentSize, prevOF * segmentSize, segmentSize, midVal * segmentSize);

      gB.line(segmentSize, midVal * segmentSize, -segmentSize, currentOF * segmentSize);

      gB.pop();

    }

  }

​

  // Render image to canvas

  background(360);

  translate(width * 0.5, height * 0.5);

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

  noFill();

  strokeWeight(screenSize * 0.005);

  rect(0, 0, width * 0.975, height * 0.975);

  noLoop();

}

​

function sizeWindow() {

  screenSize = min(windowWidth, windowHeight);

}

​

function windowResized() {

  sizeWindow();

  resizeCanvas(screenSize, screenSize);

}

​

function mouseClicked() {

  loop();

  initiate();

}