BSM3D Demos Effects Collection

Benoit (BSM3D) Saint-Moulin © 2025

A collection of classic Amiga demo scene effects recreated using pure HTML5, JavaScript, and CSS. These demos are created for learning purposes and to pay tribute to the golden age of demo making.

Overview

This repository contains recreations of iconic demo scene effects from the Amiga era, implemented using modern web technologies. Each effect is self-contained in a single HTML file, making it easy to understand and learn from.

Features

• Pure HTML5 Canvas rendering
• Vanilla JavaScript - no external libraries
• Minimal CSS for styling
• Responsive design
• Pixel-perfect rendering where appropriate
• Commented code for educational purposes

Technology Stack

• HTML5 Canvas for rendering
• Vanilla JavaScript for animations and calculations
• CSS for styling and pixel-perfect rendering
• No external dependencies

Learning Resources

These demos are designed to help you learn about:

• Canvas manipulation
• 3D mathematics and transformations
• Animation techniques
• Color manipulation
• Physics simulations
• Classic demo scene effects

About Demo Scene

The demo scene was (and still is) a computer art subculture that specializes in producing demos - non-interactive audio-visual presentations. The Amiga computer was one of the most popular platforms for demos in the late 1980s and early 1990s, known for its advanced graphics and sound capabilities for its time.

About BSM

BSM (me :) ) has been an active participant in the demo scene, contributing to various groups and productions on both PC and Amiga platforms. Below are some highlights of his involvement.

• BSM's on AmigaDB
• BSM's on Exotica

Groups and Productions

Chryseis

BSM has been a part of the Chryseis group, known for their contributions to the demo scene.

• Chryseis on Pouet

Therapy

BSM has also been involved with the Therapy group, which has a significant presence in the Amiga demo scene.

• Therapy on AmigaDB
• Therapy on Pouet

Malixa

BSM has also been involved with the PC group Malixa, who won a competition at Abort'97.

• Malixa on Demozoo

Prestige

BSM has been member of the Prestige group, further enriching his portfolio in the demo scene.

• Prestige on Exotica

More Information

For more information about BSM's work and background, you can visit his website:

• BSM's Website

Learning Purpose

These demos are specifically designed for educational purposes:

• Code is intentionally simplified for clarity and understanding
• Each effect is self-contained in a single HTML file
• Extensive comments explain key concepts
• Basic implementations that can be extended and improved

Available Effects

1. 3D Rotating Cubes (BSM3D-3d-cube.html)

   • Three nested wireframe cubes
   • Independent rotation on all axes
   • Different colors and sizes

2. Boing Ball (BSM3D-boing-ball.html)

   • Recreation of the iconic Amiga demo
   • Smooth bounce physics
   • Classic checker pattern
   • Dynamic shadow

3. Copper Bars (BSM3D-copper-bars.html)

   • Smooth color gradients
   • Sinusoidal movement
   • Rainbow color cycling
   • Shine effects

4. Dot Tunnel (BSM3D-dot-tunnel.html)

   • 3D perspective simulation
   • Smooth forward motion
   • Dynamic point sizing
   • Multiple layers

5. Sinus Scroller (BSM3D-sinus-scroller.html)

   • Smooth text animation
   • Wave motion
   • Color cycling
   • Shadow effects

6. Starfield (BSM3D-starfield.html)

   • Multi-layer parallax
   • Dynamic star count
   • Varied brightness
   • Responsive design

How to Use

1. Simply open any of the HTML files in a modern web browser
2. No additional libraries or setup required
3. View source code to understand the implementation
4. Modify parameters to experiment with the effects

Note: These demos are best viewed in a modern web browser with good HTML5 Canvas support.

Learning Path

1. Start with the Basics:

   • Each effect is commented to explain core concepts
   • Modify simple parameters to see their impact
   • Understand the mathematics behind each effect

2. Experiment and Improve:

   • Add new features to the effects
   • Combine multiple effects
   • Optimize the performance

Going Further

1. Explore the Original Hardware:

   • Install an Amiga emulator (UAE recommended) or FS-UAE
   • Learn 68000 Assembly language
   • Study Amiga hardware specifications
   • Study and Experiment with original demo coding
   • Buy a real Amiga :)

2. Modern Enhancements:

   • Add WebGL support
   • Implement additional effects
   • Compare hardware vs software rendering approaches

Development Notes

• Code is intentionally kept simple for educational purposes
• Modern JavaScript features are used for clarity
• Performance optimizations are documented but not always implemented
• Focus is on understanding concepts rather than maximum efficiency

Resources

1. Demo Scene History:

   • Pouet.net - Comprehensive demo scene archive
   • Scene.org - Demo scene file archive
   • AmigaRemix - Amiga music archive

2. Emulation Resources:

   • FS-UAE - Modern Amiga Emulator
   • WinUAE - Windows Amiga Emulator
   • Amiga Forever - Commercial Amiga package

3. Learning Materials:

   • Amiga Hardware Reference Manual
   • MDN Canvas Tutorial - Modern Canvas programming
   • HTML5 Graphics - W3Schools Canvas tutorial

4. Modern Development Resources:

   • CreateJS - Modern Canvas library
   • WebGL Fundamentals - 3D graphics programming
   • Canvas Performance - Optimization guide
   • JavaScript Animation - Animation techniques

License

Free to use for learning purposes. Please credit BSM3D if you use any part of these code in your own projects.

Contact

Feel free to reach out to BSM for collaborations or inquiries related to the demo scene.

Thank you for visiting!