Processing can load images, display them on the screen, and change their size, position, opacity, and tint.

You can load gif , png and jpg images in processing

Images are stored in variables of the Plmage data type.

Before displaying an image, it’s necessary to first load it with the loadlmage () function.

For the image to load, it must be in the data folder of the current program. Add the image by selecting the “Add File” option in the Sketch menu of the Processing environment.

As a shortcut, you can also drag and drop an image to the Processing window.

Processing-Using Image Files

You can display an image with image() function:

image(name, x, y) ; //Place the top corner of the image at (x,y) and displays the image at its original size

image(name, x, y, width, height) ;//Place the top corner of the image at (x,y) and displays the image with mentioned width and height

Images are colored with the tint ( ) function. This function is used the same way as fill() and stroke (), but it affects only images:

tint(gray) ;tint(gray, Transparency) ;tint(value1, value2, value3) ;tint(value1, value2, value3, Transparency) ;

Processing-Using Image Files

PImage MyImage; //Innitiating a PImage Variablesize(800,300);// Image must be in the sketch's "data" folder MyImage=loadImage("Test.jpg"); // Loading the Image//image(img, 0, 0);image(MyImage, 0,0, 200, 200);//image(name,x, y, width, height); tint(152,0,0);//tint(valuel, value2, value3);image(MyImage, 200,0, 200, 200);tint(70,70,152,200);//tint(value1, value2, value3,Transparency);image(MyImage, 400,0, 200, 200);tint(70,70,152,100);//tint(value1, value2, value3,Transparency);image(MyImage, 600,0, 200, 200);

Processing-Using Image Files

PImage img; size(400,200);img = loadImage("Test.jpg"); background(255); tint(255, 100); // Draw the image 20 times moving each to the rightfor (int i = 0; i <=20; i++) { image(img, i*10, 0,200,200); }

Processing-Using Image Files

In Processing anything that appears in the display window is interpreted as a group of pixels.

Processing gives you access to each and everyone of these pixels.

You are able to manipulate graphics and visual constructs via manipulating their pixels.

PixelBase Manipulation of Images-Getting and setting pixel colors

In Processing anything that appears in the display window is interpreted as a group of pixels.

Processing gives you access to each and everyone of these pixels.

every pixel has a position consisting of X and Y coordinates and a color attribute

Processing-PixelBase Manipulation of Images

You can read the color attribute of a pixel

color pixelColor;

pixelColor=get(x,y);

Processing-PixelBase Manipulation of Images

You can read the color attribute of a pixel and assign it to a variable of the data type: color

color pixelColor;

pixelColor=get(x,y);

The pixel color attribute is of color data type. color data type has three parts: Red, Green and Blue Value.

These values are integers between 0 and 255. You can get access to these values with the following functions:

int RedValue=red(pixelColor);int GreenValue=green(pixelColor);int BleValue=blue(pixelColor);

Processing-PixelBase Manipulation of Images

You can also set the color of a pixel:

set(x,y,pixelColor);

in set function the first two parameters are integer type and specify the coordinate of the pixel in the display window and the third parameter specifies the color of the pixel. The third parameter should be of color data type. You can make a color with passing three integers to color() function and then assign it to a pixel using a set function.

int RedColor=125;int GreenColor=200;int BlueColor=100;color pixelColor=color(RedColor,GreenColor,BlueColor);set(x,y,pixelColor);

Processing-PixelBase Manipulation of Images

You can also set the color of a pixel:

set(x,y,pixelColor);

in set function the first two parameters are integer type and specify the coordinate of the pixel in the display window and the third parameter specifies the color of the pixel. The third parameter should be of color data type. You can make a color with passing three integers to color() function and then assign it to a pixel using a set function.

int RedColor=125;int GreenColor=200;int BlueColor=100;color pixelColor=color(RedColor,GreenColor,BlueColor);set(x,y,pixelColor);

Processing-PixelBase Manipulation of Images

You can also set the color of a pixel:

set(x,y,pixelColor);

in set function the first two parameters are integer type and specify the coordinate of the pixel in the display window and the third parameter specifies the color of the pixel. The third parameter should be of color data type. You can make a color with passing three integers to color() function and then assign it to a pixel using a set function.

int RedColor=125;int GreenColor=200;int BlueColor=100;color pixelColor=color(RedColor,GreenColor,BlueColor);set(x,y,pixelColor);

Processing-PixelBase Manipulation of Images

Why is pixel manipulation important?Later on , we are going to work with video both as input and output.

we will use video camera to figure out presence of moving subject as well as the number of subjects in the video frame. In processing video is a series of images, as a result accessing the pixels of the image enables us to analyze the video feed through analyzing the changes to each pixel from one frame to another frame to detect movement and change in the environment.

On the other hand video can be used as an out put to animate the space as a response to a sensed situation. You can manipulate the pixels of a live feed video or previously recorded video as a response to a contextual stimuli and project it on surfaces to transform the architectural or urban surfaces to animated responsive ones.

Processing-Pixel Base Manipulation of Images

size(400,400);for(int x=0; x<width; x++)for(int y=0; y<height; y++){float r = random(255);float g = random(255);float b = random(255);stroke(color(r,g,b));point(x,y);}

Image Processing

size(400,400);PImage MyImage = createImage(width, height, RGB);for(int x=0; x<width; x++)for(int y=0; y<height; y++){float r = random(255);float g = random(255);float b = random(255);set(x,y,color(r,g,b));}

Image Processing

size(400,400);PImage MyImage = createImage(width, height, RGB);for(int x=0; x<width; x++)for(int y=0; y<height; y++){float r = random(255);float g = random(255);float b = random(255);set(x,y,color(r,g,b));}color c= get(100,100);println(red(c));

Image Processing

PImage myImage; //define an image objectmyImage = loadImage(“test.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the image

Image Processing

PImage myImage; //define an image objectmyImage = loadImage(“test.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the imagefilter(GRAY); // all pixels get the average value of their rgb

Image Processing

PImage myImage; //define an image objectmyImage = loadImage(“test.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the imagefilter(THRESHOLD, .45); // every pixel below .45 becomes black

Image Processing

PImage myImage; //define an image objectmyImage = loadImage(“test.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the imagefilter(INVERT); // all pixels get the opposite value of their rgb (i.e. 255-r)

Image Processing

PImage myImage; //define an image objectmyImage = loadImage("Toco Toucan.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the imagefilter(POSTERIZE, 3); // limits each channel of the image to 3 colors

Image Processing

PImage myImage; //define an image objectmyImage = loadImage("Toco Toucan.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the imagefilter(BLUR, 3); // executes a Guassian blur with radius 3.Changing it to 6 make it more blurred

Image Processing

PImage myImage; //define an image objectmyImage = loadImage("Toco Toucan.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the image

for(int y=0; y<myImage.height; y++) //for all pixels in the y directionfor(int x=0; x<myImage.width; x++){ //for all pixels in the x directioncolor myPixel = get(x,y); //get a pixel's colorint r = int(red(myPixel)); //extract the red valueint g = int(green(myPixel)); //extract the green valueint b = int(blue(myPixel)); //extract the blue valuecolor inverse = color(255-r,255-g,255-b); //make a color by inverting (255-value)set(x,y,inverse); //set the pixel’s color in the image}

Image Processing

PImage myImage; //define an image objectmyImage = loadImage(“test.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the image

for(int y=0; y<myImage.height; y++) //for all pixels in the y directionfor(int x=0; x<myImage.width; x++){ //for all pixels in the x directioncolor myPixel = get(x,y); //get a pixel's colorint r = int(red(myPixel)); //extract the red valueint g = int(green(myPixel)); //extract the green valueint b = int(blue(myPixel)); //extract the blue valuecolor inverse = color(255-r,255-g,255-b); //make a color by inverting (255-value)set(x,y,inverse); //set the pixel’s color in the image}save("Toco Toucan_inverted.jpg"); // save the image as a file

Image Processing

PImage myImage; //define an image objectmyImage = loadImage(“test.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the image

for(int y=0; y<myImage.height; y++) //for all pixels in the y directionfor(int x=0; x<myImage.width; x++){ //for all pixels in the x directioncolor myPixel = get(x,y); //get a pixel's colorint r = int(red(myPixel)); //extract the red valueint g = int(green(myPixel)); //extract the green valueint b = int(blue(myPixel)); //extract the blue valuecolor inverse = color(255-r,255-g, b); //make a color by inverting (255-value)set(x,y,inverse); //set the pixel’s color in the image}

Image Processing

PImage myImage; //define an image objectmyImage = loadImage(“test.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the image

for(int x=2; x<width-2; x++) //for all rowsfor(int y=2; y<height-2; y++){ //for all columnscolor c = get(x,y);//make sure the values fall between 0-255int xx = x+int(random(-4,4));int yy = y+int(random(-4,4));set(xx,yy,c); //color the pixel}

Image Processing

PImage myImage; //define an image objectmyImage = loadImage(“test.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the image

for(int x=2; x<width-2; x=x+6) //for all rowsfor(int y=2; y<height-2; y=y+6){ //for all columnscolor c = get(x,y);//make sure the values fall between 0-255int xx = x+int(random(-4,4));int yy = y+int(random(-4,4));fill(c);noStroke();rect(xx,yy,6,6);}

Image Processing

PImage myImage; //define an image objectmyImage = loadImage(“test.jpg"); //load itsize(myImage.width,myImage.height); //size it to fit the windowimage(myImage, 0,0); //display the image

for(int x=2; x<width-2; x=x+15) //for all rowsfor(int y=2; y<height-2; y=y+15){ //for all columnscolor c = get(x,y);//make sure the values fall between 0-255int xx = x+int(random(-4,4));int yy = y+int(random(-4,4));fill(c);noStroke();rect(xx,yy,15,15);}

Image Processing

Making a two dimentional matrix from one dimensionally distributed ( increasing or decreasing data):

0 1 2 3 4

5 6 7 8 9

10 11 12 13 14

15 16 17 18 19

0 1 2 3 4

0

1

2

3

Shape Index = 16

x Coordinate = 1 = index%5

y Coordinate= 3 = index/5

x Coordinate = index%5

y Co

ordi

nate

= in

dex/

5Data Manipulation-Manipulating Numeric Data