1 / 92

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.

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

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

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

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

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

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

  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 filter(THRESHOLD, .45); // every pixel below .45 becomes black

  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(INVERT); // all pixels get the opposite value of their rgb (i.e. 255-r)

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

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

  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 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 }

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

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

  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 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 }

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

  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=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); }

  26. Image Processing- PixelAnalysis Code by Kostas Terzidis PImage MyImage = loadImage("Map.jpg"); size(MyImage.width, MyImage.height); image(MyImage,0,0); 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); float r = red(c); //create a formula here float g = green(c); //create a formula here float b = blue(c); //create a formula here //Select range of colors that represent vegetation if(r>11 && g>26 && b>19 && r<117 && g<133 && b<96){ set(x,y,color(255)); //color the pixel } }

  27. Image Processing- PixelAnalysis Code by Kostas Terzidis PImage MyImage = loadImage("Map.png"); size(MyImage.width, MyImage.height); image(MyImage,0,0); int k=0; //counter to count vegetation 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); float r = red(c); //create a formula here float g = green(c); //create a formula here float b = blue(c); //create a formula here //Select range of colors that represent vegetation if(r>11 && g>26 && b>19 && r<117 && g<133 && b<96){ set(x,y,color(255)); //color the pixel k++; //count the green pixels } } print(k*1./(width*height) ); // 0.41729397

  28. Code by Kostas Terzidis int [] xd = {0,1,1,1,0,-1,-1,-1,0}; int [] yd = {1,1,0,-1,-1,-1,0,1,1}; PImage MyImage = loadImage("MapFootPrint.jpg"); size(MyImage.width,MyImage.height); image(MyImage, 0,0); int [][] MyCopy = new int[width][height];

  29. int [] xd = {0,1,1,1,0,-1,-1,-1,0}; int [] yd = {1,1,0,-1,-1,-1,0,1,1}; PImage MyImage = loadImage("MapFootPrint.jpg"); size(MyImage.width,MyImage.height); image(MyImage, 0,0); int [][] MyCopy = new int[width][height]; for(int x=1; x<width-1; x++) for(int y=1; y<height-1; y++){ int b=0; int a=0; //checking the pixel neiborhood for(int i=0; i<8; i++){ if(brightness(get(x+xd[i],y+yd[i]))<100) b++; if(brightness(get(x+xd[i],y+yd[i]))<100 && brightness(get(x+xd[i+1],y+yd[i+1]))>100) a++; } // filling the copy if((b>=2 && b<=6) || a==1 ) MyCopy[x][y]=1; else MyCopy[x][y]=0; } //Paint the screen for(int x=1; x<width-1; x++) for(int y=1; y<height-1; y++){ if(MyCopy[x][y]==1) set(x,y,color(0,0,0)); else set(x,y,color(255,255,255)); } Code by Kostas Terzidis

  30. int [] xd = {0,1,1, 1, 0,-1,-1,-1,0}; int [] yd = {1,1,0,-1,-1,-1, 0, 1,1}; PImage MyImage; int [][] MyCopy; void setup(){ MyImage = loadImage("MapFootPrint.jpg"); size(MyImage.width,MyImage.height); MyCopy = new int[width][height]; image(MyImage, 0,0); filter(THRESHOLD); initialize(); for(int g=0; g<35; g++) skeletonize(); save("MyImage.jpg"); } void skeletonize(){ for(int x=1; x<width-2; x++) for(int y=2; y<height-1; y++){ //if(getBinary(x,y)==0){ int b=0; int a=0; for(int i=0; i<8; i++){ if(getBinary(x+xd[i],y+yd[i])==1)b++; if(getBinary(x+xd[i],y+yd[i])==0 && getBinary(x+xd[i+1],y+yd[i+1])==1) a++; } int a2=0; for(int i=0; i<8; i++) if(getBinary(x+xd[i],y+1+yd[i])==0 && getBinary(x+xd[i+1],y+1+yd[i+1])==1) a2++; int c2 = getBinary(x,y+1) * getBinary(x+1,y) * getBinary(x-1,y); int a3=0; for(int i=0; i<8; i++) if(getBinary(x+1+xd[i],y+yd[i])==0 && getBinary(x+1+xd[i+1],y+yd[i+1])==1) a3++; int c3=getBinary(x,y+1) * getBinary(x+1,y) * getBinary(x,y-1); if((2<=b && b<=6) && a==1 && (c2==0 || a2!=1) && (c3==0 || a3!=1)) if(getBinary(x,y)==1)MyCopy[x][y]=0; } update(); } void update(){ for(int x=1; x<width-1; x++) for(int y=1; y<height-1; y++) if(MyCopy[x][y]==1) set(x,y,color(0,0,0)); //black else set(x,y,color(255,255,255)); //white } void initialize(){ for(int x=0; x<width; x++) for(int y=0; y<height; y++) MyCopy[x][y] = getBinary(x,y); } int getBinary(int x,int y){ if(brightness(get(x,y))>128) return 0; else return 1; } Code by Kostas Terzidis

  31. Processing-Pattern Making Save Graphics to Raster File save(filename); saveFrame(); These two functions save files in the same directory as the processing sketch itself

  32. Processing-Randomness-Pattern Making Saving Graphics to Image File size(400,400); noStroke(); background(50,200,200); for(int x=0;x<400;x=x+10){ for(int y=0;y<400;y=y+10){ fill(int(random(255))); int dimension=int(random(3,10)); ellipse(x,y,dimension,dimension); } } save("Random_Pattern.jpg");

  33. Processing-Randomness-Pattern Making Saving Graphics to File-Multiple Frames void setup(){ size(400,400); noStroke(); background(50,200,200); frameRate(1); } void draw(){ background(50,200,200); for(int x=0;x<400;x=x+10){ for(int y=0;y<400;y=y+10){ fill(int(random(255))); int dimension=int(random(3,10)); ellipse(x,y,dimension,dimension); } } save("Random_Pattern"+frameCount+".jpg"); //or saveFrame(); }

  34. Processing-Pattern Making Save Graphics to Vector File beginRecord(fileFormat,fileName); endRecord(); import processing.pdf.*; // or import processing.dxf.*; void setup() { size(400, 400); beginRecord(PDF, "everything.pdf"); //or beginRecord(DXF, "everything.pdf"); } void draw() { rect(mouseX, mouseY,10,10); } void keyPressed() { if (key == ' ') { endRecord(); exit(); } }

  35. Processing- Writing Datasets to File createWriter(textfilename); PrintWriter output; void setup() { // Create a new file in the sketch directory output = createWriter("positions.txt"); } void draw() { point(mouseX, mouseY); output.println(mouseX+ ","+mouseY); // Write the coordinate to the file } void keyPressed() { output.flush(); // Writes the remaining data to the file output.close(); // Finishes the file exit(); // Stops the program }

  36. Processing- Reading Datasets from File loadStrings(textfilename); int i=0; public String [] lines; void setup(){ lines= loadStrings("positions.txt");//this file should be in the same directory as the processing sketch println("there are " + lines.length + " lines"); for (int i=0; i < lines.length; i++) { println(lines[i]); } background(255); } void draw(){ if(i>lines.length) exit(); String[]pointPosition = split(lines[i],','); println("ok"); int x = int(pointPosition[0]); int y = int(pointPosition[1]); point(x,y); delay(250); i=i+1; }

  37. Data Manipulation- Exporting Data and Graphics

  38. Processing- Runtime Memory-Tracking Attributes Using Arrays void setup(){ size(400,400); for(int i=0; i<100 ; i++){ float px=random(0,400); float py=random(0,400); rect(px,py,5,5); } } void draw(){ }

  39. Processing- Runtime Memory-Tracking Attributes Using Arrays float[] px=new float[100]; float[] py=new float[100]; void setup(){ size(400,400); for(int i=0; i<100 ; i++){ px[i]=random(0,400); py[i]=random(0,400); rect(px[i],py[i],5,5); } } void draw(){ }

  40. Processing- Runtime Memory-Tracking Attributes Using Arrays float[] px=new float[100]; float[] py=new float[100]; void setup(){ size(400,400); for(int i=0; i<100 ; i++){ px[i]=random(0,400); py[i]=random(0,400); rect(px[i],py[i],5,5); } } void draw(){ background(200); for( int i=0;i<100;i++){ if(dist(mouseX,mouseY,px[i],py[i])<20) stroke(255,0,0); else stroke(0,0,0); rect(px[i],py[i],5,5); } } void mouseDragged(){ for( int i=0;i<100;i++){ if(dist(mouseX,mouseY,px[i],py[i])<20){ px[i]=mouseX; py[i]=mouseY; } } }

  41. Runtime Memory-Tracking Attributes Using Arrays float [] px; float [] py; void setup(){ makePolygon(7); } void makePolygon(int n){ px = new float[n+1]; py = new float[n+1]; float angle = 2 * PI / n; beginShape(POLYGON); for(int i=0; i<px.length; i++){ px[i] = 50. + 30. * sin(angle*i); py[i] = 50. + 30. * cos(angle*i); vertex(px[i],py[i]); } endShape(); } void draw(){ background(200); beginShape(POLYGON); for(int i=0; i<px.length; i++) vertex(px[i],py[i]); endShape(); } void mouseDragged(){ for(int i=0; i<px.length; i++) if(dist(mouseX,mouseY,px[i],py[i])<10){ px[i] = mouseX; py[i] = mouseY; } }

  42. random(parameter); random(min,max); Processing-Randomness void setup(){ frameRate(1); } void draw(){ float x=random(0,100); float y=random(0,100); println("X,Y= "+x+" , "+y); }

  43. Processing-Poetics of Randomness Diagram by Kostas Terzidis • A point with static attributes • A point with parametric attributes • A point with random location: • Vagueness in attributes • 4. A point with randomness of existence

  44. random(high); random(low,high); Processing-Randomness void setup(){ } void draw(){ float x=random(0,100); float y=random(0,100); println("X,Y= "+x+" , "+y); int pointX=int(x); int pointY=int(y); point(pointX,pointY); }

  45. Randomness Computer programs can generate random patterns The random( ) function is used to create unpredictable values within the range specified by its parameters. random(high); random(low, high) ; 3. When one parameter is passed to the function, it returns a float from zero up to –but not including the value of the parameter. For example; random(5.0) can return a float number between 0 and 5, including zero but not 5. 4. If two parameters are used, the function returns a value between the two parameters. Running random( -5.0, 10.2) returns values from -5.0 up to 10.2

  46. Randomness Computer programs can generate random patterns The random( ) function is used to create unpredictable values within the range specified by its parameters. random(high); random(low, high) ; 3. When one parameter is passed to the function, it returns a float from zero up to –but not including the value of the parameter. For example; random(5.0) can return a float number between 0 and 5, including zero but not 5. 4. If two parameters are used, the function returns a value between the two parameters. Running random( -5.0, 10.2) returns values from -5.0 up to 10.2 for (int i = 1; i<11; i++) { print( "Try Number " + i + "= "); println(random(2)); }

  47. Randomness Computer programs can generate random patterns The random( ) function is used to create unpredictable values within the range specified by its parameters. random(high); random(low, high) ; 3. When one parameter is passed to the function, it returns a float from zero up to –but not including the value of the parameter. For example; random(5.0) can return a float number between 0 and 5, including zero but not 5. 4. If two parameters are used, the function returns a value between the two parameters. Running random( -5.0, 10.2) returns values from -5.0 up to 10.2 for (int i = 1; i<11; i++) { print( "Try Number " + i + "= "); println(random(-5.0,10.2)); }

  48. Randomness Because the numbers returned from random( ) are not predictable, each time the program is run, the result is different. The numbers from this function can be used to generate random graphical patterns and compositions smooth (); strokeWeight(10); stroke(0,130); for (int i=0; i<5;i++) { line(0, random(100), 100, random(100)); }

More Related