Welcome to Computer Science!
This project simulates the famous Superman (1978) movie credits effect using p5.js, a creative coding library that makes programming visual and interactive.
🎯 What You'll Learn:
- Variables: Storing and changing information (like star positions, credit sizes)
- Functions: Organizing code into reusable blocks (updateCredit, displayStar)
- Loops: Repeating actions efficiently (drawing 100 stars, animating credits)
- Animation: Making things move on screen frame-by-frame
- Arrays: Managing lists of data (student names, starfield)
- Objects: Grouping related data together (each credit has name, size, color, position)
- Conditionals: Making decisions in code (if credit is active, draw it)
- Color Theory: Using HSB color mode for vibrant animations
- Graphics Programming: Drawing shapes, text, and effects on canvas
- Timing & Events: Controlling when things happen (delays, triggers)
- Vector Math: Calculating motion and direction (stars flying from center)
- Visual Effects: Motion blur, trails, and fades for cinematic feel
- Configuration-Driven Design: Making code flexible and tunable with constants
- User Interaction: Buttons, controls, and state management
- Audio Integration: Playing and controlling sound with p5.sound library
- Loading States: Providing feedback during resource initialization
- Sequential Animation: Timing multiple events in sequence with precise delays
- State Activation Logic: Managing when objects become active based on elapsed time
- Debugging Methodology: Isolating components to identify and fix timing issues
- Typography & Fonts: Web fonts, font families, and visual hierarchy
- Color Families: HSB color ranges for themed sections (green for tech)
- Dual Styling Systems: Different fonts and colors for different content types
- localStorage API: Persisting user preferences across sessions
- Configuration Management: Loading and applying saved settings dynamically
- Sequential State Machines: Credits activate one at a time, waiting for previous to finish
- Content Management: Dynamic text replacement and multi-line formatting
- Data Persistence: Separate storage for content vs. effects settings
- End Sequence Detection: Monitoring animation completion and triggering graceful exits NEW v16d
- Audio Fade Effects: Linear volume reduction for professional audio transitions NEW v16d
- State Reset Logic: Properly restoring system state for replay functionality NEW v16d
✨ Current Features:
- ✨ Starfield Background: 100 stars creating depth and motion
- 🎬 Custom Movie Title: User-customizable title with multi-line support
- 📜 Dynamic Credits: Customizable student names and technical concepts
- 🌈 Color Animation: Each name has a unique random color
- ↗️ Tilt Effect: Names start tilted and straighten out
- 🔍 Shrink Effect: Credits get smaller as they recede
- ↓ Downward Drift: Credits move down and away from viewer
- 💫 Blur Effect: Names blur and evaporate like the original film
- ⏱️ Timing Control: Configurable delays and pauses between credits
- 🖊️ Stroke & Fill: Customizable text appearance (outline/fill)
- 👻 Motion Trails: Superman-style text ghosting effect
- 🧹 Clean Transitions: Background refresh between credits
- 🚀 Dynamic Starfield: Stars flying toward edges with acceleration
- ⭐ Crisp Stars: No ghosting, clean rendering
- 🎮 Interactive Controls: Start/Pause and Mute buttons
- 🎵 Superman Theme: Iconic music plays during animation
- 🌐 Navigation: Clean UI with About page (you are here!)
- ⏳ Loading State: Professional loading indicator with smooth transitions
- 🎭 Custom Intro Sequence: Personalized three-phrase intro
- ⏱️ Configurable Timing: Adjustable delays for perfect music synchronization
- 📝 Editable Branding: Customize all intro text
- 🎨 Cinematic Typography: Google Fonts (Bebas Neue, Oswald, Anton, Righteous)
- 💻 Custom Technical Concepts: Edit the programming concepts shown
- 🟢 Refined Green Style: Optimized retro green range (110-130 hue)
- 📚 Educational Credits: Students + programming concepts they learned
- ⚙️ Effects Customizer: Live preview tool for designing text effects
- 📝 Content Editor: Dedicated tool for editing credits and intro text
- 💾 Dual Storage System: Separate persistence for content and effects
- 🔄 Auto-Load Config: Simulator reads both saved configs on startup
- 📊 Sequential Credits: One credit at a time, no stacking or overlap
- 🎯 Smart Activation: Credits activate based on completion, not fixed time
- 🎬 Auto-End Sequence: Graceful conclusion when all credits finish NEW v16d
- 🔊 Music Fade Out: Smooth 2-second fade after final credit NEW v16d
- 🔁 Ready for Replay: Music volume restored when START pressed again NEW v16d
🆕 What's New in Version 16d?
🎬 Automatic End Sequence
Version 16d adds a professional auto-end feature that creates a polished conclusion to your credits animation:
- Completion Detection: System monitors when all credits have finished animating
- Configurable Delay: DELAY_TILL_END (2 seconds) gives viewers time to read the final credit
- Smooth Music Fade: MUSIC_FADE_TIME (2 seconds) creates professional audio exit
- Linear Fade Algorithm: Volume gradually reduces from current level to zero
- Automatic Reset: System returns to START state, ready for replay
🔊 Music Volume Management
Proper audio state restoration ensures the simulator is always ready for another run:
- Volume Restoration: Music volume returns to AUDIO_VOLUME (0.7) after fade
- Dual Reset Paths: Volume restored in both auto-end and manual reset (R key)
- Mute State Respect: Volume only restored if not muted (!isMuted check)
- Ready for Replay: START button immediately plays music at full volume
🔧 Technical Implementation
Version 16d adds minimal code to v15 baseline for maximum stability:
- End Sequence Variables: allCreditsFinished, endSequenceStartTime, isFadingOut, fadeStartVolume, fadeStartTime
- checkEndSequence(): Monitors currentCreditIndex >= credits.length and all credits inactive
- startMusicFadeOut(): Captures current volume and start time for fade calculation
- updateMusicFade(): Calculates linear volume: newVolume = fadeStartVolume * (1 - fadeProgress)
- returnToInitialState(): Resets all state, reinitializes objects, restores music volume, changes button to "START"
🎯 User Experience Improvements
- No Manual Intervention: Animation completes automatically without user action
- Professional Polish: Smooth fade creates cinematic conclusion rather than abrupt stop
- Instant Replay: START button immediately ready after auto-end completes
- Consistent Behavior: Both auto-end and manual reset (R key) restore full system state
⚙️ Configurable Timing
Two new constants allow easy adjustment of end sequence timing:
- DELAY_TILL_END: Wait time (2000ms) after last credit before starting fade
- MUSIC_FADE_TIME: Duration (2000ms) of music fade-out effect
- Easy Tuning: Adjust these values to match your desired pacing
📋 Version History Highlights:
- v15: Content customization tool, dual storage system, refined green styling
- v14: Visual effects customizer, localStorage persistence, sequential credits
- v13: Technical concepts as credits with retro green monospace styling
- v12: Professional typography with Google Fonts
- v11e: Complete cinematic intro with configurable timing delays
- v10a: Loading state with animated spinner
- v9: Interactive controls, audio integration
- v8: Dynamic starfield with acceleration
- v7: Motion trails and text styling
- v1-6: Foundation, starfield, credits, color, tilt, blur
- v16d: Auto-end sequence with music fade and volume restoration CURRENT
🎓 Educational Goals:
This project demonstrates how programming can be creative, visual, and fun. By building this step-by-step, students learn:
- How to break complex problems into smaller pieces
- How to use configuration constants to make code flexible
- How animations work (drawing frames over time)
- How to manage state (what's happening right now?)
- How to create professional user interfaces
- How to integrate external libraries (p5.sound for audio)
- How to debug and iterate on designs
- How to provide user feedback during loading
- How to persist data across browser sessions (localStorage)
- How to build tools that generate content for other tools
- How to separate content from presentation (MVC pattern)
- How to implement graceful completion sequences (auto-end)
- How to manage audio state across playback cycles
- How to think like a software engineer
💡 Try It Yourself:
Ready to experience the animation? Click the Simulator link in the navigation bar above. You'll see a loading screen while everything initializes, then the START button will appear!
Watch the auto-end sequence:
- Let the animation run all the way through to the final credit
- Notice the 2-second pause after the last credit finishes
- Listen as the music smoothly fades over 2 seconds
- See the button change back to "START" automatically
- Press START again and hear the music at full volume - ready to replay!
Want to customize the content? Click the 📝 Content link to open the content editor:
- Edit student names (one per line)
- Edit technical concepts (one per line)
- Customize the three intro phrases
- Change the main movie title (use \n for line breaks)
- Click Save Content to store your changes
- Return to the simulator to see your personalized credits!
Want to customize the effects? Click the ⚙️ Effects link to open the effects designer:
- Adjust sliders to change font, sizes, rotation, blur, and more
- Watch the preview update in real-time
- Click Save Settings to store your design
- Return to the simulator to see your custom effects in action!
You can also:
- Click PAUSE to stop the animation and music
- Click the 🔊 button to mute/unmute audio
- Click on the canvas to reset and start over
- Press the R key to reset the animation (also restores music volume)
🛠️ Technical Details:
Built with:
- HTML5 and CSS3 for structure and styling
- Bootstrap 5 for responsive design and navigation
- p5.js library for creative coding and animation
- p5.sound library for audio playback control
- Google Fonts API for cinematic typography
- localStorage API for persistent configuration and content
- Modern JavaScript (ES6+) with nullish coalescing and optional chaining
Key Programming Concepts:
- Object-oriented design (credit objects, title objects)
- Event-driven programming (mouse clicks, key presses, button clicks)
- State machines (active/inactive, waiting/animating, paused/playing, ending/fading)
- Frame-based animation (60 fps draw loop)
- HSB color space for dynamic color generation
- Separation of concerns (configuration, logic, rendering)
- JSON serialization/deserialization for data persistence
- Sequential activation with completion-based triggering
- MVC pattern (content separated from presentation logic)
- String manipulation and formatting (newline conversion)
- Linear interpolation for smooth transitions (volume fade)
- State restoration for reusable components (music reset)
🎬 Ready to See It in Action?
Head to the simulator and press START, or customize your own content and effects!