Joe McKay

joe is good numPixel This section comprises of code snippets that I use to teach and make my own work. They are complicated but useful bits of code that I constantly refer to, so why not put them up for everyone? Mostly, these are here because I can't find good examples elsewhere - it's not a comprehensive look at code.

Pixels

In processing, images are put into a "pixel array" which is essentially a long list of all RGB information of all the pixels in an image. There is an inherent problem with accessing this array, because it is not already in a handy Cartesian X Y coordinate system. If, for example, we wanted to get the information of a certain pixel how would we know where that pixel is in the array. Actually, that's easy - just multiply Y by the width and add X to get the location in the array. But what if you have the location in the array but not the X and Y coordinates. Here's a sketch that shows how to scan through every pixel on the screen. Notice it uses the Modulo (remainder) to get the X coordinate.

	int step = 1; 
	int loc; 
	color c = color(255, 100, 20); 
	void setup() {
	  size(30, 30);
	}
	void draw() {  
	  loc += step; 
	  int sx = loc % width;
	  int sy = loc / width;
	  if (loc > width * height) {
	    loc = 0; 
	    c = color(random(255), random(255), random(255));
	  }
	  stroke(c); 
	  point (sx, sy);
	}

This code uses the pixel array to swap out the RGB values of an image when you press a key.

	PImage img;

	void setup() {
	  size(200, 200);
	  rectMode(CENTER);
	  img = loadImage("mona.jpg");
	}
	void draw() {  
	 image(img, 0, 0);
	  if (keyPressed == true) {
	    loadPixels();
	    for (int i = 0; i < width *height; i ++) {
	      color pix = pixels[i]; 
	      float r = red(pix);  
	      float g = green(pix); 
	      float b = red(pix); 
	      color newpix = color(g, b, r); 
	      pixels[i] = newpix; 
	    }
	     updatePixels();     
	  }
	}

In this example I have three Pimages, one of them gets filled with empty pixels to start. Normally you would use loadPixels, but in this case we load the pixels of all three images. Then we compare the first image to the second and create a third, which gets displayed on screen.

Doing this kind of work in a browser is not really a great idea - works best in Java mode.

	PImage p1; 
	PImage p2;
	PImage destination; 
	color c, c2, newpix;
	int shifter = 100; 

	void setup() {
	  size(800, 600);
	  background(255);
	  p1 = loadImage("b.jpg");
	  p2 = loadImage("a.jpg");
	 destination = createImage(width, height, RGB);
	}

	void draw() {
	//image(p1, 0, 0);
	 
	  //p1 = loadImage("a.jpg");
	  p1.loadPixels();
	  p2.loadPixels();
	  destination.loadPixels();
	  
	  shifter ++; 
	  if (shifter >= 255) {
	    shifter = 0;
	  }  
	  for (int i = 0; i < width *height; i ++) {
	    c= p1.pixels[i]; 
	    c2= p1.pixels[i]; 
	    if ((red(c2) + green(c2) + blue(c2))/ 3 < shifter) { // you could use "brightness" instead 
	       //newpix =  p2.pixels[i];
	       newpix =  p1.pixels[i]; 
	    }
	    else{
	        newpix =  p2.pixels[i];
	    }
	     destination.pixels[i] = newpix;
	    
	  }
	   destination.updatePixels();
	   image(destination, 0, 0);
	}