# Understanding Pixels

• Basic structure to manipulate pixels

size (200, 200);   // pixel dimension

for (int i = 0; i < pixels.length; i ++) {

// pixels.length (system variable) = X +Y + width

// from 0 + 0 x 200 = 0 to 199 + 199 x 200 = 39999, total 200 x 200 = 40000 pixels

float rand = random (255); // Generate random number

color c = color (rand); //Place generated random numer as color value

pixels [i] = c;  // pixels  to pixels  will have each random color value

updatePixels();            // Update after changes have been made

// <![CDATA[

void setup(){
size(200,200);
}

void draw(){
for (int i =0; i

• Getting color value from each pixels on an image

PImage img;

void setup(){

size (200,200);

}

void draw(){

img.loadPixels();        // declare that “I will use pixels in ‘img'”

for (int y = 0; y <height; y ++){

for (int x =0; x < width; x ++){

int loc = x + y  * width;

// red(x), green(x), blue(x) for get  r, g, b value of x pixel : getting the color value!

float r = red (img.pixels[loc]);

float g = green (img.pixels[loc]);

float b = blue (img.pixels[loc]);

// display the color on pixels

pixels [loc] = color (r, g, b);

// TIP: notice that we loaded an image but did not display it using ‘image(img, x,y);’ , but display assigning each color value we got from the image on each pixels!!!

}

} updatePixels();

}

**** Manipulating r(), g(), b() value

// mouse X, Y distance from x, y will be translated as the amount of brightness

float distance = dist(x,y,mouseX,mouseY);

// Constrain values from 0-255

r = constrain (r, 0, 255);

g = constrain (g, 0, 255);

b = constrain ( b, 0, 255);

EXAMPLE :

1. Pointillism using color value of pixels

2. Flash Light Effect : According to mouse Position (Distance between Mouse X,Y and each pixels -> Brightness Control)

3. Translate Brightness to Z Depth

: KEY – float z = (mouseX / (float) width) * brightness(pixels[loc]) -100;

pushMatrix ();

translate (x, y, z);

popMatrix();