Introduction to Processing = Part I

Processing is a programming language designed to designers and illustrators . Was created at MIT, and is actually a subset of the Java language , but with some facilities intended for production of graphic elements , animations, interactions etc.
 
The wave of Processing is that it is a very easy language to learn . As well as other languages such as JavaScript and Python , even if you never had prior experience with programming, a few lines of code and a little reasoning can produce amazing results. And that was always your premise, since when John Maeda and his students from the MIT Media Lab have designed the project in 2001 .
 
I will talk a little basic for you to see if you also interested in the language , and who knows runs behind more information.
 
 
Starting
 
To begin with, you have to download the Processing application . It is free and available for download at http://processing.org .
It has versions for Windows, Mac and Linux . Install it and open . 

This is the main Processing window. It’s nothing more than a notebook where you write your code. Upstairs only has the play / stop buttons to rotate and stop your script, and buttons to create a new , save, open and export as application.
 
To test this, click the Play ( or press Ctrl / Cmd + R) , and Processing already opens a small window 100 x 100 pixels with a gray background . It’s one of the things he does for you, without you having written anything . Great, but we want to have control over it. Close the small window to stop the program , and write in the editor :
 
This size () function is what sets the window size . If you do not set it , it is as if he had written size (100, 100 ) ;, because these are the standard size function () values . In this case, I set the screen will have 510 x 510 pixels .
 
The function background ( ) is what sets the background color . If I put a gray in hexadecimal code, but it also accepts values for red , green and blue (RGB ) separated by commas. White background would be (255, 255, 255 ) . A single value 0-255 is also a quick way to set gray scale , 0 being black and 255 white. Press Play to see if it worked .
 
The next thing we can do is draw basic shapes on the screen …
 
size(510, 510);
background(#CCCCCC);
ellipse(200, 100, 120, 60);
rect(200, 200, 80, 80);
line(100, 300, 400, 400);
 
The Processing has many functions that create geometrical shapes such as ellipse ( ) ( ellipsis) , rect ( ) ( rectangle ) and line ( ) ( line). Each has its input syntax that tell how they will be drawn. These data are the numbers in parentheses.
 
In the case of the ellipse , we must first inform where it will be drawn , and then its size. Then the syntax is translated ellipse ( [ x coordinate ] , [ y coordinate ] , [ width ] , [height ] ) . The same is to draw the rectangle. Screen coordinates consider the upper left corner as the point (0,0) , and the unity of all this is pixels .
 
A line is basically the union between two points. So to draw one, you can simply enter the x and y coordinates of these two points. In the case , the line will draw from the point (100, 300 ) to the point (400 , 400).
So far we have not seen anything exciting super, especially with these basic shapes , with white fill and a black outline . It would be better to use MS Paint to do it !
 
To improve the appearance can change the fill color and contour …
 
size ( 510, 510 ) ;
background ( #CCCCCC ) ;
nofill ();
stroke ( 0, 0 , 255) ;
ellipse (200, 100 , 120, 60);
noStroke ();
fill ( 255, 0 , 0);
rect (200, 200, 80 , 80) ;
stroke (60, 150, 60);
strokeWeight ( 3 ) ;
line (100, 300 , 400, 400) ;
 
What we did here was to define, for every created form, fill and contour characteristics. The compiler reads the code from top to bottom, and the way it is, the program ends at the end. So this is just a list of instructions that are giving him. And note that at the end of each statement, we have to include a semicolon.
 
First will be instructed as the size and screen color. Then we say that the next so it draw will have no fill (nofill ()) and a blue outline (stroke (0, 0, 255)). Then he draws the ellipse that way, the coordinates and defined size.
 
Then we say that follows will not have contouring (noStroke ()), and the padding will be red (fill (255, 0, 0)). Then he draws the rectangle with these properties, and the coordinates and size also informed.
 
Finally, we say that the boundary will be a green (stroke (60, 150, 60)) with a thickness of 3 pixels (strokeWeight (3)). And then he makes the line with these properties, the informed coordinates.
sketching
 
So far we have done nothing that MS Paint do not, then we will continue , and begin to see how we can use these forms to create drawing tools , and justify further the use of Processing.
 
To simplify , I will work only with an ellipsis same :
 
size(510, 510);
background(#333333);
noFill();
stroke(#FFFFFF);
ellipse(255,255,100,100);
 
Notice that I positioned the ellipse in the center of the screen. So I do not have to calculate the center , can take advantage of the pre- declared variable width (width) and height (height) , to be if I want to change the screen size , I have to go back and recalculate the position of the ellipse :
 
size(510, 510);
background(#333333);
noFill();
stroke(#FFFFFF);
ellipse(width/2,height/2,100,100);
 
This already shows how Processing already offers variable ready to be used , saving you the time of having to create much used variables.
 
So far, everything we wrote was a list of pro compiler instructions, he read line by line, and at the end terminates the program . But to be any type of visual change over time , we need some type of block of code that is repeated every frame . For that we introduce two essential fun k,ctions , own the Processing : setup () and draw () .
 
Basically, the setup () function is rotated once , and is used for opening statements such as screen size , background etc. The function draw () is round in a loop, once every frame . Our code looks like this :
 
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
}
  
void draw() {
  ellipse(width/2, height/2, 100, 100);
}?

LEAVE A REPLY

Please enter your comment!
Please enter your name here