Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Fri 19 Dec 2014, 22:32
All times are UTC - 4
 Forum index » Off-Topic Area » Programming
Newbie-oriented mini tutorial about Processing
Post new topic   Reply to topic View previous topic :: View next topic
Page 1 of 1 [6 Posts]  
Author Message
GustavoYz


Joined: 07 Jul 2010
Posts: 897
Location: .ar

PostPosted: Sun 22 Aug 2010, 03:08    Post subject:  Newbie-oriented mini tutorial about Processing
Subject description: A visual programming enviroment -Java-.
 

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...
Arrow 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:
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:
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:
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:
Quote:

//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).

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

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

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

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

Arrow 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
Arrow 1-animation and loop
Arrow 2-animation and a little more interesting loop
______________________________________________________________________________________________________________________________________________
Collection stuff:
Arrow 1-Order (If somebody know how build a screensaver from this, please let me know)
order_GY.tar.gz
Description  An order idea, loop and animation exorcise. From my collection.
gz

 Download 
Filename  order_GY.tar.gz 
Filesize  986 Bytes 
Downloaded  259 Time(s) 
more interesting loop.tar.gz
Description  Other sketch, quicky loop and animation
>>Extract this file to your Sketchbook folder, usually in /root/sketchbook
gz

 Download 
Filename  more interesting loop.tar.gz 
Filesize  791 Bytes 
Downloaded  286 Time(s) 
animationAndLoop.tar.gz
Description  Extract this file to your Sketchbook folder, usually in /root/sketchbook
gz

 Download 
Filename  animationAndLoop.tar.gz 
Filesize  734 Bytes 
Downloaded  286 Time(s) 

_________________


Last edited by GustavoYz on Tue 07 Sep 2010, 01:17; edited 7 times in total
Back to top
View user's profile Send private message 
Lobster
Official Crustacean


Joined: 04 May 2005
Posts: 15122
Location: Paradox Realm

PostPosted: Mon 23 Aug 2010, 11:15    Post subject:  

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? Cool

_________________
Puppy WIKI
Back to top
View user's profile Send private message Visit poster's website 
GustavoYz


Joined: 07 Jul 2010
Posts: 897
Location: .ar

PostPosted: Tue 24 Aug 2010, 02:08    Post subject:  

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

Quote:
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).

Quote:
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:
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...
cruel_example.tar.gz
Description  See this cruel example, dear Lobster.
gz

 Download 
Filename  cruel_example.tar.gz 
Filesize  52.36 KB 
Downloaded  279 Time(s) 
Back to top
View user's profile Send private message 
Lobster
Official Crustacean


Joined: 04 May 2005
Posts: 15122
Location: Paradox Realm

PostPosted: Tue 24 Aug 2010, 13:59    Post subject:  

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 . . .

_________________
Puppy WIKI
Back to top
View user's profile Send private message Visit poster's website 
GustavoYz


Joined: 07 Jul 2010
Posts: 897
Location: .ar

PostPosted: Wed 25 Aug 2010, 00:35    Post subject:  

Quote:
- 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).


Quote:
- need to remember work out how to call from HTML


Arrow 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??)
Arrowhttp://processing.org/reference/environment/

I hope this help you on something...
Back to top
View user's profile Send private message 
GustavoYz


Joined: 07 Jul 2010
Posts: 897
Location: .ar

PostPosted: Fri 03 Sep 2010, 01:07    Post subject:  

Hello, it's me again... Sad
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... Crying or Very sad

_________________

Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 1 of 1 [6 Posts]  
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » Off-Topic Area » Programming
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.0808s ][ Queries: 13 (0.0044s) ][ GZIP on ]