https://github.com/thatguysam/bpm
https://github.com/thatguysam/bpm
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/thatguysam/bpm
- Owner: ThatGuySam
- Created: 2025-02-06T17:25:01.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-06T17:51:26.000Z (over 1 year ago)
- Last Synced: 2026-03-01T17:56:57.553Z (4 months ago)
- Language: JavaScript
- Homepage: https://thatguysam.github.io/bpm/
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BPM Visualizer
[](https://github.com/thatguysam/bpm/actions)
[](https://app.netlify.com/sites//deploys)
A reactive visualizer that syncs color transitions to adjustable BPM using p5.js.
Perfect for music practice, metronome visualization, or ambient displays.
## Features
- Real-time BPM adjustment (30-240 BPM range)
- Left/Right arrow keyboard controls for halving/doubling BPM
- Responsive fullscreen canvas
- Smooth HSV color transitions on beat
- Dual deployment to GitHub Pages and Netlify
## Installation
```bash
ni # Installs dependencies using antfu/ni
```
## Usage
```bash
nr start # Starts live-reload dev server on port 8080
```
- Drag slider to adjust BPM
- ← → arrow keys to halve/double BPM
- Browser refresh to reset visualization
## Deployment
**GitHub Pages:**
```bash
nr deploy # Deploys to gh-pages branch
```
**Netlify:**
- Automatic deploys via linked GitHub repo
- Production build command: `npm run build`
## Development
```bash
nr build # Creates production build in /build
```
## Code Structure
Key implementation details from sketch.js:
```javascript:sketch.js
startLine: 18
endLine: 96
```
## Technologies
- [p5.js](https://p5js.org/) - Creative coding framework
- [gh-pages](https://github.com/tschaub/gh-pages) - GitHub Pages deployment
- [live-server](https://github.com/tapio/live-server) - Development server
- [Netlify](https://www.netlify.com/) - Static site hosting
## License
ISC © Sam Carlton