//Pixels!
//Use UP and DOWN keys to change resolution
//Use RIGHT and LEFT keys to change display mode

int numFrames = 10;
int frame = 0;
PImage[] images = new PImage[numFrames];
int mode = 1;
int numModes = 4;
int numRes = 20;
boolean keyPress = false;
    
void setup() { 
  size(600, 300); 
  framerate(30);
  noStroke();
  
  images[0]  = loadImage("fan0001.jpg"); 
  images[1]  = loadImage("fan0002.jpg"); 
  images[2]  = loadImage("fan0003.jpg"); 
  images[3]  = loadImage("fan0004.jpg"); 
  images[4]  = loadImage("fan0005.jpg"); 
  images[5]  = loadImage("fan0006.jpg"); 
  images[6]  = loadImage("fan0007.jpg"); 
  images[7]  = loadImage("fan0008.jpg"); 
  images[8]  = loadImage("fan0009.jpg"); 
  images[9]  = loadImage("fan0010.jpg");
} 
 
void draw() {

  background(0);

 //calculate frame
 frame = frame + 1; 
 if(frame >= numFrames) { 
   frame = 0; 
 }
 
 //display right image
 image(images[frame], 300, 0);
 
 //check for adjustment in mode
 if(keyPressed && keyCode == RIGHT && keyPress == false){
      if(mode<numModes){
        mode = mode+1;
      }
  } else {
    if(keyPressed && keyCode == LEFT && keyPress == false){
      if(mode>1){
        mode = mode-1;
      }
    }
  }
  
 if(keyPressed) {
   keyPress = true;
 } else {
   keyPress = false;
 }

 //check for adjustment in resolution
 if(keyPressed && keyCode == UP  && numRes < 100){
      numRes = numRes+1;
      while(int(300/numRes)*numRes != 300) {
        numRes = numRes+1;
      }
  } else {
    if(keyPressed && keyCode == DOWN && numRes > 1){
      numRes = numRes-1;
      while(int(300/numRes)*numRes != 300) {
        numRes = numRes-1;
      }
    }
  }
 
 //calculate and draw pixels
 for(int xi=0; xi<numRes; xi++) {
   for(int yi=0; yi<numRes; yi++) {
   
     float r = 0;
     float g = 0;
     float b = 0;
   
     for(int xj=xi*(300/numRes); xj<((xi+1)*(300/numRes)); xj++) {
       for(int yj=yi*(300/numRes); yj<((yi+1)*(300/numRes)); yj++) {
         color c = get(300+xj, yj);
         r = r + red(c); 
         g = g + green(c); 
         b = b + blue(c);
       }
     }
   
     r = r/(sq(300/numRes));
     g = g/(sq(300/numRes));
     b = b/(sq(300/numRes));
   
     //display mode 1
     if(mode == 1) {  
       fill(r, 0, 0); 
       rect(xi*(300/numRes), yi*(300/numRes), 300/(numRes*3), 300/numRes);
  
       fill(0, g, 0);
       rect(xi*(300/numRes) + 300/(numRes*3), yi*(300/numRes), 300/(numRes*3), 300/numRes);
  
       fill(0, 0, b);
       rect(xi*(300/numRes) + (300/(numRes*3))*2, yi*(300/numRes), 300/(numRes*3), 300/numRes);
     }

     //display mode 2
     if(mode == 2) {  
       fill(r, 0, 0); 
       rect(xi*(300/numRes), yi*(300/numRes), 300/numRes, 300/(numRes*3));
  
       fill(0, g, 0);
       rect(xi*(300/numRes), yi*(300/numRes) + 300/(numRes*3), 300/numRes, 300/(numRes*3));
  
       fill(0, 0, b);
       rect(xi*(300/numRes), yi*(300/numRes) + (300/(numRes*3))*2, 300/numRes, 300/(numRes*3));
     }

     //display mode 3
     if(mode == 3) {  
       fill(r, 0, 0);
       rect(xi*(300/numRes), yi*(300/numRes), 300/(numRes*3), 300/(numRes*3));
       rect(xi*(300/numRes) + 300/(numRes*3), yi*(300/numRes) + 300/(numRes*3), 300/(numRes*3), 300/(numRes*3));
       rect(xi*(300/numRes) + (300/(numRes*3))*2, yi*(300/numRes) + (300/(numRes*3))*2, 300/(numRes*3), 300/(numRes*3));
       
  
       fill(0, g, 0);
       rect(xi*(300/numRes) + 300/(numRes*3), yi*(300/numRes), 300/(numRes*3), 300/(numRes*3));
       rect(xi*(300/numRes) + (300/(numRes*3))*2, yi*(300/numRes) + 300/(numRes*3), 300/(numRes*3), 300/(numRes*3));
       rect(xi*(300/numRes), yi*(300/numRes) + (300/(numRes*3))*2, 300/(numRes*3), 300/(numRes*3));
  
       fill(0, 0, b);
       rect(xi*(300/numRes) + (300/(numRes*3))*2, yi*(300/numRes), 300/(numRes*3), 300/(numRes*3));
       rect(xi*(300/numRes), yi*(300/numRes) + 300/(numRes*3), 300/(numRes*3), 300/(numRes*3));
       rect(xi*(300/numRes) + 300/(numRes*3), yi*(300/numRes) + (300/(numRes*3))*2, 300/(numRes*3), 300/(numRes*3));
     }
     
     //display mode 4
     if(mode == 4) {  
       fill(r, g, b);
       rect(xi*(300/numRes), yi*(300/numRes), 300/numRes, 300/numRes);
     }
   }
 }
 
}
Project 4: Context
Extend an idea you've explored previously in your life, but adapt it to the context of an interactive system which requires the viewer to engage with the material.