Understanding Pixels

  • Basic structure to manipulate pixels 

size (200, 200);   // pixel dimension

loadPixels();  // Before you deal with pixels, load pixels like you loaded image in PImage class

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 [0] to pixels [39999] will have each random color value

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

// <![CDATA[

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

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

  • Getting color value from each pixels on an image

// Load image 

PImage img;

void setup(){

size (200,200);

img = loadImage (“sunflower.jpg”);

}

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

add:

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

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

r *= adjustBrightness;

g *= adjustBrightness;

b *= adjustBrightness;

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s