Basics

01. Uppercase and lowercase matters.
ellipse is not the same as Ellipse

02. Every command and every change of variables end with a semicolon. Semicolon ends everything. Don't forget the semicolon at the end!
int i = 0;
background (255);
ellipse (10, 10, 100, 150);

03. Floating numbers have a point instead of a comma.
13.456 not 13,456

04. Values / parameters are seperated by a comma.
rect (12, 56, 57, 456);

05. Round brackets group a bunch of values, who belong to one function.
background (255, 0, 0);
The numbers (255, 0, 0) belong all to the function background

06. The bunch of values between the round brackets are called parameters.
fill(255, 40, 30);
255, 40 and 30 are parameters which are transfered to the function named fill.

07. Every programm you write should at least consist of two parts: The setup function and the draw function. setup is loaded once, when the programm is started. draw will run continuously after the programm is done with setup(). So everything that should be done once should be written within setup, e.g. setting the size of your window.
void setup () { /* Code */ }
void draw () { /* Code */ }

08. Curly brackets mark a bunch of code which belongs together.
void setup ()
{
   size (400, 400);
   smooth();
}
e.G. the commands size(); and smooth(); belongs to the function setup().

09. Everything within curly brackets will be done in the order you wrote it. What's written first will be done first. What's written last will be done last.
ellipse (15, 15, 30, 30);
rect (10, 10, 30, 30);
e.G. the ellipse will be drawn first. Afterwards the rectangle will be drawn. So in this case the rectangle overlays the ellipse.

10. Every code you write will be valid for following code.
fill (0, 0, 0);
rect (10, 10, 50, 50);
ellipse (30, 30, 70, 70);
e. G. rectangle and ellipse will appear with a black fill.

11. Nearly every mistake you make (forgotten semicolon, forgotten brackets, forgotton comma, ...) will stop the programm to execute.

Comments All comments will be ignored by the programm. They are just readable by the programmer.
// one line comments start with two slash
/* long comments longer than one line start with a combination of slash and star
and end with star and slash*/

Basic Setup void setup ()
{
    // Content of setup
}

void draw ()
{
    // Content of draw
}

Shapes point ( x, y);
line (x, y, x2, y2);
ellipse (x, y, width, height);
rect (x, y, width, height);

Colors One value: (gray)
Two values: (gray, alpha)
Three values: (red, green, blue)
Four values: (red, green, blue, alpha)
All values range from 0 to 255. Zero is dark (no color or complete transparent), 255 is bright (full color or no transparency).

Appearance size (width, height);
background (color); (No alpha value ollowed)
fill (color); and noFill();
stroke (color); and noStroke();
strokeWeight (value);
smooth(); and noSmooth(); (Antialiasing on / off)

void setup ()
{
   size (600, 200);
   smooth ();
}

void draw ()
{
   background (122, 150, 134);

   strokeWeight (3);
   stroke (255);
   line (20, 20, 580, 180);

   fill (232, 226, 178, 150);
   ellipse (300, 100, 100, 100);

   noStroke ();
   fill (232, 226, 178);
   rect (150, 20, 300, 50);
}

Code of first Programm: firstProgramm.pde

Getting to know the coordinate system, the basic shapes & colors.

Click on the example-maker obove and rebuilt what you see (without grid & text, of course).

Values:
Background: red = 122, green = 150, blue = 134
Stroke Weight: 3
White Fill: gray = 255, alpha = 120
Red Fill: red = 217, green = 95, blue = 66, alpha = 180
Yellow Fill: red = 232, green = 226, blue = 178, alpha = 180
Stroke Color: gray = 255, alpha = 180

Press any key to show or hide the grid.

Code of example-maker: colorsAndShapes.pde