1. 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

2. 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

3. PImage MyImage; //Innitiating a PImage Variable size(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

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

5. 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

6. 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

7. You can read the color attribute of a pixel color pixelColor; pixelColor=get(x,y); Processing-PixelBase Manipulation of Images

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

17. PImage myImage; //define an image object myImage = loadImage(“test.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image Image Processing

18. PImage myImage; //define an image object myImage = loadImage(“test.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image filter(GRAY); // all pixels get the average value of their rgb Image Processing

19. PImage myImage; //define an image object myImage = loadImage(“test.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image filter(THRESHOLD,.45); // every pixel below.45 becomes black Image Processing

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

21. PImage myImage; //define an image object myImage = loadImage("Toco Toucan.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image filter(POSTERIZE, 3); // limits each channel of the image to 3 colors Image Processing

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

23. PImage myImage; //define an image object myImage = loadImage("Toco Toucan.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image for(int y=0; y<myImage.height; y++) //for all pixels in the y direction for(int x=0; x<myImage.width; x++){ //for all pixels in the x direction color myPixel = get(x,y); //get a pixel's color int r = int(red(myPixel)); //extract the red value int g = int(green(myPixel)); //extract the green value int b = int(blue(myPixel)); //extract the blue value color 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

24. PImage myImage; //define an image object myImage = loadImage(“test.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image for(int y=0; y<myImage.height; y++) //for all pixels in the y direction for(int x=0; x<myImage.width; x++){ //for all pixels in the x direction color myPixel = get(x,y); //get a pixel's color int r = int(red(myPixel)); //extract the red value int g = int(green(myPixel)); //extract the green value int b = int(blue(myPixel)); //extract the blue value color 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

25. PImage myImage; //define an image object myImage = loadImage(“test.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image for(int y=0; y<myImage.height; y++) //for all pixels in the y direction for(int x=0; x<myImage.width; x++){ //for all pixels in the x direction color myPixel = get(x,y); //get a pixel's color int r = int(red(myPixel)); //extract the red value int g = int(green(myPixel)); //extract the green value int b = int(blue(myPixel)); //extract the blue value color 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

26. PImage myImage; //define an image object myImage = loadImage(“test.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image for(int x=2; x<width-2; x++) //for all rows for(int y=2; y<height-2; y++){ //for all columns color c = get(x,y); //make sure the values fall between 0-255 int xx = x+int(random(-4,4)); int yy = y+int(random(-4,4)); set(xx,yy,c); //color the pixel } Image Processing

27. PImage myImage; //define an image object myImage = loadImage(“test.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image for(int x=2; x<width-2; x=x+6) //for all rows for(int y=2; y<height-2; y=y+6){ //for all columns color c = get(x,y); //make sure the values fall between 0-255 int xx = x+int(random(-4,4)); int yy = y+int(random(-4,4)); fill(c); noStroke(); rect(xx,yy,6,6); } Image Processing

28. PImage myImage; //define an image object myImage = loadImage(“test.jpg"); //load it size(myImage.width,myImage.height); //size it to fit the window image(myImage, 0,0); //display the image for(int x=2; x<width-2; x=x+15) //for all rows for(int y=2; y<height-2; y=y+15){ //for all columns color c = get(x,y); //make sure the values fall between 0-255 int xx = x+int(random(-4,4)); int yy = y+int(random(-4,4)); fill(c); noStroke(); rect(xx,yy,15,15); } Image Processing

29. Making a two dimentional matrix from one dimensionally distributed ( increasing or decreasing data): 01234 56789 1011121314 1516171819 01234 0 1 2 3 Shape Index = 16 x Coordinate = 1 = index%5 y Coordinate= 3 = index/5 x Coordinate = index%5 y Coordinate = index/5 Data Manipulation-Manipulating Numeric Data