rei_creative_coding_lab

🧪 100 JavaScript Experiments

A self-driven journey to become a systems developer — one experiment at a time. Built with Vanilla JavaScript | Started: 2026 | Goal: 100 projects in 12 months

---

👨‍💻 About This Repo

This is my personal coding challenge: 100 JavaScript experiments, built consistently over 12 months.

Each experiment solves a real problem or explores a real concept — no tutorials, no copy-paste. Just me, a code editor, and a problem to solve.

Why? To go from inconsistent coder to a confident systems developer by 25.

---

---

📊 Progress

9 / 100 experiments completed —

🗂️ Experiments

Phase 1 — JS Fundamentals (1–20)

DOM manipulation, events, basic logic

• 01 — Random Color Generator
• 02 — Click Counter
• 03 — Random Number Generator
• 04 — Find Number Game
• 05 — Dice Rolling Simulator
• 06 — Random Password Generator
• 07 — Simple Calculator
• 08 — Tip Calculator
• 09 — Countdown Timer
• 10 — Stopwatch
• 11 — Reaction Speed Test
• 12 — Typing Speed Test
• 13 — Memory Number Game
• 14 — To-Do List
• 15 — Note Taking App
• 16 — Keyboard Key Visualizer
• 17 — Drag & Drop Box
• 18 — Random Quote Generator
• 19 — Theme Switcher (Dark/Light)
• 20 — Interactive Grid Painter

---

Phase 2 — Animations & Interactivity (21–40)

Canvas, CSS animations, mouse/touch events

• 21 — Animated Progress Bar
• 22 — Loading Spinner Generator
• 23 — Floating Bubble Animation
• 24 — Mouse Trail Effect
• 25 — Parallax Scroll Scene
• 26 — Magnetic Button Interaction
• 27 — Animated Card Hover
• 28 — Particle Explosion
• 29 — Rain Simulation
• 30 — Snow Simulation
• 31 — Draw Tool (Paint App)
• 32 — Bouncing Ball Simulation
• 33 — Multiple Ball System
• 34 — Ball Collision Engine
• 35 — Fireworks Simulation
• 36 — Gravity Simulation
• 37 — Orbiting Planet System
• 38 — Wave Simulation
• 39 — Particle Gravity Field
• 40 — Fluid Motion Experiment

---

Phase 3 — Games (41–55)

Game loops, collision detection, state management

• 41 — Snake Game
• 42 — Pong Game
• 43 — Breakout Game
• 44 — Flappy Bird Clone
• 45 — Brick Destroyer
• 46 — Space Shooter
• 47 — Asteroids Clone
• 48 — Platform Jumper
• 49 — Maze Escape Game
• 50 — Tower Defense Mini
• 51 — Reaction Dodge Game
• 52 — Infinite Runner
• 53 — Color Matching Game
• 54 — Tile Puzzle Game
• 55 — Memory Card Game

---

Phase 4 — Algorithms & Systems (56–70)

Sorting, pathfinding, simulation logic

• 56 — Sorting Algorithm Visualizer
• 57 — Bubble Sort Animation
• 58 — Quick Sort Visualizer
• 59 — Pathfinding Visualizer (A*)
• 60 — Maze Generator
• 61 — Conway’s Game of Life
• 62 — Boids / Flocking Simulation
• 63 — Cellular Automata
• 64 — Fractal Tree Generator
• 65 — Mandelbrot Explorer
• 66 — Procedural Cave Generator
• 67 — Terrain Generator
• 68 — Noise Field Visualizer
• 69 — Graph Traversal Visualizer
• 70 — Recursive Art Generator

---

Phase 5 — Advanced Physics & Simulations (71–85)

Complex systems, audio, advanced canvas

• 71 — Interactive Particle Galaxy
• 72 — Music Visualizer
• 73 — Audio Reactive Particles
• 74 — Interactive Liquid Simulation
• 75 — Sand Physics Simulation
• 76 — Cloth Simulation
• 77 — Soft Body Physics
• 78 — Flocking Birds Simulation
• 79 — Crowd Simulation
• 80 — Traffic Flow Simulation
• 81 — Ecosystem Simulation
• 82 — Fire Simulation
• 83 — Smoke Simulation
• 84 — Water Ripple Engine
• 85 — Interactive Light Simulation

---

Phase 6 — Portfolio Projects (86–100)

3D, multiplayer, engines — the showstoppers

• 86 — 3D Rotating Cube
• 87 — 3D Solar System
• 88 — 3D Terrain Generator
• 89 — 3D Particle Galaxy
• 90 — 3D Maze Explorer
• 91 — Physics Sandbox
• 92 — Procedural Planet Generator
• 93 — Multiplayer Web Game
• 94 — Interactive Story World
• 95 — Game Level Editor
• 96 — Procedural City Generator
• 97 — Strategy Game Prototype
• 98 — Mini Game Engine
• 99 — Interactive Portfolio World
• 100 — Creative Coding Showcase

---

📁 Folder Structure

rei_creative_coding_lab/
├── README.md               
├── 01-random-color-generator/
│   ├── index.html
│   ├── style.css
│   ├── script.js
│   └── README.md
├── 02-click-counter/
│   └── ...
└── ...

---

🛠️ Tech Stack

• Language: Vanilla JavaScript (no frameworks)
• Styling: HTML & CSS
• 3D (Phase 6): Three.js
• Tools: VS Code, GitHub

---

📬 Connect

If you’re on a similar journey or just want to say hi:

• GitHub: @reiWebDeveloper

---

“Build things, not thoughts.”