​

//global variables

let EL1;

let EL2;

let dad;

let tileCount;

​

//preload images: image of EL loaded twice as two variabless

function preload(){

  EL1 = loadImage('assets/ELDad_Cigar_EL2.png');

  EL2 = loadImage('assets/ELDad_Cigar_EL2.png');

  dad = loadImage('assets/ELDad_Cigar_dad2.png')

}

​

function setup() {

  createCanvas(dad.width, dad.height);

  colorMode(HSB, 360, 100, 100, 100);

  frameRate(8);

}

​

function draw() {

  background(0);

  //determines size of grid squares, changes every loop

  tileCount = random(20);

  //base photo - dad in front of cigar factory

  image(dad, 0, 0, dad.width, dad.height);

​

  //color layer

  //the use of frameCount functions as a timing device; when the frame count is divisble by 4, its color and opacity will change, when the frameCount is divisible by 10, the grid will appear

  noStroke();

  if (frameCount%4==0){

  fill(random(360), 100, 100, random(100));

    }

  rect(0, 0, width, height);

​

  //grid

  if (frameCount%10==0){

    grid();

    }

  //EL

  //the use of push and pop isolates a tint to a specific image

  push();

  //color blended image

  blend(EL1, 0, 0, EL1.width, EL1.height, 0, 0, EL1.width,     EL1.height, DARKEST);

  //overlaid black and white with a random alpha channel (opacity)

  tint(255, random(100));

  image(EL2, 0, 0, EL2.width, EL2.height);

  EL2.filter(GRAY);

  pop();

  //the lower the layer is in the code, the higher it is in the stacking order 

}

​

​

//grid animation

function grid(){

  for (let gridY = 0; gridY < tileCount; gridY++) {

    for (let gridX = 0; gridX < tileCount; gridX++) {

      let posX = (width / tileCount) * gridX;

      let posY = (height / tileCount) * gridY;

      noStroke();

      rectMode(CORNER);

      //fill(0);

      //rect(posX, posY, width/tileCount, height/tileCount);

      //variable placement of black & white squares in grid / toggle acts like a coin flip

      var toggle = floor(random(2));

      if (toggle == 1){

         fill(0, random(100));

          rect(posX, posY, width/tileCount, height/tileCount);

    } else {

      fill(255, random(100)) ;

      rect(posX, posY, width/tileCount, height/tileCount);

      }

      }

    }

}

​