ejreyme / beact-client

:dragon_face:pure client Beact

🎉 New Animation Arrival!

Beact ·

🎸🎨 DJ / VJ all by yourself in seconds !

• demo - It's deployed on Heroku, play it now!
• video - Short video of using Beact for performance!

An audio/visual interactive art piece, and an instrument that everyone play with to become a DJ + VJ. It's based on the idea of patatap, and using two.js, tone.js as audio and visual library. It combines sequencer with on concept of patatap. I have added some my own animation and will do more to replace ones from patatap.

1. Quick Start

1. open the demo link.
2. press space to start/stop.
3. click any block to trigger drum machine note.
4. press any alphabet to trigger keyboard note.
5. up/down to change bpm.
6. left/right to change sound bank of drum machine.
7. press 1 ~ 8 for different presets.
8. shift+up/down to change animations of keyboard.
9. shift+left/right to change animations of drum machine.
10. press naruto icon to set naruto animation of keyboard.

2. Run on Local

It's okay to run Beact without server. It will git some error in console irrelevant, though.

First, clone the repo and install dependencies.
Then Rock'n Roll, baanngg.

git clone https://github.com/vibertthio/beact beact
cd beact
npm install
npm run build
npm run start

3. Basic Usage

1. click on the drum pad to make your own pattern.
2. press space to start/stop.
3. press up/down for bpm changing.
4. left/right to change sound samples.
5. press 1~8 to trigger preset patterns.
6. press a~z to trigger animation and audio just like patatap.

4. Credits and Inspirations

• crazi ass library tone.js and two.js
• original idea from amazing patatap
• music samples from amazing stepkit