1 / 29

Processing-Using Image Files

Processing-Using Image Files. 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.

calvin
Download Presentation

Processing-Using Image Files

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Processing-Using Image Files 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.

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

  3. Processing-Using Image Files 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);

  4. 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 right for (int i = 0; i <=20; i++) { image(img, i*10, 0,200,200); }

  5. 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. You are able to manipulate graphics and visual constructs via manipulating their pixels.

  6. Processing-PixelBase Manipulation of Images 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

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

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

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

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

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

  12. Processing-Pixel Base 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.

  13. Image Processing 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); }

  14. 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)); }

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

  16. Image Processing 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

  17. Image Processing 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

  18. Image Processing 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

  19. Image Processing 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)

  20. Image Processing 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

  21. Image Processing 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

  22. Image Processing 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 }

  23. Image Processing 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

  24. Image Processing 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 }

  25. Image Processing 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 }

  26. Image Processing 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); }

  27. Image Processing 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); }

  28. Data Manipulation-Manipulating Numeric Data Making a two dimentional matrix from one dimensionally distributed ( increasing or decreasing data): x Coordinate = index%5 0 1 2 3 4 0 1 2 3 4 Shape Index = 16 x Coordinate = 1 = index%5 y Coordinate= 3 = index/5 0 5 6 7 8 9 y Coordinate = index/5 1 10 11 12 13 14 2 15 16 17 18 19 3

More Related