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);
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);
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);
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:
Try changing the colorMode to RGB.//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 "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)