Skip to content

eypacha/touchbit

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Overview

Touchbit is a 'mobile-friendly' interface for live coding bytebeat music using postfix expressions, built on the html5bytebeat library by Greggman. This library provides a ByteBeatNode which is a WebAudio AudioNode.

📜 Table of Contents

📋 Usage

You provide a function whose only input is time t and from that write some code to generate a sound. The output of your function is expected to be 0 to 255.

If the output of your function exceeds 255, it will automatically undergo a modulo 255 operation anyway. Example:

t 10 >> 42 & t *

Then, then touch the button for listen your beat.

Important

Touchbit only performs with postfix notation expressions.

➡️ Postfix

Postfix in this case I guess can be described as forth like. It works with a stack. Each command either adds things to the stack or uses what's on the stack to do something. For example

123       // pushes 123 on the stack               stack = 123
456       // pushes 456 on the stack               stack = 123, 456
+         // pop the stop 2 things on the stack
          // adds them, puts the result on the
          // stack                                 stack = 569

Note the stack is only 256 elements deep. If you push 257 elements it wraps around. Similarly if you use pick with a large value your pick will wrap around. The stack is neither cleared nor reset on each iteration of your function. Some postfix based bytebeat songs take advantage of this where each iteration leaves things on the stack for the next iteration.

🔠 Basic keys

Arrow keys

You can navigate between the tokens of the expression. The selected token will be replaced by your next input key.

Tip

Long press to navigate directly to the start or end.

HOLD Hold key

Presed once and you'll be able to edit the expression without be evaluated until you press the hold key again.

INS Insert key

Presed once and you will insert a empty token before your selected position.

Long press for enter to Insert Mode: every input key it will insert a empty token first (press again for exit insert mode). When in Insert Mode, the cursor indicator changes from a rectangle to a vertical line.

DEL Delete key

Deletes the selected token. (If in insert mode, deletes the character before the cursor.)

Caution

Long press will erase the entire expression. There is no confirmation dialog box

UNDO REDO keys

Reverse and reapply the most recent action or change.

🔢 Numbers

"When you press a number key for the first time, you will enter number mode. In this mode, you will see + and - buttons online, allowing you to increase or decrease the rightmost digit by 1.

You can also use key to clear the rightmost digit.

Tip

If you press the same number key again, a number editor window will open. Here, you can individually increase or decrease each digit.

🔣 Operators

The postfix operators are

  • =, , >, , <,

    These take the top two things from the stack, do the comparision, then push 255 if the result is true or 0 if the result is false.

  • drop Removes the top thing from the stack

  • dup Duplicates the top thing on the stack.

  • swap Swaps the top 2 things on the stack

  • pick Pops the top thing from the stack and duplicates one item that many items back. In other words if the stack is 1,2,3,4,5,6,7,3 then pick pops the top thing 3 and duplicates the 3rd thing back counting from 0, which is no 4. The stack is then 1,2,3,4,5,6,7,4.

  • put

    Sets the n'th element from the top of the stack to the current top. In other words if the stack is 1,2,3,4,5,6,7,3,100 then put will pull the top 100 and then set the 3 element back. The stack will then be 1,2,3,4,100,6,7,3.

  • abs, sqrt, tan, log, exp, sin, cos, tan, floor, ceil, min, max, pow

    These operators all pop the top value from the stack, apply the operator, then push the result on the stack

  • /, +, -, *, %, >>, <<, |, &, ^, &&, ||

    These operators pop the top 2 values from the stack, apply the operator, then push the result. The order is as follows

    b = pop
    a = pop
    push(a op b)
    

    In other words 4 2 / is 4 divided by 2.

  • ~ Pops the top of the stack, applies the binary negate to it, pushes the result.

Tip

All operators in the top row display more options when long-pressed.

🌟 Features

Touchbit comes with a set of features tailored specifically to its interface, which is optimized for mobile devices.

🎛️ Equalizer

Going to Settings > Audio, you can find a three-band equalizer for adjusting the treble, middle, and bass levels.

🎨 Styles

Going to Settings > Styles, you can choose between a few theme palettes or opt to randomize for going wild.

👥 Sharing

You can share your byte by copying the current URL or by going to Settings > More, where you can export the current expression to the Greggman editor or copy it to the clipboard.

😎 Remote mode

You can use your mobile device to remotely control another device. Open the receiver in a web browser. Scan the QR code with your phone or paste the ID into the Settings > More > Remote input. Now you can use the key interface as a controller, and the expression will be evaluated on the secondary device.

A new SEND button will appear, which will be used to synchronize the expression between devices.

The expression will be played back on both devices, with the mobile device serving as the monitor and the screen acting as the output master. Ideal for live performances.

Tip

If you want to customize the ID for the receiver, add #id=yourphraseid to the receiver URL. The QR code won't appear upon disconnection.

🎵 Some demos

Click any expression for listen and edit:

t 10 >> 42 & t *

"the 42 melody", separately discovery by several people on irc etc

t 5 * t 7 >> & t 3 * t 10 >> & |

from viznut the 3rd iteration video

t 34 ^ t 67 | t 5 >> & | t 15 >> 9 & 1 + * 2 * 0 t 19 >> 3 & 8 SWAP - t SWAP >> - 255 & + 2 /

rhytimgrind from Glitch Machine

t 10 >> 16 % 1 + / 10 % t * t 16 >> 3 % 1 + * DUP 9 PICK | t 5 >> t 7 >> - | + t 2 >> |

quiddit from Glitch Machine

ℹ️ For more info

💜 Credits

  • Gabriel Vinazza - Main user, tester, teacher, and driving force behind this project.
  • Greggman Built the core library and brought postfix to online bytebeat.
  • Macronodes - Library used as an equalizer.
  • Peer.js - Used for remote mode, providing WEBRTC peer-to-peer data transmission.

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.5%
  • SCSS 8.2%
  • CSS 8.0%
  • HTML 4.3%