Processing Section 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 the functions called: setup() and draw().

These are entry level loops.  

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

program-srts

 

Code Syntax:

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

Blocks of code are enclosed by curly brackets: { } 

Blocks of code can be nested within blocks of code.

brackets

red-dot

Tip: 

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:

(save your answer in a text document)

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:

1. Explain the color value of the circle. What do the four values control?

2. What did setup () tell the program to do?

3. What did draw() tell the program to do?

4. What do the functions mouseX and mouseY do in this program?

block3

–> Exercise 2:

(save your answer in a text document, use your own words)

Change one line in the code you just programmed by moving the background() from the draw() function into the setup() function.

Your code will now look like this:

coded2sect2

 

Now, considering these two versions of very similar code, explain why there is such a large difference in the two sketches?

Hint: think “loop”

red-dot

Explanation is here

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 answer in a text document)

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

sect2pixelgrd

block3

CODING SPECIFIC KNOWLEDGE: 

4. Adding New Functions: pmouseX and pmouseY.

In addition to using mouseX and mouseY, another pair of fun functions are:  

pmouseX and pmouseY

PmouseX and PmouseY work with the previous mouse position. 

(Derived from the X and Y coordinates).

red-dot

–> Exercise 4:

Try the following code and explain what is happening between the pmouse functions and the mouse functions.

(save your answer in a text document)

sect2pmousecode

block3

CODING SPECIFIC KNOWLEDGE: 

5. Controlling Parameters through Speed.

Another way to vary functions inside your code and drawings is to play with the speed of your mouse movements. The speed at which something moves is calculated from analyzing how fast an object travels from one point to the next. In Processing, to get a number that represents the speed of your mouse, your first point is mouseX and your second point is PmouseX.

The difference between these two points (expressed as the absolute value) is the speed of your mouse.

red-dot

Remember absolute value?

The absolute value of 4 is 4.

The absolute value of -4 is still 4.

In Processing, to express the absolute value of something through code, we write: abs()

So, to write code for expressing the speed of your mouse, you would write: abs(mouseX-pmouseX)

red-dot

–> Exercise 5:

Look up the code in the Processing online reference for the strokeWeight() function (this function sets how thick lines will be drawn in your program). Combine the strokeWeight() function with the above lesson on mouse speed and the example code in exercise 4. Use these three tools to create a drawing program that varies the thickness of your lines with how fast you move your mouse.

red-dot

Next, set your code so that the color of your lines also vary with your mouse movements.

There are many possible solutions.

codelinevary

Here, you can peek at one possible solution to see a model. But, make sure to play around with the code so that you make a new version.

block3

CODING SPECIFIC KNOWLEDGE:

6. More Function Tools for Your Coding Arsenal

When you click the mouse or type on the keyboard, Processing receives these actions as events.

In the order of operations, after set-up() functions (which happen once) and draw() functions (which continually loop), the event functions come next to tell the program when to execute a specific action.

red-dot

To program these mouse and keyboard interactive tools use the following: 

mousePressed() and keyPressed()

red-dot

–> Exercise 6:

Test out this code with your mouse and keyboard.

mousepressedsect2code

dotsframed

Explain how the lines of code are working together to make these actions happen with your mouse?

block3

 CODING SPECIFIC KNOWLEDGE:

7.  Animation Programming: the frameRate Function

 

 

In computer animation, a speed is used to designate how fast images will flash across the screen.

Speed is expressed as: frameRate()

red-dot

To code an animation, add into your program’s set-up() function the frameRate() function.

Here’s an example:

frame-rayte

Since computers run at different speeds,

frameRate() is used to make sure that your sketch is consistent across multiple computers.

red-dot

A basic standard frame rate to use is frameRate (30). If you do not enter a frameRate() then Processing will automatically default to frameRate (60). 60 frames per second can be tough for some computers to run.

block3

Project Assignment:

1. Return to your landscape code design from Tutorial 1.

OR, start a brand new project that looks like a video game!!!!!

images

red-dot

2. Now, (re)design your code to have flow using the 3 functions from above including:

void setup()

void draw()

void keyPressed () or void mousePressed

red-dot3. Set some part of your landscape to follow with your mouse movements.

red-dot 4. Set some aspect of color in your design to change color when the mouse changes location.

red-dot5. Set something in your design to change when the mouse is clicked or computer keys are pressed.

red-dot 6. Make sure to add in comments using //  to help you keep track of your code.

 

Screen shot 2013-07-11 at 11.57.52 AM

You can see the answer on how the above kitty was made interactive for this assignment.

Try to flesh out as much code as possible before peeking at the kitty model.

red-dot

The kitty model will show you the solution for this particular design but you will have to adapt the code to your own unique design.

(Most of the kitty’s code probably won’t work for your creature but will serve as reference to how things work).

red-dot

There are many fun choices you can make so play around with your code.

red-dot

Take it slow and if you get stuck then rewind and track back line by line.

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

smiley

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