NMD 105 Creative Coding I

P5js Pitfalls

Where to write code?

When to put code in setup, draw, or outside.

Horizontal whitespace usually doesn't matter, but consistent indenting helps debugging.

Vertical whitespace is always optional.

p5js reads from top to bottom. Don't refer to something now that isn't defined until later.

Punctuation and syntax

Double quotes "" versus single quotes '' versus backticks ``.

Every ( has a ), every { has a }, every [ has a ], but they are not always on the same line.

= versus == versus ===

let versus var versus nothing

Naming stuff

Capitalization matters: mouseX works, mousex doesn't

Use nouns for most variables: puppy, numberOfCats

Use verbs for functions: addBird(), detectCollision()

Use phrases for true/false (Boolean) variables: isFalling, hasParent

Don't abbreviate unless you have to: makeCloud is better than mkCld

Use "camelCase" to combine words: addBird is better than add_bird or addbird

Can't use the same name for a different variable or function.

Some names are already taken: width, mouseIsPressed

New and old sketches

✅ Command-S in the code saves the sketch.

❌ Command-S elsewhere on the screen tries to save the entire web page to your desktop.

🐞 If your old code appears when you click the New Sketch button, try File > New.

Undoing and re-doing

✅ Command-Z should undo changes.

✅ Command-Y should redo changes.

🐞 Control-Z doesn't always undo. Worried about ruining your code? Duplicate the sketch.

🐞 Disable autorefresh when writing a loop, or you could get caught in an infinite refresh.

Placing p5js code

⚠️ Put your paint layers in the right order! If you make a small shape and then on the next line make a big shape, the big shape will cover the small shape.

⚠️ Don't put the background() in your function.

⚠️ If you have transforms, wrap them in push/pop inside your function.

⚠️ Don't put background() in a function called from draw().

ℹ️ To comment more than one line of code, use /* ... */

Computer math

🤷 Computer scientists count from zero.

⚠️ You won't be able to see collinear shapes, eg triangle(100,100,200,200,300,300). Add a stroke!

⚠️ Unlike high school math, the Y axis points down from the top of the canvas.

Animation glitches

If your sketch is acting erratically, eg target moves faster after projectile launches:

🛠 Check your placement of push() and pop(). Is the latter missing?

🛠 You could have redundant code for positioning so it goes twice as fast and far, eg:

			translate(x, y);
			ellipse(x, y, 100)
	

⚠️ x and y are additive and subtractive, but scale() takes a ratio, eg:

	// This will move the rectangle 2 pixels to the right.
	translateX( 2 )
	rect( ... );
	
	// This will double the size of the rectangle.
	scale( 2 )
	rect( ... );
	

Sharing code

✅ Always Tidy and Save your sketch before sharing the URL.

⚠️ If you have transforms, wrap them in push/pop inside your function.

⚠️ When adding another person's code, watch out for conflicting settings like angleMode, rectMode.

Asking for help

Give enough info

• Make sure that you have created a p5js account (eg, "105-mary") in the editor at upper right, then save your sketch and copy the URL.
• Paste this URL in a post to #troubleshooting.
• In the same post, describe the specific problem (think "I can't get the upper right box to line up" instead of "It's not working").
• Also paste in any error you see in the editor console at lower left.

Post to #troubleshooting!

• Your classmates can learn from your example.
• Your classmates may respond faster than your instructors.

To post privately

• Direct Message your TA or me on Slack, though it may take us longer to reply.

⚠️ Beware of Googling code

You won't understand it

I'm customizing each assignment to each student

🍀 Stack Overflow when you're lucky

☹️ Stack Overflow when you're not so lucky