P5 Workshop by David Stein

Follow me please on IG ! @colonelpanix

To load this page, the URL is the Recording Link on this session in the ITP Camp Calendar

Recording of Class:

GMT20230614-171019_Recording_1920x1080.mp4

Recommended Coding Train Videos

https://thecodingtrain.com/tracks/code-programming-with-p5-js

Watch the videos under "Functions" (30 minutes)

Shared Document:

https://docs.google.com/document/d/1bECZwf3ATRL3WTJaKOkUtqrcqNcM_bl8JJSFwcEDAOc/edit

Review: Last week we learned lots of new syntax

Expressions:

// Examples of expressions

// Numeric Expressions
(3 + 2)   // evaluates to 5
(3 / 2)   // evaluates to 1.5
((12 + 3) / 5)  // evaluates to 3... i.e. ((15)/5) is 3
(12 + 3/5) // evaluates to 12.6... i.e. (12 + 0.6)

// String Expressions
"Dave"+"Stein" // evaluates to "DaveStein"

// Boolean Expressions
(12 > 3)  // evaluates to true
(3 > 12)  // evaluates to false
(3 > 3)   // evaluates to false
(3 >= 3)  // evaluates to true
(3 == 3)  // evaluates to true
(3 = 3)   // This is an error if you are intending it to be a comparison!
					//    remember "==" is a comparison, "=" is an assignment
					//    Very common mistake! Look out for this!!!!!
(3 != 3)  // evaluates to false
((12 + 3) != 3) // evaluates to true as 15 is not equal to 3

Conditional Statements:

// SYNTAX of Conditional Statements: If Statement

if ( --put your expression here-- ) {
	put your code here
} else if ( -- put another expression here--) {
	put your code here
} else {
	put your code here
}

// Basic Example:

if (counter > width) {
	counter = 0;
}

// Example if - else
// If counter is larger than width, start over, otherwise increment count

if (counter > width) {
	counter = 0;
} else {
	counter++;
}

// Example if - else if - else
// If counter is larger than width, start over
// If counter is past the midpoint, change the color

if (counter > width) {
	counter = 0;
	fill(color1);
} else if (counter > width/2) {
	fill(color2);
} else {
	counter++;
}

Loops: