Lesson 1 – extra

Using bitmaps as modifiers

int gridW = 100; 
int gridH = 100; 
float stepX = 5; 
float stepY = 5; 


ArrayList<Integer> imageGreyScaleList = new ArrayList<Integer>();
PImage baseImage;  

void setup() {
        size(800,600);
        smooth();
        baseImage = loadImage("data/image.jpg");
        baseImage.loadPixels();
        int loc;
        for (int i = 0; i < baseImage.width; i++) {
              for (int j = 0; j < baseImage.height; j++) {  
                 loc = i + j*baseImage.width;
               
        // The sytax "& 0xFF" compares the binary
				// representation of the two values and
				// makes all but the last 8 bits into a 0.
				// "0xFF" is 00000000000000000000000011111111
               int g = baseImage.pixels[loc] >> 8 & 0xFF;
               int r = baseImage.pixels[loc] >> 16  & 0xFF;
               int b = baseImage.pixels[loc]  & 0xFF;
            	imageGreyScaleList.add(r+g+b/3);
            }
        }
};

void draw() {
background(255);
  pushMatrix(); 
      // translate graphic to the center of the screen  
      translate((width-(stepX*gridW))/2, (height-(stepY*gridH))/2);
      int loc;
      for(int i = 0; i<gridH; i++ ) {
           beginShape();
          for(int j = 0; j<gridW; j++) {
                loc = i + j*baseImage.width;
                float posX =  j*stepX;
                float posY =  i*stepY+map(imageGreyScaleList.get(loc), 0 , 255,0,10);
              curveVertex(posX, posY);
          };
          endShape();
      };
   popMatrix();
};

Download files Exercise 1: Modify the code in the above example to create a different visual effect from a bitmap image.