Processing Tutorial 2

Now we want to move our designs! This is how computer programs work…

BIG PICTURE OVERVIEW:

ms_pacman_large

1. Flow

For interactive programming to work, the code must flow in order.

red-dot

When you play video games, the software is flowing in a series of events.

red-dot

 In the start of a video game, users select their characters and this event is called the SET-UP. 

Once the set-up is complete,  the conditions of the game are initialized.

red-dot

Next, the game starts and as you play the computer assesses the choices you make.

red-dot

In response to your choices, the computer draws new graphics that shift and vary with your character’s actions.

red-dot

The cycle continues over and over again. This repetition of flow, action and response works as a loop.

These are the cycles of interactive programming.

red-dot

Of course, eventually the cycle ends and you die.

gameover

 

block3

CODING FORMATTING KNOWLEDGE:

2. SETUP() AND DRAW()

 

To get things moving in our drawings, we will start by using thformats called: setup() and draw().

These are entry level loops.  

Here’s a diagram to illustrate setup() and draw() in action

program-srts

IMPORTANT:

Setup() loads and happens once.

Draw() loads and loops the code inside of it repeatedly.

 

block3Code Syntax Note:

In order to use animating functions in Processing, we need to write blocks of code.

In addition to using parenthesis ( ) after Setup() and Draw(),

we also need to put the code command that followSetup() and Draw()

in between curly brackets { }.

Example:

Blocks of code are enclosed by curly brackets: { } 

red-dot

Formatting Tip (makes things easier to read): 

Indentations are used to aid with reading lines of code.

By indenting the lines of code in a complex program, it is easier for our eyes to navigate the many lines of text.

blocks

block3

–> Exercise 1:

Program the following lines of code, hit run and see what happens when you move your mouse.

codedsect2
Now compare the lines of code with your result in the Sketch window.

Screen shot 2013-07-12 at 11.01.12 AM

Answer the following questions as comments in your code:

1. What line(s) of code are in between the setup () { } curly brackets?

 

2.What line(s) of code are in between of the  draw() { } curly brackets?

 

3. The built in variables mouseX and mouseY are fluctuating numbers.

Take a moment to think and guess what the mouseX and mouseY numbers reflect? Explain your answer.

(Hint: They refer to a piece of hardware you are using.)

 

4. Move all the code inside of of the draw() brackets inside of setup() and push play.

You will notice that your design isn’t moving anymore. Why?

Explain the difference between setup() and draw().

(Hint: The answer is in the above lesson.)

block3

–> Exercise 2:

Type the following code (you just programmed this before but your code is now arranged differently).

Your code will now look like this, push play and see what happens.

coded2sect2

Now, move the background() command back inside of draw() at the top.

Why is the red ellipse so different when you move the background() between setup() and draw()?

(Save your answer as comments in code, use your own words)

Hint: think “loop”

red-dot

Answer is here, try to guess before looking.

block3

 

3. Variations of Functions Using X and Y  Values.

There are many interesting variations you can achieve with the functions: mouseX and mouseY.

red-dot

–> Exercise 3:

Plug in this code:

coded3sect2

 

variant-shapes

Explain why each of the above four shapes vary in size, position and color?

(save your answers as detailed comments in the code)

Keep in mind the below pixel grid system to help you understand the X and Y variations.

sect2pixelgrd

block3

Exercise 4 

MAKE YOUR LIFE EASIER WITH THE COMMAND:

println()

Are you tired of guessing the numbers for a specific

coordinate so you can draw that point, line, triangle, or whatever?

Type and test out this code, what is happening with the red square in relation to the text printed at the bottom of your code window?

 

Explain how the println() function works and why it will be very useful for placing shapes in your design.

(Put these answers as comments in your code).

 

block3

Project Assignment:

Make a landscape, spacescape, cityscape, or other specific place/environment that has moving parts which respond to the mouse movements in an interesting and aesthetic style. Keep an eye on visual form, color, transparency, and perspective to push your design to excellence. You can makes things grow, move, become invisible, or change colors.

images

Specific Requirements for this Project:

a) Minimum of 8 unique animated interactions/changes (growth, motion, color, etc).

b) Your design must consider visual aesthetics as much as code functionality.

 

 

IMPORTANT NOTES:

1. Remember,  in order for your code to move with the mouse, you will need to use the two formats:

void set() and void draw()

like this:

void setup() {

code lines;

code lines;

etc;

}

void draw() {

code lines;

code lines;

etc;

}

ALL CODE MUST BE INSIDE BRACKETS!  

{  }  

red-dot

2. Now that all your code is in void set() and void draw(), you can implement fluctuating changes using the built in variables:

mouseX, mouseY

 

red-dot

 

3. In most cases, you will want your background() command in draw{} .

red-dot

 

4. Don’t forget to use the println() function to help find coordinate positions for all the shapes.

 

The goal is deep understanding, not racing to a finish line.

 

Download Examples Projects Here

 

CHALLENGE ASSIGNMENT: LEARN NEW CODE IN THE NEXT TUTORIALS AND IMPLEMENT YOUR NEW TOOLS IN THIS PROJECT. AS LONG AS YOU CAN EXPLAIN THE NEW CODE YOU ARE USING – ANY NEW TECHNIQUES ARE FAIR GAME FOR THIS PROJECT.

block3
If the above concepts aren’t clicking for you or if you would like a fun review of these coding ideas, then try watching the very animated and informal free video tutorials by NYU professor and Processing champion, Daniel Shiffman.

Screen shot 2013-08-15 at 11.31.22 AM

The videos which reference this webpage:

Flow, Set-up and Draw

Built-in Variables

Events

Using Println()

block3

Screen shot 2013-08-14 at 10.26.55 AM