Skip to content

Latest commit

 

History

History
36 lines (25 loc) · 1.38 KB

File metadata and controls

36 lines (25 loc) · 1.38 KB

🥁 Polyrhythms Visualizer

This project is a JavaScript-based polyrhythm visualizer and sound generator, built to explore fundamental and advanced JS concepts such as animation with Canvas, math for rhythmic timing, and audio generation using the Web Audio API.

🎯 Purpose

The goal of this project is both educational and creative — to learn deeper JavaScript techniques by building a fully interactive musical tool from scratch.

💡 Features

  • Canvas-based animation for visualizing polyrhythms in real time
  • 🎵 Sound generation using AudioContext and oscillators
  • 🧠 Custom logic and math to calculate timing intervals for different rhythm layers
  • 🎛️ Configurable number of beats for each track (e.g., 3:2, 5:4, etc.)
  • 🔄 Smooth looping and synchronized beat playback

🧪 Tech Stack

  • JavaScript
  • HTML/CSS
  • Canvas API
  • Web Audio API

🧠 What I Learned

  • Working with the <canvas> API for custom visuals and real-time drawing
  • Using the AudioContext interface for generating procedural sound
  • Building an animation loop using requestAnimationFrame
  • Applying modular arithmetic and time-based scheduling for polyrhythms
  • Structuring code for better reusability and logic separation

🚀 Getting Started

  1. Clone the repo:
    git clone https://github.com/muskanqed/Polyrhythms_JavaScript_Project