Experimental journey from Stage 4 β 4a β 4b β Stage 5
movieCreditsSim5.html
Stage 5 represents the culmination of experimentation with title exit effects. This version combines:
Context: After seeing the title animation in Stage 4, user wanted to enhance the exit effect
Observation: "Student names blur and fade as they exit. As the title gets larger, can we make it likewise blur and fade as it leaves?"
Questions:
Strategy: Create experimental version (4a) to test before committing to changes
Added new configuration variables to control title blur/fade effect:
// *** TITLE FINAL SIZE ***
// EXPERIMENTAL: Increased to 400 (was 200) so title gets huge as it exits
const TITLE_FINAL_SIZE = 400;
// *** TITLE BLUR START SIZE ***
// EXPERIMENTAL: When title reaches this size, blur/fade effect begins
// This creates dramatic exit effect similar to credit names
const TITLE_BLUR_START_SIZE = 250;
Modified updateMovieTitle() to fade title as it approaches final size:
function updateMovieTitle(title) {
// ... existing growth code ...
// *** EXPERIMENTAL: Fade title as it approaches final size ***
if (title.size >= TITLE_BLUR_START_SIZE) {
// Calculate how far into the blur phase we are (0 to 1)
let blurProgress = (title.size - TITLE_BLUR_START_SIZE) /
(TITLE_FINAL_SIZE - TITLE_BLUR_START_SIZE);
// Fade from 100 to 0 as we approach final size
title.opacity = 100 * (1 - blurProgress);
}
}
Progress calculation example:
Key insight: Same progress normalization technique, but applied to opacity instead of tilt!
Created blur effect functions for title (similar to credit blur):
function displayMovieTitle(title) {
if (title.active && title.opacity > 0) {
// Apply blur effect when title gets large
let shouldBlur = title.size >= TITLE_BLUR_START_SIZE;
if (shouldBlur) {
drawBlurredTitle(title);
} else {
drawNormalTitle(title);
}
}
}
function drawBlurredTitle(title) {
push();
translate(title.x, title.y);
rotate(radians(title.tiltAngle));
textSize(title.size);
// Draw multiple blur layers with scaled spread
for (let i = 0; i < BLUR_STRENGTH; i++) {
let layerOpacity = title.opacity / BLUR_STRENGTH;
fill(title.hue, 80, 100, layerOpacity);
// Scale spread with title size (bigger = more spread)
let spreadMultiplier = title.size / 100;
let offsetX = randomGaussian(0, BLUR_SPREAD * spreadMultiplier);
let offsetY = randomGaussian(0, BLUR_SPREAD * spreadMultiplier);
text(title.text, offsetX, offsetY);
}
pop();
}
Problem: Fixed blur spread looks tiny on large text (400px), huge on small text (50px)
Solution: spreadMultiplier = title.size / 100
Result: Blur proportional to text size - looks consistent throughout animation!
"It looks better than I thought it might"
β Blur effect on expanding title works well!
β Larger final size (400px) creates dramatic exit
β Fade timing feels natural
New Idea: "As it starts to blur and jiggle, can we give it a boost to speed it up out of view?"
Rationale: When blur begins, title should feel like it's accelerating past the viewer
Goal: Add speed increase when blur phase starts
Safety: "Let's do that in a version 4b just in case things get wonky"
Added new growth rate for the blur phase:
// *** TITLE GROWTH RATE ***
// How quickly the title grows each frame (normal speed)
const TITLE_GROWTH_RATE = 1.5;
// *** TITLE ACCELERATED GROWTH RATE ***
// NEW: How quickly title grows when blur effect starts
// This "boost" makes title zoom out faster during blur/fade
const TITLE_ACCELERATED_GROWTH = 4.0;
Modified updateMovieTitle() to switch between growth rates:
function updateMovieTitle(title) {
// *** Choose growth rate based on whether we're in blur phase ***
let currentGrowthRate = TITLE_GROWTH_RATE;
if (title.size >= TITLE_BLUR_START_SIZE) {
// Switch to accelerated growth when blur starts
currentGrowthRate = TITLE_ACCELERATED_GROWTH;
}
// Grow the title using current rate
if (title.size < TITLE_FINAL_SIZE) {
title.size += currentGrowthRate;
} else {
title.active = false;
title.opacity = 0;
}
// ... fade and straightening logic ...
}
Animation Timeline:
Simultaneous effects at size 250:
Result: Creates illusion of sudden acceleration - like title is "launched" toward viewer!
What is acceleration?
In our animation:
Real-world examples:
Extension challenge:
Instead of instant speed change, could we gradually accelerate?
// Gradual acceleration example:
if (title.size >= TITLE_BLUR_START_SIZE) {
currentGrowthRate += 0.1; // Add 0.1 each frame
currentGrowthRate = min(currentGrowthRate, 4.0); // Cap at max
}
This would create smoother, more realistic acceleration!
"This is very good!"
β Acceleration boost creates dramatic exit effect
β Combined blur + fade + acceleration works together beautifully
β Timing feels cinematic and polished
Decision: "Let's make a copy as movieCreditsSim5.html"
Version 5 includes all successful experiments from 4a and 4b:
// Movie Title Configuration (from Stage 4a & 4b)
const MOVIE_TITLE = "Learning CS\nwith AI"; // Multi-line title
const TITLE_INITIAL_SIZE = 8; // Tiny start
const TITLE_FINAL_SIZE = 400; // Huge exit (from 4a)
const TITLE_GROWTH_RATE = 1.5; // Normal speed
const TITLE_ACCELERATED_GROWTH = 4.0; // Boost speed (from 4b)
const TITLE_DURATION_MS = 3000; // 3 second sequence
const TITLE_BLUR_START_SIZE = 250; // When effects begin (from 4a)
From Previous Stages:
New in Stage 5 (from experiments 4a & 4b):
Key Variables Added:
TITLE_FINAL_SIZE - Controls maximum title size before exitTITLE_BLUR_START_SIZE - Triggers blur/fade/acceleration effectsTITLE_ACCELERATED_GROWTH - Faster growth rate during exitKey Functions Modified:
updateMovieTitle() - Added dynamic speed switching and fade logicdisplayMovieTitle() - Added blur condition checkdrawBlurredTitle() - New function with scaled spread multiplierWhat students learned about development workflow:
Programming Concepts Practiced:
Mathematics Applied:
Design Principles:
Cinematic Quality:
The title sequence now rivals professional movie titles with its combination of:
Educational Value:
Students experienced authentic software development:
Technical Achievement:
Multiple coordinated animations triggered by single threshold:
if (title.size >= TITLE_BLUR_START_SIZE) {
// Blur: activate multi-layer rendering
// Fade: opacity decreases with progress
// Acceleration: growth rate increases
}
Files Created:
π Stage 5 represents the pinnacle of our title animation - combining physics, math, and design into a dramatic cinematic experience!
Possible Future Enhancements:
Student Challenges:
The power of configuration variables: Change one number, see dramatic effects!