Intro to the Processing Software
Intro: Intro to the Processing Software
I just discovered this free, open source software called Processing. It's quite easy to use, exportable as Java applets, or as independent programs on any of the three main OS (Mac, Linux, Windoze). It's easy to create interactive generative art or other programs. It's also a lot of fun just to play around in.
Below is a screencap from a program i wrote yesterday. Code will be revealed later
My first 'ible BTW, so shoot me criticisms if need be.
Below is a screencap from a program i wrote yesterday. Code will be revealed later
My first 'ible BTW, so shoot me criticisms if need be.
STEP 1: Get the Software!
STEP 2: Lets Start!
Ok, lets get started. Like most software, there are variables, and loops. These are the main thing's I've used in the few programs I've written, so we'll start with them.
First: the setup.
paste this in the sketch window.
void setup(){
size(600,600) ; //window size
background(0) ; //background black
ellipseMode(CENTER); //center ellipses
}
Now, as with most languages, capitalization is important, so be mindful. The system comands will change color (on my computer, commands {void, setup, ellipseMode} turn orange, and system variables {CENTER, width, height, mouseX, mouseY} turn blueish).
Comments: in most software you can put a tag before a line, and the computer will ignore it. This is so you can comment your code. Please comment your code. That way, when you open it up a few weeks after you've written it, you remember why you did something a particular way, and can remember how the program works. In Processing, the comment tag is //
The semicolons are important! They signify the end of a command. If you leave one off, the code will break.
If you screw something up there's a black bar across the bottom of the window called the Debug Window. this will tell you what you've done wrong, and highlight where you did it wrong in the code (see the picture).
basically what this has done has said: "when I run this program, open a widow 600x600 pixels, and if I draw an ellipse, I'll specify the center point, not a corner"
If you run at this point (press the play button), a new window will open, with a black background, which is 600x 600 pixels.
First: the setup.
paste this in the sketch window.
void setup(){
size(600,600) ; //window size
background(0) ; //background black
ellipseMode(CENTER); //center ellipses
}
Now, as with most languages, capitalization is important, so be mindful. The system comands will change color (on my computer, commands {void, setup, ellipseMode} turn orange, and system variables {CENTER, width, height, mouseX, mouseY} turn blueish).
Comments: in most software you can put a tag before a line, and the computer will ignore it. This is so you can comment your code. Please comment your code. That way, when you open it up a few weeks after you've written it, you remember why you did something a particular way, and can remember how the program works. In Processing, the comment tag is //
The semicolons are important! They signify the end of a command. If you leave one off, the code will break.
If you screw something up there's a black bar across the bottom of the window called the Debug Window. this will tell you what you've done wrong, and highlight where you did it wrong in the code (see the picture).
basically what this has done has said: "when I run this program, open a widow 600x600 pixels, and if I draw an ellipse, I'll specify the center point, not a corner"
If you run at this point (press the play button), a new window will open, with a black background, which is 600x 600 pixels.
STEP 3: Draw a Circle!
ok, after the setup, lets tell it to draw!
paste this in to the sketch after the setup.
void draw(){
fill(0); // black
rect(0,0,width, height) ;
translate(width/2, height/2) ;// this translates the point (0,0) to the center of the window instead of the
//upper left corner
fill(100); // color of the ellipse
ellipse(0,0,mouseX,mouseY) ; // ellipse format (x,y,width, height) x&y are center coordinates.
}
What we've done here is drawn an ellipse at the center which has it's width and height controlled by the mouse position in the window. void draw() is a loop. It will run indefinitely until the window is closed. because the first line in the loop is to draw a black rectangle the size of the window, only the most recent ellipse is shown. if you comment out the fill(0); and the rect(0,0,width,height); lines, all the ellipses will remain on the screen. Both are interesting. Play around.
paste this in to the sketch after the setup.
void draw(){
fill(0); // black
rect(0,0,width, height) ;
translate(width/2, height/2) ;// this translates the point (0,0) to the center of the window instead of the
//upper left corner
fill(100); // color of the ellipse
ellipse(0,0,mouseX,mouseY) ; // ellipse format (x,y,width, height) x&y are center coordinates.
}
What we've done here is drawn an ellipse at the center which has it's width and height controlled by the mouse position in the window. void draw() is a loop. It will run indefinitely until the window is closed. because the first line in the loop is to draw a black rectangle the size of the window, only the most recent ellipse is shown. if you comment out the fill(0); and the rect(0,0,width,height); lines, all the ellipses will remain on the screen. Both are interesting. Play around.
STEP 4: Fill();
Ok, so far I've only done greyscale. now we're going to explore the fill command a bit.
if you change the
fill(0);
rect(0,0,width, height);
to
fill(0,15) ;
rect(0,0,width, height);
the second value in the fill command is a transparency. basically, when the loop runs once, the new rectangle is transparent. after 15 loops, the first rectangle is now completely black. Essentially, only the last 15 ellipses drawn will remain on the screen instead of all of them. The rest will slowly fade out. A higher second number increases the number of ellipses on screen.
On to Color:
fill() accepts greyscale (as seen above) , or RGB values.
i.e. paste this into a new sketch.
void setup(){
size(400,400) ;
}
void draw(){
fill(0,0,255); // this is bright blue
rect(0,0,width/2,height/2) ;
fill(0,255,0) ; // this is bright green
rect(width/2,0,height/2,width) ;
fill(255,0,0); // this is bright red
rect(0,height/2,width/2, height);
fill(random(255),random(255),random(255)); // this fills random colors into the rectangle as it loops.
rect(width/2, height/2,width,height) ;
}
This code also introduces the random() function.
random(x,y); will poduce a random value between x and y.
random(x); will produce a random value between 0 and x.
if you change the
fill(0);
rect(0,0,width, height);
to
fill(0,15) ;
rect(0,0,width, height);
the second value in the fill command is a transparency. basically, when the loop runs once, the new rectangle is transparent. after 15 loops, the first rectangle is now completely black. Essentially, only the last 15 ellipses drawn will remain on the screen instead of all of them. The rest will slowly fade out. A higher second number increases the number of ellipses on screen.
On to Color:
fill() accepts greyscale (as seen above) , or RGB values.
i.e. paste this into a new sketch.
void setup(){
size(400,400) ;
}
void draw(){
fill(0,0,255); // this is bright blue
rect(0,0,width/2,height/2) ;
fill(0,255,0) ; // this is bright green
rect(width/2,0,height/2,width) ;
fill(255,0,0); // this is bright red
rect(0,height/2,width/2, height);
fill(random(255),random(255),random(255)); // this fills random colors into the rectangle as it loops.
rect(width/2, height/2,width,height) ;
}
This code also introduces the random() function.
random(x,y); will poduce a random value between x and y.
random(x); will produce a random value between 0 and x.
STEP 5: Notes Up to This Point.
Run your setup.
When using variables, try and use system defined ones so you can scale it later. i.e. instead of defining a rectangle as rect(0,0,600,600); , use rect(0,0,width, height);. That way you can scale the window simply by changing the size(x,y) in the setup.
void draw(){ } will loop forever unless you tell it not to. if you want a draw to only run once, place the command noLoop(); before the loop. This is useful if you want a certain number of object on screen and want to be able to see it for more than a few seconds. i.e. paste this into a sketch.
void setup(){
size(300,300);
noLoop();
background(0) ;
}
void draw(){
strokeWeight(50) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
}
this sketch will run once, and draw 8 lines, with random greyscale color, between 2 random points on the upper and lower borders of the window.
Note also the new function
strokeWeight(); which defines the thickness of the lines.
When using variables, try and use system defined ones so you can scale it later. i.e. instead of defining a rectangle as rect(0,0,600,600); , use rect(0,0,width, height);. That way you can scale the window simply by changing the size(x,y) in the setup.
void draw(){ } will loop forever unless you tell it not to. if you want a draw to only run once, place the command noLoop(); before the loop. This is useful if you want a certain number of object on screen and want to be able to see it for more than a few seconds. i.e. paste this into a sketch.
void setup(){
size(300,300);
noLoop();
background(0) ;
}
void draw(){
strokeWeight(50) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
stroke(random(255));
line(random(width),0,random(width),height) ;
}
this sketch will run once, and draw 8 lines, with random greyscale color, between 2 random points on the upper and lower borders of the window.
Note also the new function
strokeWeight(); which defines the thickness of the lines.
STEP 6: Variables and the Fun Stuff!
Now we get into the nitty gritty. Variables!
in order to use a variable, you must first declare it as a variable. you do that by saying
float x; // declares x as a floating point variable
or
int x; //declares x as an integer variable.
Paste this into a sketch. this is the program which created the intro picture. It's iterative, meaning it cycles the value created in each loop as the starting value for the next loop. This allows the program to trace triangles across the screen, giving the illusion of folded paper sticking out from the screen. Give it a try.
void setup(){
size(400,400) ;
ellipseMode(CORNER) ;
background(0);
}
//Declare variables
float xn ;
float yn;
float xo= random(width/4);
float yo= random(height/4);
float zo= random(width/2,width);
float ao= random(height/2,height) ;
float zn;
float an;
void draw(){
stroke(1);
//uncomment out the next to lines to have only a few sections trace across the screen.
// fill(0,5) ;
// rect(0,0,width,height) ;
//this section generates the third points for the triangles by adding a random number to the second points.
xn= xo+random(-30,30);
yn= yo+random(-30,30);
zn=zo+random(-30,30) ;
an=ao+random(-30,30);
// fill(0,random(255),0);
// triangle(width/2, height,xo,yo, xn, yn ) ;
fill(random(0),random(255),0); //random green colors
triangle(width/2, height/2,xo,yo, xn, yn ) ;
fill(0,0,random(255));
triangle(width/2, height/2,zo,ao, zn, an ) ;
xn= constrain(xn,0,width) ;
yn= constrain(yn,0,height) ;
an=constrain(an, 0,height) ;
zn= constrain(zn,0,width) ;
//reset old variables to iterate
xo=xn;
yo=yn;
ao=an;
zo=zn;
//exit loop if mouse is pressed
if (mousePressed==true){ // if you press the mouse, this will stop the loop and freeze the image on screen.
noLoop();
}
}
I used a few new tricks in this one. The constrain() function is quite handy. It keeps the triangles in the window. the format is
constrain(val,min,max) ;
where val is the value to be constrained, min is the minimum value which you want val to take, max is the maximum. I constrained the x values to the width, and the y values to the height.
This program requires 4 variables per color. The triangle(); function requires 6 variables, and we have 0,0 as the starting point on all the triangles. This leaves 2 more points to define, for which we need 2 x values and 2 y values, hence 4 variables. at the end of the loop, we change the old values (xo,yo,zo,ao) to the new values so that the next iteration will have a starting point the same as the ending point of the last iteration.
I also attached the source code if you want to just download and inspect.
in order to use a variable, you must first declare it as a variable. you do that by saying
float x; // declares x as a floating point variable
or
int x; //declares x as an integer variable.
Paste this into a sketch. this is the program which created the intro picture. It's iterative, meaning it cycles the value created in each loop as the starting value for the next loop. This allows the program to trace triangles across the screen, giving the illusion of folded paper sticking out from the screen. Give it a try.
void setup(){
size(400,400) ;
ellipseMode(CORNER) ;
background(0);
}
//Declare variables
float xn ;
float yn;
float xo= random(width/4);
float yo= random(height/4);
float zo= random(width/2,width);
float ao= random(height/2,height) ;
float zn;
float an;
void draw(){
stroke(1);
//uncomment out the next to lines to have only a few sections trace across the screen.
// fill(0,5) ;
// rect(0,0,width,height) ;
//this section generates the third points for the triangles by adding a random number to the second points.
xn= xo+random(-30,30);
yn= yo+random(-30,30);
zn=zo+random(-30,30) ;
an=ao+random(-30,30);
// fill(0,random(255),0);
// triangle(width/2, height,xo,yo, xn, yn ) ;
fill(random(0),random(255),0); //random green colors
triangle(width/2, height/2,xo,yo, xn, yn ) ;
fill(0,0,random(255));
triangle(width/2, height/2,zo,ao, zn, an ) ;
xn= constrain(xn,0,width) ;
yn= constrain(yn,0,height) ;
an=constrain(an, 0,height) ;
zn= constrain(zn,0,width) ;
//reset old variables to iterate
xo=xn;
yo=yn;
ao=an;
zo=zn;
//exit loop if mouse is pressed
if (mousePressed==true){ // if you press the mouse, this will stop the loop and freeze the image on screen.
noLoop();
}
}
I used a few new tricks in this one. The constrain() function is quite handy. It keeps the triangles in the window. the format is
constrain(val,min,max) ;
where val is the value to be constrained, min is the minimum value which you want val to take, max is the maximum. I constrained the x values to the width, and the y values to the height.
This program requires 4 variables per color. The triangle(); function requires 6 variables, and we have 0,0 as the starting point on all the triangles. This leaves 2 more points to define, for which we need 2 x values and 2 y values, hence 4 variables. at the end of the loop, we change the old values (xo,yo,zo,ao) to the new values so that the next iteration will have a starting point the same as the ending point of the last iteration.
I also attached the source code if you want to just download and inspect.
STEP 7: Input! Examples! Stuff! Things!
Processing lets you input things quite easily.
You can simply use mouseX or mouseY as values and it'll input your mouse position, as we saw in the first sketch.
mousePressed is true when the mouse button is clicked. This allows you to do many things like quit a loop, reset the background, or many other things you haven't thought of yet.
It also accepts keyboard input.
there is an audio input getter. I wrote a program which traces a circle in the screen, when it gets a sound in, the size and shape of the circle changes. See attached source code.
It'll get the clock values from your computer to use as variables. I wrote a simple clock program too, as a test, but there's a better one in the examples. I've attached mine so you can see what I did.
there are a TON of example files included in the software. Open them. Run them. Change them and run them again. Learn.
I've only been playing with this program for 3 days and I've already learned a lot and can see the power of the software in quickly creating interesting art and other math-y type stuff.
You can simply use mouseX or mouseY as values and it'll input your mouse position, as we saw in the first sketch.
mousePressed is true when the mouse button is clicked. This allows you to do many things like quit a loop, reset the background, or many other things you haven't thought of yet.
It also accepts keyboard input.
there is an audio input getter. I wrote a program which traces a circle in the screen, when it gets a sound in, the size and shape of the circle changes. See attached source code.
It'll get the clock values from your computer to use as variables. I wrote a simple clock program too, as a test, but there's a better one in the examples. I've attached mine so you can see what I did.
there are a TON of example files included in the software. Open them. Run them. Change them and run them again. Learn.
I've only been playing with this program for 3 days and I've already learned a lot and can see the power of the software in quickly creating interesting art and other math-y type stuff.
5 Comments
ChrysN 10 years ago
Chowmix12 13 years ago
mrbleh 14 years ago
Thanks for looking!
chuckthenerd 14 years ago
mrbleh 14 years ago