Refactoring into Functions

Note: Most of the content of this page is inside toggles. Click on the triangles to disclose the code.

The initial program

function setup() {
	createCanvas(windowWidth, windowHeight);
	background("pink");
}

function draw() {
	fill("white");
	circle(85, 200, 80);
	fill("blue");
	circle(85, 200, 80-30);
	fill("black");
	circle(85, 200, 15);

	fill("white");
	circle(185, 200, 80);
	fill("blue");
	circle(185, 200, 80-30);
	fill("black");
	circle(185, 200, 30);

	fill("purple");
	rect(55, 310, 180, 20);
	circle(55, 305, 60);
	circle(55+170, 305, 60);
}

Use “ablation” to reverse-engineer code

function setup() {
	createCanvas(windowWidth, windowHeight);
	background("pink");
}

function draw() {
	// fill("white");
	// circle(85, 200, 80);
	// fill("blue");
	// circle(85, 200, 80-30);
	// fill("black");
	// circle(85, 200, 15);

	fill("white");
	circle(185, 200, 80);
	fill("blue");
	circle(185, 200, 80-30);
	fill("black");
	circle(185, 200, 30);

	fill("purple");
	rect(55, 310, 180, 20);
	circle(55, 305, 60);
	circle(55+170, 305, 60);
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	background("pink");
}

function draw() {
	// left eye
	fill("white");
	circle(85, 200, 80);
	fill("blue");
	circle(85, 200, 80-30);
	fill("black");
	circle(85, 200, 15);

	// fill("white");
	// circle(185, 200, 80);
	// fill("blue");
	// circle(185, 200, 80-30);
	// fill("black");
	// circle(185, 200, 30);

	fill("purple");
	rect(55, 310, 180, 20);
	circle(55, 305, 60);
	circle(55+170, 305, 60);
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	background("pink");
}

function draw() {
	// left eye
	fill("white");
	circle(85, 200, 80);
	fill("blue");
	circle(85, 200, 80-30);
	fill("black");
	circle(85, 200, 15);

	// right eye
	fill("white");
	circle(185, 200, 80);
	fill("blue");
	circle(185, 200, 80-30);
	fill("black");
	circle(185, 200, 30);

	// fill("purple");
	// rect(55, 310, 180, 20);
	// circle(55, 305, 60);
	// circle(55+170, 305, 60);
}

Capture our knowledge about the program into comments

function setup() {
	createCanvas(windowWidth, windowHeight);
	background("pink");
}

function draw() {
	// left eye
	fill("white");
	circle(85, 200, 80);
	fill("blue");
	circle(85, 200, 80-30);
	fill("black");
	circle(85, 200, 15);

	// right eye
	fill("white");
	circle(185, 200, 80);
	fill("blue");
	circle(185, 200, 80-30);
	fill("black");
	circle(185, 200, 30);

	// mouth
	fill("purple");
	rect(55, 310, 180, 20);
	circle(55, 305, 60);
	circle(55+170, 305, 60);
}

“Factor out” the code stanzas into functions

function setup() {
	createCanvas(windowWidth, windowHeight);
	background("pink");
}

function draw() {
	// left eye
	leftEye();

	// right eye
	fill("white");
	circle(185, 200, 80);
	fill("blue");
	circle(185, 200, 80-30);
	fill("black");
	circle(185, 200, 30);

	// mouth
	fill("purple");
	rect(55, 310, 180, 20);
	circle(55, 305, 60);
	circle(55+170, 305, 60);
}

function leftEye() {
	fill("white");
	circle(85, 200, 80);
	fill("blue");
	circle(85, 200, 80-30);
	fill("black");
	circle(85, 200, 15);
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	background("pink");
}

function draw() {
	// left eye
	leftEye();

	// right eye
	rightEye();

	// mouth
	fill("purple");
	rect(55, 310, 180, 20);
	circle(55, 305, 60);
	circle(55+170, 305, 60);
}

function leftEye() {
	fill("white");
	circle(85, 200, 80);
	fill("blue");
	circle(85, 200, 80-30);
	fill("black");
	circle(85, 200, 15);
}

function rightEye() {
	fill("white");
	circle(185, 200, 80);
	fill("blue");
	circle(185, 200, 80-30);
	fill("black");
	circle(185, 200, 30);
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	background("pink");
}

function draw() {
	// left eye
	leftEye();

	// right eye
	rightEye();

	// mouth
	mouth();
}

function leftEye() {
	fill("white");
	circle(85, 200, 80);
	fill("blue");
	circle(85, 200, 80-30);
	fill("black");
	circle(85, 200, 15);
}

function rightEye() {
	fill("white");
	circle(185, 200, 80);
	fill("blue");
	circle(185, 200, 80-30);
	fill("black");
	circle(185, 200, 30);
}

function mouth() {
	fill("purple");
	rect(55, 310, 180, 20);
	circle(55, 305, 60);
	circle(55+170, 305, 60);
}

Now we don’t need the comments. The function names are “self-documenting”
```
function draw() {
	leftEye();
	rightEye();
	mouth();
}
```

This only works because we are using descriptive function names

function draw() {
	f1(); // draw the left eye
	f2(); // draw the right eye
	f3(); // draw the mouth
}

function f1() {
	// …
}

function f2() {
	// …
}

function f3() {
	// …
}

Replace repeated constants by variables

function leftEye() {
	let xCenter = 85;
	let yCenter = 200;
	fill("white");
	circle(xCenter, yCenter, 80);
	fill("blue");
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, 15);
}

function rightEye() {
	let xCenter = 185;
	let yCenter = 200;
	fill("white");
	circle(xCenter, yCenter, 80);
	fill("blue");
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, 30);
}

Turn the let variables into function parameters, that receive their values from where they are used

function draw() {
	leftEye(85, 200);
	rightEye();
	mouth();
}

function leftEye(xCenter, yCenter) {
	// let xCenter = 85;
	// let yCenter = 200;
	fill("white");
	circle(xCenter, yCenter, 80);
	fill("blue");
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, 15);
}

function draw() {
	leftEye(85, 200);
	rightEye(185, 200);
	mouth();
}

function leftEye(xCenter, yCenter) {
	// let xCenter = 85;
	// let yCenter = 200;
	fill("white");
	circle(xCenter, yCenter, 80);
	fill("blue");
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, 15);
}

function rightEye(xCenter, yCenter) {
	// let xCenter = 185;
	// let yCenter = 200;
	fill("white");
	circle(xCenter, yCenter, 80);
	fill("blue");
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, 30);
}

The remaining difference between leftEye and rightEye is the pupil size. Parameterize it too, so that the functions look the same

function draw() {
	leftEye(85, 200, 15);
	rightEye(185, 200, 30);
	mouth();
}

function leftEye(xCenter, yCenter, pupilSize) {
	// let pupilSize = 15;
	fill("white");
	circle(xCenter, yCenter, 80);
	fill("blue");
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, pupilSize);
}

function rightEye(xCenter, yCenter, pupilSize) {
	// let pupilSize = 30;
	fill("white");
	circle(xCenter, yCenter, 80);
	fill("blue");
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, pupilSize);
}

Now leftEye and rightEye have the exact same definition. We could delete rightEye and use leftEye twice

function draw() {
	leftEye(85, 200, 15);
	leftEye(185, 200, 30);
	mouth();
}

function leftEye(xCenter, yCenter, pupilSize) {
	fill("white");
	circle(xCenter, yCenter, 80);
	fill("blue");
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, pupilSize);
}

Since leftEye is used to draw both eyes, rename it to eye

function draw() {
	eye(85, 200, 15);
	eye(185, 200, 30);
	mouth();
}

function eye(xCenter, yCenter, pupilSize) {
	fill("white");
	circle(xCenter, yCenter, 80);
	fill("blue");
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, pupilSize);
}

Now it’s easy to add a third eye, by calling eye a third time

function draw() {
	eye(85, 200, 15);
	eye(185, 200, 30);

	eye((185 + 85) / 2, 200 - 50, 5);

	mouth();
}

Parameterize the iris color. This allows us to draw the third eye in a different color.

function draw() {
	eye(85, 200, 15, 'blue');
	eye(185, 200, 30, 'blue');

	eye((185 + 85) / 2, 200 - 50, 5, 'green');

	mouth();
}

function eye(xCenter, yCenter, pupilSize, irisColor) {
	fill("white");
	circle(xCenter, yCenter, 80);
	fill(irisColor);
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, pupilSize);
}

(Optional material, not shown in class) It’s difficult to remember the order of the function parameters. Here’s an alternative, that names them where the function is used as well as where it’s defined.

function draw() {
	eye({ xCenter: 85, yCenter: 200, pupilSize: 15, irisColor: 'blue' });
	eye({ xCenter: 185, yCenter: 200, pupilSize: 30, irisColor: 'blue' });

	eye({ xCenter: (185 + 85) / 2, yCenter: 200 - 50, pupilSize: 5, irisColor: 'green' });

	mouth();
}

function eye({ xCenter, yCenter, pupilSize, irisColor }) {
	fill("white");
	circle(xCenter, yCenter, 80);
	fill(irisColor);
	circle(xCenter, yCenter, 80-30);
	fill("black");
	circle(xCenter, yCenter, pupilSize);
}