Boost Fertility New Invention Ups Success Rates.pdf
Learn Creative Coding: Begin Programming with the Processing Language
1. Learn Creative Coding
Begin Programming with the
Processing Language
W. Michelle Harris
Rochester Institute of Technology
http://people.rit.edu/wmhics
Long Beach Indie Digital Edutainment Conference 8.30.14
3. How do you communicate a
design?
Imagine you opened your favorite drawing
app, created a new document, and drew a
straight line and a circle.
How would you type out complete
instructions for re-creating your drawing (no
illustrations allowed)?
Take a few minutes to ponder this…
4. Do they need to know:
1. Drawing app choice
2. Dimensions of canvas
3. Canvas color
4. Line drawing tool
5. Line stroke color,
thickness
6. Line drag start and
stop coordinates
7. Circle drawing tool
8. Circle stroke color,
thickness
9. Circle fill color and
pattern
10. Circle bounding box
drag start and stop
coordinates
-or- Circle center
coordinate and radius
11. ?
5. Line + circle in drawing app,
then in Processing code
6. Prepare the Canvas
1. Drawing app choice: new Processing sketch!
2. Dimensions of canvas
3. Canvas color
7. Processing
environment
A program written in
Processing is called a
sketch.
Type your sketch in this
space. Text is colored
automatically according to
its purpose.
Status feedback area
Console area for text output and too-detailed
error messages.
Current cursor line number in this sketch.
8. A warning before we code:
Processing is as picky as your 8th grade
Language Arts teacher
Order, spelling, capitalization, and punctuation
matter. Mistake => won’t go at all, or goes wonky.
point(30, 75);
// point() parameters: x, y
Function name, then parentheses with any
parameters inside separated by commas. End with a
semicolon.
Each instruction can start and be interspersed with
spaces, tabs, and even line breaks for readability.
Entire lines can be blank for readability, too.
9. Prepare the Canvas
/* When you make this new canvas, size it 300
pixels wide, and 250 pixels tall. */
size(300, 250);
/* Set the canvas background color to white. */
background(255);
size(widthPix, heightPix); // in pixels
background(grayValue); // 0.0 – 255.0
// Alternatively, background(red, green, blue);
10. Prepare settings for the Line
4. Line drawing tool? There is only one choice ;)
5. Line stroke color, thickness
11. Prepare settings for the Line
/* Set the drawing stroke color to blue */
stroke(128, 119, 251);
/* Set the drawing stroke thickness to 5 pixels */
strokeWeight(5);
stroke(redVal, blueVal, greenVal); //0.0 – 255
strokeWeight(widthPix);
12. Draw the Line
6. Line drag start and stop coordinates
13. Draw the Line
/* Start line at coordinates x:135, y:213, and end
the line at coordinates x:287, y:66. */
line(135, 213, 287, 66);
line(x1, y1, x2, y2);
Save and Run your sketch.
14. Prepare settings for the Circle
7. Circle drawing tool: Choose drawing mode –
corner-to-corner? Start coordinates & width
& height (default mode in Processing)?
8. Circle stroke color, thickness
9. Circle fill color and pattern
15. Prepare settings for the Circle
/* Set the drawing fill color to black */
fill(0);
/* We don’t want any drawing stroke */
noStroke();
fill(grayValue); //0–255
fill(red, blue, green);
noStroke();
16. Draw the Circle
10.From circle center drag out width and height
17. Draw the Circle
/* Center ellipse at coordinates x:110, y:110, and
make width 100, height 100. */
ellipse(110, 110, 100, 100);
ellipse(x, y, width, height);
Save and Run your sketch.
18. One question you might have
Sometimes, we gave Processing a single
grayscale color value, and sometimes we gave
it three RGB color values. Can both be right?
19. stroke(): 6 ways
to color
stroke(gray);
stroke(red, green, blue);
stroke(#RRGGBB);
stroke(gray, alpha);
stroke(red, green, blue, alpha);
stroke(#RRGGBB, alpha);
Processing knows which version of the function
you want by the number and type of parameters
within its parentheses.
Many of the built-in functions work this way.
21. Section goals
1. If I design a composition with simple shapes,
I can remake it in Processing.
2. I know how to use different kinds of color
parameters to make those shapes.
3. I know how to use the Processing Reference
to find out details about functions.
22. Helpful hints
Pay attention when auto-coloring does NOT
do what you expected.
Get familiar with what kinds of errors cause
which messages and where (make mistakes
on purpose to check).
Processing will stop compiling your code at
the first syntax error it encounters. Watch the
cursor for where it thinks that error occurred.
23. Next: Five Things
1. /* Comments */ and //Comments
2. Math expressions
3. Code blocks for animation
4. Tracking the mouse
24. 1. Which would you rather
troubleshoot?
size(300, 250);
background(255);
stroke(128, 119, 251);
strokeWeight(5);
line(135, 213, 287, 66);
fill(0);
noStroke();
ellipseMode(CORNERS);
ellipse(59, 60, 159, 160);
/* Canvas prep */
size(300, 250);
background(255); // white bg
/* Line prep */
stroke(128, 119, 251); // blue line
strokeWeight(5);
/* Make the line */
line(135, 213, 287, 66);
/* Circle prep */
fill(0); // black fill
noStroke();
/* Make the circle */
ellipse(110, 110, 100, 100);
25. 1. Comments, 2 ways
//Single line comment
/* Multiline comments
can take up all the
space
you need as long as
they end with… */
/* Canvas prep */
size(300, 250);
background(255); // white
/* Line prep */
stroke(128, 119, 251); // blue
strokeWeight(5);
// Make the line
line(135, 213, 287, 66);
26. 2. How many little equations
would you need to figure to
position all the shapes?
An alternative: substitute
a math expression for a
person-calculated value.
27. 2. Math expressions as function
parameters. Code before...
+ plus
size(400, 300);
- minus
*multiplied by
/ divided by
%modulo remainder
// head
ellipse(200, 150, 100, 100);
//eyes
ellipse(180, 150, 20, 30);
ellipse(220, 150, 20, 30);
28. 2. Math expressions as function
parameters. Code lazier.
+ plus
size(400, 300);
- minus
*multiplied by
/ divided by
%modulo remainder
// head
ellipse(200, 150, 100, 100);
//eyes
ellipse(200 - 20, 150, 20, 30);
ellipse(200 + 20, 150, 20, 30);
29. 2. Math expressions as function
parameters. Code laziest.
+ plus
- minus
*multiplied by
/ divided by
%modulo remainder
Helpful built-in
property variables:
width //canvas width
height //canvas height
size(400, 300);
// head – centered on canvas
ellipse(width/2, height/2,
100, 100);
//eyes
ellipse((width/2 – 20), height/2,
20, 30);
ellipse((width/2 + 20), height/2,
20, 30);
30. 3. An analogy: running
http://www.blackgirlsrun.com/partner-up
31. 3. To animate runners
One-time Setup steps:
1. Size the canvas
2. Set the desired frame update rate
Perpetually loop these Draw steps:
1. Color the canvas (to erase the prior frame)
2. Draw scenery elements
3. Draw next sprite in cycle of runner #1
4. Draw next sprite in cycle of runner #2
5. Render pixels from 1-4.
32. 3. Blocks: grouping/herding code
A block of code is any code enclosed in { }. One useful feature
of blocks: they can be nested within each other.
block1 { // a block of code opens
statement;
block2 { // a nested block of code opens
statement;
statement;
} // end of block2
statement;
} // end of block1
block3 { // a block of code opens
statement;
} // end of block3
33. 3. To animate in Processing
void setup() { // Initialization code goes here
size(400, 3oo);
frameRate(24); // Frames per second. Default max is 60.
}
void draw() { // Code to run forever - animate - goes here
background(255);
drawScenery(); // this function doesn’t exist
drawNextRunner1(); // this function doesn’t exist
drawNextRunner2(); // this function doesn’t exist
/* At the end of draw(), Processing renders
the new pixels produced in this block. */
}
35. 4. Now edit it
}
void draw() { // animate!
background(255);
point(200, 150);
}
}
void draw() { // animate!
background(255);
//point(200, 150);
point(mouseX, mouseY);
}
mouseX and mouseY are built-in property variables of the sketch like
height and width (in the same way that point() is a built-in function).
37. 4. Edit for variation with
pmouseX and pmouseY
void draw() { // animate!
// background(255);
point(mouseX, mouseY);
}
void draw() { // animate!
// background(255);
// point(mouseX,
mouseY);
line(pmouseX, pmouseY,
mouseX, mouseY);
}
pmouseX and pmouseY are built-in property variables for the position
of the mouse in the frame draw()n just prior to the current one.
38. 3 Things you’re doing now
1. draw() {} code blocks for animation
2. Math expressions with built-in property
variables
3. Mouse property variables for interaction
39. Data types
In Processing, data are
categorized by type.
Three useful data types:
int whole numbers (-230548, 0, 45)
float decimal numbers (-4.3, 30984.349)
String sequence of characters ("Hi, Ebony!")
40. Making our own Variables
What if I want to use that hard-calculated
value again?
The answer: Let's create our own variable
and store it there.
41. Variables
Container for storing some piece of data. A
variable is a way for the program to remember.
Each variable has a name
We make up almost any name we want within the
rules (but it should make sense!)
We can use the name to refer to that piece of data
The value might change during the execution
of the program. Hence, “variable.”
The variable actually points to a specific physical
memory location in RAM.
43. float mdistance; // Declare the variable type and name
void setup() {
size(400, 300);
frameRate(5);
colorMode(HSB);
}
void draw() {
/* Assign mdistance to store the distance between
the latest and just-previous mouse positions.
*/
mdistance = dist(pmouseX, pmouseY,
mouseX, mouseY);
fill(frameCount % 256, 255, 255);
triangle(0, 0, mouseX, mouseY, mdistance, mdistance);
}
44. float mdistance; // Declare the variable type and name
void setup() {
size(400, Before 300);
we use a variable, we need to declare
frameRate(5);
colorMode(it.
HSB);
}
To declare it, use the keyword for the type of
void draw() data {
it will hold:
/* Assign mdistance to store the distance between
String instructions;
int shapeNumber;
the latest and just-previous mouse positions.
*/
mdistance = dist(pmouseX, pmouseY,
mouseX, mouseY);
At this point, the variable exists, but doesn’t
hold a value yet. We’ve simply informed the
computer that we intend to use a variable by
that name and of that data type.
fill(frameCount % 256, 255, 255);
triangle(0, 0, mouseX, mouseY, mdistance, mdistance);
}
45. float mdistance; // Declare the variable type and name
void setup() {
size(400, 300);
frameRate(5);
Why is this variable
colorMode(HSB);
declared as type float?
}
Why not type int?
void draw() {
/* Assign mdistance to store the distance between
the latest and just-previous mouse positions.
*/
mdistance = dist(pmouseX, pmouseY,
mouseX, mouseY);
fill(frameCount % 256, 255, 255);
triangle(0, 0, 0, height, mdistance, mdistance);
}
46. void draw() {
/* Assign mdistance to store the distance between
the latest and just-previous mouse positions.
*/
mdistance = dist(pmouseX, pmouseY,
mouseX, mouseY);
fill(frameCount % 256, 255, 255);
triangle(0, 0, 0, height, mdistance, mdistance);
triangle(width, height, width, 0, mdistance, mdistance);
}
Give a variable a value with an assignment
statement – it uses an equal sign.
shapeNumber = frameCount - 1;
The action goes right to left: the value
(frameCount – 1) replaces any current value in
the variable shapeNumber.
47. float mdistance; // Declare the variable type and name
void setup() Once {
the variable is declared and a value
size(400, assigned, 300);
we can use the variable anywhere
frameRate(5);
colorMode(we would HSB);
have used the value:
}
point(shapeNumber, height/2);
void draw() {
/* Assign mdistance to store the distance between
the latest and just-previous mouse positions.
*/
mdistance = dist(pmouseX, pmouseY,
mouseX, mouseY);
fill(frameCount % 256, 255, 255);
triangle(0, 0, mouseX, mouseY, mdistance, mdistance);
}
48. float mdistance; // Declare the variable type and name
void setup() {
size(400, 300);
frameRate(5);
colorMode(HSB);
}
void draw() {
/* Assign mdistance to store the distance between
the latest and just-previous mouse positions.
*/
mdistance = dist(pmouseX, pmouseY,
mouseX, mouseY);
fill(frameCount % 256, 255, 255);
triangle(0, 0, mouseX, mouseY, mdistance, mdistance);
}
49. Rules for variable names
Must start with a letter
May NOT contain spaces (only one “word”)
May contain numbers and _underscores_
camelCase
Start with lower case letter
Opt: next words start with upper case (easier to read)
Tip: Longer is often better for future
comprehension
selectedCar instead of sc or selCar or selectCar
50. You can declare and assign an
initial value in one statement
// Circles along the diagonal
int shapeNumber;
int randomSize;
void setup() {
size(200, 200);
ellipseMode(CENTER);
shapeNumber = 1;
}
void draw() {
randomSize = int (random(5, 50));
ellipse(shapeNumber,
shapeNumber, randomSize,
randomSize);
shapeNumber = shapeNumber + 1;
}
// Circles along the diagonal
int shapeNumber = 1;
int randomSize;
void setup() {
size(200, 200);
ellipseMode(CENTER);
}
void draw() {
…
52. and now 6...
If-else [conditional] blocks
Instead of always following one path, let the
computer make a choice based on the
current outcome of some condition.
53. Decisions in computerese
Carbon-based life
If it is raining hard
enough to bother me
outside, maybe I'll put
on a hat or carry an
umbrella – depends on
my mood.
Silicon-based machines
rainIntensity = calcIntensity();
if (rainIntensity > 3) {
wearRainCover();
}
wear
RainCover
54. Decisions in computerese
Carbon-based life
If it is raining hard
enough to bother me
outside, maybe I'll put
on a hat or carry an
umbrella – depends on
my mood.
Otherwise, I'm
wearing my new
shades.
Silicon-based machines
rainIntensity = calcIntensity();
if (rainIntensity > 3) {
wearRainCover();
} else {
wearSunCover();
}
55. If-else block
if (rainIntensity > 3) { // do this if true
wearRainCover();
} else { // otherwise do this
wearSunCover();
}
Expression that can
evaluate to true or false
rain sun
56. If-else block
if (Boolean expression) { // do this if true
statement;
statement;
} else { // otherwise do this (opt)
statement;
statement;
statement;
}
Expression that can
evaluate to true or false
57. Start with creeping circle...
int x = -20;
void setup() {
ellipseMode(CENTER);
}
void draw() {
ellipse(x, height/2, 20, 20);
x = x + 1;
}
After the circle
gets beyond the
right edge, we will
never see it
again.
Let's change that.
58. Proceed with cycling circle
… }
void draw() {
ellipse(x, height/2, 20, 20);
x = x + 1;
// If circle gets too far…
if (x > (width + 20)) { //cycle!
x = -20;
}
}
… }
void draw() {
ellipse(x, height/2, 20, 20);
x = x + 1;
/* When circle goes off
right edge, start it back
at left edge again.
*/
}
59. Boolean expressions with
comparison operators
true
45 == 45
10 < 100
10 > -3
99 <= 100
99 >= 98
100 != 88
Do block
false
45 == 30
10 < -3
10 > 88
99 <= 30
99 >= 100
100 != 100
Skip block
Reserved word representing a
logical value.
Equal?
Less?
Greater?
Less or equal?
Greater or equal?
Not equal?
60. Points, black
circles, and red
rects depending
on conditional
expressions.
void setup() {
ellipseMode(CENTER);
rectMode(CENTER);
}
void draw() {
if (mouseX < 10) { // far left
ellipse (width/2, mouseY, 20, 20);
}
if (mouseX < width/2) { // left side
stroke(0); // black stroke
} else { // right side
stroke(255,0,0); //red stroke
}
point(mouseX, mouseY);
if (mouseX >= width - 10) { // far right
rect (width/2, mouseY, 20, 20);
}
}
62. More
complex
expressions
Logical operators:
a || b || c // or
if any is true
a && b && c // and
only if all true
!a // not
if not true
booleanmyTest;
myTest = (mouseY < 0) ||
(mouseY > height);
// mousePressed and keyPressed
// are built-in boolean variables.
myTest = mousePressed &&
keyPressed;
// key (built-in char variable) returns
// most recent keyboard key value
myTest = !((key == 'q') || (key == 'Q'));
67. Two things
1. Global vs Local variables
2. Iteration with while loops
68. 1. Global (what we've been
doing) versus Local variables
variable scope
69. 1. Global variables (used so far)
Declare outside/beyond any block
Known throughout all
Persists from declaration throughout run of app
float mdistance;
void setup() {
size(400, 300);
frameRate(5);
colorMode(HSB);
mdistance = 10;
}
void draw() {
mdistance = dist(pmouseX, pmouseY,
mouseX, mouseY);
fill(frameCount % 256, 255, 255);
triangle(0, 0, 0, height,
mdistance, mdistance);
triangle(width, height, width, 0,
mdistance, mdistance);
}
70. 1. Local variables
Declare inside a block
Exists only inside the block
Persists from declaration to end of current run of
the block
// no mdistance exists
void setup() {
size(400, 300);
frameRate(5);
colorMode(HSB);
// no mdistance exists
}
void draw() {
int mdistance = dist(pmouseX, pmouseY,
mouseX, mouseY);
fill(frameCount % 256, 255, 255);
triangle(0, 0, 0, height,
mdistance, mdistance);
triangle(width, height, width, 0,
mdistance, mdistance);
} // no mdistance exists
73. 1. Is count local or global? Would
this declaration work?
void setup() {
size(200,200);
int count = 0;
}
void draw() {
count = count + 1;
background(count);
println(count);
}
74. 1. When should you use local vs.
global?
void mousePressed() {
int count = frameCount % 255;
background(count, 255, 255);
}
void draw() {
int count = mouseX + 40;
fill(count);
triangle(0, 0, width, height,
0, height);
}
Global if…
Need to use in multiple
blocks.
Need to persist beyond
a single run of a block.
Local if…
Alright/need to re-birth
each run of a block (like
both cases in this
example)
75. 2. Iteration with while loops
Doing it and doing it and doing it well.
76. 2. Conditional to Iteration
locationX = 0;
if (locationX < width) {
point(locationX, 40);
// move point
locationX = locationX + 1;
}
// do more stuff
Draw &
move pt
77. 2. Conditional to Iteration
locationX = 0;
while (locationX < width) {
point(locationX, 40);
// move point
locationX = locationX + 1;
} // exit loop only if condition false
// do more stuff
Draw &
move pt
78. 2. Conditional to Iteration
Three keys to this loop:
1. Prepare variable
before
2. Test condition with
variable
3. Change variable
during repetition
locationX = 0;
while (locationX < width) {
point(locationX, 40);
// move point
locationX = locationX + 1;
} // exit loop if condition false
// do more stuff
If you don't ensure the while condition will at some point become true, the
program won't ever escape the loop (until you kill it :O).
79. 2. Iterating legs
//Prep to draw legs - vertical lines 100px long
strokeWeight(4);
// First leg just beyond left edge of body (100).
// Draw legs spaced every 15px until
// beyond right edge of body, which is at 300.
line(110, 100, 110, 200);
//place next leg, 2
line(125, 100, 125, 200);
//place next leg, 3
line(140, 100, 140, 200);
//place next leg, 13
line(290, 100, 290, 200);
size(400, 300);
stroke(0);
strokeWeight(1);
fill(0);
//draw body as rectangle
rectMode(CORNER);
rect(100, 130, 200, 40);
//draw head as ellipse
ellipseMode(CENTER);
ellipse(80, 150, 50, 30);
What changes
and what stays
the same? Is
there a pattern
to the change?
Can we use a
variable to
simplify?
80. 2. Iterating legs
//Prep to draw legs - vertical lines 100px long
strokeWeight(4);
// First leg just beyond left edge of body (100).
// Draw legs spaced every 15px until
// beyond right edge of body, which is at 300.
legX = 110;
line(legX, 100, legX, 200);
//place next leg, 2
legX = legX + 15;
line(legX, 100, legX, 200);
//place next leg, 13
legX = legX + 15;
line(legX, 100, legX, 200);
int legX; //x position of leg
size(400, 300);
stroke(0);
strokeWeight(1);
fill(0);
//draw body as rectangle
rectMode(CORNER);
rect(100, 130, 200, 40);
//draw head as ellipse
ellipseMode(CENTER);
ellipse(80, 150, 50, 30);
81. 2. Iterating legs
//Prep to draw legs - vertical lines 100px long
strokeWeight(4);
// First leg just beyond left edge of body (100).
// Draw legs spaced every 15px until
// beyond right edge of body, which is at 300.
legX = 110;
line(legX, 100, legX, 200);
//place next leg, 2
legX = legX + 15;
line(legX, 100, legX, 200);
//place next leg, 13
legX = legX + 15;
line(legX, 100, legX, 200);
int legX; //x position of leg
size(400, 300);
stroke(0);
strokeWeight(1);
fill(0);
Prepared variable
//draw body as rectangle
rectMode(CORNER);
rect(100, 130, 200, 40);
Repetitive code that
changes variable.
//draw head as ellipse
ellipseMode(CENTER);
ellipse(80, 150, 50, 30);
82. 2. Iterating legs
// Prepare to draw legs
strokeWeight(4);
// First leg just beyond left edge of body (100).
legX = 110;
} // end setup
// Draw legs spaced every 15px until
// beyond right edge of body, which is at 300.
void draw() {
if ( ??? ) { // within body?
line(legX, 100, legX, 200);
//place next leg
legX = legX + 15;
}
}
int legX; //x position of leg
void setup() {
size(400, 300);
stroke(0);
strokeWeight(1);
fill(0);
Prepared variable
//draw body as rectangle
rectMode(CORNER);
rect(100, 130, 200, 40);
//draw head as ellipse
ellipseMode(CENTER);
ellipse(80, 150, 50, 30);
Test
condition?
Repetitive code that
changes variable.
83. 2. Iterating legs
// Prepare to draw legs
strokeWeight(4);
// First leg just beyond left edge of body (100).
legX = 110;
} // end setup
// Draw legs spaced every 15px until
// beyond right edge of body, which is at 300.
void draw() {
if (legX < 300) { // within body?
line(legX, 100, legX, 200);
//place next leg
legX = legX + 15;
}
}
int legX; //x position of leg
void setup() {
size(400, 300);
stroke(0);
strokeWeight(1);
fill(0);
//draw body as rectangle
rectMode(CORNER);
rect(100, 130, 200, 40);
//draw head as ellipse
ellipseMode(CENTER);
ellipse(80, 150, 50, 30);
Test
condition
84. 2. Iterating legs
// Prepare to draw legs
strokeWeight(4);
// First leg just beyond left edge of body (100).
legX = 110;
// Draw legs spaced every 15px until
// beyond right edge of body, which is at 300.
while (legX < 300) { // within body?
line(legX, 100, legX, 200);
//place next leg
legX = legX + 15;
}
noLoop(); //Don't need to do looping draw{}
} // end setup
void setup() {
int legX; //x position of leg
size(400, 300);
stroke(0);
strokeWeight(1);
fill(0);
//draw body as rectangle
rectMode(CORNER);
rect(100, 130, 200, 40);
//draw head as ellipse
ellipseMode(CENTER);
ellipse(80, 150, 50, 30);
85. What goes in the blanks?
size(200, 200);
int y = 0;
while ( _____ ) {
line ( ___, ___, ____, ___ );
y = ___________ ;
}
86. What goes in the blanks?
size(200, 200);
background(255);
float w = ___ ;
while ( ______ ) {
fill( ___ );
ellipse( ___, ___, ___, ___ );
___ = ________ 20;
}
88. Why herd code into functions?
Modularity
Smaller chunks are easier
to read/manage/update
Reusability
You can write a chunk
once, and use from
multiple places
89. How could we
break up draw?
float xSpeed;
float x, y;
void setup() {
size(200, 200);
ellipseMode(CENTER);
rectMode(CORNER);
xSpeed = 1; // behavior if -1?
x = 10; // start inside left edge
y = height/2; // stay at middle
}
void draw() {
//fill canvas with translucent rect
fill(255, 60);
rect(-1, -1, width+1, height+1);
// draw the ball
fill(255, 0, 0);
ellipse(x, y, 20, 20);
//at edge? Bounce the ball
if ((x > width - 10) || (x < 10)) {
xSpeed = xSpeed * -1; //reverse
}
// move the ball
x = x + xSpeed;
}
90. How could we
break up draw?
float xSpeed;
float x, y;
void setup() {
size(200, 200);
ellipseMode(CENTER);
rectMode(CORNER);
xSpeed = 1; // behavior if -1?
x = 10; // start inside left edge
y = height/2; // stay at middle
}
void draw() {
//fill canvas with translucent rect
fill(255, 60);
rect(-1, -1, width+1, height+1);
// draw the ball
fill(255, 0, 0);
ellipse(x, y, 20, 20);
//at edge? Bounce the ball
if ((x > width - 10) || (x < 10)) {
xSpeed = xSpeed * -1; //reverse
}
// move the ball
x = x + xSpeed;
}
91. How could we
break up draw?
float xSpeed;
float x, y;
void setup() {
size(200, 200);
ellipseMode(CENTER);
rectMode(CORNER);
xSpeed = 1; // behavior if -1?
x = 10; // start inside left edge
y = height/2; // stay at middle
}
void draw() {
//fill canvas with translucent rect
fill(screenCanvas();
255, 60);
rect(-1, -1, width+1, height+1);
// draw the ball
fill(drawBall();
255, 0, 0);
ellipse(x, y, 20, 20);
//at edge? Bounce the ball
if bounceBall();
((x > width - 10) || (x < 10)) {
xSpeed = xSpeed * -1; //reverse
}
// move the ball
x = x + xSpeed;
}
moveBall();
92. How could we
break up draw?
// draw the ball
void drawBall() {
fill(255, 0, 0);
ellipse(x, y, 20, 20);
}
//at edge of canvas? Bounce the ball
void bounceBall() {
if ((x > width - 10) || (x < 10)) {
xSpeed = xSpeed * -1; //reverse
}
}
// move the ball by xSpeed
void moveBall() {
x = x + xSpeed;
}
…
void draw() {
screenCanvas();
drawBall();
bounceBall();
moveBall();
}
//fill canvas with translucent rect
void screenCanvas() {
fill(255, 60);
rect(-1, -1, width+1, height+1);
}
93. Anatomy of function calls
(review) and blocks (new)
void mousePressed() {
functionName(arg1, arg2, arg3);
}
void functionName(int param1, int param2, boolean param3) {
// Statements doing something like…
if (param3) {
point(param1, param2);
}
}
Arguments can
be passed to the
function to be
used as
parameter
variables.