![Page 1: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/1.jpg)
Learn Creative Coding
Begin Programming with the Processing Language
W. Michelle HarrisRochester Institute of Technologyhttp://people.rit.edu/wmhicsLong Beach Indie Digital Edutainment Conference 8.30.14
![Page 3: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/3.jpg)
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 completeinstructions for re-creating your drawing (no illustrations allowed)?
Take a few minutes to ponder this…
![Page 4: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/4.jpg)
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. ?
![Page 5: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/5.jpg)
Line + circle in drawing app, then in Processing code
![Page 6: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/6.jpg)
Prepare the Canvas
1. Drawing app choice: new Processing sketch!
2. Dimensions of canvas
3. Canvas color
![Page 7: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/7.jpg)
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.
![Page 8: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/8.jpg)
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.
![Page 9: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/9.jpg)
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);
![Page 10: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/10.jpg)
Prepare settings for the Line
4. Line drawing tool? There is only one choice ;)
5. Line stroke color, thickness
![Page 11: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/11.jpg)
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);
![Page 12: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/12.jpg)
Draw the Line
6. Line drag start and stop coordinates
![Page 13: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/13.jpg)
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.
![Page 14: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/14.jpg)
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
![Page 15: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/15.jpg)
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–255fill(red, blue, green);noStroke();
![Page 16: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/16.jpg)
Draw the Circle
10.From circle center drag out width and height
![Page 17: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/17.jpg)
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.
![Page 18: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/18.jpg)
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?
![Page 19: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/19.jpg)
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.
![Page 20: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/20.jpg)
Start exploring(the Processing Reference too)
Some primitive 2D shapes:
line(), triangle(), quad(), rect(), ellipse(), arc()
Setting shape attributes:
fill(), noFill()
stroke(), noStroke()
strokeWeight(), strokeCap()
ellipseMode(), rectMode()
![Page 21: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/21.jpg)
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.
![Page 22: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/22.jpg)
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.
![Page 23: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/23.jpg)
Next: Five Things
1. /* Comments */ and //Comments
2. Math expressions
3. Code blocks for animation
4. Tracking the mouse
![Page 24: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/24.jpg)
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 linestrokeWeight(5);/* Make the line */line(135, 213, 287, 66);
/* Circle prep */fill(0); // black fillnoStroke();/* Make the circle */ellipse(110, 110, 100, 100);
![Page 25: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/25.jpg)
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);
![Page 26: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/26.jpg)
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.
![Page 27: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/27.jpg)
2. Math expressions as function parameters. Code before...
+ plus
- minus
* multiplied by
/ divided by
% modulo remainder
size(400, 300);
// head
ellipse(200, 150, 100, 100);
//eyes
ellipse(180, 150, 20, 30);
ellipse(220, 150, 20, 30);
![Page 28: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/28.jpg)
2. Math expressions as function parameters. Code lazier.
+ plus
- minus
* multiplied by
/ divided by
% modulo remainder
size(400, 300);
// head
ellipse(200, 150, 100, 100);
//eyes
ellipse(200 - 20, 150, 20, 30);
ellipse(200 + 20, 150, 20, 30);
![Page 29: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/29.jpg)
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);
![Page 30: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/30.jpg)
3. An analogy: running
http://www.blackgirlsrun.com/partner-up
![Page 31: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/31.jpg)
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.
![Page 32: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/32.jpg)
3. Blocks: grouping/herding codeA 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 opensstatement;block2 { // a nested block of code opens
statement;statement;
} // end of block2 statement;
} // end of block1block3 { // a block of code opens
statement;} // end of block3
![Page 33: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/33.jpg)
3. To animate in Processingvoid 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 herebackground(255);drawScenery(); // this function doesn’t existdrawNextRunner1(); // this function doesn’t existdrawNextRunner2(); // this function doesn’t exist/* At the end of draw(), Processing renders
the new pixels produced in this block. */}
![Page 34: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/34.jpg)
3. Try this in Processing// Pointy sketch
size(400, 300); strokeWeight(5);
stroke(0);
background(255);
point(200, 150);
// Pointy sketch
void setup() {
size(400, 300); strokeWeight(5);
stroke(0);
}
void draw() { // animate!
background(255);
point(200, 150);
}
![Page 35: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/35.jpg)
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).
![Page 36: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/36.jpg)
4. What’s the difference?void setup() {
size(400, 3oo); strokeWeight(5);stroke(0);
}
void draw() { // animate!background(255);point(mouseX,
mouseY);}
void setup() {size(400, 3oo); strokeWeight(5);stroke(0);background(255);
}
void draw() { // animate!// background(255);point(mouseX, mouseY);
}
![Page 37: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/37.jpg)
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.
![Page 38: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/38.jpg)
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
![Page 39: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/39.jpg)
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!")
![Page 40: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/40.jpg)
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.
![Page 41: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/41.jpg)
VariablesContainer 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.
![Page 42: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/42.jpg)
Some redundancies here...void setup() {size(400, 300);frameRate(5);colorMode(HSB);
}
void draw() {fill(frameCount % 256, 255, 255);triangle(0, 0, mouseX, mouseY,dist(pmouseX, pmouseY, mouseX, mouseY),dist(pmouseX, pmouseY, mouseX, mouseY));
}
![Page 43: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/43.jpg)
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);
}
![Page 44: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/44.jpg)
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);
}
Before we use a variable, we need to declareit.To declare it, use the keyword for the type of data it will hold:
String instructions;
int shapeNumber;
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.
![Page 45: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/45.jpg)
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, 0, height, mdistance, mdistance);
}
Why is this variable declared as type float?Why not type int?
![Page 46: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/46.jpg)
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.
![Page 47: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/47.jpg)
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);
}
Once the variable is declared and a value assigned, we can use the variable anywhere we would have used the value:
point(shapeNumber, height/2);
![Page 48: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/48.jpg)
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);
}
![Page 49: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/49.jpg)
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
![Page 50: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/50.jpg)
You can declare and assign an initial value in one statement// Circles along the diagonalint 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 diagonalint shapeNumber = 1;int randomSize;
void setup() {size(200, 200);ellipseMode(CENTER);
}
void draw() {
…
![Page 51: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/51.jpg)
Statement review
String instructions;
void setup() {size(200, 500);instructions = "Swoosh your mouse";
}void draw() { // points follow mouse
point(mouseX, mouseY);}/* On click, instructions print in console */void mousePressed() {
println(instructions);}
1. Variable declaration
2. Code block
3. Function call
4. Assignment statement
5. Comments
![Page 52: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/52.jpg)
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.
![Page 53: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/53.jpg)
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();
}
wearRainCover
![Page 54: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/54.jpg)
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();
}
![Page 55: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/55.jpg)
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
![Page 56: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/56.jpg)
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
![Page 57: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/57.jpg)
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.
![Page 58: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/58.jpg)
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.
*/
}
![Page 59: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/59.jpg)
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?
![Page 60: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/60.jpg)
Points, black circles, and red rects depending on conditional expressions.
void setup() {ellipseMode(CENTER);rectMode(CENTER);
}
void draw() {if (mouseX < 10) { // far leftellipse (width/2, mouseY, 20, 20);
}
if (mouseX < width/2) { // left sidestroke(0); // black stroke
} else { // right sidestroke(255,0,0); //red stroke
}point(mouseX, mouseY);
if (mouseX >= width - 10) { // far rightrect (width/2, mouseY, 20, 20);
}}
![Page 61: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/61.jpg)
Boolean variablesboolean isFirstClick = true;
void setup() {ellipseMode(CENTER);
}
void draw() {if (isFirstClick) {ellipse(mouseX, mouseY, 20, 20);
} else {point(mouseX, mouseY);
}}
void mousePressed() {isFirstClick = false;strokeWeight(4);stroke(150, 0, 150); //purple
}
![Page 62: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/62.jpg)
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
boolean myTest;
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'));
![Page 63: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/63.jpg)
More complex expressions
Assume height=200
mouseY myTest
-10 true
0 false
50 false
200 false
201 true
boolean myTest;
myTest = (mouseY < 0) ||
(mouseY > height);
// Would otherTest ever be true?
boolean otherTest;
otherTest = (mouseY < 0) &&
(mouseY > height);
![Page 64: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/64.jpg)
More complex expressions
boolean myTest;
// mousePressed and keyPressed
// are built-in boolean variables.
myTest = mousePressed &&
keyPressed;
// What's the difference?
boolean otherTest;
otherTest = mousePressed ||
keyPressed;
keyPressed mousePressed myTest
true true true
true false false
false true false
false false false
![Page 65: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/65.jpg)
More complex if-else block useboolean isFirstClick = true;
void setup() {ellipseMode(CENTER);
}
void draw() {if (isFirstClick) {ellipse(mouseX, mouseY, 20, 20);
} else if (mousePressed) {line(pmouseX, pmouseY,
mouseX, mouseY);} else {
point(mouseX, mouseY);}
}
circle
line point
![Page 66: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/66.jpg)
More complex if-else block useboolean isFirstClick = true;
void setup() {ellipseMode(CENTER);
}
void draw() {if (isFirstClick) {ellipse(mouseX, mouseY, 20, 20);
} else if (mousePressed) {line(pmouseX, pmouseY,
mouseX, mouseY);} else {
point(mouseX, mouseY);}
}
void mousePressed() {isFirstClick = false;strokeWeight(4);stroke(150, 0, 150); //purple
}
void keyPressed() {if (key =='c' || key == 'C') {background(200); //clear bg
}if (key =='q' || key == 'Q') {exit(); //quit
}}
![Page 67: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/67.jpg)
Two things
1. Global vs Local variables
2. Iteration with while loops
![Page 68: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/68.jpg)
1. Global (what we've been doing) versus Local variables
variable scope
![Page 69: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/69.jpg)
1. Global variables (used so far)
Declare outside/beyond any blockKnown throughout allPersists 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);}
![Page 70: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/70.jpg)
// 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
Declare inside a blockExists only inside the blockPersists from declaration to end of current run of
the block
1. Local variables
![Page 71: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/71.jpg)
1. What's the difference?// Global "count"
int count = 0;
void setup() {
size(200,200);
}
void draw() {
count = count + 1;
background(count);
println(count);
}
// Local "count"
void setup() {
size(200,200);
}
void draw() {
int count = 0;
count = count + 1;
background(count);
println(count);
}
![Page 72: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/72.jpg)
1. What's the difference?// Global "count"
int count = 0;
void setup() {
size(200,200);
}
void draw() {
count = count + 1;
background(count);
println(count);
}
// Local "count"
void setup() {
size(200,200);
}
void draw() {
int count = 0;
count = count + 1;
background(count);
println(count);
}
![Page 73: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/73.jpg)
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);
}
![Page 74: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/74.jpg)
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)
![Page 75: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/75.jpg)
2. Iteration with while loops
Doing it and doing it and doing it well.
![Page 76: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/76.jpg)
2. Conditional to Iteration
locationX = 0;
if (locationX < width) {
point(locationX, 40);
// move point
locationX = locationX + 1;
}
// do more stuff
Draw & move pt
![Page 77: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/77.jpg)
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
![Page 78: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/78.jpg)
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).
![Page 79: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/79.jpg)
2. Iterating legs//Prep to draw legs - vertical lines 100px longstrokeWeight(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, 2line(125, 100, 125, 200);//place next leg, 3line(140, 100, 140, 200);
//place next leg, 13line(290, 100, 290, 200);
size(400, 300);stroke(0);strokeWeight(1);fill(0);
//draw body as rectanglerectMode(CORNER);rect(100, 130, 200, 40);
//draw head as ellipseellipseMode(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?
![Page 80: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/80.jpg)
2. Iterating legs//Prep to draw legs - vertical lines 100px longstrokeWeight(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, 2legX = legX + 15;line(legX, 100, legX, 200);
//place next leg, 13legX = 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 rectanglerectMode(CORNER);rect(100, 130, 200, 40);
//draw head as ellipseellipseMode(CENTER);ellipse(80, 150, 50, 30);
![Page 81: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/81.jpg)
2. Iterating legs//Prep to draw legs - vertical lines 100px longstrokeWeight(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, 2legX = legX + 15;line(legX, 100, legX, 200);
//place next leg, 13legX = 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 rectanglerectMode(CORNER);rect(100, 130, 200, 40);
//draw head as ellipseellipseMode(CENTER);ellipse(80, 150, 50, 30);
Repetitive code that
changes variable.
Prepared variable
![Page 82: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/82.jpg)
2. Iterating legs// Prepare to draw legsstrokeWeight(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 leglegX = legX + 15;
}}
int legX; //x position of leg
void setup() {size(400, 300);stroke(0);strokeWeight(1);fill(0);
//draw body as rectanglerectMode(CORNER);rect(100, 130, 200, 40);
//draw head as ellipseellipseMode(CENTER);ellipse(80, 150, 50, 30);
Test
condition?
Repetitive code that
changes variable.
Prepared variable
![Page 83: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/83.jpg)
2. Iterating legs// Prepare to draw legsstrokeWeight(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 leglegX = legX + 15;
}}
int legX; //x position of leg
void setup() {size(400, 300);stroke(0);strokeWeight(1);fill(0);
//draw body as rectanglerectMode(CORNER);rect(100, 130, 200, 40);
//draw head as ellipseellipseMode(CENTER);ellipse(80, 150, 50, 30);
Test
condition
![Page 84: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/84.jpg)
2. Iterating legs// Prepare to draw legsstrokeWeight(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 leglegX = 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 rectanglerectMode(CORNER);rect(100, 130, 200, 40);
//draw head as ellipseellipseMode(CENTER);ellipse(80, 150, 50, 30);
![Page 85: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/85.jpg)
What goes in the blanks?
size(200, 200);
int y = 0;
while ( _____ ) {
line ( ___, ___, ____, ___ );
y = ___________ ;
}
![Page 86: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/86.jpg)
What goes in the blanks?
size(200, 200);
background(255);
float w = ___ ;
while ( ______ ) {
fill( ___ );
ellipse( ___, ___, ___, ___ );
___ = ________ 20;
}
![Page 87: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/87.jpg)
Functions
![Page 88: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/88.jpg)
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
![Page 89: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/89.jpg)
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 edgey = height/2; // stay at middle
}
void draw() {//fill canvas with translucent rectfill(255, 60);rect(-1, -1, width+1, height+1);
// draw the ballfill(255, 0, 0);ellipse(x, y, 20, 20);
//at edge? Bounce the ballif ((x > width - 10) || (x < 10)) { xSpeed = xSpeed * -1; //reverse
}
// move the ballx = x + xSpeed;
}
![Page 90: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/90.jpg)
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 edgey = height/2; // stay at middle
}
void draw() {//fill canvas with translucent rectfill(255, 60);rect(-1, -1, width+1, height+1);
// draw the ballfill(255, 0, 0);ellipse(x, y, 20, 20);
//at edge? Bounce the ballif ((x > width - 10) || (x < 10)) { xSpeed = xSpeed * -1; //reverse
}
// move the ballx = x + xSpeed;
}
![Page 91: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/91.jpg)
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 edgey = height/2; // stay at middle
}
void draw() {//fill canvas with translucent rectfill(255, 60);rect(-1, -1, width+1, height+1);
// draw the ballfill(255, 0, 0);ellipse(x, y, 20, 20);
//at edge? Bounce the ballif ((x > width - 10) || (x < 10)) { xSpeed = xSpeed * -1; //reverse
}
// move the ballx = x + xSpeed;
}
screenCanvas();
drawBall();
bounceBall();
moveBall();
![Page 92: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/92.jpg)
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);
}
![Page 93: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/93.jpg)
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.
![Page 94: Learn Creative Coding: Begin Programming with the Processing Language](https://reader031.vdocuments.us/reader031/viewer/2022031918/55a64f371a28ab88348b4705/html5/thumbnails/94.jpg)
Drawing faces flexibly
void setup() { size(500, 500); }
void draw() {
drawFace(mouseX, mouseY, 100);
}
void drawFace(int faceX, int faceY, int radius) {
ellipse(faceX, faceY, radius, radius);
ellipse((faceX - radius/5), faceY, radius/5, radius/3);
ellipse((faceX + radius/5), faceY, radius/5, radius/3);
}