Assignment 1: Processing Chapters 1-3 by Harjot Bal

Hi, it’s Harjot again.

Well this is my first time doing any programming tutorial so I’m interested to see what I’ll learn. I know code for basic SQL database creation and entry as well as a bit of PHP, however, I have never used Processing before. Processing seems very user-friendly, so here’s to an optimistic start. I apologize if my documentation post seems tedious; I just didn’t want to miss anything. [EPIC Edit: My initial draft has been chopped down a lot…I got carried away and reported everything and its mother]

Exercise 1-2

Here’s a snapshot of what I came up with:


Note: I think the book has an error for the code regarding the circle. It states “ellipseMode(CENTER); ellipse(3,7,4,4);”, however for a 4×4 bounding box I think you would have to use one of the ‘corner’ methods. The ‘center’ method does not allow for the ellipse to be centered according to an even number of coordinate boxes (columns or rows) within the grid system.

Just as a side note, I feel the inclusion of alpha values, colour mode specifications, and HSB values seems a bit redundant so far.



Exercise 1-7

My coded creature:

//Set the sketch window size
//Set the sketch’s background colour
//Set a black stroke for shapes created beyond this point
//Creature’s body
//Creature’s first eye
//First eye pupil
//Creature’s second eye
//Second eye pupil
//Creature’s eyebrows
//Creature’s mouth
//Message to be displayed with sketch
println(“I’m a frog.”);

I think I’m really starting to get a hang of simple shape coding and colours. I understand that this is easier to understand and do when using already plotted shapes which you can then manipulate however you choose. I am sure that this is pretty basic stuff and that it gets much more complex from here on out.

The Examples directory has some really useful and interesting sketches, some of which I would consider implementing in a project.

Side note: Some of the function call examples remind me of ActionScript code.



Exercise 2-6

I’ve corrected the code errors and mentioned the changes in the form of comments.


//Background is now specified
//Parentheses now included for stroke function
//Fill function is now completed with a semicolon
//”center” is now capitalized
//Rectangle height is now specified

Exercise 2-7

I chose to play around with the PShape function and it seems really interesting. I can definitely see this being useful for interactive games with using graphics made in Illustrator or other vector drawing apps.

It’s good to know that Processing uses Anti-Aliasing in the form of a function called smooth(). This would be really useful in producing more attractive visuals. For example, the frog creature I created from the previous chapter is looking much better with AA.

After having gotten into the setup() and draw() functions, as well as the mouseX/Y position tracking, I understand how basic games could be built in Processing. For example, Exercise 3-3 implies that Processing can be used to make customized cursor avatars, such as a wand for in-game selection.

Exercise 3-3

The answer to this would be the fact that all code under void draw() is looping and therefore if the white background (background(255);) is only established once–under void setup()–the background is replaced with whatever occurs over it.

Lesson 1 Final Project

Here’s what I came up with in the end. I know I could have done much more with it but I spent so much time documenting the exercises very articulately (that I didn’t include) that I didn’t find much time to really challenge myself.



Click on this image to navigate to the sketch.

Hover your cursor over the sketch canvas to make the frog dizzy.

4 comments to Assignment 1: Processing Chapters 1-3 by Harjot Bal