Main Menu

Secondary Menu

Intro to the Processing Software

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

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.

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.

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.

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.

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.

Attachments

Step 7: Input! Examples! Stuff! Things!

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.

Pocket-Sized Contest

Trash to Treasure

Tips

Questions

5 Comments

How can i install the blobDetection library? I've tried but i keep getting different errors each time... i downloaded it from here: http://www.v3ga.net/processing/BlobDetection/index-page-download.html

I don't know why 'ables changes the extension, but I just downloaded it and opened it with text edit, and the code is there, so you should just be able to change the extension. Or at the very least open in a text editor and copy paste into a processing code.