π©βπ»π¨βπ» Collaborative Coding
You can code together in Mercury using the amazing Flok live coding environment for the browser.
There are 3 options for how you can use Flok with Mercury:
- Use Flok to combine Mercury with Hydra visuals (or other languages like Tidal, Foxdot and SuperCollider) on a localhost
- Collaborate together in the same room (only requires 1 computer to run Mercury)
- Collaborate remotely over a network (all computers need to run Mercury)
Table of Content
- Flok & Mercury Playground
- Flok & Mercury Playground Locally
- Flok & Mercury in Max8
- Combine Mercury with Hydra (Audioreactive Visuals)
Flok & Mercury Playground
Follow these steps if you are a beginner and have been using the Mercury Playground at mercury.timohoogland.com
- Open a Chromium based browser (eg. Brave, Arc) and go to https://flok.cc/
- Choose a username.
- Select the
mercury-web
target from the dropdown menu in the topleft corner - Start typing some code! π΅
Ctrl/Alt + Enter
to playCtrl/Alt + .
to silence- The first time you evaluate you might get a message
Mercury engine still loading
. Just wait a little bit for all the soundfiles to load and the code will start as soon as the messageMercury engine ready!
pops up.
Flok & Mercury Playground Locally
- Install NodeJS for Mac or for Windows.
- Download the Mercury Playground via the Terminal. Navigate to the folder you want to install Mercury. Then run:
git clone http://github.com/tmhglnd/mercury-playground
, or download and unzip- Navigate to the folder with:
cd mercury-playground
(orcd mercury-playground-main
if downloaded) - Start the local server:
npm start
, open a browser and go tohttp://localhost:8080
.
- Navigate to the folder with:
- Install Flok via the Terminal/Command Prompt with
npm install -g flok-repl
(orsudo npm install -g flok-repl
)- Open Google Chrome and go to https://flok.cc/
- Setup Flok with target
mercury
and click Create session. - Copy the
flok-repl -H xxx -s xxx -t mercury
command, paste in the terminal and run. - Join the Flok with your nickname.
- Now start typing some code! π΅
Ctrl/Alt + Enter
to playCtrl/Alt + .
to silence- Flok will send the entire code via OSC messaging to port
4880
. Mercury is listening to this port automatically.
Flok & Mercury in Max8
Follow these steps for local use, advanced use or if youβre already familiar with the Mercury standalone in Max8
- Install NodeJS for Mac or for Windows.
- Install the latest version of Mercury via the quick start guide.
- Install Flok repl and web via the Terminal with
npm install -g flok-web flok-repl
Localhost
- Run
flok-web
in the terminal - Open Google Chrome and go to
localhost:3000
- Setup Flok with target
mercury
(and optionally other targets likehydra
) and click Create session. - Copy the
flok-repl -H xxx -s xxx -t mercury
command and run in the terminal. - Join the Flok with your nickname.
Collaborate
Now follow these steps for a succesful setup.
- Open Google Chrome and go to https://flok.cc/
- Setup Flok with target
mercury
and click Create session. - Copy the
flok-repl -H xxx -s xxx -t mercury
command and run in the terminal. - Join the Flok with your nickname.
Now start typing some code! π΅
Ctrl/Alt + Return
to evaluateCtrl/Alt + .
to silence
Flok will send the entire code via OSC messaging to port 4880. Mercury should be listening to this port automatically.
Combine Mercury with Hydra
For creating Audioreactive Visuals. Follow this guide if you like to let Hydra react to the sounds that you code with Mercury when using Flok.
flok.cc with mercury-web
- Open a panel for
mercury-web
and a panel forhydra
- Create some code in mercury that generates sound and run it
- The amplitude of the total sound is stored in the variable
m
, this can be used in Hydra - Use the variable in a function with:
() => m
osc(10, 0, () => m * 4 ).out()
for Mac
With Mercury local or Mercury Playground
- Install blackhole for virtual audio routing
- Open
Audio MIDI Setup
in your Applications - Click
+
in left-bottom corner and thenCreate Multi-Output Device
- Select both
Built-in Output
andBlackhole
(if blackhole is not listed restart the computer first) - Start Mercury and under
Settings
>Audio Setup
change the output to theMulti-Output Device
- Open Google Chrome and setup Flok as described under Collaborate
- Click the
Microphone
icon and selecteManage
- Select
Blackhole (Virtual)
for Windows
with Mercury local or Mercury Playground
- Install vbcables for virtual audio routing
- More steps are needed but this has not been tested on Windows, please contribute to this documentation if you know the steps
Both
Now start coding some Mercury and Hydra code! π
To create audio reactive visuals with hydra use the FFT audio object accessible via the a
object. Below is some example code for hydra that you can use.
a.show()
//=> show the FFT bins audio amplitude
a.setBins(6)
//=> set the amount of FFT bins to extract from the sound (low -> high frequencies)
osc(10, 0, () => a.fft[0]*4 ).out()
//=> choose a bin index and modulate a parameter with function return