The Great Easing Race

Run MicroSim in Fullscreen

Copy this iframe to your website:

<iframe src="https://dmccreary.github.io/p5-textbook/sims/the-great-easing-race/main.html" width="100%" height="487px"></iframe>

Description

Race 4 easing functions side-by-side: Linear, EaseInQuad, EaseOutBounce, and EaseInOutCubic across synchronized tracks.

Learning Objectives

• Primary Goal: Students will understand mathematical interpolation curves (lerp, power curves, bounce) and non-linear animation timing.
• Bloom's Taxonomy Level: Understand

How to Use

Interact with the visual elements and adjust the control sliders and buttons located beneath the simulation canvas to explore how parameter changes affect the output in real time.

Lesson Plan

Prerequisites

• Understanding of basic coordinate systems and p5.js sketch execution.
• Familiarity with variables and interactive event handling.

Interactive Exploration

1. Observe the default initial state of the simulation.
2. Adjust the sliders systematically to observe the range of behaviors.
3. Compare the visual feedback against the theoretical concepts presented in the chapter.

Assessment Questions

• How does changing each individual parameter influence the resulting visual output?
• What underlying algorithm or mathematical model governs the state transitions shown in the simulation?

References

1. p5.js Reference Documentation - Official p5.js documentation and API guides.
2. Processing Foundation - Educational resources for creative coding.