👨‍🏫 Cool examples from OpenProcessing.org.

Perlin Noise Redux

Hair Drier

Duel

Noise Turbulence Doodles

👨‍🏫 Review student programming background survey

👨‍🏫 Using code from AI or other programmers

👨‍🏫 Asking for help

Here's the best way to ask for help debugging your code remotely:

1. Make sure that you have created a p5js account (eg, "marygonzalez") in the editor at upper right, then save your sketch and copy the URL.

⚠️ Pressing Cmd-S when you've clicked outside the editor can summon a dialog box for saving to your hard drive. To avoid that, choose File > Save inside the editor.

2. Paste this URL in a post to #troubleshooting.
3. In the same post, describe the specific problem

Say "I can't get the upper right box to line up" instead of "It's not working."

4. Also paste in any error you see in the editor console at lower left.

When you post to Slack, other students can learn from your example (and possibly respond faster than the instructors). If you don’t want to share your problem publicly, you can Direct Message your TA or me on Slack, though it may take us longer to reply.

👨‍🏫 Finding a Slack channel

🖱️ Channels > Manage > Browse

⌨️ Command/Control-K

Review next Assignment

👨‍🏫 p5js basic commands

Where to put your code:

// Put commands in setup() that configure the general conditions of your sketch.
setup() {
	createCanvas(400, 300) // Sets the size of your sketch.
}
// Put commands in draw() that happen every time your sketch refreshes (60 times per second).
draw() {
    background(220);
	...
}

Choosing your paintbrush and colors:

fill("turquoise") // You can use many common color names.
stroke("teal")
strokeWeight(6)
noFill()
noStroke()

👨‍🏫 Drawing shapes

What do the numbers in the parentheses ("arguments") mean?

line(10, 20, 50, 20); // The arguments are the points x1, y1 and x2, y2.
triangle(30, 75, 58, 20, 86, 75); // The arguments are the x, y of the three points.
rect(10, 10, 50, 30); // The arguments are the x, y position and width, height of the rectangle.
quad(189, 18, 216, 18, 216, 360, 144, 360); // The arguments are the x, y of all four corners of the quadrilateral.
ellipse(30, 30, 40, 60); // The arguments are the x, y position and width, height.
arc(479, 300, 280, 280, 180, 360); // The arguments are the x, y position, width, height, and the start and stop angle.
angleMode(DEGREES); // Put this in setup to use degrees out of 360 for the last two arguments of arc().

👨‍🏫 fill v. stroke

👨‍🏫 RGB colors

p5js default is RGB: Red, Green, Blue, from 0 (none) to 255 (maximum).

// This is red.
background( 255, 0, 0 ) ; 
// This equal parts red, green and blue, so it makes gray.
background( 100, 100, 100 ) ;
// This is a shorthand when all three values are equal.
background( 100 ) ;

Other colors and variables

function setup() {
  createCanvas(400, 400);
}
function draw() {
  // Red Green Blue is the default.
  fill( 255, 0, 0) ; // Red.
  // is the same as:
  fill( "rgb(255, 0, 0)" ) ; // Also red.
  rect( 10, 10, 100, 100 ) ;
  // You can use CSS color names.
  fill( "magenta" ) ; // Magenta (duh).
  rect( 90, 90, 100, 100 ) ;
  // You can use Hue Saturation Lightness.
  fill( "hsl(60, 50%, 50%)" ) ; // A gold color.
  rect( 170, 170, 100, 100 ) ;
  // You can use Hue Saturation Lightness Alpha.
  fill( "hsla(180, 50%, 50%, .5)" ) ; // A transparent turquoise.
}

ℹ️ CSS color names

Examples

👆 CSS color game

ℹ️ HSL color formulas

Hues go from 0 to 360 (just the number—don't add % or degrees).

Saturation goes from 0% (gray) to 50% (dull) to 100% (rich).

Lightness goes from 0% (black) to 50% (medium) to 100% (white).

To get the strongest color, pick a hue and then set Saturation to 100% and Lightness to 50%.

  // Fill with a bright turquoise.
  fill( "hsl(180, 100%, 50%)" ) ;
  // Fill with a dull turquoise.
  fill( "hsl(180, 30%, 50%)" ) ;
}

🎟 Color names versus HSL

1. Create a canvas that is 800 x 800 pixels.
2. In the upper left corner, position a square that is 400 pixels wide. Immediately next to it on the right, position another square of the same dimensions.
3. Apply noStroke() to eliminate the outline between the two squares.
4. Give the left square on the left a color using a CSS color name. You can find these in the links above ☝️.
5. Give the square on the right a color fill color using the HSL specification. Try to match the color on the left so a viewer can't see the difference.

Save your Sketch and post its URL to #matching-colors

🧐 Review last assignment

Pick your color before drawing a shape.

// ❌ BAD.
function draw() {
	...
	rect(10, 10, 100, 200);
	fill("red");
}

// ✅ GOOD.
function draw() {
	...
	fill("red");
	rect(10, 10, 100, 200);
}

Put each command on a separate line inside the braces {}

// ❌ BAD.
function setup() createCanvas(400, 400) {
	
}
fill("red");
function draw() {
	background(220);
}
rect(10, 10, 100, 200);

// ✅ GOOD.
function setup() {
	createCanvas(400, 400);
}

function draw() {
	background(220);
	fill("red");
	rect(10, 10, 100, 200);
}

👨‍🏫 Vocabulary

Variable and function names are camelCase 🐪.

• mouseX ✅
• mousex ❌

You can set a variable multiple ways, and you don't have to declare it or its type ahead of time. These are basically the same:

• let numberOfFriends = 3 ;
• var numberOfFriends = 3 ;

Delimiters

• braces: {} "curly"
• brackets: []
• parentheses: ()

Comments

• // comments out one line.
• /* ... */ comments out multiple lines.
• Command-/ will do that automatically.

Numbers

• Almost all numbers are in pixels.
• Exception: PI, TWO_PI, QUARTER_PI, HALF_PI, OPEN, CHORD, PIE

Jargon

• dot: a period
• fork: a copy for yourself, eg via File > Duplicate.
• accessible: the variable is defined where you're using it.
• "*": multiply
• "/": divide
• "floor" or "parseInt": extract just the whole number out of a decimal.
• "print": log a message to the console.

👨‍🏫 Variables avoid repetition

If you find yourself using over and over:

• the same number, make it a variable.
• multiples of the same number, make it a variable.
• a number that keeps increasing by the same amount, make it a loop.
• the same lines of code, make them a function.

You can put variables above setup() if you want them to be defined everywhere.

👨‍🏫 Pre-defined variables

🙂 Some variables are predefined for you by p5js.

width // The width of the canvas.
height // The height of the canvas.
mouseX // The left position of your mouse.
mouseY // The top position of your mouse.

👨‍🏫 Mistakes with variables

⚠️ You can't refer to a variable before it's defined:

• Don't write width or height until after you call createCanvas().
• Write variables that require interactivity, like mouseX, in draw().

Start writing out the rectangles, and then look at the numbers you keep repeating--you can make these variables, eg:

let boxHeight = 80 ;
let boxWidth = 40 ;
rect(0, 0, boxWidth, boxHeight) ;
rect(80, 0, boxWidth, boxHeight) ;
...

Consider making the number of rows a variable too. You can calculate a new variable from old ones, eg:

let numberOfRows = height / boxHeight ;

🎟 Draw your initials with shapes

Fork this Initials From Shapes sketch. Substitute your own initials and colors, then post to #x-initials. Here's a list of valid CSS color names you can use.

If you have a diagonal line in your initial (like a letter M), consider making it with a line set to "mitre" (sharp corners):

function draw() {
	...
	stroke("blue"); // Give the line a color.
	strokeWeight(20); // Make the line thick.
	strokeJoin(MITER); // Ensure sharp corners at intersections
	// The first pair of numbers is the top and left of the starting point.
	// The second pair is the top and left of the end.
	line(100, 100, 100, 300);
}

If you have a curved line in your initial (like a letter J), consider making it with an arc:

function setup() {
	...
	// Setting this makes it easier to specific curves in your letters.
	angleMode(DEGREES)
}

function draw() {
	...
	noFill(); // Prevent color inside the arc.
	stroke("blue"); // Give the arc a color.
	strokeWeight(20); // Make the arc thick.
	// The first pair of numbers is the top and left of the starting point.
	// The middle pair is the width and height.
	// The last two parameters are where the curve starts and ends,
	// in clockwise degrees.
	arc(115, 250, 100, 100, 0, 180);
}

🧑‍🎨 Artist in focus: Zach Lieberman

👨‍🏫 Constants

Words in all caps like CORNER or DEGREES are "constants," a special kind of variable that doesn't change but is a placeholder for a complex value that the browser understands.

👨‍🏫 Aligning shapes

Overlaps

Browsers, like people, read from the top down. Whatever you write below can overwrite what's written above.

Angles

Default to angleMode(RADIANS), but you can switch to angleMode(DEGREES)

Rectangles

Default to rectMode(CORNER), but you can switch to rectMode(CENTER)

Ellipses

Default to ellipseMode(CENTER), but you can switch to ellipseMode(CORNER)

Triangles

🎗 How to draw a triangle.

line(10, 20, 50, 20); // The arguments are the points x1, y1 and x2, y2.
triangle(30, 75, 58, 20, 86, 75); // The arguments are the x, y of the three points.
						

⚠️ Bermuda triangles (Sample sketch)

Combining shapes

If possible, draw combined shapes in the upper left corner, and use variables to move them.

👨‍🏫 Transforms

Examples

translate(0, 0) is normal. translate(50, 10) will move a shape to the right 50 pixels and down 10 pixels.

shearX(0) is normal; shearX(20) will skew a shape to the right; shearX(-20) will skew a shape to the left.

scale(1) is normal; scale(2) is twice as big; scale(.5) is half as big.

rotate(0) is normal; rotate(45) will rotate 45° clockwise if you've previously set angleMode to DEGREES.

⚠️ rotate() turns a shape around the origin (0,0), not the center of the shape! It's hard to use unless you combine all your shapes in the upper left corner and then translate them to your desired position on the canvas.

Reset your transforms!

⚠️ A transform will change everything below it, which can have unintended consequences. So reset it immediately after use. (Later we'll learn a better technique with push()/pop().)

translate(5,20); // Move forward.
ellipse(10,10,100); // Draw a circle.
translate(-5,-20); // Move back again.
// or
scale(2); // Double in size.
rect(10, 10, 100); // Draw a square.
scale(.5); // Shrink back to normal size.

Control shapes with variables

🎗 How to draw a rectangle.

rect(10, 10, 50, 30); // The arguments are the x-position, y-position, width, height of the rectangle.
rect(10, 10, 50); // Using only one parameter for both width and height makes a square.
						

Try variable spacing with squares.

🖼 Expected result

1. Start a new sketch and draw three squares 40 pixels wide. For y values, give them all 0. For x values, give the first 0, then give the other two 50 and 100, respectively. They should be clustered in a row at the upper left but not overlapping.
2. Now on Line 1 create a variable with a name like spacing for the spacing between squares, and set it equal to an arbitrary number of pixels between 1 and 100.
3. Add this variable to the x parameter in the second square.
4. Then add this variable doubled (eg, spacing * 2) to the x parameter in the third square.
5. Now tweak the variable at the top until the squares exactly span the top row of the canvas, with the first at the far left, the second in the middle, and the third at the far right. You are only allowed to adjust the variable's value on Line 1--no other parts of the code.

🖼 Sample result with code.

🤔 Imagine now that you had a lot of rectangles to space this way: a variable makes it much easier than tweaking each number individually!

Try variable spacing and size with squares.

🖼 Expected result.

1. Start from the sketch above, and add a new variable at the top for how much each square will grow. Set it to an arbitrary number between 1 and 2 (it can have a decimal).
2. Now multiply the width parameter in your second rectangle by this growth variable, and the width parameter in your third rectangle by growth * 2. This create three different sizes--a baby, mama, and papa bear. It's OK that at this point your squares will fall out of alignment.
3. Tweak the two variables, spacing and growth, until once again your three squares exactly fit horizontally across the canvas. (It's OK if the spacing appears uneven as long as the row of squares exactly fits inside the canvas' left and right edges.)

🖼 Sample result with code.

🎟 Nested squares exercise

• Duplicate this sketch of nested squares based on Josef Albers' Homage to the Square.
• To emulate a Frank Stella stripe painting, tweak the variable values and add more rectangles to make a pattern with more nested squares.
• Post the result to #nested-squares.

🖼 Sample result (extreme).

🎩 Advanced option: make a sketch that uses variables to adjust square color as well as size.

🖼 Interactive example.

🧐 Review last exit ticket and assignment.

🎗 Build sprites in the upper left corner!

Positioning clusters of shapes

Adding variables to adjust the position and growth works for individual shapes but is trickier with clusters of shapes. To see this, let's help Goldilocks fit three bears of increasing size into her house.

😐 Naive approach of multiplying by variables

1. Start a new sketch.
2. Inside the draw() function, draw a series of circles to make a simple baby bear. The bear should be no more than 100 pixels tall and wide (more or less), and fit in the upper left corner. Example:

// Baby bear.
rect(0, 0, 40); // A bounding box for our bear.
ellipse(20, 20, 30); // Head.
ellipse(5, 5, 10); // Left ear.
ellipse(35, 5, 10); // Right ear.
					

Sample result • Cuter version 🐻

3. Now, above the setup() function, define three variables with the let keyword:
• Set a left position of a new, "mama" bear (eg, mamaBearX) to 50.
• Set a left position of a new, "papa" bear (eg, papaBearX) to 100.
• Set a scale factor for new bears (eg, bearGrowth) to 1.
4. Inside the draw() function, copy the code that draws your first bear.

   ⚠️ Do not include the background().

5. At the very bottom of the draw() function but before the final closing brace }, add a comment that you are now adding a mama bear.
6. Paste the original bear code below this comment.
7. Inside the ellipse() calls for the mama bear, add your new mamaBearX position variable to the x argument (the first number).
8. Also inside the ellipse() calls, multiply the diameter argument (the third number) by your new scale variable bearGrowth. Nothing should change except the mama bear should be to the right.
9. Insert a new line after the mama bear code and repeat these steps to draw a third, papa bear. This time multiply the third number in each ellipse() by bearGrowth * 2 to make them extra big.
10. Now adjust the scale variable at top from 1 to 2. Disaster!

😯 Even though we added the same variables, you'll notice the dimensions of the mama and papa bear are off: the ears are out of place, and the circles don't keep pace with the squares anymore. That shows that proportions are tricky for clusters of shapes.

😁 Use the translate() and scale() transforms

Fortunately, P5js has transformation methods that solve this problem for us. scale() takes a decimal that is the amount you want the shapes that follow to grow. translate() takes two parameters corresponding to a shift in the x and y directions.

1. Delete the blocks of code you wrote for the mama and papa bears, and replace them with copies of the baby bear code.

   ℹ️ At this point the new bears will be invisible because they are just overwriting the original one, so leave in the comments to distinguish the three bears.

   ⚠️ Don't delete the variables at very top.

2. Right after the mama bear comment but before the mama bear code, add a translate() method and pass it your spacing variable mamaBearX for the first parameter (x) and 0 for the second (y).

   ℹ️ You should see the mama bear move to the right.

3. Then add a scale() method immediately below translate() and pass it your bearGrowth variable.

   ℹ️ The mama bear should get bigger, but with the correct alignment and proportions.

4. Repeat the process for papa bear. You may need to adjust your variables to fit all the bears on the sketch.

😅 Note that we didn't have to add any variables inside our ellipse() methods. translate() and scale() did all the work for us!

🧐 Note that the papa bear gets larger than mama bear even after the same scale change. Why?

⚠️ Try switching the order of translate() and scale() and you'll see the good bear goes off the screen. That's because scale changes all the numbers below it, including the arguments to the translate command!

🎗 Common shapes

line(10, 20, 50, 20); // The arguments are the points x1, y1 and x2, y2.
triangle(30, 75, 58, 20, 86, 75); // The arguments are the x, y of the three points.
rect(10, 10, 50, 30); // The arguments are the x, y position and width, height of the rectangle.
quad(189, 18, 216, 18, 216, 360, 144, 360); // The arguments are the x, y of all four corners of the quadrilateral.
ellipse(30, 30, 40, 60); // The arguments are the x, y position and width, height.
arc(479, 300, 280, 280, 180, 360); // The arguments are the x, y position, width, height, and the start and stop angle.
angleMode(DEGREES); // ⚠️ Put this in setup to use degrees out of 360 for the last two arguments of arc().

🎟 Draw your class avatar

Start a new sketch called something like "Mary's avatar." Using a variety of P5js shapes and colors create a icon that will represent you for this class. The icon can be abstract or represent a person or animal, as long as it's distinctive and can be read at a small scale, like the size of the Slack icon. If you can't think of a picture to represent you, just draw your initials with some colors that feel right for you (make them from shapes, not actual text). Examples.

Your overall shape should be roughly squarish in dimensions and fill the canvas, so that it will make a good thumbnail.

❗️Fit your shapes to the upper left corner of the sketch! You can then add translate() and scale() commands at the top of your draw() function to center and size your avatar to fill the canvas.

When you're satisfied, save a screenshot the result (Shift-Command-4 on MacOS or Windows-Shift-S on Windows).

Instead of submitting to a Slack channel, just make this your Slack profile picture by clicking on your user thumbnail at upper right, then choosing Edit Profile. Show your new Slack profile to your instructor before leaving.

👨‍🏫 Why code?

🧑‍🎨 Artist in focus: Lia

👨‍🏫 More about Sketches

Default variables

width and height are defined by createCanvas()

Duplicate a sketch

⚠️ Changing the file name of a Sketch doesn't duplicate the Sketch; you have to log in as your name and Save to do that.

Save a sketch online

Click in the code first, else your browser may try to save the entire web page.

Download a sketch

File > Download

⚠️ This will save the code as an HTML file, not a still image.

Save a still image with save() command.

function setup() {
	// Set your canvas to a variable.
	canvas = createCanvas(400, 400); // ⚠️ Omit the word "let" so you can refer to this below.
	// Prevent the sketch from looping.
	noLoop(); // ⚠️ If you don't add this, your sketch will save a new image on every loop!
}

function draw() {
	// Make a basic image from some shapes.
	background(220);
	fill("red");
	rect(200,200, 50);
	// Save the canvas as an image to your browser downloads folder.
	save(canvas, 'avatar.jpg');
}

Or screenshot it

If in doubt, you can always right-click on the image to save it as a PNG or screenshot it (eg, Shift-Command-4 on MacOS or Windows-Shift-S on Windows).

👨‍🏫 Comparisons and conditionals

> versus < versus !

= versus ===

&& versus ||

if ... else

if ... else if ... else

/* Template:

if (PUT TEST HERE) {
  PUT CHANGE HERE;
} else {
  PUT FALLBACK HERE;
};

*/
// Example:
if ( relationshipType === "romantic") {
  sendRose( "red" ); // Love interest!
} else {
  sendRose( "white" ); // Just friends.
};

👨‍🏫 Custom functions

🎂 Birthday metaphor

Function definition v. function call.

Your function definition, like function addBird() {...}, goes outside of the setup() and draw() functions at zero indent.

Your function call, like addBird(), goes in the draw() function.

Tidy your code so you can see the indents for each brace.

🎟 Make an interactive avatar

Duplicate the sketch you created for your first avatar (File > Duplicate) and call it something like "Mary's interactive avatar." Add a conditional (if statement) that changes its appearance--fill, stroke, scale, position, anything--when the user's mouse is on the right half of the canvas. (If you want to get fancy, make the colors change as the user moves the mouse to different parts of the screen.) Post your resulting sketch to #x-interactive-avatar.

Boring example • Less boring example

🧐 Review previous assignment.

🧑‍🎨 Artist in focus: Joshua Davis

👨‍🏫 Preview Custom Shape assignment.

👨‍🏫 Submitting your assignments

✅ Tidy your code right before submitting.

Choose the Edit > Tidy Code pull-down option \frequently while you’re coding your Sketch. Some errors, like a missing or extra brace } , are much easier to find if your code is indented properly. But once you have an error, Tidy Code won't work anymore ☹️.

✅ Make sure you have all of your semicolons.

✅ Add comments to explain different sections of your code.

✅ Add special comments in code and/or GitHub:

• If you worked with other students.
• If you deviated from the prompt and why.
• If you couldn't figure out all the code.

✅ Share any error messages from the Console!

❌ Don't leave in your sketch:

• Code from the next prompt in your current answer.
• Code you commented out, are not using, and don't need anymore unless you explain why. Example:

// Chloe, I tried a variable for the size here but got a "balloonWidth is undefined" error:
fill("red");
ellipse(10, 10, balloonWidth);
							

👨‍🏫 Responding to mouse clicks

mousePressed(): a function called once when the user clicks.

mouseIsPressed: a variable true as long as the user is holding the mouse down.

Example: click to show the bunny's winter fur:

function draw() {
	...
	addBunny();
}

function addBunny() {
	if (mouseIsPressed) {
		fill("white");   // It's winter time--blend in with the snow!
	} else {
		fill("brown"); // Normal fur is fine.
	}
	ellipse(10, 10, 50); // Draw the bunny.
	...
}

👨‍🏫 Customizing your function

Adjust your function's options by adding parameters inside ().

function draw() {
	...
	addBunny(200, 200, .5);
}
function addBunny(x, y, sizeFactor) {
	translate(x, y) ; // Move the bunny to a custom position.
	scale(sizeFactor); // Scale the bunny to a custom size.
	ellipse(10, 10, 50); // Draw the bunny in the upper left corner by default.
	...
}

👨‍🏫 Isolating your transforms

Transforms can help you re-position sprites

push() and pop() can prevent those transforms from leaking onto other shapes. Demo

function draw() {
	...
	addBunny(200, 200, .5);
}
function addBunny(x, y, sizeFactor) {
	push() ;
	translate(x, y) ;
	scale(sizeFactor);
	ellipse(10, 10, 50); // Draw the bunny.
	...
	pop() ;
}

🎟 Fix the transforms!

1. Duplicate this sketch of a single bear sprite.
2. Define a new function called addBear() at the bottom of the sketch below every other line of code.
3. Cut the lines that make the bear out of the draw() function and paste them inside the braces of your new addBear() function.
4. Call the addBear() function from inside draw(). You should see the bear appear again at right.
5. Rewrite ("refactor") your addBear() function so that it takes three parameters:
   • x for the position from the left;
   • y for the position from the top;
   • size for the scale of the bear.
6. Put these variables inside the parentheses in the addBear() definition as well as in the appropriate places in the initial transforms that start your function.
7. Add sample values for these three parameters to your addBear() call inside draw(), and call it two more times to make a Mama and Papa bear. You can try these sample values:

/*________________ Baby bear. ________________*/
bear(50, 50, 1);
/*________________ Mama bear. ________________*/
bear(50, 150, 1.5);
/*________________ Papa bear. ________________*/
bear(50, 300, 2);

8. 🤔 Notice that the bears do not in a vertical line as you might expect. Now wrap the code inside your addBear() function in push() and pop() to isolate the transforms. What happens now?
9. Post your Sketch to #sprite-as-function.

🏅 How to read tutorial transcripts

👨‍🏫 Why functions?

1. To reuse code

or

2. to wait.

👨‍🏫 Why add parameters to functionss?

Make your sprite positionable.

⛑️ Always Tidy your code (Command/Control-Shift-F) before saving or sharing!

🎗 Making your sprite positionable

Adjust your function's options by adding parameters inside ().

function draw() {
	...
	addBunny(200, 200, .5);
}
function addBunny(x, y, sizeFactor) {
	translate(x, y) ; // Move the bunny to a custom position.
	scale(sizeFactor); // Scale the bunny to a custom size.
	ellipse(10, 10, 50); // Draw the bunny in the upper left corner by default.
	...
}

🎗 Reminder: making your sprite clickable

mousePressed(): a function called once when the user clicks.

mouseIsPressed: a variable true as long as the user is holding the mouse down.

Example: click to show the bunny's winter fur:

function draw() {
	...
	addBunny();
}

function addBunny() {
	// translate and scale go here.
	...
	if (mouseIsPressed) {
		fill("white");   // It's winter time--blend in with the snow!
	} else {
		fill("brown"); // Normal fur is fine.
	}
	ellipse(10, 10, 50); // Draw the bunny.
	...
}

🐞 Don't style your sprite after drawing it.

function addBunny() {
	...
	ellipse(10, 10, 50); // Draw the bunny.
	...
	if (mouseIsPressed) { // ❌ This is like picking up a brush after you've painted the bunny ☹️
		fill("white");
	} else {
		fill("brown");
	}
}

🐞 Don't overwrite your conditional with a later command.

function addBunny() {
	...
	if (mouseIsPressed) {
		fill("white");
	}
	fill("brown"); // ❌ This will make the bunny always brown ☹️
	ellipse(10, 10, 50); // Draw the bunny.
	...
}

Sprite party 🎉

Stage 1: prepare a clickable sprite

1. In your browser, visit the sketch of your custom Slack avatar that you made in a previous class that you posted to #sprite-as-function. Choose File > Duplicate to make a new sketch. Name this one something like "Mary's clickable avatar.
2. Make sure your sprite sits in the upper left corner of your sketch. You may need to adjust the x and y positions of the shapes used to make it (those are usually the first two parameters).
3. Inside your custom function (like addBunny())--not inside the draw() function--add an if statement in your code that changes some part of your sprite when the user clicks and holds. You'll use the mouseIsPressed variable, which evaluates to true only while the user is holding down a mouse button (or the trackpad equivalent). You may change the fill, stroke, rotation, or add/subtract shapes.

⚠️ rotate() always happens around the upper left corner, which can be counterintuitive if you didn't place your sprite there.

4. Now cut the code that makes your sprite out of the draw() function and into a new function definition at the bottom named something like addBunny() or addRobot().

❌ Do not call it something generic like addSprite.

5. In the last line of your draw() function above, call your new function--don't include the word function, but do include the parentheses after, eg addBunny().
6. Assuming you positioned your shapes so the sprite sits at the upper left of the sketch, add the parameters x, y, and scale inside the parentheses on the first line of the function definition.
7. At the top of the lines inside your function definition, move your sprite to the requested position with translate(x, y) and scale it with scale(size).
8. Between the opening and closing braces {} for your function definition, insert push() as the first line and pop() as the last line. This will prevent your transformations from affecting other code that we'll combine with this function in a followup exercise.

🎟 Schroedinger's cat/bunny/robot

Test your repositionable sprite by fitting it perfectly into a box on the screen:

1. Find the Sketch you just created and make sure:
   • Inside function draw() {...} is only a background() and the call to your sprite function, eg. addBunny() without the word "function" in front of it.

   • Inside your custom function at bottom, eg function addBunny() {...} are all of the colors, shapes, and if statements for your sprite.
2. Inside the draw() function, on the last line, add an outline color (eg, stroke("red")).
3. On the next line, draw a square with these parameters:
   • Set the left (x) value to the day of your birthday times 10. Eg, if you're born on the 28th, set the x to 280.
   • Set the top (y) value to the month of your birthday times 10. Eg, if you're born in November, set the y to 110.
   • Set the width and height to 100 pixels.

   🎗 The command for making a square is rect(x, y, width).

4. Now find your function call inside draw() (eg, addBunny(10, 10, 1.5)) and tweak the paramaters until your sprite fits exactly inside the box.
   • The edges should be exactly touching on both sides, with no overlap.
   • It's OK if there is space only on the top or bottom (eg, if you have a vertical or horizontal sprite).

   🎩 You may adjust one side of the box if you want to make a perfect fit.

5. Save your changes to this Sketch and post to #sprite-in-the-box.

-

👨‍🏫 Refresher on variables

Choose your variable type

let catName = "Schroedinger" ; // String variables are a series of characters.
let catAge = 12 ; // Number variables can be integers or decimals.
let catIsAlive = true ; // Boolean variables can be true or false.

🙂 Unlike other programming languages, you don't have to specify the type explicitly. JavaScript will figure out the type as soon as you set the variable to something.

Name your variables appropriately

rocketWidth = 100 ; // Strings and numbers are usually a noun or noun phrase.
function moveRocket() {...} ; // Functions are usually verbs.
rocketIsMoving = false ; // Booleans can be written like a sentence.

Scope your variables inside a function appropriately

let numberOfDogs = 1 ; // This is global despite the prefix because it's at the root level;
function setup() {
	numberOfCats = 6 ; // This is global, and can be accessed outside of setup();
	let numberOfRabbits = 12 ; // This is local, and CANNOT be accessed outside of setup();
	var numberOfWombats = 0 ; // This is also local, and CANNOT be accessed outside of setup();
}

Distinguish between setting and testing variables

catName = "Grumpy" ; // This is assignment.
catName == "Grumpy" ; // This is a test.
catName === "Grumpy" ; // This is a slightly more accurate test.

Shorten Boolean conditionals

if ( rocketIsMoving === true ) {..}

can be shortened to

if ( rocketIsMoving ) {..}

🎗 Remember the two kinds of punctuation for conditions

if ( cat === true ) {
	rocketY = rocketY + speed ;
}

🎗 Remember the two kinds of mouse presses

mousePressed(): a function called once when the user clicks.

mouseIsPressed: a variable true as long as the user is holding the mouse down.

👨‍🏫 Advanced conditions

• == or ===
• > "Greater than"
• >= "Greater than or equal to"
• < "Less than"
• <= "Less than or equal to"
• ! "NOT"
• && "AND" (both parts have to be true)
• || "OR" (either part can be true)

🥺 Make your code legible!

• Delete unnecessary line breaks.
• Indent properly (or choose Edit > Tidy Code)

👆 Schroedinger's Cat

Duplicate this sketch and complete the numbered steps to fit the cat in the box.

Prep for the party

Open the Sketch you made last time for stage 1 of the Sprite party posted to #sprite-as-function. Make sure:

• You put the code for your sprite in its own, custom function.
• Your new function has a distinctive name like addBird rather than a generic name like addSprite.
• Your function takes parameters for x and y position as well as size.
• The first and last lines inside the function braces {} are push() and pop(), respectively.
• Immediately after the first push(), you have added a translate() and a scale() in that order, with parameters that are the same as listed in your function definition.
• You moved any interactivity, eg via if (mouseIsPressed), into the sprite function. draw() should only have the background() and the call to your custom function.

Sprite party 🎉

Stage 2: combine your functions

1. In a small group, assign each participant a different, non-overlapping portion of the screen, eg, upper left, upper right, lower left, lower right, middle, etc.
2. Each person should adjust the sketch she or he made for #sprite-as-function so the sprite sits in the appropriate region. You should be able to do this by modifying the x, y, and size parameters in each function call.
3. Designate one person to create a new, composite sketch and share these URLs with this coordinator. The coordinator should paste all the function definitions and calls in the appropriate places to create a grid of avatars. (The spacing doesn't have to be perfect as long as they all fit and are visible.)
4. Clicking on the mouse should change the appearance of every sprite. One student should post the result to #x-sprite-party, and 🎗remember to tag the other three students (like @Tanya @Pedro) who collaborated on the party!

👨‍🏫 Flag assignment preview 🏴󠁧󠁢󠁥󠁮󠁧󠁿🇩🇯🇹🇬🇨🇰🇮🇰🇲

A flag for the Internet: Net flag by Mark Napier

(Note that Java applets are deprecated, so this may read as a security risk in your browser.)

👨‍🏫 Sample P5js flags

🏴󠁧󠁢󠁥󠁮󠁧󠁿🇩🇯🇹🇬 Sample student flags from 2024 🇨🇺🇰🇮🇰🇲

Simpler elements used, clever positioning and repeating

Bright colors, believable flag

Limited colors, believable flag

Two colors, elegant

Bold and militaristic

Unusual shapes

Abstract, balanced

Centralized, doubled shapes

Representational

Representational, evocative

Representational

Story of a land: abstract

Stylized, nice colors

Story of a land: representational

Asymmetry

Distinctive

Functions: Populate the heavens 🪐

Duplicate this sketch of a Jupiter-like planet, then:

1. Adjust the colors and shapes to your liking. (Don't spend more than 2 minutes on this!)
2. Define a new addPlanet() function and move the planet code there.
3. Add parameters for x, y, and size.
4. Include these parameters in translate() and scale() transforms.
5. Call your new function at least five times to populate the heavens.

🤔 Notice that the positions and scales don't work as you'd expect.

6. To fix this, wrap the insides of the function in push() and pop().

Don't delete this sketch--you'll need it for the next part.

⚠️ Variables defined with let can only be accessed inside that function. Leave off the let if you plan to use it outside of that function.

Animation: Move heaven and earth 🪐

Back at your "Populate the heavens" sketch:

1. Inside setup(), create an increment variable called planetSpeed and set it to 1.
2. Inside draw(), rewrite one of your drawPlanet() calls to make two lines with a new variable, eg from this:

addPlanet(80, 40, .5);

to this:

addPlanet(80 + planetSpeed, 40, .5);

🤔 Nothing changes. This is because you hard-coded it instead of using a variable.

3. Undo the last change and instead create a new variable in setup() called planetX.
4. Set this to whatever the initial x value of your planet used to be, eg:

function setup() {
	...
	planetSpeed = 1;
	planetX = 80;
}

5. Then, inside draw(), substitute the x variable inside your addPlanet() call:

function draw() {
	addPlanet(planetX, 40, .5);
}

6. Nothing should change. Now update the planetX variable with each turn of the draw() loop:

function draw() {
	addPlanet(planetX, 40, .5);
	planetX = planetX + planetSpeed;
}

✅ The planet should now move across the screen. Change the planetSpeed variable to your liking.

🎩 Advanced option:

Using the approach shown in the Random Race Demo, add random speeds to one or more of your planets.

🎟 Pop the balloon 🚀🎈

Duplicate the Collision Exercise template and fill in the blanks to make the balloon change when it is struck by the dart. Post your new URL to #x-pop-balloon.

💁‍♂️ Working example

🧐 Sample P5js games

• Popular games from the web
• Cut Bread
• Crementum
• COVID curve walker
• Ketris
• Versus

👨‍🏫 Advanced badge features

• View transcript
• View code samples
• View video by itself
• Report problem

👨‍🏫 Drawing shapes with a loop

for (let linesDrawn = 0; linesDrawn < 36; linesDrawn++) {
	rotate(10);
	line(20, 20, 100, 100);
}

• 🎗 By default, x and y in rect(x, y, width) position its top left corner, while x and y in ellipse(x, y, width) position its center.
• 🎗 Add angleMode(DEGREES) to setup() for rotate(30), rotate(45), etc.
• 🎗 Wrap your code in push() and pop() to prevent transforms from bleeding over to the next drawn item.
• ⚠️ Add noLoop() (or uncheck Auto-refresh) when using for to prevent infinite loops!
• ⌨️ Easily toggle comments on or off with Cmd-/ (Mac) or Ctr-/ (Windows).

🎟 Loop-de-loop

Duplicate the Draw a shape with a loop template and create your own complex shape from smaller shapes using a loop. Post the URL before your leave to #x-shape-from-loop.

👨‍🏫 p5js versus Canvas versus JavaScript

Creating shadows

Sample code in HTML canvas

Sample code in p5js

// Set up the shadow.
drawingContext.shadowOffsetX = 5;
drawingContext.shadowOffsetY = -5;
drawingContext.shadowBlur = 10;
drawingContext.shadowColor = 'black';
// Draw the rectangle.
rect(0, 0, 100, 100);

Creating gradients

Sample code in HTML canvas

Sample code in p5js

let greenBlueGradient = drawingContext.createLinearGradient(50, 50, 100, 100);
greenBlueGradient.addColorStop(0, 'yellowgreen');
greenBlueGradient.addColorStop(.7, 'turquoise');
drawingContext.fillStyle = greenBlueGradient;
drawingContext.rect(50, 50, 100, 100);
drawingContext.fill();

👨‍🏫 Advanced collisions

You can set a Boolean (true/false) variable to a comparison.

let studentPassedTest = (grade > 65) ; // It's common to put comparisons between parentheses ().

You can move a sprite at an angle.

rocketX = rocketX + 3 ;
rocketY = rocketY + 5 ;
addRocket( rocketX, rocketY ) ;

👎 Testing for x and y overlap doesn't work well for non-rectangular sprites.

👍 P5js has a formula that measures the distance between their centers.

let distanceForCollision = 10 ;
let rocketHitsMoon = ( dist(rocketX, rocketY, moonX, moonY) < distanceForCollision );
if ( rocketHitsMoon ) {
    console.log( "The Eagle has landed!" ) ;
} ;

🎗 Unlike rect(), the x and y for an ellipse() are by default at its center.

🎗 You can comment or uncomment multiple lines of code with Command-/ (Control-/ on Windows).

(Don't accidentally uncomment a comment or it will throw an error.)

// Totally cool comment, no problem here! ✅
Whoops, forgot the leading slashes in this comment ❌

👆 Distance formula demo

🎟 Hit the 8-ball

Change the Collision at an Angle sketch, which sends a projectile at an angle, to work with at least one of the sprites you have made so far for this course. You can start from the template that uses x,y inequalities or the template that uses the distance formula. Post your URL to #x-hit-8-ball.

🧐 Review last assignment

👍 Vote for your favorites

Visit #x-shape-from-loop and review the star-like shapes by the three classmates who posted immediately before you and the three who posted immediately afterward. Add a "thumbs up" reaction emoji to up to two (2) of these six sketches.

👨‍🏫 Common P5js pitfalls

🎟 Sprite grid

Visit one of your sketches with a sprite you made, eg the "catcher" sprite from Assignment 3 or the "star" sprite from the last in-class exercise. Copy the code to build the sprite and add it to a new sketch. Make sure your sprite-building code:

• has its own function, eg addStar();
• is wrapped in push()/pop() so any transforms won't affect code outside the function;
• has shapes that are defined close to the upper left corner, eg ellipse(0, 0, 50) instead of ellipse(240, 268, 50).
• takes x and y as parameters, and then call translate(x, y) at the beginning of the function.

Then duplicate the Nested Loops Exercise Template and paste in your function at the bottom. Change the variable names and parameter settings to fit your sprite evenly into the canvas. You may want to expand the canvas dimensions or resize your sprite with a command like scale(.5) at the start of your function.

Once you're satisfied with the spacing, post your sketch URL to #x-sprite-grid.

👨‍🏫 Review Course Correction

👨‍🏫 Adding unpredictability: randomness and fractals

The Hardest Trip - Mandelbrot Fractal Zoom

Fractals in nature and code

👨‍🏫 Randomness in P5js

random(360) gives a number between 1 and 360.

random(180, 360) gives a number between 180 and 360.

Where to put a random() call

• ⚠️ random() outside of any function will cause an error because it's a P5js method.
• random() in setup() will stay the same for each "play" of the sketch.
• random() in draw() is called on every turn of the loop and will result in jitter 😵‍💫.

🛠 If you want to randomize sprites in a loop without creating jitter, add noLoop() to your setup() function.

noLoop() is useful whenever you are adding adding randomness outside of setup(), or writing your own loop, or running a recursive function.

👨‍🏫 Example: Race the moon 🚀

Visit the Random Race Demo sketch, which launches a ship that tries to catch up to the moon. In this sketch, both the ship and moon have random speeds and random starting positions.

🎟 Random landscape

As a breakout group, decide what sprite each person is going to add to an abstract landscape; examples might include trees, clouds, birds, mountains, buildings, or cars. Then each participant should duplicate and customize the Draw a Random Landscape template. Each should sketch should include a sprite function that takes a parameter that can be randomized, such as position, scale, color, etc. Each member's sketch should use a loop to display 5 or more of these randomized sprites to the screen.

🎩 More adventurous students can try making a recursive (eg, fractal) shape by starting from the Random Landscape with Fractal template instead.

Then choose a coordinator to paste the code from the other members to a main sketch that adds shapes at random intervals and parameters to produce a collective landscape. Every time you run the sketch, it should generate a different landscape.

⚠️ Be sure to write your sprite function so that it:

• Sits at the upper left corner.
• Takes x, y, and size arguments.
• Uses translate() and scale() commands inside the sprite function to adjust the sprite.
• Wraps the contents of the function definition in push() and pop() to prevent transform bleeding.

⚠️ Don't forget to add noLoop() to your setup() function.

Post the URL to #x-random-landscape and be sure to tag all the participants (eg @mary @sam @jasmine).

-

👨‍🏫 Repeating patterns in nature and art

See also Code As Creative Medium

🧐 Sample random landscapes

Rainy

Monkey business

Traffic jams

Let it snow

Starry night

Town and country

Richard Serra

Urban

Cloud combos

👨‍🏫 Review Random Landscapes

Whoever posts must tag everyone else in the group for them to get credit.

👨‍🏫 Another P5js pitfall: misplaced functions

Tidy your code!

Move the code around until this sketch works

Combining mouseIsPressed with a state variable

if ( ... ) { ... }

&&

||

!

// ...

/* ... */

👨‍🏫 Preview strategy for this exit ticket.

👨‍🏫 Textiles and the origin of computing

👨‍🏫 Optional: Interactive patchwork quilts

Quilt that responds to mouse by Andy Lapham.

• Mouse position determines deviation of corners of colored post-it notes.

Quilt that responds to keys by Bharathvaj Ganesan.

• Uses CodePen (regular HTML and JavaScript with imported P5js library).
• Draws color palettes from predetermined arrays.
• Uses a switch statement.
• Uses modulo % to choose among options.
• uses keyCode to distinguish numbers from other keys.

More animated patterns by Lucy Yip

👆 Draw sprites from an array

Duplicate the Draw Sprites from an Array exercise. Uncomment the options inside the draw() function to draw from a limited set of sprites randomly or according to the order in the array.

🎟 Complete the state exercise and post to #state-variables.

👨‍🏫 Syntax reminders

🎗 // ... versus /* ... */

🎗 A number like 12 is just what it seems to be, but P5js assumes an unquoted word like red is a variable.

👨‍🏫 Array offsets versus spatial offsets.

The number 3 below is an array offset.

myArray = [🐶, 🐱, 🐦, 🐴, 🐵] ;
myArray[3] === 🐴 // True.

The variable offsetRight below is a spatial offset.

for ( let columnsDrawn = 0; columnsDrawn < 4; columnsDrawn++ ) {
	star.x = star.startX + offsetRight ;
}

👨‍🏫 Writing your own loops

⚠️ When creating your own loop, consider adding noLoop() to setup() to prevent draw() from accidentally animating.

If you copy the for loops and don't change things, you can crash your editor. If you repeat the same counter++, then you can crash, even if you uncheck auto-refresh, it will still crash if you have an infinite loop.

⚠️ Do not define new functions inside of draw()

⚠️ Don't use local variables inside of setup()

👨‍🏫 Object properties v. naked variables

// You could define each sprite with different variables.
star1X = 100;
star1Y = 150;
star1Scale = 1;
star1Color = "white";

star2X = 200;
star2Y = 250;
star2Scale = 1.5;
star2Color = "yellow";

star3X = 300;
star3Y = 350;
star3Scale = 2;
star3Color = "orange";

addStar(star1X, star1Y, star1Scale, star1Color);
addStar(star2X, star2Y, star2Scale, star2Color);
addStar(star3X, star3Y, star3Scale, star3Color);

function addStar(x, y, scale, color) {
	translate(x, y);
	ellipse(0, 0, 50)
}

// Or you can define each sprite with a different object.
star1 = {
	x: 100,
	y: 150,
	scale: 1,
	color: "white"
}
star2 = {
	x: 200,
	y: 250,
	scale: 1.5,
	color: "yellow"
}
star3 = {
	x: 300,
	y: 350,
	scale: 2,
	color: "orange"
}


addStar(star1);
addStar(star2);
addStar(star3);

function addStar(star) {
	translate(star.x, star.y);
	ellipse(0, 0, 50)
}

🎗 Remember the colon and comma in object notation.

star1 = {
x: 100,
...
}

⚠️ A common pitfall is to forget the object name and period when citing a property, eg

star1 = {
	x: 100,
	y: 150,
}
addStar( star1 ) ;
function addStar( star ) {
	❌ translate( x, y ) ;
	✅ translate( star.x, star.y ) ;
}

De-clutter the garden

Duplicate this sketch and follow the instructions to convert "naked" function parameters into easier-to-read object properties. Save and post the URL to #declutter-garden.

🎟 Get help

If you've completed Assignment 4 challenge 1, you can leave once you show your instructor or TA your working sketch for that assignment. If you haven't you can leave once you have asked your instructor or TA a question about your sketch. (You do not need to post anything to Slack--just get oral permission to leave.)

👨‍🏫 Review sample games from the class

👨‍🏫 Review sample patterns from the class

👨‍🎨 Visit by new media artist John Bell

🎟 Animate your own pattern

Customize the template shared in class to create your own version of the venerable 10 PRINT maze and post it to #x-10print.

👨‍🏫 Examples of sim games

Sim game quiz 0:37-3:30

IGN, Cities: Skylines Review 0:00-00:45

Kelsey Impicciche, I Left The Sims Unpaused with FREE LOVE on ALL NIGHT... 17:12 to 17:40

Let's Game It Out, I'm a Chef That Forces Customers to Eat Garbage - Cooking Simulator 2:13-2:57

Markiplier's review of Thief Simulator 1:45 to 3:00

Markiplier's review of Drug Dealer Simulator

Markiplier's review of Gas Station Simulator

Markiplier's review of Lawn Mowing Simulator

Markiplier's review of THE MOST SATISFYING GAME EVER MADE | PowerWash Simulator - Part 1 0:31 to 1:40

🧐 Review last assignment

👨‍🏫 More benefits of JavaScript objects

For readability, you can group miscellaneous variables as "families."

function addStar(star) {
	...
}
star1 = {
	x: 5,
	y: 20,
	scale: 3,
	numberOfPoints: 6
}
star2 = {
	x: 150,
	y: 200,
	scale: 1.5,
	numberOfPoints: 4
}
addStar(star1);
addStar(star2);
						

You can also define an "anonymous" object inside your function call parentheses, with these advantages:

• ✅ You can tell what the parameters mean.
• ✅ You don't need to know the order of parameters.

addStar(
	{
		x: 5,
		y: 20,
		scale: 3,
		numberOfPoints: 6
	}
);
// This variation in order gives the same result.
addStar(
	{
		scale: 3,
		numberOfPoints: 6
		x: 5,
		y: 20,
	}
);
						

👎 Without objects, you can't tell what each parameter means, and you have to get the order right.

function addStar(x, y, scale, numberOfPoints) {
	...
}
addStar(5, 20, 3, 6); // 🤷‍♂️
						

👨‍🏫 🎗 Loop syntax

Generic loops

for( let counter = 0; counter < 20; counter++ ) {...} ; // Defining the loop.
						

👨‍🏫 Why nested loops?

Grid demo with just rows, just columns, both separately, and both nested.

👨‍🏫 🎗 Loops with arrays

Arrays

muffins = [] // Creating a new array.
muffins[ 0 ] // The first item in an array. The 0 is the "offset" from the start of the array.
muffins[ 1 ] // The second item in the array.
muffins[ 2 ] // The third item in the array.
muffins.length // How many muffins are in the array, in this case 3.
						

Looping through an array

// First set a counter and how many turns the loop will run.
for( let muffinsBaked = 0; muffinsBaked < muffins.length; muffinsBaked++ ) {
	// Inside the loop, this:
	muffins[ muffinsBaked ]
	// is the muffin being baked in the loop at any given moment.
}
						

👨‍🏫 Anatomy of a JavaScript class

// Writing the recipe.
class Muffin { // Defining a class.
	constructor(x, y, hue) { // Identifying the parameters of the class.
		// Inside the class definition, refer to parameters with "this" prefix.
		this.x
		this.y		
	}
	mix() {...} // One method of this class.
	bake() {...} // Another method of this class.
} ;
// Making a muffin.
new Muffin(...) ; // Creating an instance of the class.
						

👨‍🏫 🎗 Bounce off the walls

let isTooFarLeft = (this.x < 0); // The right side in parentheses will be true or false.
let isTooFarRight = (this.x > width); // "width" is the far right edge of the canvas.
if (isTooFarLeft || isTooFarRight) { // "||" means "OR".
 	this.addX = -this.addX; // "addX" is the velocity. Adding "-" reverses the velocity.
}
						

🎟 Fifty objects

As individual students, play the 50 objects template sketch to see a bouncing ball simulation with five dots bouncing back and forth. Then fill in the blanks to convert a sketch that builds 5 objects manually into one that builds 50 objects using an array and a for loop. Save your sketch and post the URL to #fifty-objects.

🎟 Customize the classes

As a pair, duplicate the populate sim exercise and change the code inside the show() function for the Breeder and Catcher class to display sprites you've made before (or new ones if you prefer).

⚠️ Make sure to:

• Wrap the contents of the show() function in push() and pop().
• Include translate(this.x, this.y) to make your sprite moveable.
• Set the sprite itself to display in the upper left corner (0, 0) so the translate() function will work properly.

One student should post the joint sketch URL to #customize-classes and tag the collaborator.

🧐 Review previous assignments

👨‍🏫 Review sample patterns from the class

🗣 Share sim ideas with your table

👨‍🏫 Easy method for pushing items into an array

//🎗 You can specify an item in an array with
array[ offset ]

// Strangely, offset starts with 0 and goes to one less than the length of the array 🤔.
let pets = [ 🐶, 🐱, 🐦 ] ;
pets[ 0 ] // 🐶.
pets[ 1 ] // 🐱.
pets[ 2 ] // 🐦.
pets.length // 3, not 2!

// You can add a pet to the array by referring to its offset.
pets[ pets.length - 1] = 🐵 ;

// But there's an easier way:
pets.push( 🐵 ) ;

// Either way, you've added an item to the end of the array.
// Now pets is  [ 🐶, 🐱, 🐦, 🐵 ] 

// So in a loop, you can write this:
dots[ dots.length - 1 ] = new Dot() ;

// but this is simpler:
dots.push( new Dot() ) ;

👨‍🏫 Making sprites act independently

// These are examples of global variables that affect every sprite.
x // The horizontal position of the sprite.
addX // The speed of the sprite.
isAlive // Whether the sprite has died.

// These are properties that can be different for each sprite.
this.x // The horizontal position of this particular sprite.
this.addX // The speed of this sprite.
this.isAlive // Whether this individual sprite has died.

🎟 Butterfly swarm

Duplicate the Butterfly Swarm exercise. Although a single butterfly bounces off the walls correctly, as soon as you add many with a loop the butterflies fly in lockstep or erratically. Follow the instructions to add the this. prefix to differentiate the behavior of each individual butterfly.

Post your URL to #x-butterfly-swarm.

👨‍🏫 Fall New Media courses

• NMD 100 Intro to New Media
• NMD 104 New Media Design

🎟 Replenish sprite health

In breakout groups, customize the Fade Health Exercise template by replacing the Mom and Dad classes with a sprite from each student.

To indicate health, find a prominent shape or shapes in your sprite whose fill color can change, eg the ellipse corresponding to the body of a frog. The fill for this shape should start out 100% saturated but change with health. To ensure this, make sure the lines immediately before this shape look like the lines already in the template, eg:

let saturationAsPercent = 100 * (this.health) / startHealth;
fill("hsla(240," + saturationAsPercent + "%, 50%, 1)");
// Draw shape here.
						

⚠️ For the fade to be visible, this fill color must be highly saturated, eg not close to white, gray, or black. You can change the hue (h)from 240 to any number up to 360. However, the second percentage (l) should be relatively close to 50%; otherwise if it's too high (close to white) or too low (close to black) you won't be able to see it desaturate when the sprite loses health.

Fade each sprite's health over time, but replenish any two that collide. Adjust the collision distance or number of sprites to find a balance where they neither die out nor overpopulate. Post the result to #x-replenish-health.

👆 Quiz on NFT myths and realities

Not graded. See #reference channel.

👨‍🏫 P5js and NFTs (Non-Fungible Tokens)

👨‍🏫 Review Assignment 4

👨‍🏫 Sample simulations by past students

👨‍🏫 Advanced topics for extra credit assignment

👨‍🏫 Re-using variable names

Avoid using the same name for your own variables, or a reserved name that P5js already uses like width, draw, or mouseX.

Do use the same variable name for a single thing that changes.

// ✅ It's the same health, but it changes when mom eats a meal.
mom.health = 50 ;
if ( mealIsHealthy ) {
	mom.health++ ; // 👵🥘
} else {
	mom.health-- ; // 👵🥘
}
						

Don't use the same variable name for different things.

// ❌ This is the same variable name for different things.
let distanceApart = dist(mom.x, mom.y, dad.x, dad.y); // 👵💥👴
if (distanceApart < collisionDistance) {
	mom.health--;
	dad.health--;
}
let distanceApart = dist(mom.x, mom.y, dog.x, dog.y); // 👵💥🐶
if (distanceApart < collisionDistance) {
	mom.health--;
	dog.health--;
}
						

Do use different variables for different things.

// ✅ Each pair has a different variable for the distance between them.
let distanceApartMomDad = dist(mom.x, mom.y, dad.x, dad.y); // 👵💥👴
if (distanceApartMomDad < collisionDistance) {
	mom.health--;
	dad.health--;
}
let distanceApartMomDog = dist(mom.x, mom.y, dog.x, dog.y); // 👵💥🐶
if (distanceApartMomDog < collisionDistance) {
	mom.health--;
	dog.health--;
}
						

Or you can make a single function that handles every case,

// ✅ The isTouching function handles every pair,
// using return true or return false to indicate the result.
if ( isTouching(mom, dad) ) {
	mom.health--;
	dog.health--;
}

function isTouching( sprite1, sprite2 ) {
	// This variable is only used inside this function
	// and changes every time it is called.
	let spriteDistance = dist(sprite1.x, sprite1.y, sprite2.x, sprite2.y); 
	if (spriteDistance < collisionDistance) {
		return true;
	} else {
		return false;
	}
}
						

👨‍🏫 Strange HSL behavior outside of 360°

Hues that are bigger than 360 at red.

Negative hues turn white.

🗣 Find your table

Consecutive numbers: Count off consecutively from zero to the last student. Say you have 15 students; the first will be #0 and the last will be #14. Write down your number so you don't forget it.

Cyclic numbers: Now do a second count also from zero, but this time to create 5 teams. But because we're starting with zero, there will be a Team 0. So you will count off 0, 1, 2, 3, 4, 0, 1, 2, ... instead of 1, 2, 3, 4, 5, 1, 2, ...

As a team, convert each student's consecutive number below to her cyclic number:

• Student #0 -> Team 0
• Student #1 -> Team 1
• Student #2 -> _______
• Student #3 -> _______
• Student #4 -> _______
• Student #5 -> _______ [not Team 5!]
• Student #6 -> _______
• Student #7 -> _______
• Student #8 -> _______
• Student #9 -> _______
• Student #10 -> _______
• Student #11 -> _______
• Student #12 -> _______
• Student #13 -> _______
• Student #14 -> _______
• Student #15 -> _______
• ...
• Student #20 -> _______
• ...
• Student #25 -> _______
• Student #26 -> _______
• ...
• Student #317 -> _______

Can you figure out a general rule for making these conversions?

🦋 Free your butterflies!

🎗 To allow each sprite to act independently, convert them from functions to classes:

• function addButterfly() ➡️ class Butterfly {...}
• addButterfly() ➡️ new Butterfly()
• wingColor ➡️ this.wingColor

👆 Flap your wings

Complete the instructions in this exercise to create a simple animation that takes advantage of the draw() loop and the remainder % operator.

👨‍🏫 Imposter syndrome

Neil Gaiman

🗣 Breakout discussion

In breakout groups, brainstorm a list of conditions and situations that make you feel more and less confident about coding. Add these to a classwide document shared by your instructor. Choose someone from your group to explain them.

👨‍🏫 Coding with AI

👨‍🏫 How to prompt AI: code part 1 (generating and debugging)

👨‍🏫 How to prompt AI: code part 2 (incremental prompts)

💡 This sample prompt follows the  role  output  level  context  goal   template:

👆 Coding with AI

Ask a generative AI chatbot like ChatGPT to code a P5.js image based on your description of a sprite made from simple shapes. Use the online P5.js editor to test code that ChatGPT gives you back. Once you have a start, request small incremental changes to the image, refining the prompt if it’s interpreted poorly or if the result is not what you expected.

Post a screenshot (not URL) of the result #ai-sprite, then add a 👍 emoji to the three best from your class and a 💩 emoji to the three worst. Discuss the difference between hand-coded and AI-generated sprites with the class.

Sprites voted worst from past classes

Sprites voted best from past classes

🎟 Complete course evaluations

👨‍🏫 Steps to add sprites to your simulation

1. Populate sprites
2. Activating breeders
3. Harvesting breeders

⛑️ Getting help

Post to #troubleshooting

🍿 Watch the GitHub video in #reference

🎗 Edit > Tidy your code before sharing

⚠️ Slack hides messages after 90 days

👨‍🏫 Oddities of probability

Julius Caesar's last breath

👨‍🏫 Detecting pairwise collisions

Index card demo.

👆 Birthday paradox demo

Play the sketch ten times, counting how many matches and failures you get out of 10. Report to the instructor to calculate the likelihood across the entire class.

⚠️ Adding noLoop() and keeping under 50 will prevent crashing your browser!

parseInt() parses out the integer (drops any decimals)

🗣 Review progress.

🎟 Check in with your TA about your Assignment and Lab status, who will give you credit for class participation.

🗣 Final demos

All students attend lecture to show their final projects.

🗣 Help session

Required for all students whose cumulative grade by the previous class is at a B- or below.