MixedRender

var screenSize;

var gB;

var gBRes = 1024;

var hSize, vSize, gridResolution;

var showOverlay = true;

​

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.1;

  vSize = 0.1;

  gridResolution = ~~(64 * random() * random());

}

​

function draw() {

  gB.resetMatrix();

  gB.background(330);

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

  gB.scale(sqrt(2));

  gB.rotate(frameCount * 0.001);

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

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

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

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

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

      gB.push();

      gB.translate(xPos, yPos);

      gB.fill(map(noise(i * 10, j * 10, frameCount * 0.001), 0, 1, 360, 180), 360, 360);

      gB.noStroke();

      gB.rect(gBRes * 0.05, gBRes * 0.05, gBRes * 0.09, gBRes * 0.09);

      gB.pop();

    }

  }

​

  // Render image to canvas

  background(360);

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

  var sectorSize = width / gridResolution;

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

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

      }

    }

  }

}

​

function sizeWindow() {

  screenSize = min(windowWidth, windowHeight);

}

​

function windowResized() {

  sizeWindow();

  resizeCanvas(screenSize, screenSize);

}

​

function mouseClicked() {

  showOverlay = !showOverlay;

}