Processing Tutorial 3

 

 

 

NOW YOU WILL WRITE YOUR OWN CUSTOM VARIABLES!

THIS IS TUTORIAL 3 

 

3d-cartoon-goldfish-set-1-15263189Variables give us the power to vary our programs creatively.

red-dot

1. Information on Demand

 

Variables store information (data) that your computer uses in flexible ways.

bucket1

Variables can quickly create color and motion in your designs.

rice

block3

CODING SPECIFIC KNOWLEDGE:

2. Types of Variables

 

There are many types of variables that a computer may use depending on the density of the information.

red-dot

The type of variable must be specified in the program so the computer can actually use it.

cave-peeps

red-dot

Types of Variables Include:

Integer Variables

These are variables that hold whole numbers (no fractions, no decimals).

Example Values: -2,-1,0,1,2,3

The Processing code for declaring an integer variable: “int”

red-dotFloat Variables

These are variables that hold decimal numbers (fractions, not whole numbers). The name “float” comes from thinking of these decimal numbers as having “floating point values.”

Example Values: 4.3, 7.9999, 0.876764, -10.98

The Processing code for declaring a float variable: “float”

red-dotCharacter Variables

These are variables that hold letters, letters are enclosed by single quotes. You may use variable integers to create an interactive program that responds when certain keys are pressed. 

Example Values: ‘c’,’t’,’a’

The Processing code for declaring a character variable: “char”

red-dotBoolean Variables

These are variables that hold the value of either true or false.

Examples (only two options): true, false

The Processing code for declaring a boolean variable: “boolean”

red-dot

Variables must have:

1.  type

2. name

3. value

…specified for your computer to use them.

block3

–> Exercise 1:

Consider the information you just read above.

Now, in the box below with the 4 colored lines of code, identify for each line:

1. What type of variable is in the line of code?

2. What is the assigned name of the variable?

3. What is the assigned value of the variable?

*Your answers can be written as a //comment in a code file.

**This is not functioning code, this is just an exercise to help you identify parts of variable.

variables1

 

block3CODING SPECIFIC KNOWLEDGE:

3. Assigning Operations to Variables

 

When do variables make your designs interesting? 

When they are assigned operations.

Try this bit of code:

Screen-shot-2013-07-26-at-2.58

red-dot

The two variables at the top:

…will stay at the values 0 and 100 unless you tell the computer to do something with them.

red-dot

They are both plugged into the ellipse at the X and Y position (see in your code)

 and at first stay at 0, 100:

red-dotBut, this line of code changes everything! It is called the “assignment operator”.

It is the assignment operator and it tells the computer to do something to circleX every time it cycles through void draw().

What it is the assignment operator telling the computer to do?

 

–> Exercise 2 (four parts):

A. Change the name of the two variables to something silly and replace them in the code everywhere they are used so that code still works exactly the same (with the new names of your custom variables).

B. Identify with a code comment// which line of code is the assignment operator.

C. Explain how the assignment operator changes the value of the first variable as it loops through draw() in a code comment.

D. Add a second assignment operator in your draw() code under the first assignment operator but change this one that it does something different using your second variable to alter the sketch.   

block3

–> Exercise 3:

Move one or both of the above variables into the two argument positions of the ellipse so that the circle grows evenly in size. You may also need to change the start position or assignment operators of the ellipse. There are many possible options to solve this problem. The key is to start your circle in the middle of the screen and then grow it evenly using variables.

block3

–> Exercise 4:

Now, change the assignment operation so that the circle grows faster.

block3

–> Exercise 5:

Now change one line of code so that the circle follows the mouse as it grows.

block3

–> Exercise 6:

Now we will test multiple custom variables at once.

Enter the following code:

Screen-shot-2013-08-10-at-1.01

A. What are the assignment operators?

Show where they are as //comments in your code?

red-dot

B. Now run the code and compare the code with the design window.

Give a detailed explanation as to what is changing based on your variables and assignment operators.
Put this explanation in your //comments.  

red-dot

C. Why might you use a float variable instead of an integer variable?

Test the differences and explain why in your code //comments.

3-circs

block3

–> Exercise 7:

First, “hard code” the following image on a 200×200 sized canvas:

(AKA: no variables, no operations, no brackets , no void setup() or void draw())

pinkcircles1

Now, re-write this sequence using variables, the setup() function, the draw() function, and an assignment operator so that you change the position of the circles and move them. 

Specifically, move them slowly from left to right.

You will only need one variable and one assignment operator to achieve this result.

pinkcircles2

 

Hang in there!

If you are having a hard time then click here to see the answer but then work backwards to see why this solution works.

block3

–> Exercise 8

Hard code these three inner gray rectangles inside a 200×200 sized canvas.

grey-squares

Next, play around with these 3 squares using variables, functions and assignment operators.

Change their colors and positions, then add motion. Use more than one variable and assignment operator.

Play around, be creative.

smiley

block3

More Println() Uses

You already know the command println()

In Tutorial 2, you used it to help you understand the coordinates of the mouse with mouseX and mouseY:

You can also use println() to give information about any custom variable.

This will help you debug your code!

smiley

In the following program, the ellipse() is supposed to be visible and moving across the X axis with the variable “cat” —

BUT IT ISN’T!

So, we use the println() function to show what is happening with the variable “cat”

“cat” is a a negative number going down, so it is starting off screen and moving left – that is why you can’t see it!

This example may seem simple but using println() to figure out what your variables are doing will be very useful later!

smiley

Exercise 9:

Write a program with one ellipse that has two animated changes using two custom variables and two assignment operators.

Add a println() command that shows what happens to your two custom variables when things change.

block3

–> Exercise 10 (Review):

Try this bit of code:

do-it

In the above code, how do the system variables (width and height) instruct the position and size of the circle? How does the math work?

circle

block3
–> Exercise 10:

Now transform the above code so that there are two crossing lines.

Draw the two lines by using the system variables width() and height() in their code.

dot-x

block3

7. Randomizing Your Variables

Now, we can play with the code to get unexpected results. 

To achieve surprises in our designs, we will add into our tool box a new function called random().

red-dot

Try this bit of code:

blue-dot Exciting?

blue-dot-sketch

Nope.

red-dot

Now, try this bit of code (warning: flickering lights!):

random-code

More interesting?

color-frezy

So, what is going on here? 

The random() function mashed up the ellipse variables to create multiple variations in size, color and transparency.

red-dot

code-with-not-random

 

In the second code example, what gives the variables (r,g,b,a, diam, x and y) their values?

red-dot

–> Exercise 11:

Do some tests in the code program of your choice and figure out exactly how random() works.  Write as comments in your code an explanation that teaches/explains how to use random() in detail including what arguments to specify in the random() command.

block3

8. Controlling Random Options Explained

random-cubes

How does the random() function pick a number?

red-dot

The random() function needs arguments in order to work.

It is not enough to say, “give me a random number,” you must specify the range that your random number will come from.

 

            Standard Language Example:

            “Give me a number between 1 and 20.”

            Code Translation:     

            random (1,20);

red-dot

If you write only one argument in the random() function then it will assume that you mean a number between zero and that number.

         Code Example:

         random (12)

         Translation:

         Give me a number between 0 and 12.

red-dot

It is important to note that random only works with floats.

This means that there is a very large range of possibilities that could happen in your random() function number selection. 

A function of random (1,100) could produce almost infinite possibilities for the number it generates.

It might be 1 or 1.1 or 1.2 or 1.3…all the way to the numbers like 99.9 and 99.91…and so on.

047342

 

Bonus Information:

What if you don’t want that many possible values from your random() function? 

What if you only want random integers (whole numbers) generated?

images-1

Answer: To change the final value, you must use the rules of syntax to convert floats into integers.

This is called “casting.” 

red-dot

Here’s an example of how you could declare a random variable and specify that all results must become integers:

int y = int (random(1,100));

In this example, the random function is generated as a float & then converted (by way of parenthesis) to an integer.

block3

TUTORIAL 3 PROJECT:

Make a brand new animated world – landscape, science fiction, art portrait, cartoon world, game styled place, or? Think creatively! Create it so that has motion, visual changes and interactivity using your own custom variables, mouseX, mouseY and anything else you can apply from the tutorials 1-3 or the Processing website reference

REQUIREMENTS:

* Minimum 6 Animations/Changes (at least 3 must be user interactive).

* NOT– random art – must have an intentional design!

* Aesthetic design choices matter! Kick it up a notch. Consider perspective, how a light source works, and use color with intention!

* WANT TO USE CUSTOM PHOTOS? –> Download these Processing code examples to load and animate photographs. IMPORTANT: Please note that you will have to analyze the code to see how things work. In addition to writing the code for loading images you will also have to add your photos to your Processing program’s folder.

To do this, go here:

 

Still confused on loading Images? Watch this video:

block3

dude

You just finished a large chunk of important computer coding basics. Now you have functions, variables and assignment operators in your tool box. 

red-dot

Let the examples on this page and in previous sections be your reference/roadmap.

red-dot

It is strategic to move through these exercises slowly and steadily so that you lock in your skills. 

 

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:

Variables

Incrementing Variables

Using Random 

red-dot

Also, variables are explained here in another way by Jose Sanchez of the Plethora Project.

 

block3

Bonus Variables (& assignment operators) Review Workout Exercises 

Please refer back to all exercises and videos in tutorials 1-3, especially tutorial 3 to solve the following exercises.
1) Use 1 custom variable to make an ellipse that grows only in width from the center of screen.
2) Use 1 custom variable to make a rectangle that grows only in height and that changes color.
3) Use a custom variable to make an ellipse that starts out transparent and then becomes opaque blue.
4) Use 2 custom variables to make a line that grows horizontally from the center in both directions.
5) Use 4 custom variables to make a line that grows in both directions diagonally.

 

Link: Variable Exercises Answers
block3

book-cover

Bibliography / Further Resources:
Learning Processing by Daniel Shiffman
(This book informed this curriculum and is highly recommended.)