BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge

Browse Source
This commit is contained in:
Miika Alonen
2023-08-17 16:44:48 +03:00
parent 31ec667ce7 ab482b38b2
commit 5486a875b0
7 changed files with 277 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/deploy.yml vendored
View File

@ -47,3 +47,4 @@ jobs:
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
cname: topos.raphaelforment.fr

76
README.md
View File

@ -1,30 +1,39 @@
# Topos
**Topos is only a Proof of Concept. It is not ready for users. Please feel free to contribute but do not expect stable features and/or support! Having fun developing it, join the team if you want to have fun!**
Topos is an algorithmic sequencer inspired by the [Monome Teletype](https://monome.org/docs/teletype/). It is meant to be ready to use, without installation, from a web browser. Topos is still a prototype and is not ready for production use. It is not meant to be a clone of the Teletype, but rather a new take on the same concept. The goal is to provide a tool that can be used to generate music, but also to learn about live coding and algorithmic music.
![Screenshot](https://github.com/Bubobubobubobubo/Topos/blob/main/img/screnshot.png)
Topos can generate sound through WebAudio and/or MIDI. The sequencer works by letting the user enter short JS code snippets that are evaluated in a _sandboxed_ environment. An API is providing tools to manipulate time, transport, instruments, data, etc...
## Disclaimer
**Topos is only a proof of concept:**
- It is not ready for users.
- Do not expect stable features and/or support!
- Contributors are welcome!
## Presentation
Topos is an algorithmic sequencer inspired by the [Monome Teletype](https://monome.org/docs/teletype/). It is meant to use from a web browser, without installation. It is not meant to be a clone of the Teletype but rather a new take based on the same concept. The goal is to provide a tool that can be used to generate music but also to learn about live coding and algorithmic music. A desktop based version is also available, using [Tauri](https://tauri.app/). Hopefully, it will support MIDI and OSC in the future for a better integration with musical hardware.
Topos can generate sound through [WebAudio](https://www.npmjs.com/package/superdough) and/or [MIDI](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API). Users can enter short JS code snippets evaluated in a _sandboxed_ environment. A simple to use API provides tools to manipulate time, transport, instruments, data, etc...
## How does it work?
Just like the **Teletype**, **Topos** is following a **scripting** paradigm. The user is writing short snippets of code that are evaluated in a sandboxed environment. The code is evaluated in a loop, at a given tempo. There are four types of files that can be edited:
Topos is based on the manipulation of short code snippets, each of them stored in their own file. A set of files is called a **universe**. You can switch from universe to universe _anytime_, even while the application is running. The application is saving the state of the universe in the browser's local storage.
- **the global buffer**: used to sequence scripts and control major global events. This script is evaluated **at every clock tick**. This is, by default, _super fast_.
- **the local buffers** are describing some musical logic/processes taking place. They are activated on demand, _once_ by any other script using the `script(n)` command.
- **the init buffer** is used to initialise the state of the universe when you first load the app. Think of it as a space to set the tempo, to set default variables, etc...
- **the note buffer**: used to document your projects and to take notes about your composition.
Like the **Teletype**, A **Topos universe** contains a set of files:
A **universe** is a set of files (global, init, locals and note) representing a musical composition, a song, a piece, an improvisation. You can create as many universes as you want and switch between them at any time. The application is saving the state of the universe in the browser's local storage.
- **the global script** (`Ctrl+G`): evaluated on a loop for every pulse! Used to call scripts, introduce major changes, etc... The global script really is the conductor of the piece. It can also be used to test short code snippets when you don't feel like programming anything too complex.
- **the local scripts** (`Ctrl+L`) are parts / are describing some kind of logic or process that you would like to play with. The local scripts are activated on demand by any other script (including themselves) using the `script(n)` command.
- **the init buffer** (`Ctrl+I`) is used to initialise the state of the _universe_ when you first load the app. Think of it as a script used to set the tempo, to set some default variables or state for your composition.
- **the note file** (`Ctrl+N`): used to document your _universe_ (project) and to take notes about your composition.
To switch between universes, use the `Ctrl+B` keybinding that will open a modal. The clear button will reset the current universe to a blank slate.
A **universe** is a set of files (global, init, locals and note) representing a musical composition, a song, a piece, an improvisation. You can create as many universes as you want and switch between them at any time. The application is saving the state of the universe in the browser's local storage. To switch between universes, open the selector by pressing the `Ctrl+B` . The clear button can be used to reset the currently selected universe to a blank slate.
## Keybindings
- `Ctrl+P`: start the audio playback/clock.
- `Ctrl+S`: stop the audio playback/clock.
- `Ctrl+R`: rewind the audio playblack/clock to the beginning.
- `Ctrl+G`: global buffer.
- `Ctrl+I`: initialisation buffer.
- `Ctrl+L`: local buffers.
@ -33,40 +42,39 @@ To switch between universes, use the `Ctrl+B` keybinding that will open a modal.
- `Ctrl+B`: switch between universes.
- `Ctrl+Shift+V`: toggle Vim editor mode.
To evaluate code, press `Ctrl+Enter` (no visible animation). This is true for every buffer. To stop a buffer from playing, comment your code or delete it.
To evaluate code, press `Ctrl+Enter`. The screen will flash to indicate that the code was transmitted. This is true for every script, including the note script. To stop a script from playing, just comment your code or stop calling it!
## How to install locally?
## Local installation
To run the application in dev mode, you will need to have [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/) installed on your computer. Then:
To run the application for dev purposes, you will need to install [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/). Then, clone the repository and run:
- Clone the repository:
- run `yarn install`
- run `yarn run dev`
- `yarn install`
- `yarn run dev`
To build the application for production, you will need to have [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/) installed on your computer. Then:
To build the application for production, you will need to install [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/). Then, clone the repository and run:
- Clone the repository:
- run `yarn run build`
- run `yarn run start`
- `yarn run build`
- `yarn run start`
To build a standalone browser application using [Tauri](https://tauri.app/), you will need to have [Node.js](https://nodejs.org/en/), [Yarn](https://yarnpkg.com/en/) and [Rust](https://www.rust-lang.org/) installed on your computer. Then:
To build a standalone browser application using [Tauri](https://tauri.app/), you will need to have [Node.js](https://nodejs.org/en/), [Yarn](https://yarnpkg.com/en/) and [Rust](https://www.rust-lang.org/) installed. Then, clone the repository and run:
- Clone the repository:
- run `yarn tauri build`
- run `yarn tauri dev`
- `yarn tauri build`
- `yarn tauri dev`
# Roadmap to Topos v1.0 (first release)
Sure you can already play music with Topos but it feels like throwing pebbles on a drumset. Help us make it better!
## Application User Interface
- [ ] Visual feedback for script execution
- [ ] add blinking dots in the upper-right corner of the editor
- [ ] visual warning when an error is detected (blinking red?)
- [ ] more variety in visual signals when evaluating code
- [ ] Code animation for rhythmic functions on certain lines (show that a statement is true)
- [ ] More/Better rhythmic generators
- [ ] Ability to write simple musical sequences
- [ ] Ability to create musical structures easily
- [ ] add blinking dots in the upper-right corner of the editor corresponding to the script being executed.
- [ ] visual warning when an error is detected (blinking red?) and reading logs directly from the interface.
- [ ] more variety in visual signals when evaluating code (errors, warnings, etc...).
- [ ] Animating code in rhythm! Show when code gets executed, etc...
- [ ] Better rhythmic generators
- [ ] Ability to write simple linear sequences
- [ ] Ability to manipulate musical structures / objects
- [ ] Rendering static files (MIDI, MOD, etc...)
- [ ] Add a way to save the current universe as a file.
- [ ] Add a way to load a universe from a file.
@ -75,7 +83,7 @@ To build a standalone browser application using [Tauri](https://tauri.app/), you
## Scheduler
- [ ] Stable / robust clock and script/event scheduler.
- [ ] There is still a tiny bit of imprecision left.
- [ ] There is still a tiny bit of imprecision left in the scheduling mechanism used.
- [ ] Add a way to set the clock's swing.
- [ ] MIDI Clock In/Out support.

3
index.html
View File

@ -55,9 +55,6 @@
<p id="blinker-9" class="text-white text-5xl">•</p>
</div>
-->
<span id="clockviewer" class="font-mono font-semibold mr-6 py-1 bg-white text-black rounded align-center text-normal px-2">
Clock
</span>
<a id="play-button-1" class="mr-5">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 14 16">
<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>

66
src/API.ts
View File

@ -5,6 +5,7 @@ import { DrunkWalk } from "./Utils/Drunk";
import { LRUCache } from 'lru-cache';
import { scale } from "./Scales";
import { Editor } from "./main";
import { Sound } from './Sound';
import {
superdough,
samples,
@ -249,12 +250,13 @@ export class UserAPI {
public zn(input: string,
options: {[key: string]: string|number} = {}): Event {
const pattern = cachedPattern(input, options);
//@ts-ignore
if(pattern.hasStarted()) {
const event = pattern.peek();
// Check if event is modified
const node = event.modifiedEvent ? event.modifiedEvent : event;
const node = event!.modifiedEvent ? event!.modifiedEvent : event;
const channel = (options.channel ? options.channel : 0) as number;
const velocity = (options.velocity ? options.velocity : 100) as number;
const sustain = (options.sustain ? options.sustain : 0.5) as number;
@ -274,8 +276,9 @@ export class UserAPI {
}
// Remove old modified event
if(event.modifiedEvent) event.modifiedEvent = undefined;
if(event!.modifiedEvent) event!.modifiedEvent = undefined;
}
//@ts-ignore
return pattern.next();
}
@ -1000,6 +1003,7 @@ export class UserAPI {
length: number,
rotate: number = 0
): boolean[] {
if (pulses == length) return Array.from({ length }, () => true);
function startsDescent(list: number[], i: number): boolean {
const length = list.length;
const nextIndex = (i + 1) % length;
@ -1033,7 +1037,7 @@ export class UserAPI {
gold() {
/**
* Essayer de générer des séquences tirées du truc de Puckette
* Faire ça avec des lazy lists, ça ne devrait pas être trop difficle.
* Faire ça avec des lazy lists, ça ne devrait pas être trop difficile.
*
*/
}
@ -1077,6 +1081,18 @@ export class UserAPI {
);
}
usine(freq: number = 1, offset: number = 0): number {
/**
* Returns a sine wave between 0 and 1.
*
* @param freq - The frequency of the sine wave
* @param offset - The offset of the sine wave
* @returns A sine wave between 0 and 1
* @see sine
*/
return (this.sine(freq, offset) + 1) / 2;
}
saw(freq: number = 1, offset: number = 0): number {
/**
* Returns a saw wave between -1 and 1.
@ -1092,6 +1108,18 @@ export class UserAPI {
return ((this.app.clock.ctx.currentTime * freq) % 1) * 2 - 1 + offset;
}
usaw(freq: number = 1, offset: number = 0): number {
/**
* Returns a saw wave between 0 and 1.
*
* @param freq - The frequency of the saw wave
* @param offset - The offset of the saw wave
* @returns A saw wave between 0 and 1
* @see saw
*/
return (this.saw(freq, offset) + 1) / 2;
}
triangle(freq: number = 1, offset: number = 0): number {
/**
* Returns a triangle wave between -1 and 1.
@ -1105,6 +1133,18 @@ export class UserAPI {
return Math.abs(this.saw(freq, offset)) * 2 - 1;
}
utriangle(freq: number = 1, offset: number = 0): number {
/**
* Returns a triangle wave between 0 and 1.
*
* @param freq - The frequency of the triangle wave
* @param offset - The offset of the triangle wave
* @returns A triangle wave between 0 and 1
* @see triangle
*/
return (this.triangle(freq, offset) + 1) / 2;
}
square(freq: number = 1, offset: number = 0): number {
/**
* Returns a square wave between -1 and 1.
@ -1118,6 +1158,18 @@ export class UserAPI {
return this.saw(freq, offset) > 0 ? 1 : -1;
}
usquare(freq: number = 1, offset: number = 0): number {
/**
* Returns a square wave between 0 and 1.
*
* @param freq - The frequency of the square wave
* @param offset - The offset of the square wave
* @returns A square wave between 0 and 1
* @see square
*/
return (this.square(freq, offset) + 1) / 2;
}
noise(): number {
/**
* Returns a random value between -1 and 1.
@ -1142,10 +1194,14 @@ export class UserAPI {
// Trivial functions
// =============================================================
sound = async (values: object, delay: number = 0.0) => {
d = async (values: object, delay: number = 0.0) => {
superdough(values, delay);
};
d = this.sound;
sound = (sound: string) => {
return new Sound(sound, this.app);
}
samples = samples;

2
src/Clock.ts
View File

@ -45,7 +45,7 @@ export class Clock {
this.time_signature = [4, 4];
this.tick = 0;
this.bpm = 120;
this.ppqn = 48;
this.ppqn = 24;
this.transportNode = null;
this.ctx = ctx;
ctx.audioWorklet.addModule(TransportProcessor).then((e) => {

169
src/Sound.ts Normal file
View File

@ -0,0 +1,169 @@
import { type Editor } from './main';
import {
superdough,
// @ts-ignore
} from "superdough";
export class Sound {
values: { [key: string]: any }
constructor(sound: string, public app: Editor) {
this.values = { 's': sound }
}
unit = (value: number): this => {
this.values['unit'] = value
return this;
}
frequency = (value: number): this => {
this.values['frequency'] = value
return this;
}
nudge = (value: number): this => {
this.values['nudge'] = value
return this;
}
cut = (value: number): this => {
this.values['cut'] = value
return this;
}
loop = (value: number): this => {
this.values['loop'] = value
return this;
}
clip = (value: number): this => {
this.values['clip'] = value
return this;
}
n = (value: number): this => {
this.values['n'] = value
return this;
}
note = (value: number): this => {
this.values['note'] = value
return this;
}
speed = (value: number): this => {
this.values['speed'] = value
return this;
}
begin = (value: number): this => {
this.values['begin'] = value
return this;
}
end = (value: number): this => {
this.values['end'] = value
return this;
}
gain = (value: number): this => {
this.values['gain'] = value
return this;
}
cutoff = (value: number): this => {
this.values['cutoff'] = value
return this;
}
resonance = (value: number): this => {
this.values['resonance'] = value
return this;
}
hcutoff = (value: number): this => {
this.values['hcutoff'] = value
return this;
}
hresonance = (value: number): this => {
this.values['hresonance'] = value
return this;
}
bandf = (value: number): this => {
this.values['bandf'] = value
return this;
}
bandq = (value: number): this => {
this.values['bandq'] = value
return this;
}
coarse = (value: number): this => {
this.values['coarse'] = value
return this;
}
crush = (value: number): this => {
this.values['crush'] = value
return this;
}
shape = (value: number): this => {
this.values['shape'] = value
return this;
}
pan = (value: number): this => {
this.values['pan'] = value
return this;
}
vowel = (value: number): this => {
this.values['vowel'] = value
return this;
}
delay = (value: number): this => {
this.values['delay'] = value
return this;
}
delayfeedback = (value: number): this => {
this.values['delayfeedback'] = value
return this;
}
delaytime = (value: number): this => {
this.values['delaytime'] = value
return this;
}
orbit = (value: number): this => {
this.values['orbit'] = value
return this;
}
room = (value: number): this => {
this.values['room'] = value
return this;
}
size = (value: number): this => {
this.values['size'] = value
return this;
}
velocity = (value: number): this => {
this.values['velocity'] = value
return this;
}
out = (): object => {
return superdough(this.values, this.app.clock.pulse_duration);
}
}

4
src/TransportNode.js
View File

@ -37,7 +37,7 @@ export class TransportNode extends AudioWorkletNode {
setTimeout(() => {
const now = performance.now();
this.app.clock.time_position = futureTimeStamp;
this.$clock.innerHTML = `[${futureTimeStamp.bar}:${futureTimeStamp.beat}:${zeroPad(futureTimeStamp.pulse, '2')}]`;
// this.$clock.innerHTML = `[${futureTimeStamp.bar}:${futureTimeStamp.beat}:${zeroPad(futureTimeStamp.pulse, '2')}]`;
tryEvaluate(
this.app,
this.app.global_buffer,
@ -66,7 +66,7 @@ export class TransportNode extends AudioWorkletNode {
this.startTime = null;
this.elapsedTime = null;
this.app.clock.tick = 0;
this.$clock.innerHTML = `[${1} | ${1} | ${zeroPad(1, '2')}]`;
// this.$clock.innerHTML = `[${1} | ${1} | ${zeroPad(1, '2')}]`;
this.port.postMessage("stop");
}