Adding cinematic opening title sequence with zoom and straighten effects
movieCreditsSim4.html
Objective: Create Stage 4 with flying movie title that zooms toward viewer before student credits appear
Requirements:
First, I added configuration variables for the movie title animation:
const MOVIE_TITLE = "Learning CS with AI";
const TITLE_INITIAL_SIZE = 8; // Starting font size (very small)
const TITLE_FINAL_SIZE = 200; // Ending font size (very large)
const TITLE_GROWTH_RATE = 2.5; // How fast title grows each frame
const TITLE_DURATION_MS = 3000; // How long title animation lasts (3 seconds)
These values create a cinematic "zoom from distance" effect!
Created a global variable and initialization function for the movie title:
// Global variable to track movie title
let movieTitle = null;
/**
* Initializes the movie title with starting properties
*/
function initializeMovieTitle() {
movieTitle = {
text: MOVIE_TITLE,
size: TITLE_INITIAL_SIZE,
opacity: 100,
tiltAngle: random(-MAX_TILT, MAX_TILT), // Random tilt at start
initialTiltAngle: null, // Will store starting tilt
active: true // Controls visibility
};
// Store the initial tilt for straightening calculation
movieTitle.initialTiltAngle = movieTitle.tiltAngle;
}
Storing the initial value lets us create smooth transitions!
The heart of the animation - growing and straightening the title:
/**
* Updates the movie title's size and tilt angle
*/
function updateMovieTitle(title) {
// Grow the title size linearly
if (title.size < TITLE_FINAL_SIZE) {
title.size += TITLE_GROWTH_RATE;
} else {
// When title reaches final size, deactivate it
title.active = false;
title.opacity = 0;
}
// Calculate progress from 0 to 1
let progress = title.size / TITLE_FINAL_SIZE;
// Straighten the tilt proportionally to progress
title.tiltAngle = title.initialTiltAngle * (1 - progress);
}
What is progress?
How does straightening work?
Why mix linear and non-linear?
This is the same math used in movie CGI and video games!
Rendering the title with transformations:
/**
* Displays the movie title with current transformations
*/
function displayMovieTitle(title) {
push(); // Save current drawing state
// Move to center of canvas
translate(width / 2, height / 2);
// Apply rotation for tilt effect
rotate(radians(title.tiltAngle));
// Set text properties
textAlign(CENTER, CENTER);
textSize(title.size);
fill(255, 215, 0, title.opacity); // Gold color
// Draw the title
text(title.text, 0, 0);
pop(); // Restore drawing state
}
The order of transformations matters!
If we rotated BEFORE translating, the title would spin around the top-left corner!
push() and pop() protect these transformations from affecting other drawing.
Modified the draw() function and credit initialization to sequence the animations:
function draw() {
// ... background and stars code ...
// Check if movie title should be shown
if (movieTitle && movieTitle.active) {
updateMovieTitle(movieTitle);
displayMovieTitle(movieTitle);
}
// Update and display credits (as before)
for (let i = 0; i < credits.length; i++) {
// ... existing credit code ...
}
}
function initializeCredits() {
for (let i = 0; i < studentNames.length; i++) {
credits.push({
name: studentNames[i],
x: width / 2,
y: height / 2,
opacity: 100,
fontSize: INITIAL_FONT_SIZE,
tiltAngle: random(-MAX_TILT, MAX_TILT),
// Delay credits until AFTER title finishes
startTime: TITLE_DURATION_MS + (i * CREDIT_DELAY_MS)
});
}
}
Timeline breakdown:
Why this matters:
This is exactly how movie production works - timing is everything!
Updated interactive functions to reset the title along with credits:
function mousePressed() {
// Reset movie title
initializeMovieTitle();
// Reset all credits to start over
credits = [];
initializeCredits();
// Reset the animation start time
animationStartTime = millis();
console.log("🔄 Animation reset!");
}
function keyPressed() {
// Reset movie title
initializeMovieTitle();
// Reset all credits
credits = [];
initializeCredits();
// Reset the animation start time
animationStartTime = millis();
console.log("🔄 Animation restarted with key press!");
}
When resetting an animation, you need to reinitialize ALL moving parts:
Miss any step and the animation won't restart cleanly!
1. Progress Variables (Normalization):
2. Complementary Transformations:
3. Linear vs Non-Linear Motion:
4. Animation Sequencing:
5. Object Lifecycle States:
Experiment Suggestions:
Real-World Applications:
🎬 Students now understand how professional animators create dramatic zooming title effects!
Key Files:
New Constants Added:
New Functions Added:
Modified Functions:
Animation Flow:
Progressive Learning Path:
Each stage builds on previous concepts while introducing new programming patterns!