Collaborative Editing with Flok

class: center, middle

# Collaborative Coding
## with Flok and Hydra

---

# About
      
* @munshkr ([tw](https://twitter.com/munshkr), [ig](https://instagram.com/munshkr), [github](https://github.com/munshkr))
      
* Buenos Aires, Argentina
      
* live coder, mainly using **Tidal** and **SuperCollider**
      
* participates in [CliC](https://clic.cf) (Colectivo de Live Coders) and TopLap
      
<div style="text-align: center">
  <img style="text-align: center; width: 200px" src="https://colectivo-de-livecoders.gitlab.io/images/clic_sticker.png">
</div>

Join us at [Telegram](https://t.me/clic_livecoding)! (mostly spanish)

---
      
# Flok: What is it?

[Flok](https://github.com/munshkr/flok) is a collaborative editor for live coding music and visuals
      
* Web-based

* Mostly peer-to-peer (P2P): WebRTC, with WebSockets fallback
      
* Free software (GPL)
      
<img style="width: 100%" src="https://cdn.glitch.com/947582b2-17ad-40d4-83e1-852eed1c72f2%2Fflok1.jpg?v=1601818107289">

---
      
# Flok: What is it?
      
### *REPL languages*
      
* TidalCycles
      
* FoxDot
      
* SuperCollider
      
* ... any other REPL-based tool
      
### *Web-based languages*
      
* Hydra

---

# Motivation
      
* We started playing collaboratively on local meetups with Hydra 
  using [Bridge](https://gitlab.com/colectivo-de-livecoders/tidal-bridge) and [Troop](https://github.com/Qirky/Troop)
      
* Then, with people around the world (Brazil, Singapore, India, Colombia, Perú), 
  using [Estuary](https://github.com/dktr0/estuary) and Troop (installed on a server in a local hacklab)
      
<div style="text-align: center">
  <iframe width="560" height="280" src="https://www.youtube.com/embed/JOUCpR0o49A?start=1694" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
      
---
      
# Motivation

We started noticing a few things:
     
  - Differences between client/server versions of Troop crashed everything
      
  - Starting a Troop server behind a NAT router was hard (port forwarding)
      
  - No custom samples and synths on Estuary
      
  - We also wanted to use Hydra in our jams :)
      
---
      
# How does it work?
      
* You can either: start a new *session*, or join an existing one.
      
* Each session has 1 or more editors or *slots* (max: 8)
      
* Each slot has a *target* associated.
      
---
      
# How does it work?

* When you evaluate code in a slot (Ctrl+Enter/Cmd+Enter), Flok sends that code to everyone.
      
* If the target is "hydra", it will update the Hydra canvas.
      
* For other targets, REPL clients will listen to a specific target ("tidal", "foxdot") and 
  run that code on the respective languages in your computer.

---

# Limitations
      
* REPL targets: users must have the language/tool installed, and have the *exact same setup* (samples, synthdefs, configuration, etc...)

* Hydra: screen casting works, but only from your side.
      
---
      
# Quickstart
      
1. Go to a public server, like: https://flok.clic.cf/

2. Create a session with at least one "hydra" target
      
3. Share session URL with your friends
      
4. Start a REPL (if you want to make music too)
      
[Let's try](https://flok.clic.cf)
      
---
      
# How to use Hydra collaboratively
      
* There is only one Hydra canvas
      
* But you can use *render()* and use the 4 default outputs (o0, o1, o2, o3)...
      
[Let's try again](https://flok.clic.cf)
      
---

class: center, middle

# Thanks!