Programming in Processing Taught by Ms. Madsen Assistants: Ms. Fischer and Ms. Yen Winsor School, 2/6/08

Who are we? We’re MIT students. Ms. YenMs. Fischer Ms. Madsen

Why do we need programming? You think: “Hello World” The computer would think: HE L L O [space] W O R L D Please raise your hand now if you would like to take a class on typing 1s and 0s.

Nobody else wants to, either.

What’s the other choice? Instead, we use “programming languages” to talk to the computer. Just like other languages, you express ideas in different ways when using different programming languages. What are some foreign languages you can think of?

There are lots of programming languages, too. Here are some you might have heard of: Basic, Java, Javascript, Logo. Here are some you probably haven’t heard of before now: C++, Perl, Scheme, C#, Python, Lisp, Cobol, Fortran, Pascal, SQL, Haskell, J2EE, Maple, PHP, Ruby, Ubercode.

Where do you see programming in real life? Short answer: all over the place!

Here are some examples.

Getting Started We’re going to start by setting up our program. (Makes sense.) The method we use for this is called “setup()”.

(Hang on – what’s a method?) Our code is going to be organized like this: void setup(){ stuff that we are using to set up our window goes here. } void draw(){ stuff that we are drawing in our window goes here. } Think of methods as ways of organizing your information – like different boxes to hold different parts of code. setup()draw() These are commands you use to set up your program. These are commands you use to draw stuff.

Let’s type our methods into the Processing window now. Press this button to run your program. Your code goes here. On the next slide, I’ll show you what to type.

Let’s put our ‘boxes’ – the methods – into Processing now. void setup() { } void draw() { } These are “curly brackets” – we’ll use them a lot. You can find them next to the ‘p’ key. The first curly bracket means, ‘everything that goes in the box goes AFTER this bracket.’ The second one means, ‘everything that goes in the box must be in it already – this is the end of the box.’ When you see code in BLACK, type exactly what you see into Processing. You can put as many blank lines as you want here. DO NOT capitalize “void”, “draw”, or “setup”. They are all lower-case.

Now let’s put something in the setup() method. First, let’s set a size for our window. –Choose a width and a height. When you see something in GREEN, that means you should type a number instead of what’s written on the slide. For width and height, you might try something like 50 or 100 or 400… or 88, or 129, or 302. void setup() { size(width, height); } void draw() { }

That’s really exciting! But maybe we should add some color. In Processing, you create colors by telling the color how much Red, Green, and Blue to have. They can have some amount of each of those colors between 0 and 255.

Colors are formed like this: (Red, Green, Blue).

How do we use color? First, create a color. When you see text in blue, you should replace it with a name. –The name must start with a letter and can’t have any spaces. color colorName; Then, assign that color’s RGB values: colorName = color(redValue, greenValue, blueValue); Look at your handout for help remembering RGB colors.

Let’s add our “color” code. (add the underlined code. Don’t forget a semi-colon – ; – at the end of every command.) void setup() { size(width, height); color colorName; colorName = color(redValue, greenValue, blueValue); } void draw() { }

Hm. That wasn’t very interesting. Let’s add in something else… How about setting that color as our background? Easy! Just add this to setup(): background(colorName);

void setup() { size(width, height); color colorName; colorName = color(redValue, greenValue, blueValue); background(colorName); } void draw() { } Let’s add our “background” code. (add the underlined code. Don’t forget a semi-colon – ; – at the end of every command.)

Now let’s create a rectangle. The rectangle command, rect(), takes four arguments inside the parentheses, separated by commas. 1) xStart 2) yStart 3) width 4) height

What do these mean? #2: yStart #1: xStart #3: width #4: height rect(xStart, yStart, width, height);

void setup() { color colorName; colorName = color(redValue, greenValue, blueValue); background(colorName); size(width, height); } void draw() { rect(xStart, yStart, width, height); } Let’s add our “rect” code. (add the underlined code. Don’t forget a semi-colon – ; – at the end of every command.)

Now let’s create an oval. (In Processing, this is called an ‘ellipse’.) The oval command, ellipse(), takes four arguments inside the parentheses, separated by commas. 1) xStart 2) yStart 3) width 4) height

What do these mean? #3: width #4: height ellipse(xStart, yStart, width, height); #2: yStart #1: xStart

void setup() { color colorName; colorName = color(redValue, greenValue, blueValue); background(colorName); size(width, height); } void draw() { rect(xStart, yStart, width, height); ellipse(xStart, yStart, width, height); } Let’s add our “ellipse” code. (add the underlined code. Don’t forget a semi-colon – ; – at the end of every command.)