Newbie-oriented mini tutorial about Processing

[GustavoYz]

This post is thinking to be an answer to those who send me private messeges asking about Processing stuff (its easier for me, just that).

I'm going to follow editing this post, putting some tips from time to time, and if there is some questions ask here (in the post, OK?).

You can get the software from here, for free (GNU and OPEN SOURCE). Before, install the Jre pet (Quickpet)...
To run it, unzip and make executable the main file...
You don't want to download the 65 Mb of Processing, or your lupu_save is running out of space? No Problem!
Check this online Processing: http://sketch.processing.org/

All the lines of codes must end with a ";"
CTRL+R = Run.

Firstly, you have to declare a size, in EX. a 400X400 screen:

Code: Select all

size (400, 400);

By default, the size is 100X100 pixels, so if you don't put a size function your screen is going to be of that proportions (maybe a little small).

In Processing sketch's, the upper-left corner of the representation zone is the cartesian point (0, 0), and the lower-right is the (XX, XX) point, where XX is your maximun possible value (defined on the previous function).

It's time to make a choose, about colorMode : RGB or HSB. The HSB mode allows you to change the TONE, only by changing 1 argument (I always use this).

EX:

Code: Select all

colorMode (HSB, 255, 255, 255, 100);

NOTE: When the function name it's form by two wors, like colorMode, the second word must start with a "MAYUSCULA" letter.

This is telling to the program that the first numeric-argument -255- is the top of the Hue level, from 0 to 255 -more that make a clip in some kind of "red" tone-. There is not need of write the 2, 3 and fourth arguments, but keep in mind that this is the only way of changing the maximun possible value...
The second argument is the Saturation margin levels, and you already imagine the third... The fourth number is the ALPHA margin -from 0 to 100-; a small number make a semi-trasparent, and a "100" make totally dark.

Maybe it's time to set a background color, maybe a black color:

Code: Select all

background (0);

NOTE: If there is only 1 argument, the color mode works only in a greyscale, so 0=black.

Do you know the number and mode of the color that you like?
Don't Worry... Go see the menu and open TOOLS>COLOR SELECTOR.
(you can also use a "nerdy" HEX notation, but represents only the RGB mode)

So, if you can understand the color issue, you can also understand this basic fuctions:
fill (255, 255, 255, 100);>fill the next figure in some color that you choose.
stroke (255, 255, 255, 100);>paints the edge of the next figure in some color that you choose.

TRY ALSO -without any argument-:
noFill();
noStroke();

There are reserved words in Processing, words that you can not use for a variable name (the next time im gonna talk about dealing with variables).
EX: width, height, ROUND, PI...
This words ARE NOT FUNCTIONS, but could be use as an argument any time...(see next example)
The "width" word returns the first argument of the size function (the X-axis, 400 in this case), and the "height" is the same but returns the Y-axis -also (400). Also a function could be pass as an argument to another function...

When you are passing an argument, you also can make some math operations (like +, -, / or *)(see next example, I divide the number of pixels of the wide and the height of the screen by 2 and 4).

To improve the "beauty" of our sketchs, the SMOOTH function (without arguments) is a anti-aliasing filter, good stuff in a 75% of the cases. The remaining 25% are the killing-CPU-process (EX a "for" loop inside another "for" loop -loops are awesomes!-) in wich cases is not recomended to use this function -because slow down everything-.

So, please be patient and check this basic sketch:

A "NEWBIE-FRIENDLY" SKETCH EX:

//this is a comment
size (400, 400);
colorMode (HSB, 255, 255, 255, 100);
background (0);
noStroke();
fill (100, 200, 255, 50);
smooth();
ellipse (width/2, height/2, width/4, height/4);
/*this is also a comment, don't you think?*/

Try changing the colorMode to RGB.
Try changing the "ellipse", for a "rect",

The basic draw-functions are this: line, triangle, rect, ellipse, point...
At the end, this the only way to create an image or animation, using this primitives functions (you also could import traditional and vectorial images and process that, but is a little bit more complex).

Before save anything, go to FILE>PREFERENCES and check/create a SKETCHBOOK FOLDER, because there is where rests all your "sketchs" (.pde by default).

You can easilly make a .jar Java applet of your sketch.
See the examples, great stuff!

By the way, Is there order in your code? Don't Worry, CTRL+T= auto-format...

Always see the reference (select a fuction name and right click).
There is also an online reference (the same one) here.

You can use the Export button to export your sketch as a HTML file (the 4th to the right after the STOP, the last in the file) and then search in the project directory for a new file call "index.html", with a Java-window showing your sketch.
______________________________________________________________________________________________________________________________________________
(I'm planning to post here some newbie-useful sketch's, and a few of my "collection"):
BASIC SKETCHS
1-animation and loop
2-animation and a little more interesting loop
______________________________________________________________________________________________________________________________________________
Collection stuff:
1-Order (If somebody know how build a screensaver from this, please let me know)

[Lobster]

I like processing
but I find the IDE a little flakey? Is that right?
Sometime the example programs load and sometimes they don't . . .

I am already trying to do a mashup between wormhole and kinetext examples
so far have not been able to combine - any tips?

[GustavoYz]

Finally, some feedback!!!
So, maybe i'm not the only Processing user in this forum.

but I find the IDE a little flakey? Is that right?
Sometime the example programs load and sometimes they don't . . .

I don't know what to say. The examples works in my PC. Some examples are slow, because use a few arrays of variables, objects and the smooth() function in combination with loaded images...By the way, the 1.2.1 version is new (no more that 1 month ago).

I am already trying to do a mashup between wormhole and kinetext examples
so far have not been able to combine - any tips? Cool

Yes...
First you should know that the Kinetictype example use objects and arrays... A good place to start is change the 19 line of code on the wormhole sketch:

Code: Select all

wormImg = loadImage("wormhole.png");

Try change the image file "wormhole.png", for one of your own -maybe with some text-. This works and its fast...I made a cruel example by this way (see the attachment).
You also can change the gif file in the 24 line.

(((There is a library for import/export .gif files, so you can export the wormhole sketch and use it as a background, for example...see this)))

Let me see again the Kinetictype example...

[Lobster]

Many thanks . . .
Managed to get that working by moving the images into the same directory
Managed to export a jar - need to remember work out how to call from HTML
- now wondering how to add sound . . .

I find the example files don't always load - but it is probably me.
Seems a lot of potential here . . .

[GustavoYz]

- now wondering how to add sound . . .

Lobster, there are at least two ways to add sound to your sketchs (by the way i'm thinking on upload some sketch+generative music of my own on You Tube when the time alloud me)...
1- Try the included library (the version 1.1.1 of the program don't have it)... It's really good stuff. By the way, check the libraries section and search the Sound ones -there are really good libraries in that page-. I remember use a library call Beads or something like that, really good but it's always a little complex create "good" sound from the code-lines (this library let you do FM and AM sounds, load your sound files, control frecuencies from the main sketch...).
IMPORTANT NOTE ABOUT VIDEO: Are you use OPENGL??? If you answer YES, check this out (you gonna love it).

2- A more difficult option with way more potential, use OSC protocol and send/receive data packages between Processing and any sound program and OSC client (like Pd, Csound, Ardour). I have to admit that still don't use OSC in Puppy even once (maybe this is a new kind of goal, possible with some free-time).

- need to remember work out how to call from HTML

You can use the Export button (the 4th to the right after the STOP, the last in the file, and search in the project directory for a new file call "index.html", with a Java-window showing your sketch. (Is that a good feature or what??)
http://processing.org/reference/environment/

I hope this help you on something...

[GustavoYz]

Hello, it's me again...
I'm kind of dissapointed right now because I find a bug on the new version.
I think that the only user on this forum, besides me, is Lobster... So Lobster, be careful when you try to do some fractal math: There is a NILL error when you do some recursive operations...
Maybe someday you see me posting here again...