NMD 105 Creative Coding I

P5js Pitfalls

Where to write code 1

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, but usually best to avoid.

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

Where to write code 2

addBird() by itself calls your custom function, usually goes in draw() {...}.

function addBird() {...} defines your custom function, goes at the end of your sketch, outside of draw() {...}.

// ❌ Custom function inside draw().
function draw() {
	...
	function addBird() {
		...
	}
}

// ✅ Custom function outside draw().
function draw() {
	...
}
function addBird() {
	...
}
			

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

ℹ️ To comment more than one line of code, use /* ... */ or just a lot of /s

Naming stuff 1

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

Naming stuff 2

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

Some names are already taken: width, mouseIsPressed

Can't use the same name for a different variable or function, so choose descriptive names like frogX and bugX instead of using x for each

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 custom function. It should go in setup()

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

⚠️ Make sure your sprite is defined in the upper left corner, then use translate() and scale() to move it later.

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.

Conditions 1

Be careful where you put semicolons inside if statements.

// ✅ Put semicolons between the statements inside the parentheses.
for (let frogsDrawn = 0; frogsDrawn < 10; frogsDrawn++) {
	drawFrog();
}

// ❌ Don't put a semicolon between the parentheses and braces.
for (let frogsDrawn = 0; frogsDrawn < 10; frogsDrawn++) ; {
	drawFrog();
}
			

Conditions 2

&& (and)

if ( taylorSwiftDatedYou && taylorSwiftBrokeUpWithYou ) {
	// Write Taylor Swift song.
};
			

|| (or)

if ( dogWasHarmed || carWasStolen ) {
	// John Wick goes on rampage.
};
			

Transform glitches 1

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

// ✅ This will move the rectangle 2 pixels to the right.
translate( 2, 0 );
rect( ... );

// This will double the size of the rectangle.
scale( 2 )
rect( ... );
		

Transform glitches 2

Always translate before you scale, otherwise you could be accidentally inflating the amount of translation.

// ✅ This will move the rectangle 2 pixels to the right.
translate( 2, 0 );
scale( 3 );
rect( ... );

// ❌ This will move the rectangle 6 pixels to the right.
scale( 3 );
translate( 2, 0 );
rect( ... );
	

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(rabbitX, rabbitY);
ellipse(rabbitX, rabbitY, 100); // ❌ Will double the translation.
ellipse(10, 10, 100); // ✅ Starts from upper left corner.
	

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 paste the URL in Slack.
• 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.

🍀 AI when you're lucky

⚠️ Beware of using AI

👎 You won't understand it

👎 I'm customizing each assignment to each student

👍 AI can be great for debugging

AI policy for this class

You are only allowed in this class to use AI in the following contexts:

• 🐞 When debugging your code.
• 🗣 When adding comments to code.
• 📝 When expressly invited to do so by the assignment.
• ✅ When you get special permission from your instructors (just ask us!)

When you do use AI, please cite the model and how you used it ("I used Claude Sonnet to help me draft an outline and also to check spelling in grammar before submitting my final draft").