Your browser does not support the canvas tag.

Week 1
Simple Go rules.

Why are we learning Processing?

Order Of Operations
The most important math you will need to know this whole semester and you probably already know it.
6รท2(1+2)= ?
If you have the Facebook this equation may be familiar. It's actually causing some serious debate, and now people use it to troll by sparking a flame war. Here's the correct solution if you are going off what your SATs would consider correct. Use PEMDAS - Parenthesis, Exponents, Multiply and Divide, Add and Subtract.

It's actually a really crappy acronym because it would be easy to mistakenly think MD part means multiply THEN divide, rather than Multiply and or Divide from left to right. The real confusion comes with the implied multiplication between the 2 and the parenthesis. Is it actually part of the Parenthesis, and so should come before the division? Some mathematicians actually say yes! Aaagh!
GOOD NEWS! If we wrote 6/2(1+2) into processing it would give us an error saying Missing "*". You cannot have implied multiplication in programming, so you would need to write the math equation as 6/2*(1+2) ... clearing all confusion.

Hello world!

void setup() {
  size(400, 400);
void draw() {
  rect (20, 20, 100, 100);
Processing, (and many other languages) use semi-colons and curly brackets to help the computer interpret your code. The program does NOT interpret returns, tabs or extra spaces. So, according to Processing, the following code is exactly the same as the code above.
void setup() { size(400, 400);} void draw() {rect (20, 20,

100, 100); }

The semi-colon is called a "statement terminator". It acts like a period does in English - in fact the only reason it's not a period is it would be too confusing when you write a number with a decimal place. The curly bracket segments are called "functions blocks" - they allows us to section off different sections of the code.
Of course the first code example is easier for us humans to read, so to quickly format your code go Edit - Auto Format (or command - T).

Every processing sketch needs a setup routine and a draw routine. The word "void" means we are not sending the routine extra information (more on this later).

The most common errors will be forgetting to close a } or forgetting to add a ;
When this happens Processing will kick out an error message that (hopefully) will be useful and the insertion point should jump to where the offending line is in your code. You will have to fix it yourself. Of course you may have made more than one mistake, in which case the program is only going to tell you about your first error.

Cartesian Coordinates

Processing uses Cartesian coordinates to designate locations on the screen, with 0, 0 being the top left corner. This is a little different from how you learned it in math class with 0,0 being at the center. Usually, x is used to describe the horizontal position on the screen and y the vertical (z is depth - more on 3d much later).
So, in the code above, the line "size(400, 400);" means "create a window 400 pixels wide and 400 pixels high", the line "rect (20, 20, 100, 100);" means "draw a rectangle with the top left corner at position 20, 20, that is 100 pixels wide and 100 pixels high". There is a way to draw a rect using the coordinates of the center, not the top left, but this way is the default. In Processing, you almost always refer to x first, then y.


How the heck do you know what are the keywords and what are not? Get familiar with the AIP (Application Program Interface). When you are experienced with programming and are faced with a new language, your first question will always be "where's the API?". One of the best things about learning Processing is how verbouse and well documented the API is.

The main site for processing is Processing Org
And the API is on the Reference page

2D Primitives

Primatives are simple shapes that processing can easily create.

Look in the API and make a sketch with a:

Notice that the order matters, the 2d primitives that are lower in your script will get drawn later and so will be on top or "closer" to the screen.

The default color mode in processing is RGB (red green blue). If a color has 1 value it will be a grey scale with 0 being black, and 255 being white.
If the color has three values the first will be red, the second green and the third blue, and all will be between 0 and 256.
If the color has two or four values, the last value is an alpha (transparency) value with 0 being clear and 255 opaque.
So fill(255, 20, 10); will make the next shape you draw red, but here's the rub, the fill will stay red, even after the draw loops. So to have a red and green shap you need to change the compr before you draw each shape. Look up stroke(), and fill() in the API to change the colors in your sketch.

Printing Mouse location into the console
You can send information to the message window with the "println()" command. The ln in println mean line, and so puts the results on a new line in the meesage window.

mouseX and mouseY are processing keywords that can give us the x and y location of the mouse.

In a new sketch, try drawing a face. Use println(mouseX); and println(mouseY); to get the the screen coordinates.

Tweek Mode
Tweek Mode only works in Processing 3. It's super handy for this project.

int x; 
void setup() {
  size(400, 400);
void draw() {
  x = 80; 
  fill(255, 20, 100); 
  rect(x, 20, 80, 80);

Save your file, then go under Sketch to Tweek.
Hang on to your hat, because crap is about to get real.
Drag on the values in your code to live update. Look at the frickin' color picker! Dude! Sweet!
Notice that you can only tweek values in the draw - you cannot tweek the size because it is in setup().

Lab for week 1
Recreate a famous painting as best you can using 2D primitives. Yes you can use photoshop to grab colors information and get locations - but you don't have to.
Your painting must be representational. No, you cannot use Mondrian.
Save the file and send me the sketch as an attachment, or just paste the code into the body of the email.
rules of GO
Things I Wish Someone Had Told Me
link to presentation