Documenting the dramatic blur/explosion effect that simulates the iconic Superman credits finale.
Let's create version 3 of both the movieCreditsSim and chatlog. In this stage, let's introduce a blur effect: In the Superman credits, right before the credit name fades, it blurs dramatically, making it look like it's evaporating/exploding. Let's use a variable for the blurring strength so as not to use magic numbers. This effect happens in the last 10 percent or so of the animation time. Let's use a variable for that as well so we can make adjustments.
movieCreditsSim3.html - Enhanced with blur/explosion effectchatLog3.html - This chat log documenting Stage 3 changesAdded a dramatic blur effect that kicks in during the final moments of each credit's fade, simulating the iconic Superman credits where text appears to explode or evaporate into space.
Controls when the blur effect starts (based on opacity level):
// *** BLUR TRIGGER THRESHOLD ***
// When opacity drops below this value, the blur effect starts
// Value is percentage (0-100). Lower values = blur starts later in animation
// Typical range: 10-30 (blur in last 10-30% of fade)
const BLUR_TRIGGER_THRESHOLD = 20;if (credit.opacity < BLUR_TRIGGER_THRESHOLD)Controls how many layers create the blur effect:
// *** BLUR STRENGTH ***
// How many blur layers to draw (more = stronger blur but slower)
// Each layer draws the text with slight offset to create blur effect
// Typical range: 3-10 layers
// Higher values create more dramatic explosion/evaporation effect
const BLUR_STRENGTH = 6;Controls how far the blur layers spread out:
// *** BLUR SPREAD ***
// How far apart the blur layers spread (in pixels)
// Larger values = more dramatic explosion effect
// Smaller values = subtle blur effect
// Typical range: 2-10 pixels
const BLUR_SPREAD = 4;In displayCredit() function, check if blur should be applied:
// Check if we should apply blur effect
// When opacity drops below threshold, text starts to "explode/evaporate"
let shouldBlur = credit.opacity < BLUR_TRIGGER_THRESHOLD;
if (shouldBlur) {
drawBlurredCredit(credit); // Apply blur effect
} else {
drawNormalCredit(credit); // Draw normally
}Separated normal text drawing into its own function:
function drawNormalCredit(credit) {
push();
translate(credit.x, credit.y);
rotate(radians(credit.tiltAngle));
fill(credit.hue, 80, 100, credit.opacity);
textSize(credit.size);
text(credit.name, 0, 0);
pop();
}New function that creates the explosion/evaporation effect:
function drawBlurredCredit(credit) {
push();
translate(credit.x, credit.y);
rotate(radians(credit.tiltAngle));
textSize(credit.size);
// *** DRAW MULTIPLE BLUR LAYERS ***
for (let i = 0; i < BLUR_STRENGTH; i++) {
// Divide opacity by BLUR_STRENGTH
// So all layers combined ≈ original opacity
let layerOpacity = credit.opacity / BLUR_STRENGTH;
fill(credit.hue, 80, 100, layerOpacity);
// *** RANDOM OFFSET FOR THIS LAYER ***
// randomGaussian creates bell curve distribution
// Most offsets near 0, some farther out
let offsetX = randomGaussian(0, BLUR_SPREAD);
let offsetY = randomGaussian(0, BLUR_SPREAD);
// Draw this layer at offset position
text(credit.name, offsetX, offsetY);
}
pop();
}
randomGaussian(mean, standardDeviation) is different from random():
When a credit's opacity drops below the threshold:
Split displayCredit() into three functions for clarity:
displayCredit() - Decision logic (blur or not?)drawNormalCredit() - Normal renderingdrawBlurredCredit() - Blur effect renderingWhy? Each function has one clear job. Easier to understand, test, and modify.
fill(credit.hue + i*10, 80, 100, layerOpacity)rotate(radians(i * 5)) inside the looplet pulse = BLUR_SPREAD + sin(frameCount * 0.1) * 2The original 1978 Superman credits used optical effects to create the iconic exploding/evaporating text. Our code recreates this digitally using layered drawing and random offsets. While the technique is different, the visual result captures the same dramatic feel - text that doesn't just fade, but spectacularly disintegrates into the cosmos!
Through experimentation, the following configuration was found to produce the best blur effect that authentically recreates the Superman credits experience:
const INITIAL_FONT_SIZE = 120; // Bold, dramatic appearance
const CREDIT_DELAY_MS = 5000; // Allows full display of each credit
const MAX_TILT = 20; // Noticeable but not excessive tilt
const TILT_DECAY = 0.98; // Gradual, smooth straightening
const BLUR_TRIGGER_THRESHOLD = 60; // Blur starts early for sustained effect
const BLUR_STRENGTH = 10; // Intense, visually striking explosion
const BLUR_SPREAD = 8; // Wide scatter for dramatic particle effectKey Findings:
These values work together to create a cohesive, cinematic effect. Students can use these as a baseline and experiment from here to find their own preferred aesthetic!
const NUM_STARS = 100; // Background star count
const INITIAL_FONT_SIZE = 64; // Starting text size
const CREDIT_DELAY_MS = 3000; // Delay between credits
const MAX_TILT = 15; // Maximum tilt angle
const TILT_DECAY = 0.95; // Tilt straightening speed
const BLUR_TRIGGER_THRESHOLD = 20; // When blur starts (opacity %)
const BLUR_STRENGTH = 6; // Number of blur layers
const BLUR_SPREAD = 4; // Blur scatter distanceAchievement Unlocked: You've created a professional-quality animation with multiple configurable visual effects! This demonstrates core concepts used in game development, motion graphics, and visual effects.