Objectives

In this assignment you will write three different complete programs to demonstrate that you can build and deploy p5.js applications using graphics, animation, and interaction.

Instructions

Submit, via Brightspace, the following:

• An affidavit that you have read or watched each of the items in the reading section below, or if you did not complete them all, tell me which items you did not yet read or watch.
• The URLs of your online projects, so I can run your programs, assess your code, and give you feedback.

You may, but are not required to, work on your programs in groups of two, but you must do the readings and watchings individually.

Readings and Videos

Just read and/or watch the following. You do not have to take notes or write reports on them; however, don’t cheat yourself by skipping them. These independent learning units must be done individually, but please feel free to discuss these items with your friends and classmates. You are encouraged to share your thoughts on these materials on course community channels (Brightspace Forums, Slack, Discord), and to post related items your classmates might be interested in. We learn together. Some of these resources have links to other resources, which you may wish to follow as time allows.

• p5.js has rocked my world by Jesse Billard
• This video by Echo about color
• Yevgeniy Brikman’s Don’t just learn to code, learn how to think
• Dan Shiffman’s Coding Challenge #76
• Bret Victor’s Inventing on Principle video

Programming

Implement these three programs, using p5.js for each. You may to use Glitch, CodeSandbox, The p5.js Web Editor, CodePen, or Repl.it. Feel free to work in pairs. If you do, make sure you both participate fully: do not simply “divide up” the work. Both students are responsible for understanding every line of code.

1. Write a p5.js animation of a shrinking circle. The circle starts off as the same size as your canvas, which should be a square of at least 800 x 800. The circle should shrink down to nothing in exactly 5 seconds. Be creative in choosing the circle’s stroke weight, stroke and fill colors, background, and possible visual effect at the end of the animation. You are required to stop the animation with noLoop when the circle finally disappears.
2. Write a p5.js animation of a plane landing. Be creative. Make sure to stop the animation when the plane comes to a stop.
3. A basic Whac-A-Mole (モグラ退治) game using p5.js, with three moles. Your moles can be rectangles, but if you would like to find mole images online that’s fine too. You do not need to do any game design: you can let the game run forever if you like, there is no need for timers or levels or anything fancy. (Add such features if you wish, but no extra credit will we awarded, though perhaps you will gain feelings of happiness and accomplishment.) The only thing you must do is display instructions and increment a score every time you hit on a mole, and display that score somewhere. Where and how you display the score is up to you.

Grading

Here’s the rubric I’ll use to score your submission.

Requirement	Out Of	You got
The circle shrinks smoothly	3
The circle looks nice (colors are easy to distinguish, strokes are not too thick or thin)	3
The circle shrinks over 5 seconds, not less, not more	3
The circle completely disappears after 5 seconds (and noLoop is called)	3
The plane has been designed nicely (wings, tail, etc. Easily identifiable in the code)	5
The plane animates smoothly and reasonably	10
Nice scenery for the plane landing (e.g. sky, clouds, trees, runway, ...)	5
There’s an interesting setting or story to your plane landing	5
The plane stops after it is landed (and noLoop is called)	3
Whac-A-Mole game shows visible instructions	5
Whac-A-Mole game works	10
Whac-A-Mole game shows a score	5
Your code was tidied (perfection demanded) Use a formatter, but remember these tools generally cover only indentation and spacing; vertical space and capitalization are up to you	10
Code uses good names	10
Code is broken down into well-named functions (and no overly-long ones)	10
Code uses variables where necessary (few or no magic numbers)	10
Misc. Bonus points or penalties at discretion of Prof.	0
Total	100