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 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 functions in Processing, we need to write blocks of code. 

Blocks of code are enclosed by curly brackets: { } 

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 () brackets?

 

2.What line(s) of code are in between of the  draw() 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

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 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

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 of your mouse moving). 

pmouseX is always one pixel behind mouseX

And, the same for:

pmouseY is always one pixel behind mouseY

 

red-dot

–> Exercise 4:

Try the following code and explain what is happening between the

pmouse functions and the mouse functions that makes it do what it does — why is it a line? 

(save your answer as detailed comments)

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 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 as comments in your code?

block3

 BONUS INFORMATION:

MAKE YOUR ANIMATIONS LOOK SMOOTHER

  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

Exercise 7 

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:

1. Make a landscape, spacescape, cityscape, or other specific place 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. 

images

red-dot

2. 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-dot3. Now that all your code is in void set() and void draw(), you can implement fluctuating changes using the built in variables:

mouseX, mouseY, pmouseX, pmouseY

 

Specific Requirements for this Project:

a) Minimum of 4 unique animated interactions (growth, motion, color, etc).

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

Notes:

  • Don’t forget to use the println() function to help find coordinate positions.
  • Make sure to add in comments using // to help you keep track of your code and stay organized!
  • The Width and Height commands are your friends!
  • Take it slow and if you get stuck then rewind, turn off sections of code, and track back line by line!

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

 

Challenge Option:

Set something in your design to change when the mouse is clicked or computer keys are pressed. See code download below for new code concepts to try this challenge.

smiley

Helpful Code Model with New Code Concepts for Challenge Assignment: 

On-Off Button Switch & Linking Shapes Example

Download: On-Off Button & Linking Shapes Example

The model will show you how to group shapes in motion and make an

on/off button using a custom variable, conditional, and mousePressed. 

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