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 NEW v15
- Data Persistence: Separate storage for content vs. effects settings NEW v15
✨ Current Features:
- ✨ Starfield Background: 100 stars creating depth and motion
- 🎬 Custom Movie Title: User-customizable title with multi-line support NEW v15
- 📜 Dynamic Credits: Customizable student names and technical concepts NEW v15
- 🌈 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 NEW v15
- ⏱️ Configurable Timing: Adjustable delays for perfect music synchronization
- 📝 Editable Branding: Customize all intro text NEW v15
- 🎨 Cinematic Typography: Google Fonts (Bebas Neue, Oswald, Anton, Righteous)
- 💻 Custom Technical Concepts: Edit the programming concepts shown NEW v15
- 🟢 Refined Green Style: Optimized retro green range (110-130 hue) NEW v15
- 📚 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 NEW v15
- 💾 Dual Storage System: Separate persistence for content and effects NEW v15
- 🔄 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
🆕 What's New in Version 15?
📝 Content Customization Tool
A brand-new content editor (customizeContent1.html) that gives you full control over what appears in your credits:
- Student Names Editor: Add, edit, or remove student names (one per line)
- Technical Concepts Editor: Customize the programming concepts shown in green
- Intro Phrases: Edit all three intro phrases ("Tech Novice Tools", "& Copilot", "Present")
- Movie Title: Change the main title (supports multi-line with \n)
- Live Count Display: See how many students and concepts you have
- Save/Load/Reset: Persist your content or return to educational defaults
🎨 Refined Visual Effects
Version 15 includes subtle but important visual improvements:
- Optimized Green Range: Technical credits now use hues 110-130 (more vibrant lime/grass/forest greens)
- Better Color Consistency: Pure green (120°) matches classic terminal screens
- Enhanced Readability: Narrower hue range prevents muddy yellow-greens and cyan-greens
💾 Dual Storage System
Smart separation of content and effects data:
- movieCreditsContent: Stores student names, concepts, intro phrases, and title
- movieCreditsConfig: Stores visual effects settings (fonts, sizes, blur, etc.)
- Independent Editing: Change content without losing effect settings (and vice versa)
- Unified Loading: Simulator loads both configurations automatically
🔧 Technical Enhancements
- Multi-line Support: Movie title can have line breaks (\n converted to actual newlines)
- String Normalization: Handles both \\n (storage) and \n (runtime) for cross-platform compatibility
- Array Integration: Content arrays directly populate credit generation loops
- Fallback Defaults: Educational defaults used when no custom content exists
🎯 User Experience Improvements
- Dual Navigation: Quick access to both Content and Effects customizers
- Clear Separation: "What to show" vs. "How to show it" workflow
- Status Messages: Visual feedback for save/load operations
- Help Text: Inline guidance for multi-line formatting
🎓 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 think like a software engineer
🚀 Project Evolution:
This simulator has evolved through multiple stages, each adding new features:
- Stage 1-3: Basic setup, starfield, and simple credits
- Stage 4-6: Color animation, tilt effects, and blur
- Stage 7: Stroke/fill customization and motion trails
- Stage 8: Dynamic starfield with acceleration and crisp rendering
- Stage 9: Interactive controls, audio integration, directional animation
- Stage 10: Clean UI with navigation bar and About page
- Stage 10a: Loading state with animated spinner and smooth transitions
- Stage 11: Multi-phrase intro sequence (debugging and iteration)
- Stage 11e: Complete cinematic intro with configurable timing delays
- Stage 12: Professional typography with Google Fonts (Bebas Neue, Oswald, etc.)
- Stage 13: Technical concepts as credits with retro green monospace styling
- Stage 14: Visual effects customizer, localStorage persistence, sequential credit system
- Stage 15: Content customization tool, dual storage, refined visuals CURRENT
💡 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!
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
🛠️ 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)
- 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)
🎬 Ready to See It in Action?
Head to the simulator and press START, or customize your own content and effects!