​

// variables for images

let base;

let fisher;

let cafe;

let folx;

let postcard;

let silhouette;

let EL1;

let dad1;

​

//parameters for image presentation

let x = 0;

let y = 0;

let alp1 = 0;

let alp2 = 100;

​

// Tiles configuration

let tiles = [];

let cols = 5;

let rows = 5;

let w, h;

let x1  = 0;

let y1 = 0;

​

// Order of tiles

let board = [];

​

//preload images (will delay start of animation)

function preload(){

  base = loadImage('assets/ELDad_PatriaOMuerte_base3.png');

  cafe = loadImage("assets/ELDad_PatriaOMuerte_cafe2.png");

  fisher = loadImage("assets/ELDad_PatriaOMuerte_fisher2.png");

  folx = loadImage("assets/ELDad_PatriaOMuerte_folx2.png")

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

  dad1 = loadImage('assets/ELDad_PatriaOMuerte_dad.png');

  postcard = loadImage('assets/ELDad_PatriaOMuerte_postcard.png');

  silhouette = loadImage('assets/ELDad_PatriaOMuerte_silhouette.png')

}

​

function setup() {

  createCanvas(base.width, base.height);

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

  frameRate(7);

  // pixel dimensions of each tiles

  w = width / cols;

  h = height / rows;

  for (let i = 0; i < cols; i++) {

    for (let j = 0; j < rows; j++) {

      let x = i * w;

      let y = j * h;

      let img = createImage(w, h);

      img.copy(base, x, y, w, h, 0, 0, w, h);

      let index = i + j * cols;

      board.push(index);

      let tile = new Tile(index, img);

      tiles.push(tile);

    }

  }

​

}

​

function draw() {

  background(0);

  //base

  push();

  tint(255, random(70, 100));

  image(base, 0, 0, width, height);

  pop();

​

  // fisher

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

​

  //cafe

  blend(cafe, 0, 0, cafe.width, cafe.height, 0, 0, width, height, LIGHTEST);

​

  // folx

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

  //Image Grid shuffle

    push();

    tint(random(360), 100, 100, alp1);

    for (let i = 0; i < cols; i++) {

      for (let j = 0; j < rows; j++) {

        let index = int(random(16));

        let x = i * w;

        let y = j * h;

        let tileIndex = board[index];

        if (tileIndex > -1) {

          let img = tiles[tileIndex].img;

          image(img, x, y, w, h);

        }

      }

    }

    pop();

​

  //dad

  push();

  tint(random(180, 250), random(50), alp2);

  dad1.filter(GRAY);

  image(dad1, 0, 0, width, height);

  pop();

  //EL

  push();

  tint(random(0,70), random(50), alp2);

  EL1.filter(GRAY);

  image(EL1, 0, 0, width, height);

  pop();

​

​

  //postcard

  push();

  tint(255, alp2);

  postcard.filter(GRAY);

  image(postcard, 0, 0, width, height);

  pop();

​

  push();

  tint(255, alp1);

  silhouette.filter(INVERT);

  image(silhouette, 0, 0, width, height);

  pop();

​

​

​

  if (frameCount%int(random(20))==0){

    if (alp1 <= 0){

      alp1 = 100;

      alp2 = 0;

  } else {

    alp1 = 0;

    alp2 = 100;

    }

  }

}

​

class Tile {

  constructor(i, img) {

    this.index = i;

    this.img = img;    

  }

}

​