Skip to content

reiWebDeveloper/rei_creative_coding_lab

Repository files navigation

🧪 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:


"Build things, not thoughts."

Releases

No releases published

Packages

 
 
 

Contributors