Some First Processing Work

Hi Leila & Stella - At this point we will have all read up through chapter 3. So we’ll be familiar with some basics including:

How to write, execute and save a simple processing program
How to draw with shapes
How to change colours, stroke width
Some very simple interactivity

Remember that you can always look at the examples to get an idea for future work, or to just get inspiration.

So to start, let’s have you discuss & answer a few simple questions.

What if I wanted to draw a simple square, what command would I type?

And why won’t the following code work?

size(480, 140);
square(20, 20, 20, 20);

Describe the interplay between the coordinate system in processing, the size() function, and the dimensions of an object that you want to draw. What are some things to be aware of?

Before you execute this code, tell me what you think will happen:

size(240, 240);
fill(125);
ellipse(120, -120, 120, 120)

Before you execute this code, tell me what you think will render:

size(240, 240);
rectangle(120, -120, 120, 120)
fill(125);

Processing uses radians and the arc command to draw parts of an ellipse. Let’s say I wanted to draw Pac-Man (note as a historical reference, I was 9 when Pac-Man was released!):

Pac-Man is part of an ellipse with a point added for the eye. Tell me, what elements you need to draw Pac-Man, and then, in pseudo-code, what steps you’d take.

Now in real Processing code, work together and draw Pac-Man. Make sure to save your code. Here are some tips:

Use this web table to find colours for the RGB
Note that we’ll ignore outline on the mouth (for now) as it involves some trigonometry.

Ok, finally, if you wanted to show a sequence of 5 Pac-Mans looking as if they were eating, i.e. they were moving from left to right and opening and closing their mouth, how would you alter your code?