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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 } 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 Image Processing- PixelAnalysis 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]; 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]; 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

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

File based Input/Output input from File Reading data sets from fileloadStrings(textfilename); Output to File Output as a raster image)save()saveFrame()output as a vector imagebeginRecord()endRecord() output as text file of data sets createWriter(textfilename)flush();close();

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

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

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

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

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 }

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

Data Manipulation- Exporting Data and Graphics

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(){ }

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(){ }

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

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; } Runtime Memory-Tracking Attributes Using Arrays

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

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

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); } Processing-Randomness random(high); random(low,high);

Randomness 1.Computer programs can generate random patterns 2.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

Randomness 1.Computer programs can generate random patterns 2.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)); }

Randomness 1.Computer programs can generate random patterns 2.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)); }

Randomness 1.Because the numbers returned from random( ) are not predictable, each time the program is run, the result is different. 2.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)); }

Randomness 1.The version of random() with two parameters provides more control over the results of the function. The previous example has been modified so the lines always progress from the upper-left to the lower- right, but the precise position is a chance operation. 2.Storing the results of random ( ) into a variable makes it possible to use the value more than once in the program. smooth (); strokeWeight(10); stroke(0,130); float r; for (int i=0; i<5;i++) { r = random(5, 45); stroke(r * 5.6, 230); line(0, r, 100, random(55, 95)); }

Randomness 1.Using random() within a for structure is an easy way to generate random numbers. background(0); stroke(255, 60); for (int i = 0; i<50; i++) { float r = random(10); strokeWeight(r) ; float offset = r * 20; line(i-20,100, i+offset, 0); }

Randomness 1.To use random values to determine the flow of the program, you can place the random ( ) function in a relational expression. In the example below, either a line or an ellipse is drawn, depending on whether the result of the random() function is less than 50 or greater than or equal to 50, respectively. float r = random(100); if (r < 50.0) { line(0,0,100,100); } else { ellipse(50, 50, 75, 75); }

Randomness 1.In the example below,, between 1 and 50 vertical lines are drawn according to the result of the random ( ) function that is passed as a part of the test condition of a for loop int num = int(random(50)) + 1; for (int i = 0; i < num; i++) { line(i * 2, 0, i * 2, 100); }

Processing-Randomness-Pattern Making 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); }

Processing-Controlled Randomness void setup(){ background(255); } void draw(){ background(255); for(int i=0; i<1000;i++){ int x=int(random(0,100)); int y=int(random(0,100)); point(x,y); } void setup(){ background(255); } void draw(){ background(255); for(int i=0; i<100;i++){ int x=int(random(-25,25)); int y=int(random(-25,25)); if (pow(x*x+y*y,0.5)<25) point(mouseX+x,mouseY+y); }

Processing-Randomness-Pattern Making Controlled Randomness void setup(){ size(400,400); noStroke(); background(50,200,200); frameRate(1); } void draw(){ background(50,200,200); for(int x=5;x<400;x=x+15){ for(int y=5;y<400;y=y+15){ fill(int(random(255))); int dimensionFactor=int(random(3,10)); int scaleFactor=int(1+random((x+y)/200.0)); ellipse(x,y,dimensionFactor*scaleFactor,dimens ionFactor*scaleFactor); }

int num = 3000; int [] px = new int[num]; int [] py = new int[num]; void setup(){ for(int i=0; i<num; i++){ px[i] = (int)random(100); py[i] = (int)random(100); } void draw(){ background(200); for(int i=0; i<num; i++){ px[i] = px[i] + int(random(-2,2)); py[i] = py[i] + int(random(-2,2)); constrain(px[i],0,100); constrain(py[i],0,100); point(px[i],py[i]); } Processing-Randomness-Pattern Making Controlled Randomness

int num = 3000; int [] px = new int[num]; int [] py = new int[num]; void setup(){ for(int i=0; i<num; i++){ px[i] = 0; py[i] = 0; } void draw(){ background(200); for(int i=0; i<num; i++){ px[i] = px[i] + int(random(-2,2)); py[i] = py[i] + int(random(-2,2)); constrain(px[i],0,100); constrain(py[i],0,100); point(px[i],py[i]); } Processing-Randomness-Pattern Making Controlled Randomness

//Using the width and height variables is useful when writing a program to scale to //different sizes. This technique allows a simple change to the parameters of size( ) //to alter the dimensions and proportions of a program // The measurements of the graphics is relative to the display size //change the size of the display to 200*200 and see what happens size(100, 100); ellipse(width*0.5, height*0.5, width*0.66, height*0.66); line(width*0.5,0, width*0.5, height); line(0, height*0.5, width, height*0.5); Processing-Environment width height

void setup(){ frameRate(1); } void draw(){ println(frameCount); } Processing-Environment frameRate(); frameCount

Debugging and Error Finding If you are running a piece of code that has a syntax error or an error in the use of different commands, the Processing engine while give an error along with the hind of possible location of an error and suggestions how to fix it: 1.

Debugging and Error Finding If the program is behaving in an unexpected way, use println() command to print different variables into the console to find out the reason

Transforming the Grid By default processing uses a virtual coordinate system that uses the upper left corner of the display window as the origin with the x-coordinates increasing horizontallt to the right and y- coordinates increasing vertically downward. You can transform, scale and rotate this grid. As a result the same sets of commands drawing to the display window will result in different positioning, scaling and orientation of the graphics on the display window: pushMatrix(); translate(x,y); rotate(angle); scale(scaleFactor); popMatrix();

Transforming the Grid By default processing uses a virtual coordinate system that uses the upper left corner of the display window as the origin with the x-coordinates increasing horizontallt to the right and y- coordinates increasing vertically downward. You can transform, scale and rotate this grid. As a result the same sets of commands drawing to the display window will result in different positioning, scaling and orientation of the graphics on the display window: size (500,500); for(int i =-100; i<=200;i+=10) { line(i,-100,i,200); line(-100,i,200,i); } fill(0); stroke(200,0,0); rect(50,50,30,30); translate(15,30);//moves the grid rotate(PI/12);//rotates the grid scale(2);//scales the grid for(int i =-100; i<=200;i+=10) { line(i,-100,i,200); line(-100,i,200,i); } fill(0); rect(50,50,30,30);

1.· The pushMatrix() function records the current state of all transformations so that a program can return to it later. To return to the previous state, use popMatrix() rect(0, 20, 66, 30); rect(0, 50, 66, 30); translate(33,0); rect(0, 20, 66, 30); rect(0, 50, 66, 30); pushMatrix(); //Save the current matrix translate(33,0); rect(0, 20, 66, 30); popMatrix(); //Retrieve the saved Grid rect(0, 50, 66, 30); Transforming the Grid-Saving/Retrieving Base Grid

The rotate () function rotates the coordinate system so that shapes can be drawn to the screen at an angle. · It has one parameter that sets the amount of the rotation as an angle: rotate(angle); 1. The rotate function assumes that the angle is specified in units of radians 2. The affects are accumulating every time that you apply the function. 3. You can make different angles by using PI which is a constant in processing representing p which equals to an angle of 180 degree. size (150,100); smooth ( ); rect(5,70,70,20); rotate(-PI/16); rect(5,70,70,20); rotate(-PI/16); rect(5,70,70,20); rotate(-PI/16); rect(5,70,70,20); rotate(-PI/16); rect(5,70,70,20); Transforming the Grid-Rotating Base Grid

These simple examples demonstrate the potential in combining transformations: translate(10, 60);//moving of the origin of coordinate system rect(0, 0, 70, 20);// rotate(-PI/12); // the coordinate system rotates around its origin rect(0, 0, 70, 20); //it results in rotation of the rectangular //around its upper left corner which happens to be at the origin rotate(-PI/6); rect(0, 0, 70, 20); Transforming Grid-Combining Transform /Rotate

These simple examples demonstrate the potential in combining transformations: //If you want to rotate around a specific point //first you should translate the grid to that specific point //the translated origin would be the base //that scale and rotation with use as point of reference translate(45, 60); rect(-35, -5, 70, 10); rotate(-PI/8); rect(-35, -5, 70, 10); rotate(-PI/8); rect(-35, -5, 70, 10); rotate(-PI/8); rect(-35, -5, 70, 10); rotate(-PI/8); Transforming Grid-Combining Transform /Rotate

The scale( ) function magnifies the coordinate system so that shapes are drawn larger or smaller. It has one or two parameters to set the amount of increase or decrease: scale(size); scale(xsize,ysize); The affects are accumulating every time that you apply the function. size (300,200); smooth ( ); rect(10,20,70,20); scale(1.5); rect(10,20,70,20); scale(1.5); rect(10,20,70,20); scale(1.5); rect(10,20,70,20); scale(1.5); Transforming Grid-Scale

These simple examples demonstrate the potential in combining transformations: noFill() ; translate(10, 20); rect(0, 0, 20, 10); scale(2.2); rect(0, 0, 20, 10); scale(2.2); rect(0, 0, 20, 10); scale(2.2); Transforming Grid-Combining Transform /Scale

These simple examples demonstrate the potential in combining transformations: noFill() ; translate(50, 30); rect(-10,5,20,10); scale(1.5); rect(-10,5,20,10); scale(1.5); rect(-10,5,20,10); scale(1.5); rect(-10,5,20,10); scale(1.5); Transforming Grid-Combining Transform /Scale

The effects of the transformation functions accumulate throughout the program, and these effects can be magnified with a for structure: background(0); smooth(); stroke(255, 120); translate(66, 33); // Set initial offset for (int i = 0; i < 18; i++) //18 repetitions { strokeWeight(i); // Increase stroke weight rotate (PI /12) ;// Accumulate the rotation line(0, 0, 55, 0); } Transforming Grid-Combining Transform ations

The effects of the transformation functions accumulate throughout the program, and these effects can be magnified with a for structure: background(0); smooth(); fill(255, 48); noStroke(); translate(33,66); for (int i = 0; i < 12; i++) { scale(1.2); ellipse(4, 2, 20, 20); } Transforming Grid-Combining Transform ations

size(700,500); for(int i=0; i<7000; i++){ pushMatrix(); translate(random(width),random(height)); rotate(radians(random(360))); rect(0,0,4,30); popMatrix(); } Random Transformation of the Grid Code by Kostas Terzidis

void setup(){ size(700,500); for(int i=0; i<7000; i++){ pushMatrix(); translate(random(width),random(height)); rotate(radians(random(360))); rect(0,0,8,60); popMatrix(); } void draw(){ fill(100,100,100,100); pushMatrix(); translate(mouseX,mouseY); rotate(radians(random(360))); rect(0,0,8,60); popMatrix(); } Interactive/Random Transformation of the Grid

sin(angleinRadians) and cos(angleinRadians) float a = sin(PI); degrees() and radians() float a = sin(radians(90)) Useful Functions

size(720,100); for(int t=0; t<720; t++){ point(t,sin(radians(t))*30+50); } size(720,100); for(int t=0; t<720; t++){ point(t,sin(radians(t*3))*30+50); } Useful Functions

//Animation and Interaction void setup() { // Any set up related command that is run just once comes here } void draw() { // Any command that needs to run continuously comes here } Useful Codes

void setup(){ size(300,100); } int i=0; void draw(){ background(200); line(i%300,0,i%300,100); i++; } Useful Codes-Animating a line through time

int dir=1; int lineColor=0; void setup() { size(300,100); background(255); } int i=0; void draw() { stroke(lineColor); background(255); line(i,0,i,300); i=i+dir; if (i>300 || i<1) { dir=-dir; } Useful Codes-Animating a line back and forth

void setup() { size(300,100); } void draw() { background(255); line(mouseX,0,mouseX,100); println(mouseX); } Useful Codes-Making A dial

int num_floors = 40; int num_panels = 28; void setup(){ size(400,600); // Facade } void draw(){ for(int x=0; x<num_panels; x++) for(int y=0; y<num_floors; y++){ int xx = 100+x*7; int yy = 20+y*14; float d = dist(xx,yy, mouseX, mouseY); if(d<100)fill(255-d); else fill(100); rect(xx, yy, 7, 7 ); } Useful Codes-Defining an area around mouse Code by Kostas Terzidis

Using Trigonometry to make patterns 1. sin() function gets the angle in radiant and gives back a number between -1 and 1 as a result. size(700,100); noStroke(); fill(0); float angle = 0.0; for ( int x=0;x<=width;x+=5){ float y=50+(sin(angle)*35.0); rect(x,y,2,4); angle+=PI/40.0; }

Using Trigonometry to make patterns 1.The cos( ) function returns values in the same range and pattern as sin( ). But the numbers are offset by  size(700, 100); noStroke(); smooth(); float offset = 50.0; float scaleVal = 20.0; float angleInc = PI/18.0; float angle= 0.0; for (int x = 0; x <= width; x += 5) { float y = offset + (sin(angle) * scaleVal); fill(255); rect(x, y, 2, 4); y=offset + (cos(angle) * scaleVal); fill(0) ; rect(x, y, 2, 4); angle += angleInc; }

Using Trigonometry to make patterns 1.Making complex patterns size(700, 100); smooth(); strokeWeight(2); float offset = 126.0; float scaleVal = 126.0; float anglelnc = 0.42; float angle = 0.0; for (int x = -52; x <= width; x += 5) { float y = offset + (sin(angle) * scaleVal); stroke(y); line(x, 0, x+50, height); angle += anglelnc; }

Using Trigonometry to make patterns 1.Making complex patterns size(700, 100); smooth(); fill(255, 20); float scaleVal = 18.0; float anglelnc = PI/28.0; float angle = 0.0; for (int offset = -10; offset < width+10; offset += 5) { for (int y = 0; y <= height; y += 2) { float x = offset + (sin(angle) * scaleVal); noStroke () ; ellipse(x, y, 10, 10); stroke(0); point(x, y); angle += anglelnc; } angle += PI; }

Using Trigonometry to make patterns 1.Circles can be drawn from sin() and cos() functions. The example below has an angle that increments by 12°, all the way up to 360°. On each step, the cos () value of the angle is used to draw the x-coordinate, and the sin( ) value draws the y-coordinate. Because sin() and cos () return numbers between -1.0 and 1.0, the result is multiplied by the radius variable to draw a circle with radius 38. Adding 50 to the x and y positions sets the center of the circle at (50,50). noStroke(); smooth(); int radius = 38; for (int deg = 0; deg < 360; deg += 12) { float angle = radians(deg);//this converts the value of the angle from degree to radian float x = 50 + (cos(angle) * radius); // cos() gives us the base for y coordinate float y = 50 + (sin(angle) * radius); //sin() gives us the base for x coordinate ellipse(x, y, 6, 6); }

Drawing arc with arc() Function 1.To simplify drawing arcs, Processing includes an arc () function: Arc(x, y, width, height, startAngle, stopAngle) ; 2. The start and stop parameters specify the angles needed to draw the arc form in units of radians. The following examples show the function in use: strokeWeight(2); arc(50, 55, 50, 50, 0, PI/2); arc(50, 55, 60, 60, PI/2, PI); arc(50, 55, 70, 70, PI, (2*PI)-(PI/2)); noFill() ; arc(50, 55, 80, 80, (2*PI)-(PI/2), 2*PI);

Drawing arc with arc() Function 1.To simplify drawing arcs, Processing includes an arc () function: Arc(x, y, width, height, startAngle, stopAngle) ; 2. The start and stop parameters specify the angles needed to draw the arc form in units of radians. The following examples show the function in use: smooth(); noFill(); strokeWeight(10); stroke (0, 150); for (int i = 0; i < 160; i += 10) { float begin = radians(i); //changing the angle from degree to radian float end = begin + (PI/2); arc(67, 37, i, i, begin, end);

Drawing Spirals 1.To create a spiral, multiply the sin() and cos() values by increasing or decreasing radius values: noStroke(); smooth(); float radius = 1.0; for (int deg = 0; deg < 360*6; deg += 11) { float angle = radians(deg); float x = 75 + (cos(angle) * radius); float y = 42 + (sin(angle) * radius); ellipse(x, y, 6, 6); radius = radius + 0.34; }

Drawing Spirals 1.To create a spiral, multiply the sin() and cos() values by increasing or decreasing radius values: smooth(); float radius= 0.15; float cx = 33; // Center x- and y-coordinates float cy = 66; float px=cx; // Start with center as the previous coordinate float py = cy; // Start with center as the previous coordinate for (int deg=0 ; deg < 360*5; deg += 12) { float angle = radians(deg);// change the angle from radians to degree float x = cx + (cos(angle) * radius); float y = cy + (sin(angle) * radius); line(px, py, x, y); //draw a line from the previous line to the new line radius = radius * 1.05; //increases the radius for the next loop px = x; // the new point becomes the old point to be used for the next loop py = y; // the new point becomes the old point to be used for the next loop }

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback