Week 3 Homework Presentation

1
Week 3Homework Presentation

• Original Composition from 1/30.
• Processing version.
• Your Initials.
• Your Pattern!

2
Todays Goals

• Review last weeks concepts.
• Learn more about variables.
• Explore loops and conditionals.
• Learn about functions.
• Start animating things!

3
Lets review!

• What do you remember?
• Programming concepts?
• Tricks?
• Elements?
• Best practices?

4
Last Week in Processing

• Set up your canvas/sketch.
• Draw shapes.
• Color and arrange shapes.
• Variables and datatypes.
• Math operators.
• Plus
• order matters
• commenting your code.

5
1. Set up your canvas.
6
2. Draw shapes.
7
3. Color and arrange shapes.
8
4. Variables.
9
5. Datatypes.
10
5a. Color Datatype.
11
5b. Int and Float Datatypes.
12
5c. Boolean and Char Datatypes.
13
6. Math Operators.
14
Now, something new!
15
Performing things more than once--Loops.
16
A Loop.
Do this
How many times have I do it?
When do I start?
Do this
Do this
How many times until I stop?
17
Loops have 3 components.1. Initializer.2.
Conditional..3. Incrementer.
18
A Loop, again.
How many times have I done it?
Incrementor
When do I start? Initializer
Do this
Do this
Do this
How many times until I stop?
Conditional
19
FOR loopfor( int p 0 p lt 3 p)rect(p,
p 3, 4, 4) Add 1 to p for each time
integer p is less than 3. Each time, do whats in
the s.p0 --gt initializerplt 3
--gt conditionalp (or pp1) --gt
incrementor
20
Note the curly brackets. This specifies the
beginning and end of the code you are
looping.This is called a block of code.Make
sure you have a for every .
21
Remember initializer, conditional, incrementor?
Lets look at this code
int xpos 200 size(200,
100) background(240) while (xpos gt 0)
line(xpos, 10, xpos, 90) xpos xpos
5
22
while loop
1st time through the loop xpos 200, 200 is gt
0, so draw a vertical line where x 200 and
subtract 5 from xpos. 2nd time through the loop
xpos 195, 195 is gt 0, so draw a vertical line
where x 195 and subtract 5 from xpos. 3rd time
through the loop xpos 190, 190 is gt 0, so draw
a vertical line where x 190 and subtract 5
from xpos. .. 39th time through the loop xpos
5, 5 is gt 0, so draw a vertical line where x
5 and subtract 5 from xpos. 40th time through the
loop xpos 0, 0 is NOT gt 0, so STOP EXECUTING
THE LOOP!
23
We can also use for loops in the same way. Draw
10 rects with a for loop
size(200,100) background(240) for(int
i0ilt10i) rect(i205, 10, 10,
80) In this loop, i0 --gt
initializer ilt10 --gt conditional i
(or ii1) --gt incrementor
24
If you change the stroke color and draw lines
inside a for loop, you can make gradients
25
Using loops, colors and shapes, you can make some
pretty, serious patterns.
26
Conditionalsif statement in a for loop.
The following are relational operators available
in Processing ! (inequality) gt (greater
than) gt (greater than or equal to) lt (less
than) lt (less than or equal to) (equality)
27
Best Practices, Reserved Words
28
Programming Principles 2

• Variables are named and have a datatype.
• Loops require an initial value, a conditional
  statement and an incrementor
• Loops require s
• If requires a then

29
Functions (Abstractions)

1. Figure out a process.Name it.Use the name later
   to run the process without needing to rewrite
   it.Change it in one place.Better speed.

30
Function are blocks of code that perform a task.
Functions consist of
31
Simplify processesint calc(int xpos)xpos
xpos 10return xposif there isnt a return
value, the return type is Void
Return type
parameters
Return value
32
A simple function
void drawRect (int pos) rect(pos, pos 30, 40,
40)
Function call
drawRect(50) drawRect(20) What does this do???
33
Time is Motion.
You can create programs that change over time.
To do this, we use two special Processing
functions setup() draw()
34
The setup() and draw() functions.

• setup() - gets executed once, when you press
  start to run your program.
• draw() - gets executed over and over again until
  the stop button is pressed.

35
Simple animation using setup() and draw()
36
Note that the lineint x 0is not in the
setup() or draw() functions. Global variable
accessed from any block of code in your program.
37
Local Variable A variable declared in a block of
code. Can only be accessed within that block
of code.
38

• Take a square from zero to sixty
• Open up your processing window and
• Enter the following code
• for(int i 0 i lt 60 i)
• rect(i, 50, 20, 20)

39

• You should get something like this

• Pretty fast, huh?

40

• What happened?
• In a single execution cycle, Processing drew 60
  (actually 61)
• squares. You didnt see it because it all
  happened as fast as
• your computers processor could handle it.
• for(int i 0 i lt 60 i)
• rect(i, 50, 20, 20)

41
What if you want to actually see it animate from
zero to sixty? Remember those flipbook
animations? The key to animation is to make
small changes and let a little time pass between
each change.
42
Fortunately, processing makes animation easy.
How easy? All you have to do is setup () and
draw ().
43
setup is where you write in the starting values
of any variables you might want to use in the
rest of your sketch. You must declare the
variables outside of setup!
44
See what happens!
45
Now its working. Whats print?
46
draw is a loop that pauses a little between each
time it runs. The default speed for draw is
around 29 frames per second about the same as
film.
47
Lets try going from zero to 60 again using the
draw loop. Your turn!
48
Hmm, looks a little better but something is still
not quite right? Anyone know what the problem
is?
49
Ah yes, the background I need to redraw it
every time I loop through a frame.
50
Very nice. Um, a little boring though. Your
turn use the documentation and make something
more interesting!
51
Just for fun, try this out while youre at it.
Can anyone explain what is happening here?

52
Fancy math.
53
Interaction
You can use some of Processing's system variables
along with the draw() function to make
interactive pieces. Mouse system vars
mouseX - the current horizontal coordinate of
the mouse. mouseY - the current vertical
coordinate of the mouse. mousePressed - true if
a mouse button is pressed and false if a button
is not pressed. mouseButton - either LEFT,
RIGHT, or CENTER depending on which button is
pressed.
54
Simple example Rectangle mirrors mouse
position.
55
Functions called when a given type of interaction
occurs.
56
Here is a simple drawing tool (Note that you
need to include the draw() function for these
functions to work.)
The random(n) function returns a random number
between 0 and n.
57
Thats all for today!

• For next week your homework is to
• Finish in class exercises.
• Animate your initials.
• Revise your pattern to respond to some input or
  make a cool drawing tool.