Drawing on the Web

JavaScript

In this two-part assignment, you will begin to add more interactivity to your Drawing on the Web projects and also explore another animation strategy with JavaScript.

Part 1: Interaction

Begin with a web page that includes an original CSS transition or animation. You may work with a previous project of yours or develop a new one if you like. Incorporate JavaScript into the page in such a way that the transition or animation is applied without the user directly interacting with the element/s it affects (via click, hover, tap, etc.). You are encouraged to be thoughtful about the relationship between browser events and the changes they activate.

Your script should include at least two DOM queries, one function that you define, and one event listener that responds to a user action. Keep things organized by placing all your files in a new directory and linking to your CSS and JavaScript as external documents.

Finally, include a relative link somewhere on this page to the new page you will create for Part 2.

Part 2: Animation

For part two of this assignment, you will create a new animation using either JavaScript’s requestAnimationFrame() method or the Web Animations API. Place this animation on a new page—the one you linked to from Part 1. The animation and its content should be of your own design and also related, either thematically or aesthetically, to the web page from Part 1.

To use the requestAnimationFrame() method, call your drawing function recursively and incrementally change some aspect of CSS over time. Alternatively, if you use the Web Animations API, you will need the animate() method to combine keyframe objects with a timing object.

While this animation does not need to respond to a user’s actions, you are free to add interactivity to this page as well. Your script should include at least one DOM query and one requestAnimationFrame() or animate() method. Files should be placed in the same directory you created in Part 1; CSS and JavaScript should be linked to externally.

Submitting Your Assignment

Update the project link from your portfolio page and submit the following via NYU Brightspace.

• The URL to your assignment in the general form of: i6.cims.nyu.edu/~netid/drawing/
• A compressed archive of your project files (including the HTML, CSS, JavaScript, and any media resources)

Please note that you are required to submit files along with URLs in order to receive credit for your work.

Grading

This assignment is worth 10 points.

• Part 1: A CSS transition or animation applied indirectly with JavaScript (2 points)
• Part 1: At least two JavaScript DOM queries (1 point)
• Part 1: At least one JavaScript function, defined by the student (1 point)
• Part 1: At least one JavaScript event listener to respond to a user action (1 point)
• Part 1 should link to Part 2 and the animation for Part 2 should be related, either thematically or aesthetically, to the web page from Part 1 (1 point)
• Part 2: A new web page with a custom animation using JavaScript’s requestAnimationFrame() method or Web Animation API (2 points)
• Part 2: For the requestAnimationFrame() method, the drawing function should be called recursively to change some aspect of CSS over time; for the Web Animations API, the animate() method should be used with keyframe objects and a timing object. (1 point)
• Well-formed HTML, CSS, and JavaScript in separate documents (1 point)