Pieced Rendering

var screenSize;

var gB;

var gBRes = 1024;

var hSize, vSize, gridResolution;

var showOverlay = true;

var arrayLocations, shuffledArrayLocations;

​

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

  gB.imageMode(CENTER);

}

​

function initiate() {

  hSize = 0.025;

  vSize = 0.0125;

  gridResolution = 2 + ~~(32 * random() * random());

​

  arrayLocations = [];

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

    arrayLocations.push(i);

  }

  shuffledArrayLocations = shuffle(arrayLocations, true);

}

​

function draw() {

​

  gB.resetMatrix();

  gB.background(360);

  gB.stroke(0, 300);

  gB.strokeWeight(4);

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

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

    gB.push();

    gB.translate(xPos, 0);

    gB.line(0, 0, 0, height);

    gB.ellipse(0, xPos, 30);

    gB.pop();

  }

​

  // Render image to canvas

  background(360);

  image(gB, width * 0.5, height * 0.5, width, height);

  var sectorSize = width / gridResolution * 1;

  if (showOverlay) {

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

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

        push();

        var xPos = map(i, 0, gridResolution, 0, width);

        var yPos = map(j, 0, gridResolution, 0, height);

        translate(xPos, yPos);

        var sectorI = ~~(map(noise(i * 10), 0, 1, 0, gridResolution));

        var sectorJ = ~~(map(noise(j * 10), 0, 1, 0, gridResolution));

​

        // from Array

        var arrayIndex = gridResolution * i + j;

        var sectorPosition = shuffledArrayLocations[arrayIndex];

        sectorI = floor(sectorPosition / gridResolution);

        sectorJ = fract(sectorPosition / gridResolution) * gridResolution;

​

        var sectorPositionX = map(sectorI, 0, gridResolution, 0, gBRes);

        var sectorPositionY = map(sectorJ, 0, gridResolution, 0, gBRes);

​

        var sectorPositionSize = gBRes / gridResolution;

        image(gB, sectorSize * 0.5, sectorSize * 0.5, sectorSize, sectorSize, sectorPositionX, sectorPositionY, sectorPositionSize, sectorPositionSize);

        pop();

      }

    }

  }

  noLoop();

}

​

function sizeWindow() {

  screenSize = min(windowWidth, windowHeight);

}

​

function windowResized() {

  sizeWindow();

  resizeCanvas(screenSize, screenSize);

}

​

function mouseClicked() {

  initiate();

  loop();

}