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); }
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(); } }
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); }