Scrollytelling: Reaction Diffusion

An interactive scrollytelling experience exploring the fascinating world of reaction-diffusion patterns, the mathematical principle behind animal coat patterns like those of giraffes, cheetahs, and zebras.

This project was made for the course "Digital Storytelling" teached at HEIG-VD in Media Engineering

See it in action : https://funky-shrimp.github.io/scrollytelling-reaction_diffusion/

✨ Features

• Scroll-driven animations using GSAP and Observer plugin
• Interactive WebGL simulation powered by Cables.gl
• Real-time pattern generation with adjustable parameters
• Educational storytelling combining science and visual art

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/funky-shrimp/scrollytelling-reaction_diffusion.git
cd scrollytelling-reaction_diffusion

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to the local development URL (typically http://localhost:5173)

📦 Build

To create a production build:

npm run build

To preview the production build:

npm run preview

🛠️ Tech Stack

• Vite - Build tool and dev server
• GSAP - Animation library for scroll-triggered animations
• Cables.gl - WebGL-based visual programming for reaction-diffusion simulation
• Vanilla JavaScript - Core interactivity
• CSS3 - Styling and layout

📁 Project Structure

├── public/
│   ├── images/          # Animal images and assets
│   └── js/
│       └── patch.js     # Cables.gl patch export
├── src/
│   ├── css/
│   │   ├── normalize.css
│   │   └── style.css
│   ├── js/
│   │   ├── animation.js      # GSAP scroll animations
│   │   └── patch_manager.js  # Cables.gl integration
│   └── main.js
├── index.html
├── package.json
└── vite.config.js

🎮 How It Works

The project uses a combination of:

1. GSAP's Observer plugin to detect scroll events and trigger section animations
2. Timeline-based animations for smooth transitions between story sections
3. Cables.gl WebGL simulation for real-time reaction-diffusion pattern generation
4. Dynamic parameter adjustment allowing users to explore different pattern variations

👨‍💻 Author

Funky Shrimp 🦐

📄 License

This project is private and not licensed for public use.

🙏 Acknowledgments

• Alan Turing for the original reaction-diffusion theory
• Cables.gl for the visual programming platform
• GSAP for the powerful animation library