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 NEW v14
- Configuration Management: Loading and applying saved settings dynamically NEW v14
- Sequential State Machines: Credits activate one at a time, waiting for previous to finish NEW v14
✨ Current Features:
- ✨ Starfield Background: 100 stars creating depth and motion
- 🎬 Movie Title: "Learning CS with AI" flies toward viewer
- 📜 Scrolling Credits: Student names fly away into distance
- 🌈 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
- 🎭 Intro Sequence: Three cinematic phrases before main title
- ⏱️ Configurable Timing: Adjustable delays for perfect music synchronization
- 📝 Custom Branding: "TechNoviceTools & Copilot Present" intro
- 🎨 Cinematic Typography: Google Fonts (Bebas Neue, Oswald, Anton, Righteous)
- 💻 Technical Concepts: 15 JavaScript/p5.js concepts featured as credits
- 🟢 Retro Green Style: Monospace font with classic terminal green colors
- 📚 Educational Credits: Students + programming concepts they learned
- ⚙️ Visual Customizer: Live preview tool for designing text effects NEW v14
- 💾 Persistent Settings: Save custom designs to localStorage NEW v14
- 🔄 Auto-Load Config: Simulator reads saved settings on startup NEW v14
- 📊 Sequential Credits: One credit at a time, no stacking or overlap NEW v14
- 🎯 Smart Activation: Credits activate based on completion, not fixed time NEW v14
🆕 What's New in Version 14?
🎨 Text Customization Tool
A completely new interactive tool (customizeText3.html) that lets you design your own credit effects:
- Live Preview: See changes instantly on a sample "JavaScript" text
- 16 Configurable Parameters: Font, sizes, rotation, stroke, fill, blur, timing, and more
- Visual Controls: Sliders and toggles for easy experimentation
- Save/Load/Reset: Persist your designs or return to defaults
- Integrated Navigation: Jump between customizer and simulator seamlessly
💾 localStorage Integration
Your custom settings are automatically saved and loaded:
- Automatic Loading: Simulator reads localStorage on startup
- Graceful Fallback: Uses default values if no config exists
- Safe Parsing: Error handling prevents crashes from corrupted data
- Console Logging: See what config is being applied
🔧 Bug Fixes & Improvements
Version 14 includes critical fixes discovered through testing:
- Credits Stacking: Fixed deactivation logic that caused credits to pile up
- Blinking Credits: Added
hasPlayed flag to prevent reactivation
- Sequential Flow: Implemented proper state machine for one-at-a-time display
- Delay Timing: Credits now wait for previous to finish + delay period
- Stroke Opacity: Stroke fades with fill for cohesive animation
🎯 Technical Achievements
- checkNextCredit(): New function manages sequential activation
- activateCredit(): Centralized credit initialization
- waitingForDelay: State tracking for pause between credits
- Nullish Coalescing: Modern JavaScript (
??) for safe defaults
- Color Mapping: Converts customizer color names to HSB values
🎓 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 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 customizer tool, localStorage persistence, sequential credit system 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 effects? Click the ⚙️ Customize link to open the text 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
- 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
🎬 Ready to See It in Action?
Head to the simulator and press START, or customize your own effects!