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
size(200,200);
//Set the sketch’s background colour
background(200);
//Set a black stroke for shapes created beyond this point
stroke(0);
//Creature’s body
fill(0,100,0);
ellipse(95,85,100,100);
//Creature’s first eye
fill(255,255,255);
ellipse(80,40,30,30);
//First eye pupil
fill(0,0,0);
ellipse(80,40,10,10);
//Creature’s second eye
fill(255,255,255);
ellipse(110,40,30,30);
//Second eye pupil
fill(0,0,0);
ellipse(110,40,10,10);
//Creature’s eyebrows
rectMode(CORNERS);
rect(70,18,90,22);
rect(100,18,120,22);
//Creature’s mouth
noStroke();
fill(255,25,25);
ellipse(94,90,70,15);
//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.

Code:

size(200,200);
//Background is now specified
background(200);
//Parentheses now included for stroke function
stroke(255);
//Fill function is now completed with a semicolon
fill(150);
//”center” is now capitalized
rectMode(CENTER);
//Rectangle height is now specified
rect(100,100,50,50);

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

• I like the google-eyed frog/muppet.

• Elizabeth Eva Coleman

The eyes were definitely great!

• Marc Nicholas De Pape

Good job using the pmouse function! I thought you had done some crazy physics formula or something…

• Yup, the eyes are very cool!