Assignments > P1: Make an Interactive Animation

Due on Sun, 10/30 @ 11:59PM. 30 Points.

This assignment asks you to apply what you’ve learned to create an animated, interactive terrarium, aquarium, or space odyssey. To get an idea of what you might make, please see the sample videos (as well as the animated gif below). Many (in fact most) of these samples have gone above and beyond the assignment specifications (and thus earned extra credit), but please know that meeting the assignment’s minimum requirements is sufficient for earning all 30 points. Please calibrate your implementation according to your experience level with programming (i.e. do more if you’re more experienced): you’ll get out of it what you put into it. See the rubric below to get a sense of how you will be evaluated on this assignment.

Created by Rachel Smith (Berkeley City College)

Collaboration Policy

This project can be done either individually or in pairs. If you complete this project with a partner, there are some additional guidelines:

• BOTH You and your partner must submit your own copy of the code and link to your copy of the code on your homepage.
• You must have at least 2 creature and 2 landscape functions.
• If you do any extra credit, the extra credit points will be split between you. So, if you do 6 points of extra credit, you will each earn 3 points (to make things fair to the rest of the class). To earn all possible EC points, you will have to complete 16 points worth of extra credit (8pts each).

Part 1: Create a drawCreature function (4 points)

Create a custom function called drawCreature (or 2 custom functions if you’re working in pairs) that makes a creature of your choosing. Feel free to use/modify/improve upon the function you already made in HW3. It should have at least 4 parameters:

1. An x parameter, specifying the x-position of the center of your creature (should be a number).
2. A y parameter, specifying the y-position of the center of your creature (should also be a number).
3. Asize parameter, specifying the size of the creature.
4. A primaryColor parameter, specifying the primary color of the creature. In the case of the bear, this is the face color.
5. A secondaryColor parameter, specifying the secondary color of the creature. In the case of the bear, this is the ear color.

You may also add any additional parameters, but they must be optional, not required. This means that you will need to give any optional parameters a default value. (hasSunglasses=true, hasSmile=true, tertiaryColor=’hotpink’). Feel free to use the random module to create creatures with ‘surprise’ features.

You are also welcome to create additional creature functions (if you want different kinds of creatures to be present in your terrarium / aquarium). That said, please ensure that your main creature function is called drawCreature. Any additional creature functions can be named anything that you want and work in any way you want. Up to 3 points will be given for creatures that go above and beyond.

Part 2: Create a drawLandscapeObject function (4 points)

You have already experimented with stars and bubbles in Homework 4. Here, you will make an object of your own choosing (e.g. a tree, a building, a rock, grass, coral, etc.). To do this, you will create a custom function called drawLandscapeObject (or 2 custom functions if you’re working in pairs) that draws a landscape feature of your choosing. It should have at least 3 parameters:

1. An x parameter, specifying the x-position of the center of your creature (should be a number).
2. A y parameter, specifying the y-position of the center of your creature (should also be a number).
3. A size parameter, specifying the size of the creature.

You may also add any additional keyword parameters of your choosing to make your landscape object even more customizable (e.g.: color=’red’, texture=’rough’).

You are also welcome to create several different landscape feature functions to make different landscape features. Note that while your main landscape function must be called drawLandscapeObject, any additional landscape feature functions can be named anything that you want. Up to 3 points will be given for fantastic landscape features.

Part 3. Initialize your interactive scene (4 points)

Within the draw() function, you will create your interactive scene. This involves (a) instantiating some background creatures (using your drawCreature() function), and (b) creating some landscape features (using your drawLandscapeObject() function).

a. Background creatures

Instantiate at least 3 different creatures in your landscape, located at different positions, and with varying sizes (and colors and features — optional). You may use a loop (and perhaps a random function) to position your background creatures, or you can intentionally place your background creatures in specific places — or some combination of the two.

b. Landscape features

Instantiate at least 3 instances of your landscape feature (in the same manner as you did with your background creatures).

Part 4. Animate your scene (15 points)

Animate the creatures in your landscape by picking five of the following effects to implement:

Part 5. (Optional) Extra Credit (Up to 8 points)

If you surpass the 15 points (i.e. 5 features), I will award up to 8 points extra credit for pursuing the following enhancements:

• Implementing an additional animation. Each additional animation that you add from this list above (beyond the 5 that are required) will earn 3 points extra credit.
• Making an additional creature function (3 pts).
• Making an additional landscape function (3 pts).
• Making a landscape / creature function that goes above and beyond – i.e., more than 8 shapes (3 pts).

Part 6. Create a short video (2 points)

Please create a short video (between 20 seconds and 1 minute…nothing too involved) of your interactive scene in action. To do this:

1. Take a screencast. For Mac users, QuickTime works, and is free. Zoom also enables you to record your screen.
2. Upload it to Google Drive.
3. Share your Google Drive video so that anyone with link can view.

Reference Materials

Code Samples

I will create some sample code for some demos of potential interactions you might create (forthcoming – stay tuned)!

p5.js Documentation

You will also want to refer to the p5.js documentation to learn more about what p5.js is capable of and how each of the built-in functions work.

Policy on sample code and collaboration

YOU MAY….

• Make use of any sample code that I have provided you at any point during the course
• Consult with and incorporate ideas from Internet sources, so long as you are typing the code for yourself (not copying) and understand how every line of it works.
• Help each other debug your code and discuss ideas together.

YOU MAY NOT…

• Share code — or look at your neighbor’s screen and transcribe their code. I have plagiarism detection software to flag code similarities (e.g. MOSS) — even when whitespace, variable names, and ordering have been changed.
• Blindly copy code from third-party sources and/or incorporate programming techniques that you don’t understand. You are welcome to find code online to get ideas. But you need to be able to understand how the code works in order to use it (feel free to come to office hours and we can discuss code you find online).
• Ask other people to write code for you.

What to Submit

Please Read Carefully: To submit Project 1, please paste the following links into the Moodle under the Project 1 submission section:

1. A link to your homepage on GitHub pages, which should link to your Project 1 interactive scene.
2. A link to your GitHub code repository (where your code files are stored).
3. A link to your demo video from Google Drive (double check to make sure it’s shared as “anyone can view”).
4. If you did any extra credit, please list what you did, so that I can make sure I give you the appropriate points.
   • You may earn up to 8pts extra credit.

Rubric