Computation as an Expressive

Medium
Lab 1: If, For, Draw, Setup and
Coffee

Joshua Cuneo
 What will we go over?

 B i administrative
Boring d i i i stuffff
 Variables and drawing primitives
 Instruction flow types, i.e. for, if...
 A little style
 “draw()” looping function for animation
 S
Simple l mouse interaction
 Stop me if you haven’t covered this yet!!!
 Anyone Can Program

 Just writing instructions

 I’ll
I ll make this as fun as I can
 Stop me if you get confused!
Why Do We Care?
Why Do We Care?

;#q#n+,/+k#;
;#q#n+ /+k#;*+ +,//'rr :
q#'+d'K#!/+k#;q#'r}eKK
){nl]!/n{n#'; r{#w'r nc{nl
nw' \ iwk{KK{nl]!/w{%'l
:{nl]'/*{q#'ld;r'}{nlwb!/*
-{}rw]'/+,}##'*}#nc,',#

=
 How This Lab Works

9:00 11:00

Snarky Waggle-Head Lecture Workshop

 TA Office Ho
Hourss
 T 1-2:30
30,, W 1-3, DM Lab.
Lab
 + Some Fridays
 NOT S
Sept.
t 4
 [email protected]
 What have yyou g
gone over?
 Window size and coordinate system (0,0) x
 Commenting code
 Variables
 Drawing primitives y
 point
 line
 rect
 ellipse
p
 Triangle
 if Statemenets
 What else?
 Variables
Va iables

 Variables are placeholders for your data

 Remember middle school algebra?

int i; // declares a new variable i

i = 1; // assigns the value of 1 to the new
// variable
int j = i + 1; // declares a new variable j, and
// assigns it to i + 1,
1 which is 2.2
 Va iable Types
Variable T pes
 Primitives:
 boolean,, cchar
boolean har,, byte, short, int
nt,, long, float
float,, double

 Objects:
 Built on primitives
 Ex. String – sequence of characters
More
Mo e info on drawing
d a ing primitives
p imiti es
 RTFM!
 http://www.processing.org/reference/index.ht
p // p g g/ /
ml
 Function descriptions can be really helpful once you
learn how to read them...
 Instruction Flow 1: Linear

 Most common flow type

Do this
Th
Then do
d this
thi
Then do this
Then do this
etc....
Inst ction Flow
Instruction Flo 2: Conditional

if something is tr
true
e
do this
otherwise, if something else is true
do this
otherwise,
do this
 Inst ction Flow
Instruction Flo 2: Conditional
int power = 0;

if(power
(p > 10)
)
{
fire_laser();
}
else
l if(i > 0) // h t if this
//what thi was j
just
t if?
{
charge_laser();
}
else
{
turn_on_laser();
}
 Inst ction Flow
Instruction Flo 3:
3 Looping

while something is true

do this repeatedly
p y until that
something is false
 Inst ction Flow
Instruction Flo 3:
3 Looping

 Want to draw five lines, evenly-

evenly-spaced
apart?
p
line(10, 10, 10, 200);
line(20, 10, 20, 200);
line(30, 10, 30, 200);
...

 Wh t if you had
What h d 1000 lines
li to
t draw?
d ?
 Inst ction Flow
Instruction Flo 3: Looping

 Want to draw five lines, evenly-

evenly-spaced
apart?
p What if we could run this
same line of code multiple
line(10, 10, 10, 200); times, only changing these
line(20, 10, 20, 200); two numbers?
line(30, 10, 30, 200);
...
 While Loops

int i = 10; line(10, 10, 10, 200);

line(20, 10, 20, 200);
while(i <= 100) line(30,
30 10, 30,
30 200);
{ line(40, 10, 40, 200);
line(i, 10, i, 200);
i = i + 10;
vs line(50, 10, 50, 200);
line(60,
( , 10,, 60,
, 200);
);
} line(70, 10, 70, 200);
line(80, 10, 80, 200);
line(90, 10, 90, 200);
li (100 10,
line(100, 10 100,
100 200);
200)

 Ch k the
Checks th condition
diti before
b f each
h repetition
titi off the
th code.
d
 While Loops
 Be careful of infinite loops

while(true) int i = 10;

{
... while(i > 0)
} {
line(i, 10, i, 200);
i = i + 10;
}

= BAD
BAD*
*Most of the time
 For
Fo Loops
 These two loops are functionally the same:

int i = 10; for(int i = 10; i <= 100; i += 10)

{
while(i <= 100) line(i, 10, i, 200);
{ }
line(i, 10, i, 200);
i +
+= 10;
}

(i += 10 is equivalent to i = i + 10)
 N t d LLoops
Nested

for(int i = 10; i <= 100; i += 10)

{
for(int j = 10; j <= 100; j += 10)
{
point(i, j);
}
}

 This means that the inside loop will run all the way
through,
g , then i will increment,, and the inside loop
p will
run again.
 N t d LLoops
Nested

Sets i to 10. That’s all for now.

i
for(int i = 10; i <= 100; i += 10)
{
for(int j = 10; j <= 100; j += 10)
{
point(i, j); j
}
}
 N t d LLoops
Nested

Sets j to 10. That’s all for now.

i
for(int i = 10; i <= 100; i += 10)
{
for(int j = 10; j <= 100; j += 10)
{
point(i, j); j
}
}
 N t d LLoops
Nested

for(int
( i = 10;
; i <= 100;
; i += 10)
) i
{
for(int j = 10; j <= 100; j += 10)
{
point(i j);
point(i,
}
j
}

i’s 10, j’s 10. Draws a point at (10, 10). Simple enough.
 N t d LLoops
Nested

for(int i = 10; i <= 100; i += 10)

i
{
for(int j = 10; j <= 100; j += 10)
{
point(i j);
point(i,
}
j
}

Now we jump to the top of the innermost loop,

and increment j by 10, and then check if it’s greater
or equal to 100, which it’s not, so we continue.
 N t d LLoops
Nested

for(int i = 10; i <= 100; i += 10)

{ i
for(int j = 10; j <= 100; j += 10)
{
point(i,
p ( , j);
}
} j

i is still 10, but j is now 20. We draw the new point,

Then go to loop again.
 N t d LLoops
Nested

for(int i = 10; i <= 100; i += 10)

{ i
for(int j = 10; j <= 100; j += 10)
{
point(i, j);
}
} j

Aha. So we keep looping in this j loop until it

passes 100. Then what?
 N t d LLoops
Nested

for(int i = 10; i <= 100; i += 10)

{ i
for(int j = 10; j <= 100; j += 10)
{
point(i, j);
}
} j

Well,, now that the program

p g has exited from our j loop,
p,
It sees that it’s still inside our i loop, and increments i
by 10.
 N t d LLoops
Nested

for(int i = 10; i <= 100; i += 10)

{
i
for(int j = 10; j <= 100; j += 10)
{
point(i, j);
}
}
j
The pprogram
g reaches the j loop
p again,
g , so it loops
p
All the way through drawing dots. Only this time, i
is 20, so the dots are further to the right.
 N t d LLoops
Nested

for(int i = 10; i <= 100; i += 10)

{ i
for(int j = 10; j <= 100; j += 10)
{
point(i, j);
}
} j
The i loop
p keeps
p incrementing g in this way,
y, drawing
g
columns of dots, until i exceeds 100. The program
then exits the code inside the i loop’s brackets.
 N t d LLoops
Nested

 Useful for drawing in 2D space

 What would you need for 3D space?
 Function

 Just a block of code with a name

 Call the name to execute the block

int i = 10; void myFunc()

{
while(i <= 100) float a = 200;
{ background(255);
a = a - 1;
line(i, 10, i, 200);
if (a < 0) {
i += 10; a = height;
} }
line(0, a, width, a);
myFunc(); }
 A Few Words About Style
 Naming conventions

 ex. Monster AI function

 Good: do_monster_AI()
 Bad: snuffleupagus()

 Don't go overboard
 this_is_my_really_cool_function_and_yo
ure an idiot if you dont like it()
ure_an_idiot_if_you_dont_like_it()
 A Few More Words About Style
 Formatting
 Put curly brackets on their own line
 Indent interior blocks of code
 C
Comment t your code
d
 This makes your code easier to read and follow
float a = 200;

void draw() float a = 200; void draw() {

{
background(255);
a = a - 1;
vs background(255);
g ( ); a = a - 1;
if (a < 0) { a = height; }
line(0, a, width, a); }
;

if (a < 0) {
g ;
a = height;
}
line(0, a, width, a);
}
 The d
draw()
a () function
f nction

 Special Processing function

 Runs a number of times per second
 Used for user interaction and animation
 The d
draw()
a () function
f nction

 Simple example:
float a = 200;

void draw()
{
background(255);
2
a = a - 1;
if (a < 0) {
a = height;
}
line(0, a, width, a);
}
 The d
draw()
a () function
f nction

 Simple example:
fl
float a = 200;
200
Important! The variable declaration
void draw() must be outside the loop function, or
{
else it will be reset everyy time draw()
() is
background(255);
2
a = a - 1;
called.
if (a < 0) {
a = height; (Try putting it inside draw() to see what
} happens)
line(0, a, width, a);
}
 The d
draw()
a () function
f nction

 Simple example:
float a = 200;

void draw() For animation, this line is necessary

{ to clear the last frame that was drawn.
b k
background(255);
d(255)
a = a - 1; It tells Processing to paint the
if (a < 0) {
background of the window we see
a = height;
} white – we could do other colors if we
line(0, a, width, a); wanted
}
 The d
draw()
a () function
f nction

 Simple example:
float a = 200;

void draw() This is the meat of what makes the

{ line move. Each loop, we subtract 1
background(255);
2 from the variable a, which we later
a = a - 1; use when drawing the line, so it will
if (a < 0) {
appear to move.
a = height;
}
line(0, a, width, a); When a is 0, we’ve hit the top of the
} window, and reset a to the highest
value.
 The set
setup()
p() ffunction
nction
 Used to define window properties at startup
 size(width, height): size of drawing window (in pixels)
 framerate(fps):
framerate (fps): number of times per second that
draw() is called

void setup()
{
size(640, 480);
framerate(30);
}
 Tracking
T acking Mouse
Mo se Position

 Special Processing variables

 mouseX, mouseY
mouseX, mouseY:: current X and Y of cursor,
relative to the top-
top-left of drawing window.

void draw() A simple program that moves a

{ line left or right to follow your
background(204); cursor. Note that it stops tracking
line(mouseX, 20, mouseX, 80); your mouse when it’s not in the
} drawing window.
 Reacting to Mo
Mouse
se Clicks
 Use the variable mousePressed
d.
mousePressed.
P

This simple function will draw a point

void draw() {
in the window whenever the mouse is
if(mousePressed) {
in the clicked position. Try clicking and
point(mouseX, mouseY);
dragging around the window and see
}
what happens.
}
Can you think of a way to make the
drawing smoother?

 Also see mouseReleased, mouseMoved, and

mouseDragged.
 width and height

 width = width of the screen

 height = height of the screen
 Assignment 1

 Questions?