Advanced visual properties, shadows, alpha, geometric transformations, rotation, translation, masks (clipping)

sine, cosine, mathematical functions, counters = angles

requestAnimationFrame / requestAnimationFrame #2

• ARRAYS

• 7 Animated GIFs That Will Make You Instantly Understand Trigonometry

• The hidden beauty of Mathematics

• Chromadepth chromatek.com/what-is-chromadepth/design-guide-2/ | google images

• CT 2.1.1 -> 2.2.

• rotating images

DOM

Events

Event handling

Animating sprites ex using css

Objects in JS

**4 – **ETERNAL ANIMATION

Design a character with at least 10 different mobile components and animate each component individually using mathematical functions, counters, angles and repeat loops. Animate the character in a setting that contextualizes the motion

Kallio / Atallah / Scott /

Whitesel / Magoulas / Nguyen / Sprague / Hughes / Bono

Phipps / Whitesel / Fontano / Belcher / Curtis

analyze them and explore their advanced geometric properties; reproduce and modify them in two separate canvas documents, using mathematical operations, sine/cosine, repeat loops, etc. The biggest challenge: animate them interactively.

**DO NOT USE ILLUSTRATOR: IT IS NOT YOUR FRIEND in this project. **

Study the shapes individually, think about HOW they were made and then recreate them mathematically, even though it would mean oversimplifying them. Use different canvases, and repeat loops to create them. The point of these two assignments is to OPTIMIZE the illustration and animation using MATH. If I see an illustrator made sequence of objects that are proportionally placed and that are diminishing their sizes in a relative manner, I will take points off! Now you know why this assignment used to be called the “Math Nightmare”.