• Topics
• Lecture notes
• Coding Advice
• Day 3.1 – Functions and iteration
• Day 3.2 – Arranging items, sin and cos
• Day 4.1 – Functions, Scope, Shadowing
• Day 4.2 – random(), sin(), and noise()
• Day 5.1 – Objects
• Day 5.2 – Classes && OOP
• Naming Conventions
• Day 5.R – OOP continued
• Old-Style Class Definitions
• Day 6.1
• Code
• Glitch
• Arrays
• Array Resources
• Day 6.2
• Course roadmap; domains
• What's Left (The Big Picture)
• Workflow Tip
• Code – Freezing Animations
• Code – Two Array Iteration Methods
• Code – Shuffling Team Names
• Code – Arrays of Objects
• Code – closeToMouse() (review of booleans and return values)
• Code – variable scope (review)
• Code – Optional Arguments with Default Values
• Day 6.R – Array.select and Particles
• Related Pages

Topics

Lecture notes

Coding Advice

Code for humans too

Take small steps,…

so that you can tell which change broke the code

When your program becomes too complicated, take a break to make it do the same thing more simply instead of making it do more

Optimize your workflow

Day 3.1 – Functions and iteration

Day 3.2 – Arranging items, sin and cos

This material has been moved to 🎨Creative Coding with p5.js

Day 4.1 – Functions, Scope, Shadowing

Day 4.2 – random(), sin(), and noise()

Day 5.1 – Objects

Day 5.2 – Classes && OOP

Naming Conventions

Class naming conventions:

• Uppercase: Dog not dog
• Singular: Dog not Dogs

Method naming conventions:

• Don't include the class name: Dog.speak() not Dog.dogSpeak() or Dog.speakDog()
• CamelCase: Dog.rollOver() not Dog.roll_over(). (Unless you are modifying a sketch that already uses the snake_case convention. Consistency within a file is more important than consistency with a style guide.)

Day 5.R – OOP continued

Old-Style Class Definitions

These are three ways of defining classes. Use the first (modern class definition). You may see the other two in older examples and tutorials, or code written by people who learned JavaScript from older tutorials.

These ways of defining a class all do the same thing*. They each define a class that is instantiated using let ball1 = new Ball(100, 150, "red") . Each instance has properties x, y, radius, and color,. The class has methods draw() and move().

class Ball {
	constructor(x, y, c) {
		this.x = x;
		this.y = y;
		this.radius = 40;
		this.color = c;
	}

	draw() {
		fill(this.color);
		circle(this.x, this.y, this.radius);
	}

	move(targetX, targetY) {
		this.x = lerp(this.x, targetX, 0.1);
		this.y = lerp(this.y, targetY, 0.1);
	}
}

let b1 = new Ball(10, 20, "red");
\b1.draw();

function Ball(x, y, c) {
	this.x = x;
	this.y = y;
	this.radius = 40;
	this.color = c;

	this.draw = function() {
		fill(this.color);
		circle(this.x, this.y, this.radius);
	}

	this.move = function(targetX, targetY) {
		this.x = lerp(this.x, targetX, 0.1);
		this.y = lerp(this.y, targetY, 0.1);
	}
}

let b1 = new Ball(10, 20, "red");
b1.draw();

function Ball(x, y, c) {
	this.x = x;
	this.y = y;
	this.radius = 40;
	this.color = c;
}

Ball.prototype.draw = function() {
	fill(this.color);
	circle(this.x, this.y, this.radius);
}

Ball.prototype.move = function(targetX, targetY) {
		this.x = lerp(this.x, targetX, 0.1);
		this.y = lerp(this.y, targetY, 0.1);
	}
}

let b1 = new Ball(10, 20, "red");
b1.draw();

* There are subtle differences between the modern class definition, the function-based class definition, and the prototype class definition. These differences are unlikely to matter to you in practice.

Day 6.1

Code

https://glitch.com/edit/?#!/cclab-arrays?path=sketch.js%3A1%3A0

Glitch

• CCLab Cookbook: Glitch recipes
• Enabling the developer console: https://debugbrowser.com

Arrays

You should be able to do the following things to an Array:

• Create a new Array. For example, create an Array that contains the three items "Beijing", "Shanghai", and "Amherst".
• Get the nth element from an Array. For example, if cities has the value ["Beijing", "Shanghai", "Amherst"], retrieve the second element cities[1] (which is "Shanghai").
• Use for(;;) and for (let…of…) to iterate over the elements of an Array.
• Replace an element within an Array. For example, if cities has the value ["Beijing", "Shanghai", "Amherst"], modify it so that its value is ["Beijing", "Shanghai", "Xi'an"]
• Add an element to the end of an Array. For example, if cities has the value above, modify it so that its value is ["Beijing", "Shanghai", "Amherst", "Xi'an"].

By the time of the midterm, you should also be able to:

• Find the position of an element within an Array. For example, if cities has the value ["Beijing", "Shanghai", "Amherst", "Xi'an"], find the value 2 such that cities[2] === "Amherst".
• Find the first element in an Array that satisfies a certain property. For example, given the property "starts with a vowel", find "Amherst".
• Find all the elements within an Array that satisfy a certain property. For example, given the property "begins with the letter 'X'" and the Array ue ["Beijing", "Shanghai", "Xiamen", "Xi'an"], find the elements "["Xiamen", "Xi'an"].

(There will not be a midterm exam. This timeframe is guidance for a pace of learning. There may be additional quizzes that cover this material, even after we are done with "Array week".)

Array Resources

• JavaScript Arrays has a list of resources for learning about arrays and finding methods
• Sarah Drasner's JavaScript Array Explorer

Day 6.2

Course roadmap; domains

What's Left (The Big Picture)

• Computation – patterns of use
• Workflow – how to debug
• Tools – formatting, refactoring, Glitch, Visual Studio Code
• Domain concepts (in orange above)
• More projects
• Practice practice practice!

Workflow Tip

Setting up a coding environment – have everything at your fingertips. I currently use a combination of Notion, and browser bookmarks, for this. Previously I've used Google docs, and HTML documents.

Code – Freezing Animations

Three ways of freezing an animation (of keeping draw() from being called again and again):

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	// drawing code goes here
}

function setup() {
	createCanvas(windowWidth, windowHeight);
}

function draw() {
	background(100);
	// drawing code goes here
	noLoop();
}

function mousePressed() {
	loop();
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	noLoop();
}

function draw() {
	background(100);
	// drawing code goes here
}

function mousePressed() {
	loop();
}

Code – Two Array Iteration Methods

Two ways of iterating over all the items in an Array:

let teams = [
	"Adagio e Lieto",
	"Type Your Music",
	"Interactive Music Visualization",
	"Animal Farm",
	"Smash",
	"May The Force Be With You",
	"Interactive Game",
	"Oasis in the Distance",
];

function setup() {
	createCanvas(windowWidth, windowHeight);
	for (let i = 0; i < teams.length; i++) {
		let team = teams[i];
		console.info(team);
	}
}

let teams = [
	"Adagio e Lieto",
	"Type Your Music",
	"Interactive Music Visualization",
	"Animal Farm",
	"Smash",
	"May The Force Be With You",
	"Interactive Game",
	"Oasis in the Distance",
];

function setup() {
	createCanvas(windowWidth, windowHeight);
	for (let team of teams) {
		console.info(team);
	}
}

Code – Shuffling Team Names

Code – Arrays of Objects

Code – closeToMouse() (review of booleans and return values)

Several ways of writing closeToMouse():

class Ball {
	constructor() {
		// …
	}
	closeToMouse() {
		let d = dist(this.x, this.y, mouseX, mouseY);
		if (d < this.size) {
			return true;
		} else {
			return false;
		}
	}
	draw() {
		// …
	}
}

	closeToMouse() {
		let d = dist(this.x, this.y, mouseX, mouseY);
		return d < this.size * 2;
	}

	closeToMouse() {
		return dist(this.x, this.y, mouseX, mouseY) < this.size * 2;
	}

	closeToMouse() {
		let dx = this.x - mouseX;
		let dy = this.y - mouseY;
		let d = sqrt(sq(dx) + sq(dy));
		return d < this.size * 2;
	}

Code – variable scope (review)

Code – Optional Arguments with Default Values

This is optional material. You do not need to understand or use this in this course.

Day 6.R – Array.select and Particles

let balls;

function setup() {
	createCanvas(windowWidth, windowHeight);
	balls = [];
	for (let i = 0; i < 20; i++) {
		let ball = new Ball(random(width), random(height));
		balls.push(ball);
	}
}

function draw() {
	background(200); // + 50 * cos(frameCount / 25));

	// draw the balls
	for (let ball of balls) {
		ball.draw();
	}
}

function mousePressed() {
	let ball = new Ball(mouseX, mouseY);
	balls.push(ball);
}

class Ball {
	constructor(x, y) {
		this.x = x;
		this.y = y;
		this.size = 80;
	}

	draw() {
		circle(this.x, this.y, this.size);
	}

	closeToMouse() {
		let d = dist(this.x, this.y, mouseX, mouseY);
		return d < this.size * 2;
	}
}

Related Pages

• Course Web Site
• Course Cookbook
• p5.js Resources