Ok, kids, ready to learn Processing?
Good, let’s start by downloading Processing into our computers.
Before we start I need to make
something clear, this tutorial is for Mac users.
But if you have a Mac, let’s get started.
Click here: http://www.processing.org/download/
This should open up.
Inside the red square (I drew) click where it says Mac OSX.
This should open up. Save to your desktop.
Wait for the download to finish. Problem?
Now that the download is ready, double-click on the icon.
This should open. Drag and Drop the icon to the Applications Folder on that same window.
Hold on, we’re almost there.
Go to your Applications.
Double Click the Processing icon.
You’ll probably get this window. Click Open.
This should open.
You have officially installed Processing.
Let’s do the basic setup so you can start coding.
First a left-click on the dock’s icon.
Check Keep in Dock so it stays there.
Now let’s choose a folder to save our sketches & libraries.
This should open up. Click Browse and choose your folder, click OK and you are done.
In the future, when we deal with libraries,
that folder is where we’ll put them (in a folder called libraries),
but we’ll leave that for our next tutorial.
Ok, ok, we can’t leave without coding at least something.
So here it goes:
Copy and paste inside Processing the following code:
void setup()
{
size(300,300); //The size of your window width,height.
smooth(); //Smooth the border of circles. Comment this to see the difference.
}
void draw()
{
background(0); //Draw the background.
fill(255); //Set the color of our head.
ellipse(width/2,height/2,200,200); //Set the ellipse at the center of our stage and the diameter to 200;
fill(0); //Set the fill for the eyes and mouth.
ellipse(100,200, 10,10); // Draw the left eye.
ellipse(200,200, 10,10); //Draw the right eye.
ellipse(150,230, 30,20); //Draw the mouth.
}
It should look like this:
Click RUN (upper left, looks like a play button) and voila!
If you want to start playing with the reference:
http://www.processing.org/reference/
Next Tutorial:
