Skip to content
Drum machine for creating beats with bytes and bitwise operations
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package.json

README.md

Bitwise Beat Machine

A drum machine that creates beats by using logical operations (AND, OR, XOR, etc.) to determine when different peices of the drum kit are played.
Click here to play.

Getting Started

Requires Node and npm to be installed

Clone the repository and then install dependencies with

npm install

This project uses create-react-app, so that the code can use create-react-app scripts.
Start a development server with

npm run start

Deployment

To create a build for deployment, run

npm run build

and find the files in /build.
The app is entirely front-end, as such it can be hosted as a static site.

About

A major goal of this project was to create a React app with as little state as possible in the JavaScript, and the rest in the URL. The source code only includes React components and a few utility functions. The only state that the React components keep are what sounds to play and weather or not the about, share, or help dialogues are open, all other states are in the URL. The UI is rendered as a function of the URL, and when the user clicks buttons to change the beat the URL changes while the UI rerenders.

This makes it so sharing beats is simple as the URL contains all the information about the beat state. People can send each other URLs that do not need to be stored in a database.

The URL encodes the entire app state with three different sections: the first houses the BPM, the second stores the binary numbers, and the third contains instruments and track operators. For example in the URL with

/80-10100101-10101101-kad-sxr

the BPM is 80, the two binary numbers are 1010010 and 10101101, and there are two tracks, the first with a k for the kickdrum sound and ad for the AND operator, and the second with s for the snare sound and xr for the XOR operator.

The app parses the URL data to determine what to show and what sounds to play.

You can’t perform that action at this time.