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.

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

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

PImage MyImage = loadImage("Map.jpg");size(MyImage.width, MyImage.height);image(MyImage,0,0);

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);float r = red(c); //create a formula herefloat g = green(c); //create a formula herefloat b = blue(c); //create a formula here//Select range of colors that represent vegetationif(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 vegetationfor(int x=2; x<width-2; x++) //for all rowsfor(int y=2; y<height-2; y++){ //for all columnscolor c = get(x,y);float r = red(c); //create a formula herefloat g = green(c); //create a formula herefloat b = blue(c); //create a formula here//Select range of colors that represent vegetationif(r>11 && g>26 && b>19 && r<117 && g<133 && b<96){set(x,y,color(255)); //color the pixelk++; //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 neiborhoodfor(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 copyif((b>=2 && b<=6) || a==1 )MyCopy[x][y]=1;elseMyCopy[x][y]=0;}//Paint the screenfor(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));elseset(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)); //blackelseset(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;elsereturn 1;}

Code by Kostas Terzidis

File based Input/Output

input from File Reading data sets from file loadStrings(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 MakingSave Graphics to Raster File

save(filename);saveFrame();

These two functions save files in the same directory as the processing sketch itself

Processing-Randomness-Pattern MakingSaving 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 MakingSaving 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 MakingSave 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 FileloadStrings(textfilename);

int i=0;public String [] lines;void setup(){lines= loadStrings("positions.txt");//this file should be in the same directory as the processing sketchprintln("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

Arraysfloat[] 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);

Randomness1. Computer programs can generate random patterns2. 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

Randomness1. Computer programs can generate random patterns2. 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));}

Randomness1. Computer programs can generate random patterns2. 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));}

Randomness1. 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 compositionssmooth (); strokeWeight(10);stroke(0,130);for (int i=0; i<5;i++){line(0, random(100), 100, random(100)); }

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

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

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

Randomness1. 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 Randomnessvoid 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 MakingControlled 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,dimensionFactor*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 MakingControlled 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 MakingControlled 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 happenssize(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

widthheight

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

Processing-Environment

frameRate();frameCount

Debugging and Error FindingIf 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 FindingIf 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 GridBy 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 GridBy 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 gridrotate(PI/12);//rotates the gridscale(2);//scales the gridfor(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 matrixtranslate(33,0);rect(0, 20, 66, 30);popMatrix(); //Retrieve the saved Gridrect(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 originrect(0, 0, 70, 20);//it results in rotation of the rectangular//around its upper left corner which happens to be at the originrotate(-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);elsefill(100);rect(xx, yy, 7, 7 );}}

Useful Codes-Defining an area around mouse

Code by Kostas Terzidis

Using Trigonometry to make patterns1. 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 p/2.

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) ; fill(0); rect(x, y, 2, 4); angle += angleInc; }

Using Trigonometry to make patterns1. 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 patterns1. 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 patterns1. 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() Function1. 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() Function1. 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 radianfloat end = begin + (PI/2); arc(67, 37, i, i, begin, end);

Drawing Spirals1. 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 Spirals1. 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 coordinatefor (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 lineradius = radius * 1.05; //increases the radius for the next looppx = x; // the new point becomes the old point to be used for the next looppy = y; // the new point becomes the old point to be used for the next loop}