diff --git a/src/API.ts b/src/API.ts index b628bea..7888485 100644 --- a/src/API.ts +++ b/src/API.ts @@ -76,6 +76,23 @@ export class UserAPI { return this.app.audioContext.currentTime; }; + public play = (): void => { + this.app.setButtonHighlighting("play", true); + this.app.clock.start(); + }; + + public pause = (): void => { + this.app.setButtonHighlighting("pause", true); + this.app.clock.pause(); + }; + + public stop = (): void => { + this.app.setButtonHighlighting("stop", true); + this.app.clock.stop(); + }; + silence = this.stop; + hush = this.stop; + // ============================================================= // Mouse functions // ============================================================= @@ -801,19 +818,6 @@ export class UserAPI { return final_pulses.some((p) => p == true); }; - stop = (): void => { - /** - * Stops the clock. - * - * @see silence - * @see hush - */ - this.app.clock.pause(); - this.app.setButtonHighlighting("pause", true); - }; - silence = this.stop; - hush = this.stop; - prob = (p: number): boolean => { /** * Returns true p% of the time. diff --git a/src/Documentation.ts b/src/Documentation.ts index 11ae01b..25a3d4b 100644 --- a/src/Documentation.ts +++ b/src/Documentation.ts @@ -5,7 +5,7 @@ const key_shortcut = (shortcut: string): string => { const introduction: string = ` # Welcome -Welcome to the Topos documentation. This documentation companion is made to help you understand the software and the ideas behind Topos. You can summon it anytime by pressing ${key_shortcut( +Welcome to the Topos documentation. These pages are made to help you understand the software and the ideas behind Topos. You can jump here anytime by pressing ${key_shortcut( "Ctrl + D" )}. Press again to make the documentation disappear. @@ -14,7 +14,11 @@ Welcome to the Topos documentation. This documentation companion is made to help Topos is an _algorithmic_ sequencer. Topos uses small algorithms to represent musical sequences and processes. These can be written in just a few lines of code. Topos is made to be _live-coded_. The _live coder_ strives for the constant interaction with algorithms and sound during a musical performance. Topos is aiming to be a digital playground for live algorithmic music. -Topos is deeply inspired by the [Monome Teletype](https://monome.org/). The Teletype is an open source hardware module for Eurorack synthesizers. While the Teletype was initially born as an hardware module, Topos is a web-browser based software sequencer from the same family! It is a sequencer, a scriptable interface, a companion for algorithmic music-making. Topos wishes to fullfill the same goal than the Teletype, keeping the same spirit alive on the web. It is free, open-source, and made to be shared and used by everyone. +Topos is deeply inspired by the [Monome Teletype](https://monome.org/). The Teletype is/was an open source hardware module for Eurorack synthesizers. While the Teletype was initially born as an hardware module, Topos aims to be a web-browser based software sequencer from the same family! It is a sequencer, a scriptable interface, a companion for algorithmic music-making. Topos wishes to fullfill the same goal than the Teletype, keeping the same spirit alive on the web. It is free, open-source, and made to be shared and used by everyone. + +## How to read this documentation + +These pages have been conceived to introduce the core concepts first before diving to the more arcane bits. You can read them in order if you just found out about this software! Later on, this documentation will only help you to refresh your memory about some function, etc... ## Example @@ -22,7 +26,7 @@ Press ${key_shortcut( "Ctrl + G" )} to switch to the global file. This is where everything starts! Evaluate the following script there by pasting and pressing ${key_shortcut( "Ctrl + Enter" -)}: +)}. You are now making music:
if (bar() % 4 > 2 ) {
@@ -43,30 +47,30 @@ if (bar() % 4 > 2 ) {
const software_interface: string = `
# Interface
-The Topos interface is molded around the core concepts at play: _scripts_ and _universes_. By mastering them, you will be able to compose complex algorithmic musical compositions.
+The Topos interface is molded around the core concepts of the software: _scripts_ and _universes_. By mastering the interface, you will already understand quite a lot about Topos and how to play music with it.
## Scripts
-Topos works by linking together several scripts into what is called a _universe_:
+Every Topos session is composed of several scripts. A set of scripts is called a _universe_. Every script is written using the JavaScript programming language and describes a musical or algorithmic process that takes place over time.
- the global script (${key_shortcut(
"Ctrl + G"
-)}): Evaluated for every clock pulse.
+)}): **Evaluated for every clock pulse**. The central piece, acting as the conductor for all the other scripts. You can also jam directly from the global script to test your ideas before pushing them to a separate script.
- the local scripts (${key_shortcut(
"Ctrl + L"
-)}): Evaluated _on demand_. Local scripts are storing musical parts, logic or whatever you need!
+)}): **Evaluated on demand**. Local scripts are used to store anything too complex to sit in the global script. It can be a musical process, a whole section of your composition, a complex controller that you've built for your hardware, etc...
- the init script (${key_shortcut(
"Ctrl + I"
-)}): Evaluated on program load. Used to set up the software (_bpm_, etc...).
+)}): **Evaluated on program load**. Used to set up the software the session to the desired state before playing (_bpm_, etc...).
- the note file (${key_shortcut(
"Ctrl + N"
-)}): Not evaluated. Used to store thoughts and ideas about the music you are making.
+)}): **Not evaluated**. Used to store your thoughts or commentaries about the session you are currently playing. It is nothing more than a scratchpad really!
## Universes
A set of files is called a _universe_. Topos can store several universes and switch immediately from one to another. You can switch between universes by pressing ${key_shortcut(
"Ctrl + B"
-)}. You can also create a new universe by entering a name that has never been used before. _Universes_ are only known by their names.
+)}. You can also create a new universe by entering a name that has never been used before. _Universes_ are only referenced by their names. Once a universe is loaded, it is not possible to call any data/code from any other universe.
Switching between universes will not stop the transport nor reset the clock. You are switching the context but time keeps flowing. This can be useful to prepare immediate transitions between songs and parts. Think of universes as an algorithmic set of music. All scripts in a given universe are aware about how many times they have been runned already. You can reset that value programatically.
@@ -76,33 +80,46 @@ You can clear the current universe by pressing the flame button on the top right
const time: string = `
# Time
-Time in Topos is handled by a _transport_ system. It allows you to **play**, **pause** and **reset** time. Time is quite simple to understand:
+Time in Topos can be **paused** and/or **resetted**. Musical time is flowing at a given **BPM** (_beats per minute_) like a regular drum machine. There are three core values that you will often interact with in one form or another:
- **bars**: how many bars have elapsed since the origin of time.
- **beats**: how many beats have elapsed since the beginning of the bar.
- **pulse**: how many pulses have elapsed since the last beat.
-The **pulse** is also known as the [PPQN](https://en.wikipedia.org/wiki/Pulses_per_quarter_note). By default, Topos is using a pulses per quarter note of 48. It means that the lowest possible rhythmic value is 1/48 of a quarter note. That's plenty of time already. Music is sequenced by playing around with these core time values.
+To change the tempo, use the bpm(number) function. You can interact with time using interface buttons, keyboard shortcuts but also by using the play() , pause() and stop() functions. You will soon learn how to manipulate time to your liking for backtracking, jumping forward, etc... The traditional timeline model has little value when you can script everything.
-**Note:** you will also learn how to manipulate time to backtrack, jump forward, etc... Your traditional timeline based playback will progressively get more spicy.
+**Note:** the bpm(number) function can serve both for getting and setting the **BPM** value.
-## Programming with time
+## Pulses
+
+To make a beat, you need a certain number of time grains or **pulses**. The **pulse** is also known as the [PPQN](https://en.wikipedia.org/wiki/Pulses_per_quarter_note). By default, Topos is using a _pulses per quarter note_ of 48. You can change it by using the ppqn(number) function. It means that the lowest possible rhythmic value is 1/48 of a quarter note. That's plenty of time already.
+
+**Note:** the ppqn(number) function can serve both for getting and setting the **PPQN** value.
+
+
+## Time Primitives
Every script can access the current time by using the following functions:
- bar(n: number) : returns the current bar since the origin of time.
-- beat(n: number) : returns the current beat since the origin of the bar.
+- beat(n: number) : returns the current beat since the beginning of the bar.
-- ebeat() : returns the current beat since the origin of time.
+- ebeat() : returns the current beat since the origin of time (counting from 1).
- pulse() : returns the current bar since the origin of the beat.
-- epulse() : returns the current bar since the origin of time.
+- ppqn() : returns the current **PPQN** (see above).
-## Useful basic functions
+- bpm() : returns the current **BPM** (see above).
-Some functions are used very often as time primitives. They are used to create more complex rhythms and patterns:
+- time() : returns the current wall clock time, the real time of the system.
+
+These values are **extremely useful** to craft more complex syntax or to write musical scores. However, Topos is also offering more high-level sequencing functions to make it easier to play music.
+
+## Useful Basic Functions
+
+Some functions can be leveraged to play rhythms without thinking too much about the clock. Learn them well:
- beat(...values: number[]) : returns true on the given beat. You can add any number of beat values, (_e.g._ onbeat(1.2,1.5,2.3,2.5) ). The function will return true only for a given pulse, which makes this function very useful for drumming.
@@ -112,7 +129,7 @@ Some functions are used very often as time primitives. They are used to create m
onbeat(3) && sound('sd').out()
\`\`\`
-- mod(...values: number[]) : returns true if the current pulse is a multiple of the given value. You can add any number of values, (_e.g._ mod(.25,.75) ).
+- mod(...values: number[]) : returns true if the current pulse is a multiple of the given value. You can add any number of values, (_e.g._ mod(.25,.75) ). Note that 1 will equal to ppqn() pulses by default. Thus, mod(.5) for a **PPQN** of 48 will be 24 pulses.
\`\`\`javascript
mod(1) && sound('bd').out()
@@ -138,6 +155,7 @@ You can use the time functions as conditionals. The following example will play
mod(.5) && sound('jvbass').freq(250).out()
}
\`\`\`
+
`;
const midi: string = `
@@ -318,10 +336,56 @@ The code you enter in any of the scripts is evaluated in strict mode. This tells
- **about errors and printing:** your code will crash! Don't worry, it will hopefully try to crash in the most gracious way possible. To check if your code is erroring, you will have to open the dev console with ${key_shortcut(
"Ctrl + Shift + I"
)}. You cannot directly use console.log('hello, world') in the interface. You will have to open the console as well to see your messages being printed there!
+- **about new syntax:** sometimes, we have taken liberties with the JavaScript syntax in order to make it easier/faster to write on stage. && can also be written :: or -> because it is faster to type or better for the eyes!
+
+## About crashes and bugs
+
+Things will crash, that's also part of the show. You will learn progressively to avoid mistakes and to write safer code. Do not hesitate to kill the page or to stop the transport if you feel overwhelmed by an algorithm blowing up. There are no safeties in place to save you. This is to ensure that you have all the available possible room to write bespoke code and experiment with your ideas through code.
`;
const functions: string = `
# Functions
+
+## Global Shared Variables
+
+By default, each script is independant from each other. Scripts live in their own bubble and you cannot get or set variables affecting a script from any other script. **However**, everybody knows that global variables are cool and should be used everywhere. This is an incredibely powerful tool to use for radically altering a composition in a few lines of code.
+
+- variable(a: number | string, b?: any) : if only one argument is provided, the value of the variable will be returned through its name, denoted by the first argument. If a second argument is used, it will be saved as a global variable under the name of the first argument.
+ - delete_variable(name: string) : deletes a global variable from storage.
+ - clear_variables() : clear **ALL** variables. **This is a destructive operation**!
+
+## Counter and iterators
+
+You will often need to use iterators and/or counters to index over data structures (getting a note from a list of notes, etc...). There are functions ready to be used for this. Each script also comes with its own iterator that you can access using the i variable. **Note:** the script iteration count is **not** resetted between sessions. It will continue to increase the more you play, even if you just picked up an old project.
+
+- counter(name: number | string, limit?: number, step?: number) : reads the value of the counter name . You can also call this function using the dollar symbol: $ .
+ - limit? : counter upper limit before wrapping up.
+ - step? : incrementor. If step is 2 , the iterator will go: 0, 2, 4, 6 , etc...
+
+- drunk(n?: number) : returns the value of the internal drunk walk counter. This iterator will sometimes go up, sometimes go down. It comes with companion functions that you can use to finetune its behavior.
+ - drunk_max(max: number) : sets the maximum value.
+ - drunk_min(min: number) : sets the minimum value.
+ - drunk_wrap(wrap: boolean) : whether to wrap the drunk walk to 0 once the upper limit is reached or not.
+
+
+
+## Scripts
+
+You can control scripts programatically. This is the core concept of Topos after all!
+
+- script(...number: number[]) : call one or more scripts (_e.g. script(1,2,3,4) ). Once called, scripts will be evaluated once. There are nine local scripts by default. You cannot call the global script nor the initialisation script.
+
+- clear_script(number) : deletes the given script.
+- copy_script(from: number, to: number) : copies a local script denoted by its number to another local script. **This is a destructive operation!**
+
+## Mouse
+
+You can get the current position of the mouse on the screen by using the following functions:
+
+- mouseX() : the horizontal position of the mouse on the screen (as a floating point number).
+- mouseY() : the vertical position of the mouse on the screen (as a floating point number).
+
+
`;
const reference: string = `
diff --git a/src/main.ts b/src/main.ts
index 515c4b8..59c533f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,8 +28,8 @@ import showdown from "showdown";
showdown.setFlavor("github");
import showdownHighlight from "showdown-highlight";
const classMap = {
- h1: "text-4xl text-white ml-4 mx-4 my-4 mb-8",
- h2: "text-3xl text-white mx-4 my-4 mt-12 mb-6",
+ h1: "text-white text-4xl ml-4 mx-4 my-4 mb-8 bg-neutral-900 rounded-lg py-2 px-2",
+ h2: "text-white text-3xl mx-4 my-4 mt-12 mb-6 bg-neutral-900 rounded-lg py-2 px-2",
ul: "text-underline",
li: "ml-12 list-disc text-2xl text-white mx-4 my-4 leading-normal",
p: "text-2xl text-white mx-4 my-4 leading-normal",