/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://designuniandes.sketchpad.cc/sp/pad/view/ro.3fT-pPjiyH9/rev.23
 * 
 * authors: 
 *   Natalia Garcia

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



// This sketch builds on a prior work, "Assignment 2: Repetition", created by Hernando Barragan
// http://designuniandes.sketchpad.cc/sp/pad/view/ro.BpKiLNJl5Fs183/rev.1
/* @pjs preload="/static/uploaded_resources/p.15834/8151.jpg"; */
/* @pjs preload="/static/uploaded_resources/p.15834/1231.jpg"; */

Mask fig1;
Mask fig2;
Maske fig3;
Maske fig4;
PImage img;
PImage img2;

public void setup(){
  size(400,400);
  background(200);

  img = loadImage("/static/uploaded_resources/p.15834/8151.jpg");
  img2 = loadImage("/static/uploaded_resources/p.15834/1231.jpg");


  for (int i = -13; i < 78; i=i+26){
      for (int j = 0; j < 80; j=j+26){
 
  fig1 = new Mask(img,i,j);
  fig2 = new Mask(img2,i+13,j);
  
      }
  }
  
  for (int i = 220; i < 300; i=i+26){
      for (int j = 0; j < 80; j=j+26){
 
  fig1 = new Mask(img,i,j);
  fig2 = new Mask(img2,i+13,j);
  
      }
  }
  
  
for (int i = 103; i < 200; i=i+26){
      for (int j = 103; j < 200; j=j+26){
 
  fig1 = new Mask(img,i,j);
  fig2 = new Mask(img2,i+13,j);
  
      }
  }



  for (int i = 338; i < 420; i=i+26){
      for (int j = 103; j < 200; j=j+26){
 
  fig1 = new Mask(img,i,j);
  fig2 = new Mask(img2,i+13,j);
  
      }
  }
  
    for (int i = -13; i < 78; i=i+26){
      for (int j = 206; j < 300; j=j+26){
 
  fig1 = new Mask(img,i,j);
  fig2 = new Mask(img2,i+13,j);
  
      }
  }
  
  for (int i = 220; i < 320; i=i+26){
      for (int j = 206; j < 300; j=j+26){
 
  fig1 = new Mask(img,i,j);
  fig2 = new Mask(img2,i+13,j);
  
      }
  }
  
  for (int i = 103; i < 200; i=i+26){
      for (int j = 310; j < 420; j=j+26){
 
  fig1 = new Mask(img,i,j);
  fig2 = new Mask(img2,i+13,j);
  
      }
  }

  for (int i = 338; i < 420; i=i+26){
      for (int j = 310; j < 420; j=j+26){
 
  fig1 = new Mask(img,i,j);
  fig2 = new Mask(img2,i+13,j);
  
      }
  }
  
  
  
  
  
  
 for (int i = 116; i < 220; i=i+26){
    for (int j = 0; j < 100; j=j+26){ 
    fig3 = new Maske(img,i,j);
  fig4 = new Maske(img2,i+13,j);
    }
  }
 
 
  for (int i = 350; i < 420; i=i+26){
    for (int j = 0; j < 100; j=j+26){ 
    fig3 = new Maske(img,i,j);
  fig4 = new Maske(img2,i+13,j);
    }
  }

  
   for (int i = 0; i < 91; i=i+26){
    for (int j = 103; j < 200; j=j+26){ 
    fig3 = new Maske(img,i,j);
  fig4 = new Maske(img2,i+13,j);
    }
  }
 
 
  for (int i = 233; i < 313; i=i+26){
    for (int j = 103; j < 200; j=j+26){ 
    fig3 = new Maske(img,i,j);
  fig4 = new Maske(img2,i+13,j);
    }
  }
  
  
  for (int i = 116; i < 220; i=i+26){
    for (int j = 206; j < 300; j=j+26){ 
    fig3 = new Maske(img,i,j);
  fig4 = new Maske(img2,i+13,j);
    }
  }
 
 
  for (int i = 350; i < 420; i=i+26){
    for (int j = 206; j < 300; j=j+26){ 
    fig3 = new Maske(img,i,j);
  fig4 = new Maske(img2,i+13,j);
    }
  }
  
     for (int i = 0; i < 91; i=i+26){
    for (int j = 310; j < 420; j=j+26){ 
    fig3 = new Maske(img,i,j);
  fig4 = new Maske(img2,i+13,j);
    }
  }
 
 
  for (int i = 233; i < 313; i=i+26){
    for (int j = 310; j < 420; j=j+26){ 
    fig3 = new Maske(img,i,j);
  fig4 = new Maske(img2,i+13,j);
    }
  }
  

  
}



class Mask {


Mask( PImage img, float xpos, float ypos){

  PGraphics maskImage;
  maskImage = createGraphics(img.width, img.height, JAVA2D);
  maskImage.beginDraw();
  maskImage.fill(200);
  maskImage.noStroke();
  maskImage.quad(xpos, ypos, xpos+13, ypos,xpos+26,ypos+26,xpos+13,ypos+26);
  maskImage.endDraw();
  
  PImage imgCopy = img; // if the mask changes every frame, we need to use a copy of it, keeping the original intact
  imgCopy.mask(maskImage);
  image(imgCopy, 0, 0);
}


  void display(float xpos, float ypos) {
    image(img, xpos, ypos);
  }

}






class Maske {

Maske( PImage img, float xpos, float ypos){

  PGraphics maskImage;
  maskImage = createGraphics(img.width, img.height, JAVA2D);
  maskImage.beginDraw();
  maskImage.fill(200);
  maskImage.noStroke();
  maskImage.quad(xpos, ypos, xpos+13, ypos,xpos,ypos+26,xpos-13,ypos+26);
  maskImage.endDraw();
  
  PImage imgCopy = img; // if the mask changes every frame, we need to use a copy of it, keeping the original intact
  imgCopy.mask(maskImage);
  image(imgCopy, 0, 0);
}


  void display(float xpos, float ypos) {
    image(img, xpos, ypos);
  }

}