CSCI 185: Fall 2022

Introduction to Programming for the Web

CSCI 185: Fall 2022

Fish by @akeatk

Assignments > Tutorial 10: Design an Interaction / Animation for your Creature

Due on Fri, 10/21 @ 11:59PM. 4 Points.

Tutorial Starter Files

In preparation for your Project 1 submission, this week’s tutorial will be dedicated to creating interactions and animations.

Your Tasks

For this assignment, you are welcome to work in pairs. However, if you work together, you will both have to submit a link to your copy of the code (linked from your homepage).

  1. Browse the interaction demos (also see the demos folder in the Tutorial 10 starter files) to get a sense of some available animations and interactions that you might incorporate into your project.
  2. Copy the creature function you made in HW3 into tutorial10/your-task/sketch.js file (and delete the one that’s in there now). If you’re working in pairs, you will incorporate 2 creature functions (one for each person). You’ll have to give the functions different names (e.g., drawCreatureList and drawCreatureJames).

  3. Select one of the interactions from the demo file.
  4. Use your imagination and think about how you might incorporate apply one of these interactions to your creature. Then, make it happen. Some ideas:
    • Add a click event that allows you to create new creatures wherever you click.
      • And see if you can animate the creatures that are added to your scene.
    • Have your creature shoot pellets out of its mouth.
    • Animate your creature so that it sways back and forth.
    • Make your creature periodically change colors.
    • Integrate images into your scene to complement your creature.
    • Try to detect whether two objects collide. If they do, make something interesting happen.

What to turn in (same deal as always)

To submit the creature interaction / scene that you made in Tutorial 10, please paste the following links into the Moodle under the Tutorial 9 submission section:

  1. A link to your homepage on GitHub pages, which should link to the interaction you made in Tutorial 10 (tutorials/tutorial10/your-task/index.html).
    • Note that your homepage should also link to previous tutorials and homework you have done.
  2. A link to your GitHub code repository (where your code files are stored).