Compare commits
6 Commits
import-sam
...
clockswitc
| Author | SHA1 | Date | |
|---|---|---|---|
| f3ddb39ab6 | |||
| 8b744e3d90 | |||
| 424adeebc0 | |||
| ed8bc21713 | |||
| 9b7f980027 | |||
| 05382bab6e |
17
.github/workflows/build_docker.yml
vendored
17
.github/workflows/build_docker.yml
vendored
@ -3,23 +3,28 @@ name: Build and Push Docker Images
|
|||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
branches:
|
branches:
|
||||||
- "main"
|
- 'main'
|
||||||
jobs:
|
jobs:
|
||||||
topos:
|
topos:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
-
|
||||||
|
name: Checkout
|
||||||
uses: actions/checkout@v2
|
uses: actions/checkout@v2
|
||||||
- name: Set up QEMU
|
-
|
||||||
|
name: Set up QEMU
|
||||||
uses: docker/setup-qemu-action@v3
|
uses: docker/setup-qemu-action@v3
|
||||||
- name: Set up Docker Buildx
|
-
|
||||||
|
name: Set up Docker Buildx
|
||||||
uses: docker/setup-buildx-action@v3
|
uses: docker/setup-buildx-action@v3
|
||||||
- name: Login to Docker Hub
|
-
|
||||||
|
name: Login to Docker Hub
|
||||||
uses: docker/login-action@v3
|
uses: docker/login-action@v3
|
||||||
with:
|
with:
|
||||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||||
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
||||||
- name: Build and push
|
-
|
||||||
|
name: Build and push
|
||||||
uses: docker/build-push-action@v5
|
uses: docker/build-push-action@v5
|
||||||
with:
|
with:
|
||||||
push: true
|
push: true
|
||||||
|
|||||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -1 +1,2 @@
|
|||||||
{}
|
{
|
||||||
|
}
|
||||||
32
README.md
32
README.md
@ -1,9 +1,9 @@
|
|||||||
# Topos: A Web-Based Algorithmic Sequencer
|
# Topos: A Web-Based Algorithmic Sequencer
|
||||||
|
|
||||||
<p align="center"> |
|
<p align="center"> |
|
||||||
<a href="https://discord.gg/aPgV7mSFZh">Discord</a> |
|
<a href="https://discord.gg/aPgV7mSFZh">Discord</a> |
|
||||||
<a href="https://raphaelforment.fr/">BuboBubo</a> |
|
<a href="https://raphaelforment.fr/">BuboBubo</a> |
|
||||||
<a href="https://github.com/amiika">Amiika</a> |
|
<a href="about:blank">Amiika</a> |
|
||||||
<a href="https://toplap.org/">About Live Coding</a> |
|
<a href="https://toplap.org/">About Live Coding</a> |
|
||||||
<br><br>
|
<br><br>
|
||||||
<h2 align="center"><b>Contributors</b></h2>
|
<h2 align="center"><b>Contributors</b></h2>
|
||||||
@ -12,32 +12,15 @@
|
|||||||
<img src="https://contrib.rocks/image?repo=bubobubobubobubo/Topos" />
|
<img src="https://contrib.rocks/image?repo=bubobubobubobubo/Topos" />
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p align="center">
|
|
||||||
<a href='https://ko-fi.com/I2I2RSBHF' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
|
|
||||||
</p>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
---
|
Topos is a web-based live coding environment. It lives [here](https://topos.live). Documentation is directly embedded in the application itself. Topos is an emulation and extension of the [Monome Teletype](https://monome.org/docs/teletype/) that gradually evolved into something a bit more personal.
|
||||||
|
|
||||||
Topos is a web based live coding environment. Topos is capable of many things:
|
|
||||||
|
|
||||||
- it is a music sequencer made for improvisation and composition alike
|
|
||||||
- it is a synthesizer capable of additive, substractive, FM and wavetable
|
|
||||||
synthesis, backed up by a [powerful web based audio engine](https://www.npmjs.com/package/superdough)
|
|
||||||
- it can also generate video thanks to [Hydra](https://hydra.ojack.xyz/) and
|
|
||||||
custom oscilloscopes, frequency visualizers and image sequencing capabilities
|
|
||||||
- it can be used to sequence other MIDI devices (and soon.. OSC!)
|
|
||||||
- it is made to be used without the need of installing anything, always ready at
|
|
||||||
[https://topos.live](https://topos.live)
|
|
||||||
- Topos is also an emulation and personal extension of the [Monome Teletype](https://monome.org/docs/teletype/)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Disclaimer
|
## Disclaimer
|
||||||
|
|
||||||
**Topos** is still a young project developed by two hobbyists :) Contributions are welcome! We wish to be as inclusive and welcoming as possible to your ideas and suggestions! The software is working quite well and we are continuously striving to improve it.
|
**Topos** is a fairly young project developed by two part time hobbyists :) Do not expect stable features and/or user support in the initial development stage. Contributors and curious people are welcome! The software is working quite well and we are continuously striving to improve it.
|
||||||
|
|
||||||
## Installation (for devs and contributors)
|
## Installation (for devs and contributors)
|
||||||
|
|
||||||
@ -63,18 +46,15 @@ The `tauri` version is only here to quickstart future developments but nothing
|
|||||||
## Docker
|
## Docker
|
||||||
|
|
||||||
### Run the application
|
### Run the application
|
||||||
|
|
||||||
`docker run -p 8001:80 yassinsiouda/topos:latest`
|
`docker run -p 8001:80 yassinsiouda/topos:latest`
|
||||||
|
|
||||||
### Build and run the prod image
|
### Build and run the prod image
|
||||||
|
|
||||||
`docker compose --profile prod up`
|
`docker compose --profile prod up`
|
||||||
|
|
||||||
### Build and run the dev image
|
### Build and run the dev image
|
||||||
|
|
||||||
**First installation**
|
**First installation**
|
||||||
First you need to map node_modules to your local machine for your ide intellisense to work properly
|
First you need to map node_modules to your local machine for your ide intellisense to work properly
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
docker compose --profile dev up -d
|
docker compose --profile dev up -d
|
||||||
docker cp topos-dev:/app/node_modules .
|
docker cp topos-dev:/app/node_modules .
|
||||||
@ -82,7 +62,7 @@ docker compose --profile dev down
|
|||||||
```
|
```
|
||||||
|
|
||||||
**Then**
|
**Then**
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
docker compose --profile dev up
|
docker compose --profile dev up
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -1,36 +0,0 @@
|
|||||||
const WebSocket = require("ws");
|
|
||||||
const osc = require("osc");
|
|
||||||
|
|
||||||
const cleanIncomingOSC = (oscMsg) => {
|
|
||||||
let data = oscMsg.args;
|
|
||||||
// Remove information about type of data
|
|
||||||
data = data.map((item) => {
|
|
||||||
return item.value;
|
|
||||||
});
|
|
||||||
return { data: data, address: oscMsg.address };
|
|
||||||
};
|
|
||||||
|
|
||||||
// ==============================================
|
|
||||||
// Receiving and forwarding OSC UDP messages
|
|
||||||
// Create an osc.js UDP Port listening on port 57121.
|
|
||||||
console.log("> OSC Input: 127.0.0.1:30000");
|
|
||||||
const wss = new WebSocket.Server({ port: 3001 });
|
|
||||||
var udpPort = new osc.UDPPort({
|
|
||||||
localAddress: "0.0.0.0",
|
|
||||||
localPort: 30000,
|
|
||||||
metadata: true,
|
|
||||||
});
|
|
||||||
udpPort.on("message", function (oscMsg, timeTag, info) {
|
|
||||||
console.log(
|
|
||||||
`> Incoming OSC to ${oscMsg.address}:`,
|
|
||||||
oscMsg.args.map((item) => {
|
|
||||||
return item.value;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
wss.clients.forEach((client) => {
|
|
||||||
if (client.readyState === WebSocket.OPEN) {
|
|
||||||
client.send(JSON.stringify(cleanIncomingOSC(oscMsg)));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
udpPort.open();
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
const WebSocket = require("ws");
|
|
||||||
const osc = require("osc");
|
|
||||||
|
|
||||||
// Listening to WebSocket messages
|
|
||||||
const wss = new WebSocket.Server({ port: 3000 });
|
|
||||||
|
|
||||||
// Setting up for message broadcasting
|
|
||||||
wss.on("connection", function (ws) {
|
|
||||||
console.log("> Client connected");
|
|
||||||
ws.on("message", function (data) {
|
|
||||||
try {
|
|
||||||
const message = JSON.parse(data);
|
|
||||||
sendOscMessage(
|
|
||||||
formatAndTypeMessage(message),
|
|
||||||
message.address,
|
|
||||||
message.port,
|
|
||||||
);
|
|
||||||
console.log(
|
|
||||||
`> Message sent to ${message.address}:${message.port}: ${JSON.stringify(
|
|
||||||
message.args,
|
|
||||||
)}`,
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("> Error processing message:", error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
wss.on("error", function (error) {
|
|
||||||
console.error("> Server error:", error);
|
|
||||||
});
|
|
||||||
|
|
||||||
wss.on("close", function () {
|
|
||||||
// Close the websocket server
|
|
||||||
wss.close();
|
|
||||||
console.log("> Closing websocket server");
|
|
||||||
});
|
|
||||||
|
|
||||||
let udpPort = new osc.UDPPort({
|
|
||||||
localAddress: "0.0.0.0",
|
|
||||||
localPort: 3000,
|
|
||||||
metadata: true,
|
|
||||||
remoteAddress: "0.0.0.0",
|
|
||||||
remotePort: 57120,
|
|
||||||
});
|
|
||||||
udpPort.on("error", function (error) {
|
|
||||||
console.error("> UDP Port error:", error);
|
|
||||||
});
|
|
||||||
udpPort.on("ready", function () {
|
|
||||||
//console.log(`> UDP Receive: ${udpPort.options.localPort}`);
|
|
||||||
console.log("> WebSocket server: 127.0.0.1:3000");
|
|
||||||
});
|
|
||||||
|
|
||||||
udpPort.open();
|
|
||||||
|
|
||||||
function sendOscMessage(message, address, port) {
|
|
||||||
try {
|
|
||||||
udpPort.options.remotePort = port;
|
|
||||||
message.address = address;
|
|
||||||
udpPort.send(message);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("> Error sending OSC message:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatAndTypeMessage = (message) => {
|
|
||||||
let newMessage = {};
|
|
||||||
delete message.args["address"];
|
|
||||||
delete message.args["port"];
|
|
||||||
newMessage.address = message.address;
|
|
||||||
newMessage.timestamp = osc.timeTag(message.timetag);
|
|
||||||
|
|
||||||
args = [...Object.entries(message.args)].flat().map((arg) => {
|
|
||||||
if (typeof arg === "string") return { type: "s", value: arg };
|
|
||||||
if (typeof arg === "number") return { type: "f", value: arg };
|
|
||||||
if (typeof arg === "boolean")
|
|
||||||
return value ? { type: "s", value: 1 } : { type: "s", value: 0 };
|
|
||||||
});
|
|
||||||
|
|
||||||
newMessage.args = args;
|
|
||||||
|
|
||||||
return newMessage;
|
|
||||||
};
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
var pjson = require("./package.json");
|
|
||||||
let banner = `
|
|
||||||
┏┳┓ ┏┓┏┓┏┓
|
|
||||||
┃ ┏┓┏┓┏┓┏ ┃┃┗┓┃
|
|
||||||
┻ ┗┛┣┛┗┛┛ ┗┛┗┛┗┛
|
|
||||||
┛
|
|
||||||
${pjson.version}\n`;
|
|
||||||
function greet() {
|
|
||||||
console.log(banner);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
greet: greet,
|
|
||||||
};
|
|
||||||
332
ToposServer/package-lock.json
generated
332
ToposServer/package-lock.json
generated
@ -1,332 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "topos-server",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"lockfileVersion": 3,
|
|
||||||
"requires": true,
|
|
||||||
"packages": {
|
|
||||||
"": {
|
|
||||||
"name": "topos-server",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"license": "GPL-3.0-or-later",
|
|
||||||
"dependencies": {
|
|
||||||
"osc": "^2.4.4",
|
|
||||||
"ws": "^8.14.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/binding-mock": {
|
|
||||||
"version": "10.2.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/binding-mock/-/binding-mock-10.2.2.tgz",
|
|
||||||
"integrity": "sha512-HAFzGhk9OuFMpuor7aT5G1ChPgn5qSsklTFOTUX72Rl6p0xwcSVsRtG/xaGp6bxpN7fI9D/S8THLBWbBgS6ldw==",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@serialport/bindings-interface": "^1.2.1",
|
|
||||||
"debug": "^4.3.3"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/bindings-cpp": {
|
|
||||||
"version": "10.8.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/bindings-cpp/-/bindings-cpp-10.8.0.tgz",
|
|
||||||
"integrity": "sha512-OMQNJz5kJblbmZN5UgJXLwi2XNtVLxSKmq5VyWuXQVsUIJD4l9UGHnLPqM5LD9u3HPZgDI5w7iYN7gxkQNZJUw==",
|
|
||||||
"hasInstallScript": true,
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@serialport/bindings-interface": "1.2.2",
|
|
||||||
"@serialport/parser-readline": "^10.2.1",
|
|
||||||
"debug": "^4.3.2",
|
|
||||||
"node-addon-api": "^5.0.0",
|
|
||||||
"node-gyp-build": "^4.3.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.17.0 <13.0 || >=14.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/bindings-interface": {
|
|
||||||
"version": "1.2.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/bindings-interface/-/bindings-interface-1.2.2.tgz",
|
|
||||||
"integrity": "sha512-CJaUd5bLvtM9c5dmO9rPBHPXTa9R2UwpkJ0wdh9JCYcbrPWsKz+ErvR0hBLeo7NPeiFdjFO4sonRljiw4d2XiA==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": "^12.22 || ^14.13 || >=16"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-byte-length": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-byte-length/-/parser-byte-length-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-eHhr4lHKboq1OagyaXAqkemQ1XyoqbLQC8XJbvccm95o476TmEdW5d7AElwZV28kWprPW68ZXdGF2VXCkJgS2w==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-cctalk": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-cctalk/-/parser-cctalk-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-Iwsdr03xmCKAiibLSr7b3w6ZUTBNiS+PwbDQXdKU/clutXjuoex83XvsOtYVcNZmwJlVNhAUbkG+FJzWwIa4DA==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-delimiter": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-delimiter/-/parser-delimiter-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-/uR/yT3jmrcwnl2FJU/2ySvwgo5+XpksDUR4NF/nwTS5i3CcuKS+FKi/tLzy1k8F+rCx5JzpiK+koqPqOUWArA==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-inter-byte-timeout": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-inter-byte-timeout/-/parser-inter-byte-timeout-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-WPvVlSx98HmmUF9jjK6y9mMp3Wnv6JQA0cUxLeZBgS74TibOuYG3fuUxUWGJALgAXotOYMxfXSezJ/vSnQrkhQ==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-packet-length": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-packet-length/-/parser-packet-length-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-jkpC/8w4/gUBRa2Teyn7URv1D7T//0lGj27/4u9AojpDVXsR6dtdcTG7b7dNirXDlOrSLvvN7aS5/GNaRlEByw==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8.6.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-readline": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-readline/-/parser-readline-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-0aXJknodcl94W9zSjvU+sLdXiyEG2rqjQmvBWZCr8wJZjWEtv3RgrnYiWq4i2OTOyC8C/oPK8ZjpBjQptRsoJQ==",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@serialport/parser-delimiter": "10.5.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-ready": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-ready/-/parser-ready-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-QIf65LTvUoxqWWHBpgYOL+soldLIIyD1bwuWelukem2yDZVWwEjR288cLQ558BgYxH4U+jLAQahhqoyN1I7BaA==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-regex": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-regex/-/parser-regex-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-9jnr9+PCxRoLjtGs7uxwsFqvho+rxuJlW6ZWSB7oqfzshEZWXtTJgJRgac/RuLft4hRlrmRz5XU40i3uoL4HKw==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-slip-encoder": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-slip-encoder/-/parser-slip-encoder-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-wP8m+uXQdkWSa//3n+VvfjLthlabwd9NiG6kegf0fYweLWio8j4pJRL7t9eTh2Lbc7zdxuO0r8ducFzO0m8CQw==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/parser-spacepacket": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/parser-spacepacket/-/parser-spacepacket-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-BEZ/HAEMwOd8xfuJSeI/823IR/jtnThovh7ils90rXD4DPL1ZmrP4abAIEktwe42RobZjIPfA4PaVfyO0Fjfhg==",
|
|
||||||
"optional": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@serialport/stream": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@serialport/stream/-/stream-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-gbcUdvq9Kyv2HsnywS7QjnEB28g+6OGB5Z8TLP7X+UPpoMIWoUsoQIq5Kt0ZTgMoWn3JGM2lqwTsSHF+1qhniA==",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@serialport/bindings-interface": "1.2.2",
|
|
||||||
"debug": "^4.3.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/debug": {
|
|
||||||
"version": "4.3.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
|
||||||
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"ms": "2.1.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6.0"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"supports-color": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/long": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
|
|
||||||
},
|
|
||||||
"node_modules/ms": {
|
|
||||||
"version": "2.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
|
||||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"node_modules/node-addon-api": {
|
|
||||||
"version": "5.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
|
|
||||||
"integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"node_modules/node-gyp-build": {
|
|
||||||
"version": "4.7.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.7.0.tgz",
|
|
||||||
"integrity": "sha512-PbZERfeFdrHQOOXiAKOY0VPbykZy90ndPKk0d+CFDegTKmWp1VgOTz2xACVbr1BjCWxrQp68CXtvNsveFhqDJg==",
|
|
||||||
"optional": true,
|
|
||||||
"bin": {
|
|
||||||
"node-gyp-build": "bin.js",
|
|
||||||
"node-gyp-build-optional": "optional.js",
|
|
||||||
"node-gyp-build-test": "build-test.js"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/osc": {
|
|
||||||
"version": "2.4.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/osc/-/osc-2.4.4.tgz",
|
|
||||||
"integrity": "sha512-YJr2bUCQMc9BIaq1LXgqYpt5Ii7wNy2n0e0BkQiCSziMNrrsYHhH5OlExNBgCrQsum60EgXZ32lFsvR4aUf+ew==",
|
|
||||||
"dependencies": {
|
|
||||||
"long": "4.0.0",
|
|
||||||
"slip": "1.0.2",
|
|
||||||
"wolfy87-eventemitter": "5.2.9",
|
|
||||||
"ws": "8.13.0"
|
|
||||||
},
|
|
||||||
"optionalDependencies": {
|
|
||||||
"serialport": "10.5.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/osc/node_modules/ws": {
|
|
||||||
"version": "8.13.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
|
|
||||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10.0.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"bufferutil": "^4.0.1",
|
|
||||||
"utf-8-validate": ">=5.0.2"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"bufferutil": {
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"utf-8-validate": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/serialport": {
|
|
||||||
"version": "10.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/serialport/-/serialport-10.5.0.tgz",
|
|
||||||
"integrity": "sha512-7OYLDsu5i6bbv3lU81pGy076xe0JwpK6b49G6RjNvGibstUqQkI+I3/X491yBGtf4gaqUdOgoU1/5KZ/XxL4dw==",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@serialport/binding-mock": "10.2.2",
|
|
||||||
"@serialport/bindings-cpp": "10.8.0",
|
|
||||||
"@serialport/parser-byte-length": "10.5.0",
|
|
||||||
"@serialport/parser-cctalk": "10.5.0",
|
|
||||||
"@serialport/parser-delimiter": "10.5.0",
|
|
||||||
"@serialport/parser-inter-byte-timeout": "10.5.0",
|
|
||||||
"@serialport/parser-packet-length": "10.5.0",
|
|
||||||
"@serialport/parser-readline": "10.5.0",
|
|
||||||
"@serialport/parser-ready": "10.5.0",
|
|
||||||
"@serialport/parser-regex": "10.5.0",
|
|
||||||
"@serialport/parser-slip-encoder": "10.5.0",
|
|
||||||
"@serialport/parser-spacepacket": "10.5.0",
|
|
||||||
"@serialport/stream": "10.5.0",
|
|
||||||
"debug": "^4.3.3"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://opencollective.com/serialport/donate"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/slip": {
|
|
||||||
"version": "1.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/slip/-/slip-1.0.2.tgz",
|
|
||||||
"integrity": "sha512-XrcHe3NAcyD3wO+O4I13RcS4/3AF+S9RvGNj9JhJeS02HyImwD2E3QWLrmn9hBfL+fB6yapagwxRkeyYzhk98g=="
|
|
||||||
},
|
|
||||||
"node_modules/wolfy87-eventemitter": {
|
|
||||||
"version": "5.2.9",
|
|
||||||
"resolved": "https://registry.npmjs.org/wolfy87-eventemitter/-/wolfy87-eventemitter-5.2.9.tgz",
|
|
||||||
"integrity": "sha512-P+6vtWyuDw+MB01X7UeF8TaHBvbCovf4HPEMF/SV7BdDc1SMTiBy13SRD71lQh4ExFTG1d/WNzDGDCyOKSMblw=="
|
|
||||||
},
|
|
||||||
"node_modules/ws": {
|
|
||||||
"version": "8.14.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
|
|
||||||
"integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10.0.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"bufferutil": "^4.0.1",
|
|
||||||
"utf-8-validate": ">=5.0.2"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"bufferutil": {
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"utf-8-validate": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "topos-server",
|
|
||||||
"version": "0.0.1",
|
|
||||||
"description": "Topos OSC Server",
|
|
||||||
"main": "index.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "Raphaël Forment",
|
|
||||||
"license": "GPL-3.0-or-later",
|
|
||||||
"dependencies": {
|
|
||||||
"osc": "^2.4.4",
|
|
||||||
"ws": "^8.14.2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
const WebSocket = require("ws");
|
|
||||||
const osc = require("osc");
|
|
||||||
|
|
||||||
require("./banner").greet();
|
|
||||||
// Topos to OSC
|
|
||||||
require("./ToposToOSC");
|
|
||||||
// OSC to Topos
|
|
||||||
require("./OSCtoTopos");
|
|
||||||
@ -1,9 +1,9 @@
|
|||||||
version: "3.7"
|
version: '3.7'
|
||||||
services:
|
services:
|
||||||
topos-dev:
|
topos-dev:
|
||||||
container_name: topos-dev
|
container_name: topos-dev
|
||||||
profiles: ["dev"]
|
profiles: ["dev"]
|
||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
target: "dev"
|
target: "dev"
|
||||||
volumes:
|
volumes:
|
||||||
@ -21,8 +21,8 @@ services:
|
|||||||
topos-prod:
|
topos-prod:
|
||||||
container_name: topos-prod
|
container_name: topos-prod
|
||||||
profiles: ["prod"]
|
profiles: ["prod"]
|
||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
target: "prod"
|
target: "prod"
|
||||||
ports:
|
ports:
|
||||||
- "8001:80"
|
- "8001:80"
|
||||||
@ -1,19 +1,19 @@
|
|||||||
{
|
{
|
||||||
"name": "",
|
"name": "",
|
||||||
"short_name": "",
|
"short_name": "",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "/android-chrome-192x192.png",
|
"src": "/android-chrome-192x192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/android-chrome-512x512.png",
|
"src": "/android-chrome-512x512.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"theme_color": "#ffffff",
|
"theme_color": "#ffffff",
|
||||||
"background_color": "#ffffff",
|
"background_color": "#ffffff",
|
||||||
"display": "standalone"
|
"display": "standalone"
|
||||||
}
|
}
|
||||||
|
|||||||
131
fonts/index.css
131
fonts/index.css
@ -1,8 +1,7 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "IBM Plex Mono";
|
font-family: "IBM Plex Mono";
|
||||||
src:
|
src: url("woff2/IBMPlexMono-Regular.woff2") format("woff2"),
|
||||||
url("woff2/IBMPlexMono-Regular.woff2") format("woff2"),
|
url("woff/IBMPlexMono-Regular.woff") format("woff");
|
||||||
url("woff/IBMPlexMono-Regular.woff") format("woff");
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
@ -10,9 +9,8 @@
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "IBM PLex Mono";
|
font-family: "IBM PLex Mono";
|
||||||
src:
|
src: url("woff2/IBMPlexMono-Italic.woff2") format("woff2"),
|
||||||
url("woff2/IBMPlexMono-Italic.woff2") format("woff2"),
|
url("woff/IBMPlexMono-Italic.woff") format("woff");
|
||||||
url("woff/IBMPlexMono-Italic.woff") format("woff");
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
@ -20,9 +18,8 @@
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "IBM PLex Mono";
|
font-family: "IBM PLex Mono";
|
||||||
src:
|
src: url("woff2/IBMPlexMono-Bold.woff2") format("woff2"),
|
||||||
url("woff2/IBMPlexMono-Bold.woff2") format("woff2"),
|
url("woff/IBMPlexMono-Bold.woff") format("woff");
|
||||||
url("woff/IBMPlexMono-Bold.woff") format("woff");
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
@ -30,9 +27,8 @@
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "IBM Plex Mono";
|
font-family: "IBM Plex Mono";
|
||||||
src:
|
src: url("woff2/IBMPlexMono-BoldItalic.woff2") format("woff2"),
|
||||||
url("woff2/IBMPlexMono-BoldItalic.woff2") format("woff2"),
|
url("woff/IBMPlexMono-BoldItalic.woff") format("woff");
|
||||||
url("woff/IBMPlexMono-BoldItalic.woff") format("woff");
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
@ -41,85 +37,84 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Comic Mono";
|
font-family: "Comic Mono";
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
src:
|
src: url(./woff/ComicMono.woff) format("woff"),
|
||||||
url(./woff/ComicMono.woff) format("woff"),
|
url(./woff2/ComicMono.woff2) format("wooff2");
|
||||||
url(./woff2/ComicMono.woff2) format("wooff2");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Comic Mono";
|
font-family: "Comic Mono";
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
src:
|
src: url(./woff/ComicMono-Bold.woff) format("woff"),
|
||||||
url(./woff/ComicMono-Bold.woff) format("woff"),
|
url(./woff/ComicMono-Bold.woff2) format("woff2"),
|
||||||
url(./woff/ComicMono-Bold.woff2) format("woff2");
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'jgs7';
|
||||||
|
src: url('./woff2/jgs7.woff2') format('woff2'),
|
||||||
|
url('./woff/jgs7.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "jgs7";
|
font-family: 'jgs5';
|
||||||
src:
|
src: url('./woff2/jgs5.woff2') format('woff2'),
|
||||||
url("./woff2/jgs7.woff2") format("woff2"),
|
url('./woff/jgs5.woff') format('woff');
|
||||||
url("./woff/jgs7.woff") format("woff");
|
font-weight: normal;
|
||||||
font-weight: normal;
|
font-style: normal;
|
||||||
font-style: normal;
|
font-display: swap;
|
||||||
font-display: swap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "jgs5";
|
font-family: 'jgs9';
|
||||||
src:
|
src: url('./woff2/jgs9.woff2') format('woff2'),
|
||||||
url("./woff2/jgs5.woff2") format("woff2"),
|
url('./woff/jgs9.woff') format('woff');
|
||||||
url("./woff/jgs5.woff") format("woff");
|
font-weight: normal;
|
||||||
font-weight: normal;
|
font-style: normal;
|
||||||
font-style: normal;
|
font-display: swap;
|
||||||
font-display: swap;
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'jgs_vecto';
|
||||||
|
src: url('./woff2/jgs_vecto.woff2') format('woff2');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "jgs9";
|
font-family: 'Steps Mono';
|
||||||
src:
|
src: url('./woff2/Steps-Mono.woff2') format('woff2');
|
||||||
url("./woff2/jgs9.woff2") format("woff2"),
|
font-weight: normal;
|
||||||
url("./woff/jgs9.woff") format("woff");
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-display: swap;
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "jgs_vecto";
|
font-family: 'Steps Mono Thin';
|
||||||
src: url("./woff2/jgs_vecto.woff2") format("woff2");
|
src: url('./woff2/Steps-Mono-Thin.woff2') format('woff2');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Steps Mono";
|
|
||||||
src: url("./woff2/Steps-Mono.woff2") format("woff2");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Steps Mono Thin";
|
font-family: 'Jet Brains';
|
||||||
src: url("./woff2/Steps-Mono-Thin.woff2") format("woff2");
|
src: url('./woff2/JetBrainsMono-Regular.woff2') format('woff2');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Jet Brains";
|
|
||||||
src: url("./woff2/JetBrainsMono-Regular.woff2") format("woff2");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Jet Brains";
|
font-family: 'Jet Brains';
|
||||||
src: url("./woff2/JetBrainsMono-Bold.woff2") format("woff2");
|
src: url('./woff2/JetBrainsMono-Bold.woff2') format('woff2');
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|||||||
425
index.html
425
index.html
@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
@ -11,13 +11,15 @@
|
|||||||
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
|
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||||||
<meta name="msapplication-TileColor" content="#da532c">
|
<meta name="msapplication-TileColor" content="#da532c">
|
||||||
<meta name="theme-color" content="#ffffff">
|
<meta name="theme-color" content="#ffffff">
|
||||||
<link rel="stylesheet" href='/fonts/index.css' >
|
|
||||||
<link rel="stylesheet" href="/src/output.css" />
|
<link rel="stylesheet" href="/src/output.css" />
|
||||||
|
<link rel="stylesheet" href='/fonts/index.css' >
|
||||||
<script src="https://unpkg.com/hydra-synth"></script>
|
<script src="https://unpkg.com/hydra-synth"></script>
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Arial";
|
font-family: "Arial";
|
||||||
|
background-color: #111827;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
@ -26,10 +28,11 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fluid-transition {
|
.fluid-bg-transition {
|
||||||
transition: background-color 0.05s ease-in-out;
|
transition: background-color 0.05s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.fullscreencanvas {
|
.fullscreencanvas {
|
||||||
position: fixed; /* ignore margins */
|
position: fixed; /* ignore margins */
|
||||||
top: 0px;
|
top: 0px;
|
||||||
@ -63,89 +66,60 @@
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar_button {
|
|
||||||
@apply mx-2 px-2 py-2 flex inline rounded-lg bg-background text-foreground hover:bg-foreground hover:text-background
|
|
||||||
}
|
|
||||||
|
|
||||||
.side_button {
|
|
||||||
@apply px-2 py-2 bg-background text-foreground rounded-lg hover:bg-foreground hover:text-background
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
@apply bg-selection_foreground text-sm lg:text-xl border-b py-4 text-foreground
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab_panel {
|
|
||||||
@apply inline-block lg:px-4 px-8 py-1 text-brightwhite
|
|
||||||
}
|
|
||||||
|
|
||||||
.doc_header {
|
|
||||||
@apply pl-2 pr-2 lg:text-xl text-sm py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
|
||||||
}
|
|
||||||
|
|
||||||
.doc_subheader {
|
|
||||||
@apply pl-2 pr-2 lg:text-xl text-sm ml-6 py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
<body id="all" class="z-0 bg-neutral-800 overflow-y-hidden">
|
||||||
|
|
||||||
<body id="all" class="z-0 overflow-y-hidden bg-black">
|
|
||||||
<!-- The header is hidden on smaller devices -->
|
<!-- The header is hidden on smaller devices -->
|
||||||
<header class="py-0 block">
|
<header class="py-0 block text-white bg-neutral-900">
|
||||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background">
|
<div class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
|
||||||
<a class="flex title-font font-medium items-center mb-0">
|
<a class="flex title-font font-medium items-center text-black mb-0">
|
||||||
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/>
|
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 bg-white rounded-full" alt="Topos Frog Logo" />
|
||||||
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-brightwhite placeholder-brightwhite" id="renamer" type="text" placeholder="Topos">
|
<input id="universe-viewer" class="hidden bg-transparent xl:block ml-4 text-2xl text-white placeholder-white" id="renamer" type="text" placeholder="Topos">
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
|
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
|
||||||
<!-- Play Button -->
|
<a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||||
<a title="Play button (Ctrl+P)" id="play-button-1" class="bar_button">
|
|
||||||
<svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
|
<svg id="play-icon" class="w-7 h-7" 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"/>
|
<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"/>
|
||||||
</svg>
|
</svg>
|
||||||
<svg id="pause-icon" class="hidden w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
<svg id="pause-icon" class="hidden w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
<p id="play-label" class="hidden lg:block text-xl pl-2 inline-block">Play</p>
|
<p id="play-label" class="hidden lg:block text-xl pl-2 text-white inline-block">Play</p>
|
||||||
</a>
|
</a>
|
||||||
|
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||||
<!-- Stop button -->
|
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="bar_button">
|
|
||||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
|
||||||
<rect x="6.5" y="6.5" width="7" height="7" fill="selection_background" rx="1" ry="1"/>
|
<rect x="6.5" y="6.5" width="7" height="7" fill="black" rx="1" ry="1"/>
|
||||||
</svg>
|
</svg>
|
||||||
<p class="hidden lg:block text-xl pl-2 inline-block">Stop</p>
|
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Stop</p>
|
||||||
</a>
|
</a>
|
||||||
|
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||||
<!-- Eval button -->
|
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
||||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="bar_button">
|
|
||||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
|
||||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
|
||||||
</svg>
|
</svg>
|
||||||
<p class="hidden lg:block text-xl pl-2 inline-block">Eval</p>
|
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Eval</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a title="Clear button" id="clear-button-1" class="bar_button">
|
<a title="Clear button" id="clear-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||||
<path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
|
<path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
<p class="hidden lg:block text-xl pl-2 inline-block">Clear</p>
|
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Clear</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a title="Share button" id="share-button" class="bar_button">
|
<a title="Share button" id="share-button" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
||||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
|
||||||
</svg>
|
</svg>
|
||||||
<p class="hidden lg:block text-xl pl-2 inline-block">Share</p>
|
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Share</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="bar_button">
|
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="flex flex-row hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
<p class="hidden lg:block text-xl pl-2 inline-block">Docs</p>
|
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Docs</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
@ -154,133 +128,121 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="documentation" class="hidden">
|
<div id="documentation" class="hidden">
|
||||||
<div id="documentation-page" class="flex flex-row transparent">
|
<div id="documentation-page" class="flex flex-row">
|
||||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-background">
|
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-neutral-900 text-white">
|
||||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-background">
|
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
|
||||||
<details class="" open>
|
<details class="" open=true>
|
||||||
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
|
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<p rel="noopener noreferrer" id="docs_introduction" class="doc_header">Welcome </p>
|
<p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Welcome </p>
|
||||||
<p rel="noopener noreferrer" id="docs_interface" class="doc_header">Interface</p>
|
<p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
|
||||||
<p rel="noopener noreferrer" id="docs_interaction" class="doc_header">Interaction</p>
|
<p rel="noopener noreferrer" id="docs_interaction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interaction</p>
|
||||||
<p rel="noopener noreferrer" id="docs_shortcuts" class="doc_header">Keyboard</p>
|
<p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Keyboard</p>
|
||||||
<p rel="noopener noreferrer" id="docs_mouse" class="doc_header">Mouse</p>
|
<p rel="noopener noreferrer" id="docs_mouse" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Mouse</p>
|
||||||
<p rel="noopener noreferrer" id="docs_code" class="doc_header">Coding</p>
|
<p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Coding</p>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details class="space-y-2" open>
|
<details class="space-y-2" open=true>
|
||||||
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
|
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<!-- Time -->
|
|
||||||
<details class="space-y-2">
|
|
||||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Time</summary>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<p rel="noopener noreferrer" id="docs_time" class="doc_subheader">Dealing with time</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_linear" class="doc_subheader">Time & Transport</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_cyclic" class="doc_subheader">Time & Cycles</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_longform" class="doc_subheader">Time & Structure</p>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<!-- Audio Engine -->
|
<!-- Time -->
|
||||||
<details class="space-y-2">
|
<details class="space-y-2" open=false>
|
||||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Audio Engine</summary>
|
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Time</summary>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<p rel="noopener noreferrer" id="docs_audio_basics" class="doc_subheader">Playing a sound</p>
|
<p rel="noopener noreferrer" id="docs_time" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Dealing with time</p>
|
||||||
<p rel="noopener noreferrer" id="docs_amplitude" class="doc_subheader">Amplitude</p>
|
<p rel="noopener noreferrer" id="docs_linear" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Transport</p>
|
||||||
<p rel="noopener noreferrer" id="docs_sampler" class="doc_subheader">Sampler</p>
|
<p rel="noopener noreferrer" id="docs_cyclic" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Cycles</p>
|
||||||
<p rel="noopener noreferrer" id="docs_synths" class="doc_subheader">Synths</p>
|
<p rel="noopener noreferrer" id="docs_longform" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Structure</p>
|
||||||
<p rel="noopener noreferrer" id="docs_filters" class="doc_subheader">Filters</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_effects" class="doc_subheader">Effects</p>
|
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<!-- Samples -->
|
<!-- Samples -->
|
||||||
<details class="space-y-2">
|
<details class="space-y-2" open=false>
|
||||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header ">Samples</summary>
|
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Audio Engine</summary>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<p rel="noopener noreferrer" id="docs_sample_list" class="doc_subheader">List of samples</p>
|
<p rel="noopener noreferrer" id="docs_audio_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Playing a sound</p>
|
||||||
<p rel="noopener noreferrer" id="docs_loading_samples" class="doc_subheader">External samples</p>
|
<p rel="noopener noreferrer" id="docs_amplitude" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Amplitude</p>
|
||||||
|
<p rel="noopener noreferrer" id="docs_sampler" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Sampler</p>
|
||||||
|
<p rel="noopener noreferrer" id="docs_synths" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synths</p>
|
||||||
|
<p rel="noopener noreferrer" id="docs_reverb_delay" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Effects</p>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<p rel="noopener noreferrer" id="docs_midi" class="doc_header">MIDI</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_osc" class="doc_header">OSC</p>
|
<!-- Audio Engine -->
|
||||||
|
<details class="space-y-2" open=false>
|
||||||
|
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Samples</summary>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<p rel="noopener noreferrer" id="docs_sample_list" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">List of samples</p>
|
||||||
|
<p rel="noopener noreferrer" id="docs_loading_samples" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Loading Samples</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Patterns</p>
|
||||||
|
<p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details class="space-y-2" open>
|
<details class="space-y-2" open=true>
|
||||||
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
|
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
|
|
||||||
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg doc_header">Array patterns</p>
|
<p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Global Variables</p>
|
||||||
<!-- Ziffers -->
|
<p rel="noopener noreferrer" id="docs_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Low Freq Oscs.</p>
|
||||||
<details class="space-y-2">
|
<p rel="noopener noreferrer" id="docs_probabilities" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Probabilities</p>
|
||||||
<summary class="doc_header">Ziffers</summary>
|
<p rel="noopener noreferrer" id="docs_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Chaining</p>
|
||||||
<div class="flex flex-col">
|
<p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>
|
||||||
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="doc_subheader">Basics</p>
|
<p rel="noopener noreferrer" id="docs_ziffers" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Ziffers</p>
|
||||||
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="doc_subheader">Scales</p>
|
<!--
|
||||||
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="doc_subheader">Rhythm</p>
|
<p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
|
||||||
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="doc_subheader">Algorithmic</p>
|
-->
|
||||||
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="doc_subheader">Tonnetz</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_ziffers_syncing" class="doc_subheader">Syncing</p>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
<p rel="noopener noreferrer" id="docs_variables" class="doc_header">Global Variables</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_lfos" class="doc_header">Low Freq Oscs.</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_probabilities" class="doc_header">Probabilities</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_chaining" class="doc_header">Chaining</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_functions" class="doc_header">Functions</p>
|
|
||||||
<p rel="noopener noreferrer" id="docs_generators" class="doc_header">Generators</p>
|
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details class="space-y-2" open>
|
<details class="space-y-2" open=true>
|
||||||
<summary class="font-semibold lg:text-xl doc_header">More</summary>
|
<summary class="font-semibold lg:text-xl text-orange-300">More</summary>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<a rel="noopener noreferrer" id="docs_synchronisation" class="doc_subheader">Synchronisation</a>
|
<a rel="noopener noreferrer" id="docs_synchronisation" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synchronisation</a>
|
||||||
<a rel="noopener noreferrer" id="docs_oscilloscope" class="doc_subheader">Oscilloscope</a>
|
<a rel="noopener noreferrer" id="docs_oscilloscope" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Oscilloscope</a>
|
||||||
<a rel="noopener noreferrer" id="docs_bonus" class="doc_header">Bonus/Trivia</a>
|
<a rel="noopener noreferrer" id="docs_bonus" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Bonus/Trivia</a>
|
||||||
<a rel="noopener noreferrer" id="docs_about" class="doc_header">About Topos</a>
|
<a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details class="" open>
|
<details class="" open=true>
|
||||||
<summary class="font-semibold lg:text-xl text-orange-300">Community</summary>
|
<summary class="font-semibold lg:text-xl text-orange-300">Community</summary>
|
||||||
<form action="https://github.com/Bubobubobubobubo/topos">
|
<form action="https://github.com/Bubobubobubobubo/topos">
|
||||||
<input rel="noopener noreferrer" id="github_link" class="doc_header" type="submit" value="GitHub" />
|
<input rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="GitHub" />
|
||||||
</form>
|
</form>
|
||||||
<form action="https://discord.gg/6T67DqBNNT">
|
<form action="https://discord.gg/6T67DqBNNT">
|
||||||
<input rel="noopener noreferrer" id="discord_link" class="doc_header" type="submit" value="Discord" />
|
<input rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="Discord" />
|
||||||
</form>
|
|
||||||
<form action="https://ko-fi.com/raphaelbubo">
|
|
||||||
<input rel="noopener noreferrer" id="support_link" class="doc_header" type="submit" value="Support" />
|
|
||||||
</form>
|
</form>
|
||||||
</details>
|
</details>
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 transparent"></div>
|
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<!-- This modal is used for switching between buffers -->
|
<!-- This modal is used for switching between buffers -->
|
||||||
<div id="modal-buffers" class="invisible flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
<div id="modal-buffers" class="invisible bg-gray-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||||
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
|
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-white">
|
||||||
<p class="text-semibold lg:text-2xl text-sm pb-4 text-selection_foreground">Known universes</p>
|
<p class="text-semibold lg:text-2xl text-sm pb-4">Known universes</p>
|
||||||
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
|
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
|
||||||
<div id="disclaimer" class="pb-4">
|
<div id="disclaimer" class="pb-4">
|
||||||
<form id="universe-creator">
|
<form id="universe-creator">
|
||||||
<label for="search" class="mb-2 text-sm font-medium sr-only ">Search</label>
|
<label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only text-white">Search</label>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||||
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
<svg class="w-4 h-4 text-gray-500 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg neutral-800 " placeholder="Buffer..." required>
|
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg bg-neutral-800 text-white" placeholder="Buffer..." required>
|
||||||
<button id="load-universe-button" class="bg-background text-selection_background absolute right-2.5 bottom-2.5 focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
|
<button id="load-universe-button" class="text-black absolute right-2.5 bottom-2.5 bg-white hover:bg-white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div class="mt-2 flex space-x-6 border-t rounded-b border-spacing-y-4">
|
<div class="mt-2 flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 border-spacing-y-4">
|
||||||
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-background text-selection_background">Close</button>
|
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 hover:bg-neutral-700 bg-neutral-800 text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Close</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -289,26 +251,29 @@
|
|||||||
|
|
||||||
<!-- This modal is used for settings -->
|
<!-- This modal is used for settings -->
|
||||||
<div id="modal-settings" class="invisible flex
|
<div id="modal-settings" class="invisible flex
|
||||||
absolute lg:justify-center lg:items-center
|
absolute lg:justify-center lg:items-center
|
||||||
lg:overflow-y-auto lg:overflow-x-auto
|
lg:overflow-y-auto lg:overflow-x-auto
|
||||||
overflow-y-scroll owerflow-x-scroll
|
overflow-y-scroll owerflow-x-scroll
|
||||||
md:top-0 md:bottom-0 h-screen w-full"
|
md:top-0 md:bottom-0 h-screen w-full"
|
||||||
>
|
>
|
||||||
<div class="grid w-full grid-col-3">
|
<div class="grid w-full grid-col-3">
|
||||||
<div class="white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8 bg-foreground">
|
<div class="bg-white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8">
|
||||||
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg justify-center lg:text-center lg:pl-0 pl-8 mx-4 subtitle">Topos Application Settings</h1>
|
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg
|
||||||
|
bg-gray-800 justify-center lg:text-center lg:pl-0 pl-8 text-white mx-4
|
||||||
|
text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
|
||||||
<div class="flex lg:flex-row flex-col mr-4 ml-4">
|
<div class="flex lg:flex-row flex-col mr-4 ml-4">
|
||||||
<!-- Font Size Selection -->
|
<!-- Font Size Selection -->
|
||||||
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
<div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4 text-selection_background">Theme Settings</p>
|
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4">Font Settings</p>
|
||||||
<div class="mb-6 mx-4 font-semibold">
|
<div class="mb-6 mx-4 font-semibold">
|
||||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm text-foreground">Size:</label>
|
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label>
|
||||||
<input type="text" id="font-size-input" type="number" class="border
|
<input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900
|
||||||
text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 focus:border-blue-500">
|
text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700
|
||||||
|
dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||||
</div>
|
</div>
|
||||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Font:</label>
|
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm">Font:</label>
|
||||||
<select id="font-family" class=" ml-4 border mb-2
|
<select id="font-family" class="bg-gray-50 ml-4 border border-gray-300 mb-2
|
||||||
text-sm rounded-lg focus:border-blue-500 block p-2.5">
|
text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
|
||||||
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
||||||
<option value="Jet Brains">Jet Brains</option>
|
<option value="Jet Brains">Jet Brains</option>
|
||||||
<option value="Courier">Courier</option>
|
<option value="Courier">Courier</option>
|
||||||
@ -320,199 +285,186 @@
|
|||||||
<option value="Steps Mono">Steps Mono</option>
|
<option value="Steps Mono">Steps Mono</option>
|
||||||
<option value="Steps Mono Thin">Steps Mono Thin</option>
|
<option value="Steps Mono Thin">Steps Mono Thin</option>
|
||||||
</select>
|
</select>
|
||||||
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
|
||||||
<label for="theme" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Theme:</label>
|
|
||||||
<select id="theme-selector" class="ml-4 border mb-2
|
|
||||||
text-sm rounded-lg block p-2.5">
|
|
||||||
</select>
|
|
||||||
<div id="theme-previewer"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Editor mode selection -->
|
<!-- Editor mode selection -->
|
||||||
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Editor options</p>
|
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p>
|
||||||
<!-- Checkboxes -->
|
<!-- Checkboxes -->
|
||||||
<div class="pr-4">
|
<div class="pr-4">
|
||||||
<div class="flex items-center mb-4 ml-5">
|
<div class="flex items-center mb-4 ml-5">
|
||||||
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
|
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-selection_background">Vim Mode</label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Vim Mode</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center mb-4 ml-5">
|
<div class="flex items-center mb-4 ml-5">
|
||||||
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Line Numbers</label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center mb-4 ml-5">
|
<div class="flex items-center mb-4 ml-5">
|
||||||
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Time Position</label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Time Position</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center mb-4 ml-5">
|
<div class="flex items-center mb-4 ml-5">
|
||||||
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Hovering Tips</label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center mb-4 ml-5">
|
<div class="flex items-center mb-4 ml-5">
|
||||||
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Completions</label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Completions</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center mb-4 ml-5">
|
<div class="flex items-center mb-4 ml-5">
|
||||||
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
|
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Load Demo Song</label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">File Management</p>
|
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p>
|
||||||
<div class="flex flex-col space-y-2 pb-2">
|
<div class="flex flex-col space-y-2 pb-2">
|
||||||
<button id="download-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
<button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||||
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||||
<span class="text-selection_foreground">Download universes</span>
|
<span>Download universes</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="upload-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
<button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||||
<span class="text-selection_foreground">Upload universes</span>
|
<span>Upload universes</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="destroy-universes" class="bg-brightwhite font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
<button id="destroy-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span class="text-selection_foreground">Destroy universes</span>
|
<span>Destroy universes</span>
|
||||||
</button>
|
</button>
|
||||||
<!-- Upload audio samples -->
|
|
||||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-2 pt-2 underline underline-offset-4 text-selection_background">Audio samples</p>
|
|
||||||
|
|
||||||
<label class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
|
||||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
|
||||||
<input id="upload-samples" type="file" class="hidden" accept="file" webkitdirectory directory multiple>
|
|
||||||
<span id="sample-indicator" class="text-selection_foreground">Import samples</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Midi settings -->
|
<!-- Midi settings -->
|
||||||
<div id="midi-settings-container" class="rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4 bg-color bg-selection_foreground">
|
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4">
|
||||||
<div class="lg:flex lg:flex-row w-fit">
|
<div class="lg:flex lg:flex-row w-fit">
|
||||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">MIDI I/O Settings</p>
|
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
|
||||||
<div class="flex items-center mb-4 ml-6">
|
<div class="flex items-center mb-4 ml-6">
|
||||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">MIDI Clock: </label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI Clock: </label>
|
||||||
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||||
<option value="-1">Internal</option>
|
<option value="-1">Internal</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="lg:flex block items-center mb-4 ml-6">
|
<div class="lg:flex block items-center mb-4 ml-6">
|
||||||
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">Clock PPQN: </label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Clock PPQN: </label>
|
||||||
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||||
<option value="24">24</option>
|
<option value="24">24</option>
|
||||||
<option value="48">48</option>
|
<option value="48">48</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="lg:flex block items-center mb-4 ml-6">
|
<div class="lg:flex block items-center mb-4 ml-6">
|
||||||
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Send MIDI Clock</label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Send MIDI Clock</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="lg:flex block flex-row">
|
<div class="lg:flex block flex-row">
|
||||||
<div class="flex items-center mb-4 ml-6">
|
<div class="flex items-center mb-4 ml-6">
|
||||||
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">MIDI input: </label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI input: </label>
|
||||||
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600 focus:ring-2">
|
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||||
<option value="-1">None</option>
|
<option value="-1">None</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="lg:flex block items-center mb-4 ml-6">
|
<div class="lg:flex block items-center mb-4 ml-6">
|
||||||
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600">
|
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Route channels to scripts</label>
|
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Route channels to scripts</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Audio nudge slider -->
|
<!-- Audio nudge slider -->
|
||||||
<div id="midi-settings-container" class="rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2 bg-selection_foreground">
|
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2">
|
||||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Audio/Event Nudging</p> <div class="flex flex-column pb-2">
|
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p>
|
||||||
<p class="pt-0.5 ml-4 text-foreground">Clock:</p>
|
<div class="flex flex-column pb-2">
|
||||||
|
<p class="pt-0.5 ml-4">Clock:</p>
|
||||||
<input
|
<input
|
||||||
type="range" id="audio_nudge"
|
type="range" id="audio_nudge"
|
||||||
name="audiorangeInput"
|
name="audiorangeInput"
|
||||||
min="-200" max="200"
|
min="-200" max="200"
|
||||||
value="0"
|
value="0"
|
||||||
class="w-full ml-4 text-red"
|
class="w-full ml-4"
|
||||||
oninput="nudgenumber.value=audio_nudge.value"
|
oninput="nudgenumber.value=audio_nudge.value"
|
||||||
>
|
>
|
||||||
<output
|
<output
|
||||||
name="nudgenumber"
|
name="nudgenumber"
|
||||||
id="nudgenumber"
|
id="nudgenumber"
|
||||||
for="audiorangeInput"
|
for="audiorangeInput"
|
||||||
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white"
|
||||||
>0</output>
|
>0</output>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-column">
|
<div class="flex flex-column">
|
||||||
|
|
||||||
<p class="pt-0.5 ml-4 text-foreground">Audio:</p>
|
<p class="pt-0.5 ml-4">Audio:</p>
|
||||||
<input
|
<input
|
||||||
type="range" id="dough_nudge"
|
type="range" id="dough_nudge"
|
||||||
name="doughrangeInput"
|
name="doughrangeInput"
|
||||||
min="0" max="100"
|
min="0" max="100"
|
||||||
value="0"
|
value="0"
|
||||||
class="w-full ml-4 text-foreground"
|
class="w-full ml-4"
|
||||||
oninput="doughnumber.value=dough_nudge.value"
|
oninput="doughnumber.value=dough_nudge.value"
|
||||||
>
|
>
|
||||||
<output
|
<output
|
||||||
name="doughnumber"
|
name="doughnumber"
|
||||||
id="doughnumber"
|
id="doughnumber"
|
||||||
for="doughrangeInput"
|
for="doughrangeInput"
|
||||||
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white"
|
||||||
>0</output>
|
>0</output>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex space-x-6 border-t rounded-b mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
||||||
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
|
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
|
||||||
hover:bg-background bg-background mt-4 mb-4 focus:ring-4
|
hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4
|
||||||
font-medium rounded-lg text-sm px-5 py-2.5 text-center text-selection_background">OK</button>
|
font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row max-h-fit">
|
<div class="flex flex-row max-h-fit">
|
||||||
|
|
||||||
<!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
|
<!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
|
||||||
<aside id="sidebar" class="
|
<aside class="
|
||||||
flex flex-col items-center w-14
|
flex flex-col items-center w-14
|
||||||
h-screen py-2 border-r
|
h-screen py-2 border-r
|
||||||
rtl:border-l max-h-fit
|
rtl:border-l max-h-fit
|
||||||
rtl:border-r-0 bg-background
|
rtl:border-r-0 bg-neutral-900
|
||||||
border-neutral-700 border-none"
|
dark:border-neutral-700 border-none"
|
||||||
>
|
>
|
||||||
<nav class="flex flex-col space-y-6">
|
<nav class="flex flex-col space-y-6">
|
||||||
<a title="Local Scripts (Ctrl + L)" id="local-button" class="side_button">
|
<a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||||
<path d="M18 5H0v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5Zm-7.258-2L9.092.8a2.009 2.009 0 0 0-1.6-.8H2.049a2 2 0 0 0-2 2v1h10.693Z"/>
|
<path d="M18 5H0v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5Zm-7.258-2L9.092.8a2.009 2.009 0 0 0-1.6-.8H2.049a2 2 0 0 0-2 2v1h10.693Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a title="Global Script (Ctrl + G)" id="global-button" class="side_button">
|
<a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg hover:bg-gray-800">
|
||||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
||||||
<path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z"/>
|
<path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z"/>
|
||||||
<path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z"/>
|
<path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="side_button">
|
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
||||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9"/>
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a title="Project notes (Ctrl + N)" id="note-button" class="side_button">
|
<a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
|
<path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a title="Application Settings" id="settings-button" class="side_button">
|
<a title="Application Settings" id="settings-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
@ -526,54 +478,55 @@
|
|||||||
|
|
||||||
<!-- Tabs for local files -->
|
<!-- Tabs for local files -->
|
||||||
<div class="min-w-screen flex grow flex-col">
|
<div class="min-w-screen flex grow flex-col">
|
||||||
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center bg-background space-x-1 lg:space-x-8">
|
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center text-white bg-neutral-900 space-x-1 lg:space-x-8">
|
||||||
<li class="pl-5">
|
<li class="pl-5">
|
||||||
<a title="Local Script 1 (F1)" id="tab-1" class="tab_panel">1</a>
|
<a title="Local Script 1 (F1)" id="tab-1" class="bg-orange-300 inline-block lg:px-4 px-2 py-1 text-white hover:bg-gray-800">1</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="">
|
<li class="">
|
||||||
<a title="Local Script 2 (F2)" id="tab-2" class="tab_panel">2</a>
|
<a title="Local Script 2 (F2)" id="tab-2" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">2</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="">
|
<li class="">
|
||||||
<a title="Local Script 3 (F3)" id="tab-3" class="tab_panel">3</a>
|
<a title="Local Script 3 (F3)" id="tab-3" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">3</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="">
|
<li class="">
|
||||||
<a title="Local Script 4 (F4)" id="tab-4" class="tab_panel">4</a>
|
<a title="Local Script 4 (F4)" id="tab-4" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">4</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="">
|
<li class="">
|
||||||
<a title="Local Script 5 (F5)" id="tab-5" class="tab_panel">5</a>
|
<a title="Local Script 5 (F5)" id="tab-5" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">5</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="">
|
<li class="">
|
||||||
<a title="Local Script 6 (F6)" id="tab-6" class="tab_panel">6</a>
|
<a title="Local Script 6 (F6)" id="tab-6" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">6</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="">
|
<li class="">
|
||||||
<a title="Local Script 7 (F7)" id="tab-7" class="tab_panel">7</a>
|
<a title="Local Script 7 (F7)" id="tab-7" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">7</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="">
|
<li class="">
|
||||||
<a title="Local Script 8 (F8)" id="tab-8" class="tab_panel">8</a>
|
<a title="Local Script 8 (F8)" id="tab-8" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">8</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="">
|
<li class="">
|
||||||
<a title="Local Script 9 (F9)" id="tab-9" class="tab_panel">9</a>
|
<a title="Local Script 9 (F9)" id="tab-9" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">9</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
<!-- Here comes the editor itself -->
|
<!-- Here comes the editor itself -->
|
||||||
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
|
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
|
||||||
<canvas id="scope" class="fullscreencanvas"></canvas>
|
|
||||||
<canvas id="hydra-bg" class="fullscreencanvas"></canvas>
|
<canvas id="hydra-bg" class="fullscreencanvas"></canvas>
|
||||||
|
<canvas id="scope" class="fullscreencanvas"></canvas>
|
||||||
<canvas id="feedback" class="fullscreencanvas"></canvas>
|
<canvas id="feedback" class="fullscreencanvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
<p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
|
||||||
<template id="ui-known-universe-item-template">
|
<template id="ui-known-universe-item-template">
|
||||||
<!-- A known universe button in "opening" interface -->
|
<!-- A known universe button in "opening" interface -->
|
||||||
<li class="py-2 px-4 flex justify-between text-brightwhite hover:bg-selection_background hover:text-selection_foreground">
|
<li class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4">
|
||||||
<button class="universe-name load-universe" title="Load this universe">Universe Name</button>
|
<button class="universe-name load-universe" title="Load this universe">Universe Name</button>
|
||||||
<button class="delete-universe" title="Delete this universe">🗑</button>
|
<button class="delete-universe" title="Delete this universe">🗑</button>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</body>
|
</body>
|
||||||
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold cursor-textpointer-events-none select-none text-sm absolute bottom-2 right-2 bg-foreground text-background"></p>
|
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
|
||||||
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold cursor-textpointer-events-none select-none text-sm absolute right-2 bottom-12 bg-foreground text-background">/////// Fill ///////</p>
|
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute right-2 bottom-12">/////// Fill ///////</p>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -30,22 +30,19 @@
|
|||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"codemirror": "^6.0.1",
|
"codemirror": "^6.0.1",
|
||||||
"fflate": "^0.8.0",
|
"fflate": "^0.8.0",
|
||||||
"highlight.js": "^11.9.0",
|
|
||||||
"jisg": "^0.9.7",
|
"jisg": "^0.9.7",
|
||||||
"lru-cache": "^10.0.1",
|
"lru-cache": "^10.0.1",
|
||||||
"marked": "^7.0.3",
|
"marked": "^7.0.3",
|
||||||
"osc": "^2.4.4",
|
|
||||||
"postcss": "^8.4.27",
|
"postcss": "^8.4.27",
|
||||||
"showdown": "^2.1.0",
|
"showdown": "^2.1.0",
|
||||||
"showdown-highlight": "^3.1.0",
|
"showdown-highlight": "^3.1.0",
|
||||||
"superdough": "^0.9.12",
|
"superdough": "^0.9.11",
|
||||||
"tailwind-highlightjs": "^2.0.1",
|
"tailwind-highlightjs": "^2.0.1",
|
||||||
"tailwindcss": "^3.3.3",
|
"tailwindcss": "^3.3.3",
|
||||||
"tone": "^14.8.49",
|
"tone": "^14.8.49",
|
||||||
"unique-names-generator": "^4.7.1",
|
"unique-names-generator": "^4.7.1",
|
||||||
"vite-plugin-markdown": "^2.1.0",
|
"vite-plugin-markdown": "^2.1.0",
|
||||||
"zifferjs": "^0.0.55",
|
"zifferjs": "^0.0.39",
|
||||||
"zyklus": "^0.1.4",
|
|
||||||
"zzfx": "^1.2.0"
|
"zzfx": "^1.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,4 +3,4 @@ export default {
|
|||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|||||||
351
src/API.ts
351
src/API.ts
@ -1,7 +1,5 @@
|
|||||||
import { EditorView } from "@codemirror/view";
|
import { EditorView } from "@codemirror/view";
|
||||||
import { sendToServer, type OSCMessage, oscMessages } from "./IO/OSC";
|
|
||||||
import { getAllScaleNotes, nearScales, seededRandom } from "zifferjs";
|
import { getAllScaleNotes, nearScales, seededRandom } from "zifferjs";
|
||||||
import colorschemes from "./colors.json";
|
|
||||||
import {
|
import {
|
||||||
MidiCCEvent,
|
MidiCCEvent,
|
||||||
MidiConnection,
|
MidiConnection,
|
||||||
@ -14,7 +12,6 @@ import { SoundEvent } from "./classes/SoundEvent";
|
|||||||
import { MidiEvent, MidiParams } from "./classes/MidiEvent";
|
import { MidiEvent, MidiParams } from "./classes/MidiEvent";
|
||||||
import { LRUCache } from "lru-cache";
|
import { LRUCache } from "lru-cache";
|
||||||
import { InputOptions, Player } from "./classes/ZPlayer";
|
import { InputOptions, Player } from "./classes/ZPlayer";
|
||||||
import { isGenerator, isGeneratorFunction } from "./Utils/Generic";
|
|
||||||
import {
|
import {
|
||||||
loadUniverse,
|
loadUniverse,
|
||||||
openUniverseModal,
|
openUniverseModal,
|
||||||
@ -30,8 +27,7 @@ import {
|
|||||||
} from "superdough";
|
} from "superdough";
|
||||||
import { Speaker } from "./extensions/StringExtensions";
|
import { Speaker } from "./extensions/StringExtensions";
|
||||||
import { getScaleNotes } from "zifferjs";
|
import { getScaleNotes } from "zifferjs";
|
||||||
import { OscilloscopeConfig } from "./Visuals/Oscilloscope";
|
import { OscilloscopeConfig, blinkScript } from "./AudioVisualisation";
|
||||||
import { blinkScript } from "./Visuals/Blinkers";
|
|
||||||
import { SkipEvent } from "./classes/SkipEvent";
|
import { SkipEvent } from "./classes/SkipEvent";
|
||||||
import { AbstractEvent, EventOperation } from "./classes/AbstractEvents";
|
import { AbstractEvent, EventOperation } from "./classes/AbstractEvents";
|
||||||
import drums from "./tidal-drum-machines.json";
|
import drums from "./tidal-drum-machines.json";
|
||||||
@ -45,31 +41,16 @@ interface ControlChange {
|
|||||||
export async function loadSamples() {
|
export async function loadSamples() {
|
||||||
return Promise.all([
|
return Promise.all([
|
||||||
initAudioOnFirstClick(),
|
initAudioOnFirstClick(),
|
||||||
samples("github:tidalcycles/Dirt-Samples/master", undefined, {
|
samples("github:tidalcycles/Dirt-Samples/master", undefined, { tag: "Tidal" }).then(() =>
|
||||||
tag: "Tidal",
|
registerSynthSounds()
|
||||||
}).then(() => registerSynthSounds()),
|
),
|
||||||
registerZZFXSounds(),
|
registerZZFXSounds(),
|
||||||
samples(drums, "github:ritchse/tidal-drum-machines/main/machines/", {
|
samples(drums, "github:ritchse/tidal-drum-machines/main/machines/", { tag: "Machines" }),
|
||||||
tag: "Machines",
|
samples("github:Bubobubobubobubo/Dough-Fox/main", undefined, { tag: "FoxDot" }),
|
||||||
}),
|
samples("github:Bubobubobubobubo/Dough-Samples/main", undefined, { tag: "Pack" }),
|
||||||
samples("github:Bubobubobubobubo/Dough-Fox/main", undefined, {
|
samples("github:Bubobubobubobubo/Dough-Amiga/main", undefined, { tag: "Amiga" }),
|
||||||
tag: "FoxDot",
|
samples("github:Bubobubobubobubo/Dough-Amen/main", undefined, { tag: "Amen" }),
|
||||||
}),
|
samples("github:Bubobubobubobubo/Dough-Waveforms/main", undefined, { tag: "Waveforms" }),
|
||||||
samples("github:Bubobubobubobubo/Dough-Samples/main", undefined, {
|
|
||||||
tag: "Pack",
|
|
||||||
}),
|
|
||||||
samples("github:Bubobubobubobubo/Dough-Amiga/main", undefined, {
|
|
||||||
tag: "Amiga",
|
|
||||||
}),
|
|
||||||
samples("github:Bubobubobubobubo/Dough-Juj/main", undefined, {
|
|
||||||
tag: "Juliette",
|
|
||||||
}),
|
|
||||||
samples("github:Bubobubobubobubo/Dough-Amen/main", undefined, {
|
|
||||||
tag: "Amen",
|
|
||||||
}),
|
|
||||||
samples("github:Bubobubobubobubo/Dough-Waveforms/main", undefined, {
|
|
||||||
tag: "Waveforms",
|
|
||||||
}),
|
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -88,14 +69,11 @@ export class UserAPI {
|
|||||||
public randomGen = Math.random;
|
public randomGen = Math.random;
|
||||||
public currentSeed: string | undefined = undefined;
|
public currentSeed: string | undefined = undefined;
|
||||||
public localSeeds = new Map<string, Function>();
|
public localSeeds = new Map<string, Function>();
|
||||||
public patternCache = new LRUCache({ max: 10000, ttl: 10000 * 60 * 5 });
|
public patternCache = new LRUCache({ max: 1000, ttl: 1000 * 60 * 5 });
|
||||||
public invalidPatterns: {[key: string]: boolean} = {};
|
|
||||||
public cueTimes: { [key: string]: number } = {};
|
|
||||||
private errorTimeoutID: number = 0;
|
private errorTimeoutID: number = 0;
|
||||||
private printTimeoutID: number = 0;
|
private printTimeoutID: number = 0;
|
||||||
public MidiConnection: MidiConnection;
|
public MidiConnection: MidiConnection;
|
||||||
public scale_aid: string | number | undefined = undefined;
|
public scale_aid: string | number | undefined = undefined;
|
||||||
public hydra: any;
|
|
||||||
load: samples;
|
load: samples;
|
||||||
|
|
||||||
constructor(public app: Editor) {
|
constructor(public app: Editor) {
|
||||||
@ -117,7 +95,7 @@ export class UserAPI {
|
|||||||
}
|
}
|
||||||
this.app.settings.saveApplicationToLocalStorage(
|
this.app.settings.saveApplicationToLocalStorage(
|
||||||
this.app.universes,
|
this.app.universes,
|
||||||
this.app.settings,
|
this.app.settings
|
||||||
);
|
);
|
||||||
this.app.updateKnownUniversesView();
|
this.app.updateKnownUniversesView();
|
||||||
};
|
};
|
||||||
@ -147,7 +125,6 @@ export class UserAPI {
|
|||||||
? code
|
? code
|
||||||
: (this.app.selectedExample as string);
|
: (this.app.selectedExample as string);
|
||||||
}
|
}
|
||||||
this.clearPatternCache();
|
|
||||||
this.stop();
|
this.stop();
|
||||||
this.play();
|
this.play();
|
||||||
};
|
};
|
||||||
@ -159,7 +136,6 @@ export class UserAPI {
|
|||||||
current_universe.example.candidate! = "";
|
current_universe.example.candidate! = "";
|
||||||
current_universe.example.committed! = "";
|
current_universe.example.committed! = "";
|
||||||
}
|
}
|
||||||
this.clearPatternCache();
|
|
||||||
this.stop();
|
this.stop();
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -169,7 +145,6 @@ export class UserAPI {
|
|||||||
current_universe.example.candidate! = "";
|
current_universe.example.candidate! = "";
|
||||||
current_universe.example.committed! = "";
|
current_universe.example.committed! = "";
|
||||||
}
|
}
|
||||||
this.clearPatternCache();
|
|
||||||
this.stop();
|
this.stop();
|
||||||
this.play();
|
this.play();
|
||||||
this.app.exampleIsPlaying = true;
|
this.app.exampleIsPlaying = true;
|
||||||
@ -212,7 +187,7 @@ export class UserAPI {
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
this.errorTimeoutID = setTimeout(
|
this.errorTimeoutID = setTimeout(
|
||||||
() => this.app.interface.error_line.classList.add("hidden"),
|
() => this.app.interface.error_line.classList.add("hidden"),
|
||||||
2000,
|
2000
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -221,12 +196,12 @@ export class UserAPI {
|
|||||||
clearTimeout(this.printTimeoutID);
|
clearTimeout(this.printTimeoutID);
|
||||||
clearTimeout(this.errorTimeoutID);
|
clearTimeout(this.errorTimeoutID);
|
||||||
this.app.interface.error_line.innerHTML = message as string;
|
this.app.interface.error_line.innerHTML = message as string;
|
||||||
this.app.interface.error_line.style.color = "red";
|
this.app.interface.error_line.style.color = "white";
|
||||||
this.app.interface.error_line.classList.remove("hidden");
|
this.app.interface.error_line.classList.remove("hidden");
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
this.printTimeoutID = setTimeout(
|
this.printTimeoutID = setTimeout(
|
||||||
() => this.app.interface.error_line.classList.add("hidden"),
|
() => this.app.interface.error_line.classList.add("hidden"),
|
||||||
4000,
|
4000
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -277,7 +252,7 @@ export class UserAPI {
|
|||||||
*/
|
*/
|
||||||
this.app.clock.tick = beat * this.app.clock.ppqn;
|
this.app.clock.tick = beat * this.app.clock.ppqn;
|
||||||
this.app.clock.time_position = this.app.clock.convertTicksToTimeposition(
|
this.app.clock.time_position = this.app.clock.convertTicksToTimeposition(
|
||||||
beat * this.app.clock.ppqn,
|
beat * this.app.clock.ppqn
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -334,7 +309,7 @@ export class UserAPI {
|
|||||||
blinkScript(this.app, "local", arg);
|
blinkScript(this.app, "local", arg);
|
||||||
tryEvaluate(
|
tryEvaluate(
|
||||||
this.app,
|
this.app,
|
||||||
this.app.universes[this.app.selected_universe].locals[arg],
|
this.app.universes[this.app.selected_universe].locals[arg]
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -381,7 +356,7 @@ export class UserAPI {
|
|||||||
delete this.app.universes[universe];
|
delete this.app.universes[universe];
|
||||||
this.app.settings.saveApplicationToLocalStorage(
|
this.app.settings.saveApplicationToLocalStorage(
|
||||||
this.app.universes,
|
this.app.universes,
|
||||||
this.app.settings,
|
this.app.settings
|
||||||
);
|
);
|
||||||
this.app.updateKnownUniversesView();
|
this.app.updateKnownUniversesView();
|
||||||
};
|
};
|
||||||
@ -397,7 +372,7 @@ export class UserAPI {
|
|||||||
};
|
};
|
||||||
this.app.settings.saveApplicationToLocalStorage(
|
this.app.settings.saveApplicationToLocalStorage(
|
||||||
this.app.universes,
|
this.app.universes,
|
||||||
this.app.settings,
|
this.app.settings
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
this.app.selected_universe = "Default";
|
this.app.selected_universe = "Default";
|
||||||
@ -434,7 +409,7 @@ export class UserAPI {
|
|||||||
value: number | number[] = 60,
|
value: number | number[] = 60,
|
||||||
velocity?: number | number[],
|
velocity?: number | number[],
|
||||||
channel?: number | number[],
|
channel?: number | number[],
|
||||||
port?: number | string | number[] | string[],
|
port?: number | string | number[] | string[]
|
||||||
): MidiEvent => {
|
): MidiEvent => {
|
||||||
/**
|
/**
|
||||||
* Sends a MIDI note to the current MIDI output.
|
* Sends a MIDI note to the current MIDI output.
|
||||||
@ -509,7 +484,7 @@ export class UserAPI {
|
|||||||
};
|
};
|
||||||
|
|
||||||
public active_note_events = (
|
public active_note_events = (
|
||||||
channel?: number,
|
channel?: number
|
||||||
): MidiNoteEvent[] | undefined => {
|
): MidiNoteEvent[] | undefined => {
|
||||||
/**
|
/**
|
||||||
* @returns A list of currently active MIDI notes
|
* @returns A list of currently active MIDI notes
|
||||||
@ -646,7 +621,7 @@ export class UserAPI {
|
|||||||
scale: number | string,
|
scale: number | string,
|
||||||
channel: number = 0,
|
channel: number = 0,
|
||||||
port: number | string = this.MidiConnection.currentOutputIndex || 0,
|
port: number | string = this.MidiConnection.currentOutputIndex || 0,
|
||||||
soundOff: boolean = false,
|
soundOff: boolean = false
|
||||||
): void => {
|
): void => {
|
||||||
/**
|
/**
|
||||||
* Sends given scale to midi output for visual aid
|
* Sends given scale to midi output for visual aid
|
||||||
@ -670,7 +645,7 @@ export class UserAPI {
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
scale: number | string = 0,
|
scale: number | string = 0,
|
||||||
channel: number = 0,
|
channel: number = 0,
|
||||||
port: number | string = this.MidiConnection.currentOutputIndex || 0,
|
port: number | string = this.MidiConnection.currentOutputIndex || 0
|
||||||
): void => {
|
): void => {
|
||||||
/**
|
/**
|
||||||
* Hides all notes by sending all notes off to midi output
|
* Hides all notes by sending all notes off to midi output
|
||||||
@ -685,7 +660,7 @@ export class UserAPI {
|
|||||||
|
|
||||||
midi_notes_off = (
|
midi_notes_off = (
|
||||||
channel: number = 0,
|
channel: number = 0,
|
||||||
port: number | string = this.MidiConnection.currentOutputIndex || 0,
|
port: number | string = this.MidiConnection.currentOutputIndex || 0
|
||||||
): void => {
|
): void => {
|
||||||
/**
|
/**
|
||||||
* Sends all notes off to midi output
|
* Sends all notes off to midi output
|
||||||
@ -695,7 +670,7 @@ export class UserAPI {
|
|||||||
|
|
||||||
midi_sound_off = (
|
midi_sound_off = (
|
||||||
channel: number = 0,
|
channel: number = 0,
|
||||||
port: number | string = this.MidiConnection.currentOutputIndex || 0,
|
port: number | string = this.MidiConnection.currentOutputIndex || 0
|
||||||
): void => {
|
): void => {
|
||||||
/**
|
/**
|
||||||
* Sends all sound off to midi output
|
* Sends all sound off to midi output
|
||||||
@ -704,7 +679,7 @@ export class UserAPI {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// =============================================================
|
// =============================================================
|
||||||
// Cache functions
|
// Ziffers related functions
|
||||||
// =============================================================
|
// =============================================================
|
||||||
|
|
||||||
public generateCacheKey = (...args: any[]): string => {
|
public generateCacheKey = (...args: any[]): string => {
|
||||||
@ -715,130 +690,46 @@ export class UserAPI {
|
|||||||
this.patternCache.forEach((player) => (player as Player).reset());
|
this.patternCache.forEach((player) => (player as Player).reset());
|
||||||
};
|
};
|
||||||
|
|
||||||
public clearPatternCache = (): void => {
|
|
||||||
this.patternCache.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
public removePatternFromCache = (id: string): void => {
|
public removePatternFromCache = (id: string): void => {
|
||||||
this.patternCache.delete(id);
|
this.patternCache.delete(id);
|
||||||
};
|
};
|
||||||
|
|
||||||
maybeToNumber = (something: any): number|any => {
|
|
||||||
// If something is BigInt
|
|
||||||
if(typeof something === "bigint") {
|
|
||||||
return Number(something);
|
|
||||||
} else {
|
|
||||||
return something;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
cache = (key: string, value: any) => {
|
|
||||||
/**
|
|
||||||
* Gets or sets a value in the cache.
|
|
||||||
*
|
|
||||||
* @param key - The key of the value to get or set
|
|
||||||
* @param value - The value to set
|
|
||||||
* @returns The value of the key
|
|
||||||
*/
|
|
||||||
if(value !== undefined) {
|
|
||||||
if(isGenerator(value)) {
|
|
||||||
if(this.patternCache.has(key)) {
|
|
||||||
const cachedValue = (this.patternCache.get(key) as Generator<any>).next().value
|
|
||||||
if(cachedValue!==0 && !cachedValue) {
|
|
||||||
const generator = value as unknown as Generator<any>
|
|
||||||
this.patternCache.set(key, generator);
|
|
||||||
return this.maybeToNumber(generator.next().value);
|
|
||||||
}
|
|
||||||
return this.maybeToNumber(cachedValue);
|
|
||||||
} else {
|
|
||||||
const generator = value as unknown as Generator<any>
|
|
||||||
this.patternCache.set(key, generator);
|
|
||||||
return this.maybeToNumber(generator.next().value);
|
|
||||||
}
|
|
||||||
} else if(isGeneratorFunction(value)) {
|
|
||||||
if(this.patternCache.has(key)) {
|
|
||||||
const cachedValue = (this.patternCache.get(key) as Generator<any>).next().value;
|
|
||||||
if(cachedValue || cachedValue===0 || cachedValue===0n) {
|
|
||||||
return this.maybeToNumber(cachedValue);
|
|
||||||
} else {
|
|
||||||
const generator = value();
|
|
||||||
this.patternCache.set(key, generator);
|
|
||||||
return this.maybeToNumber(generator.next().value);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const generator = value();
|
|
||||||
this.patternCache.set(key, generator);
|
|
||||||
return this.maybeToNumber(generator.next().value);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.patternCache.set(key, value);
|
|
||||||
return this.maybeToNumber(value);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return this.maybeToNumber(this.patternCache.get(key));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Ziffers related functions
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
public z = (
|
public z = (
|
||||||
input: string | Generator<number>,
|
input: string | Generator<number>,
|
||||||
options: InputOptions = {},
|
options: InputOptions = {},
|
||||||
id: number | string = "",
|
id: number | string = ""
|
||||||
): Player => {
|
): Player => {
|
||||||
const zid = "z" + id.toString();
|
const zid = "z" + id.toString();
|
||||||
const key = id === "" ? this.generateCacheKey(input, options) : zid;
|
const key = id === "" ? this.generateCacheKey(input, options) : zid;
|
||||||
|
|
||||||
const validSyntax = typeof input === "string" && !this.invalidPatterns[input]
|
|
||||||
|
|
||||||
let player;
|
let player;
|
||||||
let replace = false;
|
|
||||||
|
|
||||||
if (this.app.api.patternCache.has(key)) {
|
if (this.app.api.patternCache.has(key)) {
|
||||||
player = this.app.api.patternCache.get(key) as Player;
|
player = this.app.api.patternCache.get(key) as Player;
|
||||||
|
if (typeof input === "string" && player.input !== input) {
|
||||||
if (typeof input === "string" &&
|
player = undefined;
|
||||||
player.input !== input &&
|
|
||||||
player.atTheBeginning()) {
|
|
||||||
replace = true;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if ((typeof input !== "string" || validSyntax) && (!player || replace)) {
|
if (!player) {
|
||||||
const newPlayer = new Player(input, options, this.app, zid);
|
player = new Player(input, options, this.app, zid);
|
||||||
if(newPlayer.isValid()) {
|
this.app.api.patternCache.set(key, player);
|
||||||
player = newPlayer
|
|
||||||
this.patternCache.set(key, player);
|
|
||||||
} else if(typeof input === "string") {
|
|
||||||
this.invalidPatterns[input] = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(player) {
|
if (player.ziffers.generator && player.ziffers.generatorDone) {
|
||||||
|
this.removePatternFromCache(key);
|
||||||
if(player.atTheBeginning()) {
|
|
||||||
if(typeof input === "string" && !validSyntax) this.app.api.log(`Invalid syntax: ${input}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (player.ziffers.generator && player.ziffers.generatorDone) {
|
|
||||||
this.removePatternFromCache(key);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof id === "number") player.zid = zid;
|
|
||||||
|
|
||||||
player.updateLastCallTime();
|
|
||||||
|
|
||||||
if (id !== "" && zid !== "z0") {
|
|
||||||
// Sync named patterns to z0 by default
|
|
||||||
player.sync("z0", false);
|
|
||||||
}
|
|
||||||
|
|
||||||
return player;
|
|
||||||
} else {
|
|
||||||
throw new Error(`Invalid syntax: ${input}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (typeof id === "number") player.zid = zid;
|
||||||
|
|
||||||
|
player.updateLastCallTime();
|
||||||
|
|
||||||
|
if (id !== "" && zid !== "z0") {
|
||||||
|
// Sync named patterns to z0 by default
|
||||||
|
player.sync("z0");
|
||||||
|
}
|
||||||
|
|
||||||
|
return player;
|
||||||
};
|
};
|
||||||
|
|
||||||
public z0 = (input: string, opts: InputOptions = {}) =>
|
public z0 = (input: string, opts: InputOptions = {}) =>
|
||||||
@ -883,7 +774,7 @@ export class UserAPI {
|
|||||||
public counter = (
|
public counter = (
|
||||||
name: string | number,
|
name: string | number,
|
||||||
limit?: number,
|
limit?: number,
|
||||||
step?: number,
|
step?: number
|
||||||
): number => {
|
): number => {
|
||||||
/**
|
/**
|
||||||
* Returns the current value of a counter, and increments it by the step value.
|
* Returns the current value of a counter, and increments it by the step value.
|
||||||
@ -1390,8 +1281,8 @@ export class UserAPI {
|
|||||||
const results: boolean[] = nArray.map(
|
const results: boolean[] = nArray.map(
|
||||||
(value) =>
|
(value) =>
|
||||||
(this.app.clock.pulses_since_origin - Math.floor(nudge * this.ppqn())) %
|
(this.app.clock.pulses_since_origin - Math.floor(nudge * this.ppqn())) %
|
||||||
Math.floor(value * this.ppqn()) ===
|
Math.floor(value * this.ppqn()) ===
|
||||||
0,
|
0
|
||||||
);
|
);
|
||||||
return results.some((value) => value === true);
|
return results.some((value) => value === true);
|
||||||
};
|
};
|
||||||
@ -1410,8 +1301,8 @@ export class UserAPI {
|
|||||||
const results: boolean[] = nArray.map(
|
const results: boolean[] = nArray.map(
|
||||||
(value) =>
|
(value) =>
|
||||||
(this.app.clock.pulses_since_origin - nudgeInPulses) %
|
(this.app.clock.pulses_since_origin - nudgeInPulses) %
|
||||||
Math.floor(value * barLength) ===
|
Math.floor(value * barLength) ===
|
||||||
0,
|
0
|
||||||
);
|
);
|
||||||
return results.some((value) => value === true);
|
return results.some((value) => value === true);
|
||||||
};
|
};
|
||||||
@ -1426,7 +1317,7 @@ export class UserAPI {
|
|||||||
*/
|
*/
|
||||||
const nArray = Array.isArray(n) ? n : [n];
|
const nArray = Array.isArray(n) ? n : [n];
|
||||||
const results: boolean[] = nArray.map(
|
const results: boolean[] = nArray.map(
|
||||||
(value) => (this.app.clock.pulses_since_origin - nudge) % value === 0,
|
(value) => (this.app.clock.pulses_since_origin - nudge) % value === 0
|
||||||
);
|
);
|
||||||
return results.some((value) => value === true);
|
return results.some((value) => value === true);
|
||||||
};
|
};
|
||||||
@ -1435,7 +1326,7 @@ export class UserAPI {
|
|||||||
public tick = (tick: number | number[], offset: number = 0): boolean => {
|
public tick = (tick: number | number[], offset: number = 0): boolean => {
|
||||||
const nArray = Array.isArray(tick) ? tick : [tick];
|
const nArray = Array.isArray(tick) ? tick : [tick];
|
||||||
const results: boolean[] = nArray.map(
|
const results: boolean[] = nArray.map(
|
||||||
(value) => this.app.clock.time_position.pulse === value + offset,
|
(value) => this.app.clock.time_position.pulse === value + offset
|
||||||
);
|
);
|
||||||
return results.some((value) => value === true);
|
return results.some((value) => value === true);
|
||||||
};
|
};
|
||||||
@ -1484,7 +1375,7 @@ export class UserAPI {
|
|||||||
|
|
||||||
public onbar = (
|
public onbar = (
|
||||||
bars: number[] | number,
|
bars: number[] | number,
|
||||||
n: number = this.app.clock.time_signature[0],
|
n: number = this.app.clock.time_signature[0]
|
||||||
): boolean => {
|
): boolean => {
|
||||||
let current_bar = (this.app.clock.time_position.bar % n) + 1;
|
let current_bar = (this.app.clock.time_position.bar % n) + 1;
|
||||||
return typeof bars === "number"
|
return typeof bars === "number"
|
||||||
@ -1512,7 +1403,7 @@ export class UserAPI {
|
|||||||
if (decimal_part <= 0)
|
if (decimal_part <= 0)
|
||||||
decimal_part = decimal_part + this.ppqn() * this.nominator();
|
decimal_part = decimal_part + this.ppqn() * this.nominator();
|
||||||
final_pulses.push(
|
final_pulses.push(
|
||||||
integral_part === this.cbeat() && this.cpulse() === decimal_part,
|
integral_part === this.cbeat() && this.cpulse() === decimal_part
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
return final_pulses.some((p) => p == true);
|
return final_pulses.some((p) => p == true);
|
||||||
@ -1594,7 +1485,7 @@ export class UserAPI {
|
|||||||
iterator: number,
|
iterator: number,
|
||||||
pulses: number,
|
pulses: number,
|
||||||
length: number,
|
length: number,
|
||||||
rotate: number = 0,
|
rotate: number = 0
|
||||||
): boolean => {
|
): boolean => {
|
||||||
/**
|
/**
|
||||||
* Returns a euclidean cycle of size length, with n pulses, rotated or not.
|
* Returns a euclidean cycle of size length, with n pulses, rotated or not.
|
||||||
@ -1613,7 +1504,7 @@ export class UserAPI {
|
|||||||
div: number,
|
div: number,
|
||||||
pulses: number,
|
pulses: number,
|
||||||
length: number,
|
length: number,
|
||||||
rotate: number = 0,
|
rotate: number = 0
|
||||||
): boolean => {
|
): boolean => {
|
||||||
return (
|
return (
|
||||||
this.beat(div) && this._euclidean_cycle(pulses, length, rotate).beat(div)
|
this.beat(div) && this._euclidean_cycle(pulses, length, rotate).beat(div)
|
||||||
@ -1623,7 +1514,7 @@ export class UserAPI {
|
|||||||
_euclidean_cycle(
|
_euclidean_cycle(
|
||||||
pulses: number,
|
pulses: number,
|
||||||
length: number,
|
length: number,
|
||||||
rotate: number = 0,
|
rotate: number = 0
|
||||||
): boolean[] {
|
): boolean[] {
|
||||||
if (pulses == length) return Array.from({ length }, () => true);
|
if (pulses == length) return Array.from({ length }, () => true);
|
||||||
function startsDescent(list: number[], i: number): boolean {
|
function startsDescent(list: number[], i: number): boolean {
|
||||||
@ -1634,7 +1525,7 @@ export class UserAPI {
|
|||||||
if (pulses >= length) return [true];
|
if (pulses >= length) return [true];
|
||||||
const resList = Array.from(
|
const resList = Array.from(
|
||||||
{ length },
|
{ length },
|
||||||
(_, i) => (((pulses * (i - 1)) % length) + length) % length,
|
(_, i) => (((pulses * (i - 1)) % length) + length) % length
|
||||||
);
|
);
|
||||||
let cycle = resList.map((_, i) => startsDescent(resList, i));
|
let cycle = resList.map((_, i) => startsDescent(resList, i));
|
||||||
if (rotate != 0) {
|
if (rotate != 0) {
|
||||||
@ -1673,9 +1564,7 @@ export class UserAPI {
|
|||||||
// Low Frequency Oscillators
|
// Low Frequency Oscillators
|
||||||
// =============================================================
|
// =============================================================
|
||||||
|
|
||||||
public range = (v: number, a: number, b: number): number => v * (b - a) + a;
|
line = (start: number, end: number, step: number = 1): number[] => {
|
||||||
|
|
||||||
public line = (start: number, end: number, step: number = 1): number[] => {
|
|
||||||
/**
|
/**
|
||||||
* Returns an array of values between start and end, with a given step.
|
* Returns an array of values between start and end, with a given step.
|
||||||
*
|
*
|
||||||
@ -1697,11 +1586,7 @@ export class UserAPI {
|
|||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
public sine = (
|
sine = (freq: number = 1, times: number = 1, offset: number = 0): number => {
|
||||||
freq: number = 1,
|
|
||||||
times: number = 1,
|
|
||||||
offset: number = 0,
|
|
||||||
): number => {
|
|
||||||
/**
|
/**
|
||||||
* Returns a sine wave between -1 and 1.
|
* Returns a sine wave between -1 and 1.
|
||||||
*
|
*
|
||||||
@ -1715,11 +1600,7 @@ export class UserAPI {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
public usine = (
|
usine = (freq: number = 1, times: number = 1, offset: number = 0): number => {
|
||||||
freq: number = 1,
|
|
||||||
times: number = 1,
|
|
||||||
offset: number = 0,
|
|
||||||
): number => {
|
|
||||||
/**
|
/**
|
||||||
* Returns a sine wave between 0 and 1.
|
* Returns a sine wave between 0 and 1.
|
||||||
*
|
*
|
||||||
@ -1763,7 +1644,7 @@ export class UserAPI {
|
|||||||
triangle = (
|
triangle = (
|
||||||
freq: number = 1,
|
freq: number = 1,
|
||||||
times: number = 1,
|
times: number = 1,
|
||||||
offset: number = 0,
|
offset: number = 0
|
||||||
): number => {
|
): number => {
|
||||||
/**
|
/**
|
||||||
* Returns a triangle wave between -1 and 1.
|
* Returns a triangle wave between -1 and 1.
|
||||||
@ -1780,7 +1661,7 @@ export class UserAPI {
|
|||||||
utriangle = (
|
utriangle = (
|
||||||
freq: number = 1,
|
freq: number = 1,
|
||||||
times: number = 1,
|
times: number = 1,
|
||||||
offset: number = 0,
|
offset: number = 0
|
||||||
): number => {
|
): number => {
|
||||||
/**
|
/**
|
||||||
* Returns a triangle wave between 0 and 1.
|
* Returns a triangle wave between 0 and 1.
|
||||||
@ -1797,7 +1678,7 @@ export class UserAPI {
|
|||||||
freq: number = 1,
|
freq: number = 1,
|
||||||
times: number = 1,
|
times: number = 1,
|
||||||
offset: number = 0,
|
offset: number = 0,
|
||||||
duty: number = 0.5,
|
duty: number = 0.5
|
||||||
): number => {
|
): number => {
|
||||||
/**
|
/**
|
||||||
* Returns a square wave with a specified duty cycle between -1 and 1.
|
* Returns a square wave with a specified duty cycle between -1 and 1.
|
||||||
@ -1817,7 +1698,7 @@ export class UserAPI {
|
|||||||
freq: number = 1,
|
freq: number = 1,
|
||||||
times: number = 1,
|
times: number = 1,
|
||||||
offset: number = 0,
|
offset: number = 0,
|
||||||
duty: number = 0.5,
|
duty: number = 0.5
|
||||||
): number => {
|
): number => {
|
||||||
/**
|
/**
|
||||||
* Returns a square wave between 0 and 1.
|
* Returns a square wave between 0 and 1.
|
||||||
@ -1877,11 +1758,23 @@ export class UserAPI {
|
|||||||
*/
|
*/
|
||||||
const sum = values.reduce(
|
const sum = values.reduce(
|
||||||
(accumulator, currentValue) => accumulator + currentValue,
|
(accumulator, currentValue) => accumulator + currentValue,
|
||||||
0,
|
0
|
||||||
);
|
);
|
||||||
return sum / values.length;
|
return sum / values.length;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
public range = (
|
||||||
|
inputY: number,
|
||||||
|
yMin: number,
|
||||||
|
yMax: number,
|
||||||
|
xMin: number,
|
||||||
|
xMax: number
|
||||||
|
): number => {
|
||||||
|
const percent = (inputY - yMin) / (yMax - yMin);
|
||||||
|
const outputX = percent * (xMax - xMin) + xMin;
|
||||||
|
return outputX;
|
||||||
|
};
|
||||||
|
|
||||||
limit = (value: number, min: number, max: number): number => {
|
limit = (value: number, min: number, max: number): number => {
|
||||||
/**
|
/**
|
||||||
* Limits a value between a minimum and a maximum.
|
* Limits a value between a minimum and a maximum.
|
||||||
@ -1905,7 +1798,7 @@ export class UserAPI {
|
|||||||
lang: string = "en-US",
|
lang: string = "en-US",
|
||||||
voice: number = 0,
|
voice: number = 0,
|
||||||
rate: number = 1,
|
rate: number = 1,
|
||||||
pitch: number = 1,
|
pitch: number = 1
|
||||||
): void => {
|
): void => {
|
||||||
/*
|
/*
|
||||||
* Speaks the given text using the browser's speech synthesis API.
|
* Speaks the given text using the browser's speech synthesis API.
|
||||||
@ -1980,7 +1873,7 @@ export class UserAPI {
|
|||||||
const elements = args.slice(1); // Get the rest of the arguments as an array
|
const elements = args.slice(1); // Get the rest of the arguments as an array
|
||||||
const timepos = this.app.clock.pulses_since_origin;
|
const timepos = this.app.clock.pulses_since_origin;
|
||||||
const slice_count = Math.floor(
|
const slice_count = Math.floor(
|
||||||
timepos / Math.floor(chunk_size * this.ppqn()),
|
timepos / Math.floor(chunk_size * this.ppqn())
|
||||||
);
|
);
|
||||||
return elements[slice_count % elements.length];
|
return elements[slice_count % elements.length];
|
||||||
};
|
};
|
||||||
@ -2008,13 +1901,10 @@ export class UserAPI {
|
|||||||
// =============================================================
|
// =============================================================
|
||||||
|
|
||||||
register = (name: string, operation: EventOperation<AbstractEvent>): void => {
|
register = (name: string, operation: EventOperation<AbstractEvent>): void => {
|
||||||
AbstractEvent.prototype[name] = function (
|
AbstractEvent.prototype[name] = function(this: AbstractEvent, ...args: any[]) {
|
||||||
this: AbstractEvent,
|
|
||||||
...args: any[]
|
|
||||||
) {
|
|
||||||
return operation(this, ...args);
|
return operation(this, ...args);
|
||||||
};
|
};
|
||||||
};
|
}
|
||||||
|
|
||||||
public shuffle = <T>(array: T[]): T[] => {
|
public shuffle = <T>(array: T[]): T[] => {
|
||||||
/**
|
/**
|
||||||
@ -2115,7 +2005,7 @@ export class UserAPI {
|
|||||||
".cm-comment": {
|
".cm-comment": {
|
||||||
fontFamily: commentFont,
|
fontFamily: commentFont,
|
||||||
},
|
},
|
||||||
}),
|
})
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -2187,36 +2077,23 @@ export class UserAPI {
|
|||||||
}, real_duration * 1000);
|
}, real_duration * 1000);
|
||||||
};
|
};
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// OSC Functions
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
public osc = (address: string, port: number, ...args: any[]): void => {
|
|
||||||
sendToServer({
|
|
||||||
address: address,
|
|
||||||
port: port,
|
|
||||||
args: args,
|
|
||||||
timetag: Math.round(Date.now() + this.app.clock.deadline),
|
|
||||||
} as OSCMessage);
|
|
||||||
};
|
|
||||||
|
|
||||||
public getOSC = (address?: string): any[] => {
|
|
||||||
/**
|
|
||||||
* Give access to incoming OSC messages. If no address is specified, returns the raw oscMessages array. If an address is specified, returns only the messages who contain the address and filter the address itself.
|
|
||||||
*/
|
|
||||||
if (address) {
|
|
||||||
let messages = oscMessages.filter((msg) => msg.address === address);
|
|
||||||
messages = messages.map((msg) => msg.data);
|
|
||||||
return messages;
|
|
||||||
} else {
|
|
||||||
return oscMessages;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// =============================================================
|
// =============================================================
|
||||||
// Transport functions
|
// Transport functions
|
||||||
// =============================================================
|
// =============================================================
|
||||||
|
|
||||||
|
public nudge = (nudge?: number): number => {
|
||||||
|
/**
|
||||||
|
* Sets or returns the current clock nudge.
|
||||||
|
*
|
||||||
|
* @param nudge - [optional] the nudge to set
|
||||||
|
* @returns The current nudge
|
||||||
|
*/
|
||||||
|
if (nudge) {
|
||||||
|
this.app.clock.nudge = nudge;
|
||||||
|
}
|
||||||
|
return this.app.clock.nudge;
|
||||||
|
};
|
||||||
|
|
||||||
public tempo = (n?: number): number => {
|
public tempo = (n?: number): number => {
|
||||||
/**
|
/**
|
||||||
* Sets or returns the current bpm.
|
* Sets or returns the current bpm.
|
||||||
@ -2267,40 +2144,4 @@ export class UserAPI {
|
|||||||
*/
|
*/
|
||||||
this.app.clock.time_signature = [numerator, denominator];
|
this.app.clock.time_signature = [numerator, denominator];
|
||||||
};
|
};
|
||||||
|
|
||||||
public cue = (functionName: string|Function): void => {
|
|
||||||
functionName = typeof functionName === "function" ? functionName.name : functionName;
|
|
||||||
this.cueTimes[functionName] = this.app.clock.pulses_since_origin;
|
|
||||||
};
|
|
||||||
|
|
||||||
public theme = (color_scheme: string): void => {
|
|
||||||
this.app.readTheme(color_scheme);
|
|
||||||
console.log("Changing color scheme for: ", color_scheme)
|
|
||||||
}
|
|
||||||
|
|
||||||
public themeName = (): string => {
|
|
||||||
return this.app.currentThemeName;
|
|
||||||
}
|
|
||||||
|
|
||||||
public randomTheme = (): void => {
|
|
||||||
let theme_names = this.getThemes();
|
|
||||||
let selected_theme = theme_names[Math.floor(Math.random() * theme_names.length)];
|
|
||||||
this.app.readTheme(selected_theme);
|
|
||||||
this.app.api.log(selected_theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
public nextTheme = (): void => {
|
|
||||||
let theme_names = this.getThemes();
|
|
||||||
let current_theme = this.app.api.themeName();
|
|
||||||
let current_theme_idx = theme_names.indexOf(current_theme);
|
|
||||||
let next_theme_idx = (current_theme_idx + 1) % theme_names.length;
|
|
||||||
let next_theme = theme_names[next_theme_idx];
|
|
||||||
this.app.readTheme(next_theme);
|
|
||||||
this.app.api.log(next_theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
public getThemes = (): string[] => {
|
|
||||||
return Object.keys(colorschemes);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,122 @@
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import { getAnalyser } from "superdough";
|
import { getAnalyser } from "superdough";
|
||||||
import { Editor } from "../main";
|
import { type Editor } from "./main";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draw a circle at a specific position on the canvas.
|
||||||
|
* @param {number} x - The x-coordinate of the circle's center.
|
||||||
|
* @param {number} y - The y-coordinate of the circle's center.
|
||||||
|
* @param {number} radius - The radius of the circle.
|
||||||
|
* @param {string} color - The fill color of the circle.
|
||||||
|
*/
|
||||||
|
export const drawCircle = (
|
||||||
|
app: Editor,
|
||||||
|
x: number,
|
||||||
|
y: number,
|
||||||
|
radius: number,
|
||||||
|
color: string
|
||||||
|
): void => {
|
||||||
|
// @ts-ignore
|
||||||
|
const canvas: HTMLCanvasElement = app.interface.feedback;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.fill();
|
||||||
|
ctx.closePath();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Blinks a script indicator circle.
|
||||||
|
* @param script - The type of script.
|
||||||
|
* @param no - The shift amount multiplier.
|
||||||
|
*/
|
||||||
|
export const blinkScript = (
|
||||||
|
app: Editor,
|
||||||
|
script: "local" | "global" | "init",
|
||||||
|
no?: number
|
||||||
|
) => {
|
||||||
|
if (no !== undefined && no < 1 && no > 9) return;
|
||||||
|
const blinkDuration =
|
||||||
|
(app.clock.bpm / 60 / app.clock.time_signature[1]) * 200;
|
||||||
|
// @ts-ignore
|
||||||
|
const ctx = app.interface.feedback.getContext("2d"); // Assuming a canvas context
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draws a circle at a given shift.
|
||||||
|
* @param shift - The pixel distance from the origin.
|
||||||
|
*/
|
||||||
|
const _drawBlinker = (shift: number) => {
|
||||||
|
const horizontalOffset = 50;
|
||||||
|
drawCircle(
|
||||||
|
app,
|
||||||
|
horizontalOffset + shift,
|
||||||
|
app.interface.feedback.clientHeight - 15,
|
||||||
|
8,
|
||||||
|
"#fdba74"
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clears the circle at a given shift.
|
||||||
|
* @param shift - The pixel distance from the origin.
|
||||||
|
*/
|
||||||
|
const _clearBlinker = (shift: number) => {
|
||||||
|
const x = 50 + shift;
|
||||||
|
const y = app.interface.feedback.clientHeight - 15;
|
||||||
|
const radius = 8;
|
||||||
|
ctx.clearRect(x - radius, y - radius, radius * 2, radius * 2);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (script === "local" && no !== undefined) {
|
||||||
|
const shiftAmount = no * 25;
|
||||||
|
|
||||||
|
// Clear existing timeout if any
|
||||||
|
if (app.blinkTimeouts[shiftAmount]) {
|
||||||
|
clearTimeout(app.blinkTimeouts[shiftAmount]);
|
||||||
|
}
|
||||||
|
|
||||||
|
_drawBlinker(shiftAmount);
|
||||||
|
|
||||||
|
// Save timeout ID for later clearing
|
||||||
|
// @ts-ignore
|
||||||
|
app.blinkTimeouts[shiftAmount] = setTimeout(() => {
|
||||||
|
_clearBlinker(shiftAmount);
|
||||||
|
// Clear the canvas before drawing new blinkers
|
||||||
|
(app.interface.feedback as HTMLCanvasElement)
|
||||||
|
.getContext("2d")!
|
||||||
|
.clearRect(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
(app.interface.feedback as HTMLCanvasElement).width,
|
||||||
|
(app.interface.feedback as HTMLCanvasElement).height
|
||||||
|
);
|
||||||
|
}, blinkDuration);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Manages animation updates using requestAnimationFrame.
|
||||||
|
* @param app - The Editor application context.
|
||||||
|
*/
|
||||||
|
export const scriptBlinkers = () => {
|
||||||
|
let lastFrameTime = Date.now();
|
||||||
|
const frameRate = 10;
|
||||||
|
const minFrameDelay = 1000 / frameRate;
|
||||||
|
|
||||||
|
const update = () => {
|
||||||
|
const now = Date.now();
|
||||||
|
const timeSinceLastFrame = now - lastFrameTime;
|
||||||
|
|
||||||
|
if (timeSinceLastFrame >= minFrameDelay) {
|
||||||
|
lastFrameTime = now;
|
||||||
|
}
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
};
|
||||||
|
|
||||||
export interface OscilloscopeConfig {
|
export interface OscilloscopeConfig {
|
||||||
enabled: boolean;
|
enabled: boolean;
|
||||||
@ -18,16 +134,15 @@ export interface OscilloscopeConfig {
|
|||||||
let lastZeroCrossingType: string | null = null; // 'negToPos' or 'posToNeg'
|
let lastZeroCrossingType: string | null = null; // 'negToPos' or 'posToNeg'
|
||||||
let lastRenderTime: number = 0;
|
let lastRenderTime: number = 0;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes and runs an oscilloscope using an AnalyzerNode.
|
||||||
|
* @param {HTMLCanvasElement} canvas - The canvas element to draw the oscilloscope.
|
||||||
|
* @param {OscilloscopeConfig} config - Configuration for the oscilloscope's appearance and behavior.
|
||||||
|
*/
|
||||||
export const runOscilloscope = (
|
export const runOscilloscope = (
|
||||||
canvas: HTMLCanvasElement,
|
canvas: HTMLCanvasElement,
|
||||||
app: Editor,
|
app: Editor
|
||||||
): void => {
|
): void => {
|
||||||
/**
|
|
||||||
* Runs the oscilloscope visualization on the provided canvas element.
|
|
||||||
*
|
|
||||||
* @param canvas - The HTMLCanvasElement on which to render the visualization.
|
|
||||||
* @param app - The Editor object containing the configuration for the oscilloscope.
|
|
||||||
*/
|
|
||||||
let config = app.osc;
|
let config = app.osc;
|
||||||
let analyzer = getAnalyser(config.fftSize);
|
let analyzer = getAnalyser(config.fftSize);
|
||||||
let dataArray = new Float32Array(analyzer.frequencyBinCount);
|
let dataArray = new Float32Array(analyzer.frequencyBinCount);
|
||||||
@ -40,7 +155,7 @@ export const runOscilloscope = (
|
|||||||
width: number,
|
width: number,
|
||||||
height: number,
|
height: number,
|
||||||
offset_height: number,
|
offset_height: number,
|
||||||
offset_width: number,
|
offset_width: number
|
||||||
) {
|
) {
|
||||||
const maxFPS = 30;
|
const maxFPS = 30;
|
||||||
const now = performance.now();
|
const now = performance.now();
|
||||||
@ -54,12 +169,10 @@ export const runOscilloscope = (
|
|||||||
canvasCtx.clearRect(0, 0, width, height);
|
canvasCtx.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
const performanceFactor = 1;
|
const performanceFactor = 1;
|
||||||
const reducedDataSize = Math.floor(
|
const reducedDataSize = Math.floor(freqDataArray.length * performanceFactor);
|
||||||
freqDataArray.length * performanceFactor,
|
|
||||||
);
|
|
||||||
const numBars = Math.min(
|
const numBars = Math.min(
|
||||||
reducedDataSize,
|
reducedDataSize,
|
||||||
app.osc.orientation === "horizontal" ? width : height,
|
app.osc.orientation === "horizontal" ? width : height
|
||||||
);
|
);
|
||||||
const barWidth =
|
const barWidth =
|
||||||
app.osc.orientation === "horizontal" ? width / numBars : height / numBars;
|
app.osc.orientation === "horizontal" ? width / numBars : height / numBars;
|
||||||
@ -71,8 +184,7 @@ export const runOscilloscope = (
|
|||||||
|
|
||||||
for (let i = 0; i < numBars; i++) {
|
for (let i = 0; i < numBars; i++) {
|
||||||
barHeight = Math.floor(
|
barHeight = Math.floor(
|
||||||
freqDataArray[Math.floor((i * freqDataArray.length) / numBars)] *
|
freqDataArray[Math.floor(i * freqDataArray.length / numBars)] * ((height / 256) * app.osc.size)
|
||||||
((height / 256) * app.osc.size),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
if (app.osc.orientation === "horizontal") {
|
if (app.osc.orientation === "horizontal") {
|
||||||
@ -80,7 +192,7 @@ export const runOscilloscope = (
|
|||||||
x + offset_width,
|
x + offset_width,
|
||||||
(height - barHeight) / 2 + offset_height,
|
(height - barHeight) / 2 + offset_height,
|
||||||
barWidth + 1,
|
barWidth + 1,
|
||||||
barHeight,
|
barHeight
|
||||||
);
|
);
|
||||||
x += barWidth;
|
x += barWidth;
|
||||||
} else {
|
} else {
|
||||||
@ -88,13 +200,14 @@ export const runOscilloscope = (
|
|||||||
(width - barHeight) / 2 + offset_width,
|
(width - barHeight) / 2 + offset_width,
|
||||||
y + offset_height,
|
y + offset_height,
|
||||||
barHeight,
|
barHeight,
|
||||||
barWidth + 1,
|
barWidth + 1
|
||||||
);
|
);
|
||||||
y += barWidth;
|
y += barWidth;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function draw() {
|
function draw() {
|
||||||
// Update the canvas position on each cycle
|
// Update the canvas position on each cycle
|
||||||
const WIDTH = canvas.width;
|
const WIDTH = canvas.width;
|
||||||
@ -117,19 +230,12 @@ export const runOscilloscope = (
|
|||||||
-OFFSET_WIDTH,
|
-OFFSET_WIDTH,
|
||||||
-OFFSET_HEIGHT,
|
-OFFSET_HEIGHT,
|
||||||
WIDTH + 2 * OFFSET_WIDTH,
|
WIDTH + 2 * OFFSET_WIDTH,
|
||||||
HEIGHT + 2 * OFFSET_HEIGHT,
|
HEIGHT + 2 * OFFSET_HEIGHT
|
||||||
);
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (analyzer.fftSize !== app.osc.fftSize) {
|
if (analyzer.fftSize !== app.osc.fftSize) {
|
||||||
// Disconnect and release the old analyzer if it exists
|
|
||||||
if (analyzer) {
|
|
||||||
analyzer.disconnect();
|
|
||||||
analyzer = null; // Release the reference for garbage collection
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a new analyzer with the updated FFT size
|
|
||||||
analyzer = getAnalyser(app.osc.fftSize);
|
analyzer = getAnalyser(app.osc.fftSize);
|
||||||
dataArray = new Float32Array(analyzer.frequencyBinCount);
|
dataArray = new Float32Array(analyzer.frequencyBinCount);
|
||||||
}
|
}
|
||||||
@ -144,7 +250,7 @@ export const runOscilloscope = (
|
|||||||
-OFFSET_WIDTH,
|
-OFFSET_WIDTH,
|
||||||
-OFFSET_HEIGHT,
|
-OFFSET_HEIGHT,
|
||||||
WIDTH + 2 * OFFSET_WIDTH,
|
WIDTH + 2 * OFFSET_WIDTH,
|
||||||
HEIGHT + 2 * OFFSET_HEIGHT,
|
HEIGHT + 2 * OFFSET_HEIGHT
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
canvasCtx.lineWidth = app.osc.thickness;
|
canvasCtx.lineWidth = app.osc.thickness;
|
||||||
324
src/Clock.ts
324
src/Clock.ts
@ -1,9 +1,6 @@
|
|||||||
|
// @ts-ignore
|
||||||
import { Editor } from "./main";
|
import { Editor } from "./main";
|
||||||
import { tryEvaluate } from "./Evaluator";
|
import { tryEvaluate } from "./Evaluator";
|
||||||
// @ts-ignore
|
|
||||||
import { getAudioContext } from "superdough";
|
|
||||||
// @ts-ignore
|
|
||||||
import "zyklus";
|
|
||||||
const zeroPad = (num: number, places: number) =>
|
const zeroPad = (num: number, places: number) =>
|
||||||
String(num).padStart(places, "0");
|
String(num).padStart(places, "0");
|
||||||
|
|
||||||
@ -22,92 +19,133 @@ export interface TimePosition {
|
|||||||
|
|
||||||
export class Clock {
|
export class Clock {
|
||||||
/**
|
/**
|
||||||
|
* The Clock Class is responsible for keeping track of the current time.
|
||||||
|
* It is also responsible for starting and stopping the Clock TransportNode.
|
||||||
*
|
*
|
||||||
* @param app - main application instance
|
* @param app - The main application instance
|
||||||
* @param clock - zyklus clock
|
* @param ctx - The current AudioContext used by app
|
||||||
* @param ctx - current AudioContext used by app
|
* @param bpm - The current beats per minute value
|
||||||
* @param bpm - current beats per minute value
|
* @param time_signature - The time signature
|
||||||
* @param time_signature - time signature
|
* @param time_position - The current time position
|
||||||
* @param time_position - current time position
|
* @param ppqn - The pulses per quarter note
|
||||||
* @param ppqn - pulses per quarter note
|
* @param tick - The current tick since origin
|
||||||
* @param tick - current tick since origin
|
|
||||||
* @param running - Is the clock running?
|
* @param running - Is the clock running?
|
||||||
|
* @param lastPauseTime - The last time the clock was paused
|
||||||
|
* @param lastPlayPressTime - The last time the clock was started
|
||||||
|
* @param totalPauseTime - The total time the clock has been paused / stopped
|
||||||
|
* @param _nudge - The current nudge value
|
||||||
*/
|
*/
|
||||||
|
|
||||||
private _bpm: number;
|
|
||||||
private _ppqn: number;
|
|
||||||
clock: any;
|
|
||||||
ctx: AudioContext;
|
ctx: AudioContext;
|
||||||
logicalTime: number;
|
logicalTime: number;
|
||||||
|
private _bpm: number;
|
||||||
time_signature: number[];
|
time_signature: number[];
|
||||||
time_position: TimePosition;
|
time_position: TimePosition;
|
||||||
|
private _ppqn: number;
|
||||||
tick: number;
|
tick: number;
|
||||||
running: boolean;
|
running: boolean;
|
||||||
timeviewer: HTMLElement;
|
private timerWorker: Worker | null = null;
|
||||||
deadline: number;
|
private timeAtStart: number;
|
||||||
|
_nudge: number;
|
||||||
|
|
||||||
constructor(
|
timeviewer: HTMLElement;
|
||||||
public app: Editor,
|
|
||||||
ctx: AudioContext,
|
constructor(public app: Editor, ctx: AudioContext) {
|
||||||
) {
|
this.timeviewer = document.getElementById("timeviewer")!;
|
||||||
this.time_position = { bar: 0, beat: 0, pulse: 0 };
|
this.time_position = { bar: 0, beat: 0, pulse: 0 };
|
||||||
this.time_signature = [4, 4];
|
this.time_signature = [4, 4];
|
||||||
this.logicalTime = 0;
|
this.logicalTime = 0;
|
||||||
this.tick = 0;
|
this.tick = 0;
|
||||||
this._bpm = 120;
|
this._bpm = 120;
|
||||||
this._ppqn = 48;
|
this._ppqn = 48;
|
||||||
|
this._nudge = 0;
|
||||||
this.ctx = ctx;
|
this.ctx = ctx;
|
||||||
this.running = true;
|
this.running = true;
|
||||||
this.deadline = 0;
|
this.timeAtStart = ctx.currentTime;
|
||||||
this.timeviewer = document.getElementById("timeviewer")!;
|
this.initializeWorker();
|
||||||
this.clock = getAudioContext().createClock(
|
|
||||||
this.clockCallback,
|
|
||||||
this.pulse_duration,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// @ts-ignore
|
private initializeWorker(): void {
|
||||||
clockCallback = (time: number, duration: number, tick: number) => {
|
|
||||||
/**
|
/**
|
||||||
* Callback function for the zyklus clock. Updates the clock info and sends a
|
* Initializes the worker responsible for sending clock pulses. The worker
|
||||||
* MIDI clock message if the setting is enabled. Also evaluates the global buffer.
|
* is responsible for sending clock pulses at a regular interval. The
|
||||||
|
* interval is set by the `setWorkerInterval` function. The worker is
|
||||||
|
* restarted when the BPM is changed. The worker is terminated when the
|
||||||
|
* clock is stopped.
|
||||||
*
|
*
|
||||||
* @param time - precise AudioContext time when the tick should happen
|
* @returns void
|
||||||
* @param duration - seconds between each tick
|
|
||||||
* @param tick - count of the current tick
|
|
||||||
*/
|
*/
|
||||||
let deadline = time - getAudioContext().currentTime;
|
const workerScript =
|
||||||
this.deadline = deadline;
|
"onmessage = (e) => { setInterval(() => { postMessage(true) }, e.data)}";
|
||||||
this.tick = tick;
|
const blob = new Blob([workerScript], { type: "text/javascript" });
|
||||||
if (this.app.clock.running) {
|
this.timerWorker = new Worker(URL.createObjectURL(blob));
|
||||||
if (this.app.settings.send_clock) {
|
this.timerWorker.onmessage = () => {
|
||||||
this.app.api.MidiConnection.sendMidiClock();
|
this.run();
|
||||||
}
|
};
|
||||||
const futureTimeStamp = this.app.clock.convertTicksToTimeposition(
|
}
|
||||||
this.app.clock.tick,
|
|
||||||
);
|
private setWorkerInterval(): void {
|
||||||
this.app.clock.time_position = futureTimeStamp;
|
/**
|
||||||
if (futureTimeStamp.pulse % this.app.clock.ppqn == 0) {
|
* Sets the interval for the worker responsible for sending clock pulses.
|
||||||
this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${
|
* The interval is set by calculating the duration of one pulse. The
|
||||||
futureTimeStamp.beat + 1
|
* duration of one pulse is calculated by dividing the duration of one beat
|
||||||
} / ${this.app.clock.bpm}`;
|
* by the number of pulses per quarter note.
|
||||||
}
|
*
|
||||||
if (this.app.exampleIsPlaying) {
|
* @remark The BPM is off constantly by 3~5 BPM.
|
||||||
tryEvaluate(this.app, this.app.example_buffer);
|
* @returns void
|
||||||
} else {
|
*/
|
||||||
tryEvaluate(this.app, this.app.global_buffer);
|
const beatDurationMs = 60000 / this._bpm;
|
||||||
|
const pulseDurationMs = beatDurationMs / this._ppqn;
|
||||||
|
this.timerWorker?.postMessage(pulseDurationMs);
|
||||||
|
}
|
||||||
|
|
||||||
|
private run = () => {
|
||||||
|
/**
|
||||||
|
* This function is called by the worker responsible for sending clock
|
||||||
|
* pulses. It is called at a regular interval. The interval is set by the
|
||||||
|
* `setWorkerInterval` function. This function is responsible for updating
|
||||||
|
* the time position and sending MIDI clock messages. It is also responsible
|
||||||
|
* for evaluating the global buffer. The global buffer is evaluated at the
|
||||||
|
* beginning of each pulse.
|
||||||
|
*
|
||||||
|
* @returns void
|
||||||
|
*/
|
||||||
|
if (this.running) {
|
||||||
|
const adjustedCurrentTime = this.ctx.currentTime + this._nudge / 1000;
|
||||||
|
const beatNumber = adjustedCurrentTime / (60 / this._bpm);
|
||||||
|
const currentPulsePosition = Math.ceil(beatNumber * this._ppqn);
|
||||||
|
|
||||||
|
if (currentPulsePosition > this.time_position.pulse) {
|
||||||
|
const futureTimeStamp = this.convertTicksToTimeposition(this.tick);
|
||||||
|
this.app.clock.incrementTick(this.bpm);
|
||||||
|
|
||||||
|
this.time_position.pulse = currentPulsePosition;
|
||||||
|
|
||||||
|
if (this.app.settings.send_clock) {
|
||||||
|
if (futureTimeStamp.pulse % 2 == 0)
|
||||||
|
// TODO: Why?
|
||||||
|
this.app.api.MidiConnection.sendMidiClock();
|
||||||
|
}
|
||||||
|
this.time_position = futureTimeStamp;
|
||||||
|
if (futureTimeStamp.pulse % this.app.clock.ppqn == 0) {
|
||||||
|
this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${
|
||||||
|
futureTimeStamp.beat + 1
|
||||||
|
} / ${this.bpm}`;
|
||||||
|
}
|
||||||
|
if (this.app.exampleIsPlaying) {
|
||||||
|
tryEvaluate(this.app, this.app.example_buffer);
|
||||||
|
} else {
|
||||||
|
tryEvaluate(this.app, this.app.global_buffer);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Implement TransportNode clock callback and update clock info with it
|
|
||||||
};
|
};
|
||||||
|
|
||||||
convertTicksToTimeposition(ticks: number): TimePosition {
|
convertTicksToTimeposition(ticks: number): TimePosition {
|
||||||
/**
|
/**
|
||||||
* Converts ticks to a time position.
|
* This function converts a number of ticks to a time position.
|
||||||
*
|
* @param ticks - number of ticks
|
||||||
* @param ticks - ticks to convert
|
* @returns time position
|
||||||
* @returns TimePosition
|
|
||||||
*/
|
*/
|
||||||
const beatsPerBar = this.app.clock.time_signature[0];
|
const beatsPerBar = this.app.clock.time_signature[0];
|
||||||
const ppqnPosition = ticks % this.app.clock.ppqn;
|
const ppqnPosition = ticks % this.app.clock.ppqn;
|
||||||
@ -119,9 +157,10 @@ export class Clock {
|
|||||||
|
|
||||||
get ticks_before_new_bar(): number {
|
get ticks_before_new_bar(): number {
|
||||||
/**
|
/**
|
||||||
* Calculates the number of ticks before the next bar.
|
* This function returns the number of ticks separating the current moment
|
||||||
|
* from the beginning of the next bar.
|
||||||
*
|
*
|
||||||
* @returns number - ticks before the next bar
|
* @returns number of ticks until next bar
|
||||||
*/
|
*/
|
||||||
const ticskMissingFromBeat = this.ppqn - this.time_position.pulse;
|
const ticskMissingFromBeat = this.ppqn - this.time_position.pulse;
|
||||||
const beatsMissingFromBar = this.beats_per_bar - this.time_position.beat;
|
const beatsMissingFromBar = this.beats_per_bar - this.time_position.beat;
|
||||||
@ -130,9 +169,10 @@ export class Clock {
|
|||||||
|
|
||||||
get next_beat_in_ticks(): number {
|
get next_beat_in_ticks(): number {
|
||||||
/**
|
/**
|
||||||
* Calculates the number of ticks before the next beat.
|
* This function returns the number of ticks separating the current moment
|
||||||
|
* from the beginning of the next beat.
|
||||||
*
|
*
|
||||||
* @returns number - ticks before the next beat
|
* @returns number of ticks until next beat
|
||||||
*/
|
*/
|
||||||
return this.app.clock.pulses_since_origin + this.time_position.pulse;
|
return this.app.clock.pulses_since_origin + this.time_position.pulse;
|
||||||
}
|
}
|
||||||
@ -141,7 +181,7 @@ export class Clock {
|
|||||||
/**
|
/**
|
||||||
* Returns the number of beats per bar.
|
* Returns the number of beats per bar.
|
||||||
*
|
*
|
||||||
* @returns number - beats per bar
|
* @returns number of beats per bar
|
||||||
*/
|
*/
|
||||||
return this.time_signature[0];
|
return this.time_signature[0];
|
||||||
}
|
}
|
||||||
@ -150,7 +190,7 @@ export class Clock {
|
|||||||
/**
|
/**
|
||||||
* Returns the number of beats since the origin.
|
* Returns the number of beats since the origin.
|
||||||
*
|
*
|
||||||
* @returns number - beats since the origin
|
* @returns number of beats since origin
|
||||||
*/
|
*/
|
||||||
return Math.floor(this.tick / this.ppqn);
|
return Math.floor(this.tick / this.ppqn);
|
||||||
}
|
}
|
||||||
@ -159,7 +199,7 @@ export class Clock {
|
|||||||
/**
|
/**
|
||||||
* Returns the number of pulses since the origin.
|
* Returns the number of pulses since the origin.
|
||||||
*
|
*
|
||||||
* @returns number - pulses since the origin
|
* @returns number of pulses since origin
|
||||||
*/
|
*/
|
||||||
return this.tick;
|
return this.tick;
|
||||||
}
|
}
|
||||||
@ -167,112 +207,210 @@ export class Clock {
|
|||||||
get pulse_duration(): number {
|
get pulse_duration(): number {
|
||||||
/**
|
/**
|
||||||
* Returns the duration of a pulse in seconds.
|
* Returns the duration of a pulse in seconds.
|
||||||
* @returns number - duration of a pulse in seconds
|
*
|
||||||
|
* @returns duration of a pulse in seconds
|
||||||
*/
|
*/
|
||||||
return 60 / this.bpm / this.ppqn;
|
return 60 / this._bpm / this.ppqn;
|
||||||
}
|
}
|
||||||
|
|
||||||
public pulse_duration_at_bpm(bpm: number = this.bpm): number {
|
public pulse_duration_at_bpm(bpm: number = this.bpm): number {
|
||||||
/**
|
/**
|
||||||
* Returns the duration of a pulse in seconds at a given bpm.
|
* Returns the duration of a pulse in seconds at a specific bpm.
|
||||||
*
|
*
|
||||||
* @param bpm - bpm to calculate the pulse duration for
|
* @param bpm - beats per minute
|
||||||
* @returns number - duration of a pulse in seconds
|
* @returns duration of a pulse in seconds
|
||||||
*/
|
*/
|
||||||
return 60 / bpm / this.ppqn;
|
return 60 / bpm / this.ppqn;
|
||||||
}
|
}
|
||||||
|
|
||||||
get bpm(): number {
|
get bpm(): number {
|
||||||
/**
|
/**
|
||||||
* Returns the current bpm.
|
* Returns the current BPM.
|
||||||
* @returns number - current bpm
|
*
|
||||||
|
* @returns current BPM
|
||||||
*/
|
*/
|
||||||
return this._bpm;
|
return this._bpm;
|
||||||
}
|
}
|
||||||
|
|
||||||
get tickDuration(): number {
|
set nudge(nudge: number) {
|
||||||
/**
|
/**
|
||||||
* Returns the duration of a tick in seconds.
|
* Sets the nudge.
|
||||||
* @returns number - duration of a tick in seconds
|
*
|
||||||
|
* @param nudge - nudge in seconds
|
||||||
|
* @returns void
|
||||||
*/
|
*/
|
||||||
return 1 / this.ppqn;
|
this._nudge = nudge;
|
||||||
|
}
|
||||||
|
|
||||||
|
get nudge(): number {
|
||||||
|
/**
|
||||||
|
* Returns the current nudge.
|
||||||
|
*
|
||||||
|
* @returns current nudge
|
||||||
|
*/
|
||||||
|
return this._nudge;
|
||||||
}
|
}
|
||||||
|
|
||||||
set bpm(bpm: number) {
|
set bpm(bpm: number) {
|
||||||
/**
|
/**
|
||||||
* Sets the bpm.
|
* Sets the BPM.
|
||||||
* @param bpm - bpm to set
|
*
|
||||||
|
* @param bpm - beats per minute
|
||||||
|
* @returns void
|
||||||
*/
|
*/
|
||||||
if (bpm > 0 && this._bpm !== bpm) {
|
if (bpm > 0 && this._bpm !== bpm) {
|
||||||
this._bpm = bpm;
|
this._bpm = bpm;
|
||||||
this.clock.setDuration(() => (this.tickDuration * 60) / this.bpm);
|
|
||||||
|
// Restart the worker with the new BPM if the clock is running
|
||||||
|
if (this.running) {
|
||||||
|
this.restartWorker();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private restartWorker(): void {
|
||||||
|
/**
|
||||||
|
* Restarts the worker responsible for sending clock pulses.
|
||||||
|
*
|
||||||
|
* @returns void
|
||||||
|
*/
|
||||||
|
if (this.timerWorker) {
|
||||||
|
this.timerWorker.terminate();
|
||||||
|
}
|
||||||
|
this.initializeWorker();
|
||||||
|
this.setWorkerInterval();
|
||||||
|
}
|
||||||
|
|
||||||
get ppqn(): number {
|
get ppqn(): number {
|
||||||
/**
|
/**
|
||||||
* Returns the current ppqn.
|
* Returns the current PPQN.
|
||||||
* @returns number - current ppqn
|
*
|
||||||
|
* @returns current PPQN
|
||||||
*/
|
*/
|
||||||
return this._ppqn;
|
return this._ppqn;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get realTime(): number {
|
||||||
|
/**
|
||||||
|
* Returns the current time of the audio context.
|
||||||
|
*
|
||||||
|
* @returns current time of the audio context
|
||||||
|
* @remark This is the time of the audio context, not the time of the clock.
|
||||||
|
*/
|
||||||
|
return this.app.audioContext.currentTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
get deviation(): number {
|
||||||
|
/**
|
||||||
|
* Returns the deviation between the logical time and the real time.
|
||||||
|
*
|
||||||
|
* @returns deviation between the logical time and the real time
|
||||||
|
*/
|
||||||
|
return this.logicalTime - this.realTime;
|
||||||
|
}
|
||||||
|
|
||||||
set ppqn(ppqn: number) {
|
set ppqn(ppqn: number) {
|
||||||
/**
|
/**
|
||||||
* Sets the ppqn.
|
* Sets the PPQN.
|
||||||
* @param ppqn - ppqn to set
|
*
|
||||||
* @returns number - current ppqn
|
* @param ppqn - pulses per quarter note
|
||||||
|
* @returns void
|
||||||
*/
|
*/
|
||||||
if (ppqn > 0 && this._ppqn !== ppqn) {
|
if (ppqn > 0 && this._ppqn !== ppqn) {
|
||||||
this._ppqn = ppqn;
|
this._ppqn = ppqn;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public incrementTick(bpm: number) {
|
||||||
|
/**
|
||||||
|
* Increments the tick by one.
|
||||||
|
*
|
||||||
|
* @param bpm - beats per minute
|
||||||
|
* @returns void
|
||||||
|
*/
|
||||||
|
this.tick++;
|
||||||
|
this.logicalTime += this.pulse_duration_at_bpm(bpm);
|
||||||
|
}
|
||||||
|
|
||||||
public nextTickFrom(time: number, nudge: number): number {
|
public nextTickFrom(time: number, nudge: number): number {
|
||||||
|
/**
|
||||||
|
* Compute the time remaining before the next clock tick.
|
||||||
|
* @param time - audio context currentTime
|
||||||
|
* @param nudge - nudge in the future (in seconds)
|
||||||
|
* @returns remainingTime
|
||||||
|
*/
|
||||||
const pulseDuration = this.pulse_duration;
|
const pulseDuration = this.pulse_duration;
|
||||||
const nudgedTime = time + nudge;
|
const nudgedTime = time + nudge;
|
||||||
const nextTickTime = Math.ceil(nudgedTime / pulseDuration) * pulseDuration;
|
const nextTickTime = Math.ceil(nudgedTime / pulseDuration) * pulseDuration;
|
||||||
const remainingTime = nextTickTime - nudgedTime;
|
const remainingTime = nextTickTime - nudgedTime;
|
||||||
|
|
||||||
return remainingTime;
|
return remainingTime;
|
||||||
}
|
}
|
||||||
|
|
||||||
public convertPulseToSecond(n: number): number {
|
public convertPulseToSecond(n: number): number {
|
||||||
|
/**
|
||||||
|
* Converts a number of pulses to a number of seconds.
|
||||||
|
*
|
||||||
|
* @param n - number of pulses
|
||||||
|
* @returns number of seconds
|
||||||
|
*/
|
||||||
return n * this.pulse_duration;
|
return n * this.pulse_duration;
|
||||||
}
|
}
|
||||||
|
|
||||||
public start(): void {
|
public start(): void {
|
||||||
/**
|
/**
|
||||||
* Start the clock
|
* This function starts the worker.
|
||||||
*
|
*
|
||||||
* @remark also sends a MIDI message if a port is declared
|
* @remark also sends a MIDI message if a port is declared
|
||||||
|
* @returns void
|
||||||
*/
|
*/
|
||||||
this.app.audioContext.resume();
|
if (this.running) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.running = true;
|
this.running = true;
|
||||||
|
this.app.audioContext.resume();
|
||||||
this.app.api.MidiConnection.sendStartMessage();
|
this.app.api.MidiConnection.sendStartMessage();
|
||||||
this.clock.start();
|
|
||||||
|
if (!this.timerWorker) {
|
||||||
|
this.initializeWorker();
|
||||||
|
}
|
||||||
|
this.setWorkerInterval();
|
||||||
|
this.timeAtStart = this.ctx.currentTime;
|
||||||
|
this.logicalTime = this.timeAtStart;
|
||||||
}
|
}
|
||||||
|
|
||||||
public pause(): void {
|
public pause(): void {
|
||||||
/**
|
/**
|
||||||
* Pause the clock.
|
* Pauses the Transport worker.
|
||||||
*
|
*
|
||||||
* @remark also sends a MIDI message if a port is declared
|
* @remark also sends a MIDI message if a port is declared
|
||||||
|
* @returns void
|
||||||
*/
|
*/
|
||||||
this.running = false;
|
this.running = false;
|
||||||
this.app.api.MidiConnection.sendStopMessage();
|
this.app.api.MidiConnection.sendStopMessage();
|
||||||
this.clock.pause();
|
if (this.timerWorker) {
|
||||||
|
this.timerWorker.terminate();
|
||||||
|
this.timerWorker = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public stop(): void {
|
public stop(): void {
|
||||||
/**
|
/**
|
||||||
* Stops the clock.
|
* Stops the Transport worker and resets the tick to 0. The time position
|
||||||
|
* is also reset to 0. The clock is stopped by terminating the worker
|
||||||
|
* responsible for sending clock pulses.
|
||||||
*
|
*
|
||||||
* @remark also sends a MIDI message if a port is declared
|
* @remark also sends a MIDI message if a port is declared
|
||||||
|
* @returns void
|
||||||
*/
|
*/
|
||||||
this.running = false;
|
this.running = false;
|
||||||
this.tick = 0;
|
this.tick = 0;
|
||||||
this.time_position = { bar: 0, beat: 0, pulse: 0 };
|
this.time_position = { bar: 0, beat: 0, pulse: 0 };
|
||||||
this.app.api.MidiConnection.sendStopMessage();
|
this.app.api.MidiConnection.sendStopMessage();
|
||||||
this.clock.stop();
|
if (this.timerWorker) {
|
||||||
|
this.timerWorker.terminate();
|
||||||
|
this.timerWorker = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
import { type Editor } from "./main";
|
import { type Editor } from "./main";
|
||||||
// Basics
|
// Basics
|
||||||
import { introduction } from "./documentation/basics/welcome";
|
import { introduction } from "./documentation/basics/welcome";
|
||||||
import { loading_samples } from "./documentation/learning/samples/loading_samples";
|
import { loading_samples } from "./documentation/samples/loading_samples";
|
||||||
import { amplitude } from "./documentation/learning/audio_engine/amplitude";
|
import { amplitude } from "./documentation/audio_engine/amplitude";
|
||||||
import { effects } from "./documentation/learning/audio_engine/effects";
|
import { reverb } from "./documentation/audio_engine/reverb_delay";
|
||||||
import { sampler } from "./documentation/learning/audio_engine/sampler";
|
import { sampler } from "./documentation/audio_engine/sampler";
|
||||||
import { sample_banks } from "./documentation/learning/samples/sample_banks";
|
import { sample_banks } from "./documentation/samples/sample_banks";
|
||||||
import { audio_basics } from "./documentation/learning/audio_engine/audio_basics";
|
import { audio_basics } from "./documentation/audio_engine/audio_basics";
|
||||||
import { sample_list } from "./documentation/learning/samples/sample_list";
|
import { sample_list } from "./documentation/samples/sample_list";
|
||||||
import { software_interface } from "./documentation/basics/interface";
|
import { software_interface } from "./documentation/basics/interface";
|
||||||
import { shortcuts } from "./documentation/basics/keyboard";
|
import { shortcuts } from "./documentation/basics/keyboard";
|
||||||
import { code } from "./documentation/basics/code";
|
import { code } from "./documentation/basics/code";
|
||||||
@ -17,44 +17,37 @@ import { oscilloscope } from "./documentation/more/oscilloscope";
|
|||||||
import { synchronisation } from "./documentation/more/synchronisation";
|
import { synchronisation } from "./documentation/more/synchronisation";
|
||||||
import { about } from "./documentation/more/about";
|
import { about } from "./documentation/more/about";
|
||||||
import { bonus } from "./documentation/more/bonus";
|
import { bonus } from "./documentation/more/bonus";
|
||||||
import { chaining } from "./documentation/patterns/chaining";
|
import { chaining } from "./documentation/chaining";
|
||||||
import { interaction } from "./documentation/basics/interaction";
|
import { interaction } from "./documentation/interaction";
|
||||||
import { time } from "./documentation/learning/time/time";
|
import { time } from "./documentation/time/time";
|
||||||
import { linear_time } from "./documentation/learning/time/linear_time";
|
import { linear_time } from "./documentation/time/linear_time";
|
||||||
import { cyclical_time } from "./documentation/learning/time/cyclical_time";
|
import { cyclical_time } from "./documentation/time/cyclical_time";
|
||||||
import { long_forms } from "./documentation/learning/time/long_forms";
|
import { long_forms } from "./documentation/long_forms";
|
||||||
import { midi } from "./documentation/learning/midi";
|
import { midi } from "./documentation/midi";
|
||||||
import { osc } from "./documentation/learning/osc";
|
import { sound } from "./documentation/engine";
|
||||||
import { patterns } from "./documentation/patterns/patterns";
|
import { patterns } from "./documentation/patterns";
|
||||||
import { functions } from "./documentation/patterns/functions";
|
import { functions } from "./documentation/functions";
|
||||||
import { generators } from "./documentation/patterns/generators";
|
import { variables } from "./documentation/variables";
|
||||||
import { variables } from "./documentation/patterns/variables";
|
import { probabilities } from "./documentation/probabilities";
|
||||||
import { probabilities } from "./documentation/patterns/probabilities";
|
import { lfos } from "./documentation/lfos";
|
||||||
import { lfos } from "./documentation/patterns/lfos";
|
import { ziffers } from "./documentation/ziffers";
|
||||||
import { ziffers_basics } from "./documentation/patterns/ziffers/ziffers_basics";
|
import { synths } from "./documentation/synths";
|
||||||
import { ziffers_scales } from "./documentation/patterns/ziffers/ziffers_scales";
|
|
||||||
import { ziffers_rhythm } from "./documentation/patterns/ziffers/ziffers_rhythm";
|
|
||||||
import { ziffers_algorithmic } from "./documentation/patterns/ziffers/ziffers_algorithmic";
|
|
||||||
import { ziffers_tonnetz } from "./documentation/patterns/ziffers/ziffers_tonnetz";
|
|
||||||
import { ziffers_syncing } from "./documentation/patterns/ziffers/ziffers_syncing";
|
|
||||||
import { synths } from "./documentation/learning/audio_engine/synths";
|
|
||||||
// Setting up the Markdown converter with syntax highlighting
|
// Setting up the Markdown converter with syntax highlighting
|
||||||
import showdown from "showdown";
|
import showdown from "showdown";
|
||||||
import showdownHighlight from "showdown-highlight";
|
import showdownHighlight from "showdown-highlight";
|
||||||
import "highlight.js/styles/atom-one-dark-reasonable.min.css";
|
|
||||||
import { createDocumentationStyle } from "./DomElements";
|
import { createDocumentationStyle } from "./DomElements";
|
||||||
import { filters } from "./documentation/learning/audio_engine/filters";
|
|
||||||
showdown.setFlavor("github");
|
showdown.setFlavor("github");
|
||||||
|
|
||||||
export const key_shortcut = (shortcut: string): string => {
|
export const key_shortcut = (shortcut: string): string => {
|
||||||
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-brightwhite bg-brightblack border border-black rounded-lg">${shortcut}</kbd>`;
|
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const makeExampleFactory = (application: Editor): Function => {
|
export const makeExampleFactory = (application: Editor): Function => {
|
||||||
const make_example = (
|
const make_example = (
|
||||||
description: string,
|
description: string,
|
||||||
code: string,
|
code: string,
|
||||||
open: boolean = false,
|
open: boolean = false
|
||||||
) => {
|
) => {
|
||||||
const codeId = `codeExample${application.exampleCounter++}`;
|
const codeId = `codeExample${application.exampleCounter++}`;
|
||||||
// Store the code snippet in the data structure
|
// Store the code snippet in the data structure
|
||||||
@ -63,11 +56,13 @@ export const makeExampleFactory = (application: Editor): Function => {
|
|||||||
return `
|
return `
|
||||||
<details ${open ? "open" : ""}>
|
<details ${open ? "open" : ""}>
|
||||||
<summary >${description}
|
<summary >${description}
|
||||||
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-brightgreen bg-green inline-block text-selection_foreground" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
|
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-green-700 bg-emerald-600 inline-block" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
|
||||||
<button class="py-1 text-base px-4 hover:brightyellow bg-yellow text-selection_foreground inline-block" onclick="app.api._stopDocExample()">⏸️ Pause</button>
|
<button class="py-1 text-base px-4 hover:bg-neutral-600 bg-neutral-500 inline-block " onclick="app.api._stopDocExample()">⏸️ Pause</button>
|
||||||
<button class="py-1 text-base px-4 hover:bg-brightmagenta bg-magenta text-selection_foreground inline-block" onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
|
<button class="py-1 text-base px-4 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
|
||||||
</summary>
|
</summary>
|
||||||
<pre><code class="hljs language-javascript">${code.trim()}</code></pre>
|
\`\`\`javascript
|
||||||
|
${code}
|
||||||
|
\`\`\`
|
||||||
</details>
|
</details>
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
@ -75,11 +70,7 @@ export const makeExampleFactory = (application: Editor): Function => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const documentation_factory = (application: Editor) => {
|
export const documentation_factory = (application: Editor) => {
|
||||||
/**
|
// Initialize a data structure to store code examples by their unique IDs
|
||||||
* Creates the documentation for the given application.
|
|
||||||
* @param application The editor application.
|
|
||||||
* @returns An object containing various documentation sections.
|
|
||||||
*/
|
|
||||||
application.api.codeExamples = {};
|
application.api.codeExamples = {};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -91,26 +82,19 @@ export const documentation_factory = (application: Editor) => {
|
|||||||
linear: linear_time(application),
|
linear: linear_time(application),
|
||||||
cyclic: cyclical_time(application),
|
cyclic: cyclical_time(application),
|
||||||
longform: long_forms(application),
|
longform: long_forms(application),
|
||||||
|
sound: sound(application),
|
||||||
synths: synths(application),
|
synths: synths(application),
|
||||||
filters: filters(application),
|
|
||||||
chaining: chaining(application),
|
chaining: chaining(application),
|
||||||
patterns: patterns(application),
|
patterns: patterns(application),
|
||||||
ziffers_basics: ziffers_basics(application),
|
ziffers: ziffers(application),
|
||||||
ziffers_scales: ziffers_scales(application),
|
|
||||||
ziffers_algorithmic: ziffers_algorithmic(application),
|
|
||||||
ziffers_rhythm: ziffers_rhythm(application),
|
|
||||||
ziffers_tonnetz: ziffers_tonnetz(application),
|
|
||||||
ziffers_syncing: ziffers_syncing(application),
|
|
||||||
midi: midi(application),
|
midi: midi(application),
|
||||||
osc: osc(application),
|
|
||||||
lfos: lfos(application),
|
lfos: lfos(application),
|
||||||
variables: variables(application),
|
variables: variables(application),
|
||||||
probabilities: probabilities(application),
|
probabilities: probabilities(application),
|
||||||
functions: functions(application),
|
functions: functions(application),
|
||||||
generators: generators(application),
|
|
||||||
shortcuts: shortcuts(application),
|
shortcuts: shortcuts(application),
|
||||||
amplitude: amplitude(application),
|
amplitude: amplitude(application),
|
||||||
effects: effects(application),
|
reverb_delay: reverb(application),
|
||||||
sampler: sampler(application),
|
sampler: sampler(application),
|
||||||
mouse: mouse(application),
|
mouse: mouse(application),
|
||||||
oscilloscope: oscilloscope(application),
|
oscilloscope: oscilloscope(application),
|
||||||
@ -125,10 +109,6 @@ export const documentation_factory = (application: Editor) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const showDocumentation = (app: Editor) => {
|
export const showDocumentation = (app: Editor) => {
|
||||||
/**
|
|
||||||
* Shows or hides the documentation based on the current state of the app.
|
|
||||||
* @param app - The Editor instance.
|
|
||||||
*/
|
|
||||||
if (document.getElementById("app")?.classList.contains("hidden")) {
|
if (document.getElementById("app")?.classList.contains("hidden")) {
|
||||||
document.getElementById("app")?.classList.remove("hidden");
|
document.getElementById("app")?.classList.remove("hidden");
|
||||||
document.getElementById("documentation")?.classList.add("hidden");
|
document.getElementById("documentation")?.classList.add("hidden");
|
||||||
@ -138,24 +118,17 @@ export const showDocumentation = (app: Editor) => {
|
|||||||
document.getElementById("documentation")?.classList.remove("hidden");
|
document.getElementById("documentation")?.classList.remove("hidden");
|
||||||
// Load and convert Markdown content from the documentation file
|
// Load and convert Markdown content from the documentation file
|
||||||
let style = createDocumentationStyle(app);
|
let style = createDocumentationStyle(app);
|
||||||
|
let bindings = Object.keys(style).map((key) => ({
|
||||||
function update_and_assign(callback: Function) {
|
type: "output",
|
||||||
let bindings = Object.keys(style).map((key) => ({
|
regex: new RegExp(`<${key}([^>]*)>`, "g"),
|
||||||
type: "output",
|
//@ts-ignore
|
||||||
regex: new RegExp(`<${key}([^>]*)>`, "g"),
|
replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`,
|
||||||
//@ts-ignore
|
}));
|
||||||
replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`,
|
updateDocumentationContent(app, bindings);
|
||||||
}));
|
|
||||||
callback(bindings)
|
|
||||||
}
|
|
||||||
update_and_assign((e: Object) => updateDocumentationContent(app, e));
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const hideDocumentation = () => {
|
export const hideDocumentation = () => {
|
||||||
/**
|
|
||||||
* Hides the documentation section and shows the main application.
|
|
||||||
*/
|
|
||||||
if (document.getElementById("app")?.classList.contains("hidden")) {
|
if (document.getElementById("app")?.classList.contains("hidden")) {
|
||||||
document.getElementById("app")?.classList.remove("hidden");
|
document.getElementById("app")?.classList.remove("hidden");
|
||||||
document.getElementById("documentation")?.classList.add("hidden");
|
document.getElementById("documentation")?.classList.add("hidden");
|
||||||
@ -163,37 +136,15 @@ export const hideDocumentation = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const updateDocumentationContent = (app: Editor, bindings: any) => {
|
export const updateDocumentationContent = (app: Editor, bindings: any) => {
|
||||||
/**
|
|
||||||
* Updates the content of the documentation pane with the converted markdown.
|
|
||||||
*
|
|
||||||
* @param app - The editor application.
|
|
||||||
* @param bindings - Additional bindings for the showdown converter.
|
|
||||||
*/
|
|
||||||
let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-brightwhite'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
|
|
||||||
const converter = new showdown.Converter({
|
const converter = new showdown.Converter({
|
||||||
emoji: true,
|
emoji: true,
|
||||||
moreStyling: true,
|
moreStyling: true,
|
||||||
backslashEscapesHTMLTags: true,
|
backslashEscapesHTMLTags: true,
|
||||||
extensions: [showdownHighlight({
|
extensions: [showdownHighlight({ auto_detection: true }), ...bindings],
|
||||||
pre: true,
|
|
||||||
auto_detection: false
|
|
||||||
}), ...bindings],
|
|
||||||
});
|
});
|
||||||
console.log(app.currentDocumentationPane);
|
const converted_markdown = converter.makeHtml(
|
||||||
|
app.docs[app.currentDocumentationPane]
|
||||||
function _update_and_assign(callback: Function) {
|
);
|
||||||
const converted_markdown = converter.makeHtml(
|
document.getElementById("documentation-content")!.innerHTML =
|
||||||
app.docs[app.currentDocumentationPane],
|
converted_markdown;
|
||||||
);
|
};
|
||||||
callback(converted_markdown)
|
|
||||||
}
|
|
||||||
_update_and_assign((e: string)=> {
|
|
||||||
let display_content = e === undefined ? loading_message : e;
|
|
||||||
document.getElementById("documentation-content")!.innerHTML = display_content;
|
|
||||||
})
|
|
||||||
if (document.getElementById("documentation-content")!.innerHTML.replace(/"/g, "'") == loading_message.replace(/"/g, "'")) {
|
|
||||||
setTimeout(() => {
|
|
||||||
updateDocumentationContent(app, bindings);
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,15 +1,17 @@
|
|||||||
import { type Editor } from "./main";
|
import { type Editor } from "./main";
|
||||||
|
|
||||||
|
|
||||||
export type ElementMap = {
|
export type ElementMap = {
|
||||||
[key: string]:
|
[key: string]:
|
||||||
| HTMLElement
|
| HTMLElement
|
||||||
| HTMLButtonElement
|
| HTMLButtonElement
|
||||||
| HTMLDivElement
|
| HTMLDivElement
|
||||||
| HTMLInputElement
|
| HTMLInputElement
|
||||||
| HTMLSelectElement
|
| HTMLSelectElement
|
||||||
| HTMLCanvasElement
|
| HTMLCanvasElement
|
||||||
| HTMLFormElement
|
| HTMLFormElement
|
||||||
| HTMLInputElement;
|
| HTMLInputElement
|
||||||
|
;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const singleElements = {
|
export const singleElements = {
|
||||||
@ -18,8 +20,6 @@ export const singleElements = {
|
|||||||
load_universe_button: "load-universe-button",
|
load_universe_button: "load-universe-button",
|
||||||
download_universe_button: "download-universes",
|
download_universe_button: "download-universes",
|
||||||
upload_universe_button: "upload-universes",
|
upload_universe_button: "upload-universes",
|
||||||
upload_samples_button: "upload-samples",
|
|
||||||
sample_indicator: "sample-indicator",
|
|
||||||
destroy_universes_button: "destroy-universes",
|
destroy_universes_button: "destroy-universes",
|
||||||
documentation_button: "doc-button-1",
|
documentation_button: "doc-button-1",
|
||||||
eval_button: "eval-button-1",
|
eval_button: "eval-button-1",
|
||||||
@ -45,8 +45,6 @@ export const singleElements = {
|
|||||||
midi_clock_checkbox: "send-midi-clock",
|
midi_clock_checkbox: "send-midi-clock",
|
||||||
midi_channels_scripts: "midi-channels-scripts",
|
midi_channels_scripts: "midi-channels-scripts",
|
||||||
midi_clock_ppqn: "midi-clock-ppqn-input",
|
midi_clock_ppqn: "midi-clock-ppqn-input",
|
||||||
theme_selector: "theme-selector",
|
|
||||||
theme_previewer: "theme-previewer",
|
|
||||||
load_demo_songs: "load-demo-songs",
|
load_demo_songs: "load-demo-songs",
|
||||||
normal_mode_button: "normal-mode",
|
normal_mode_button: "normal-mode",
|
||||||
vim_mode_button: "vim-mode",
|
vim_mode_button: "vim-mode",
|
||||||
@ -67,37 +65,33 @@ export const buttonGroups = {
|
|||||||
|
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
export const createDocumentationStyle = (app: Editor) => {
|
export const createDocumentationStyle = (app: Editor) => {
|
||||||
/**
|
|
||||||
* Creates a documentation style object.
|
|
||||||
* @param {Editor} app - The editor object.
|
|
||||||
* @returns {Object} - The documentation style object.
|
|
||||||
*/
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
h1: "text-brightwhite lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
|
h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
|
||||||
h2: "text-brightwhite lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
|
h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
|
||||||
h3: "text-brightwhite lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
|
h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
|
||||||
ul: "text-underline ml-12",
|
ul: "text-underline ml-12",
|
||||||
li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
|
li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
|
||||||
p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
|
p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
|
||||||
warning:
|
warning:
|
||||||
"animate-pulse lg:text-2xl font-bold text-brightred lg:mx-6 mx-2 my-4 leading-normal",
|
"animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal",
|
||||||
a: "lg:text-2xl text-base text-white",
|
a: "lg:text-2xl text-base text-orange-300",
|
||||||
code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
|
code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
|
||||||
icode:
|
icode:
|
||||||
"lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
"lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
|
||||||
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
|
||||||
blockquote: "text-brightwhite border-l-4 border-white pl-4 my-4 mx-4",
|
blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
|
||||||
details:
|
details:
|
||||||
"lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-selection_foreground",
|
"lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-neutral-900",
|
||||||
summary: "font-semibold text-xl",
|
summary: "font-semibold text-xl",
|
||||||
table:
|
table:
|
||||||
"justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
|
"justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
|
||||||
thead:
|
thead:
|
||||||
"text-xs text-gray-700 uppercase",
|
"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
|
||||||
th: "",
|
th: "",
|
||||||
td: "",
|
td: "",
|
||||||
tr: "",
|
tr: "",
|
||||||
box: "border bg-red",
|
box: "border bg-red-500",
|
||||||
};
|
};
|
||||||
};
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import { Prec } from "@codemirror/state";
|
import { Prec } from "@codemirror/state";
|
||||||
import { indentWithTab } from "@codemirror/commands";
|
import { indentWithTab } from "@codemirror/commands";
|
||||||
import { tags as t } from "@lezer/highlight";
|
|
||||||
import {
|
import {
|
||||||
keymap,
|
keymap,
|
||||||
lineNumbers,
|
lineNumbers,
|
||||||
@ -8,6 +7,8 @@ import {
|
|||||||
drawSelection,
|
drawSelection,
|
||||||
highlightActiveLine,
|
highlightActiveLine,
|
||||||
dropCursor,
|
dropCursor,
|
||||||
|
// rectangularSelection,
|
||||||
|
// crosshairCursor,
|
||||||
highlightActiveLineGutter,
|
highlightActiveLineGutter,
|
||||||
} from "@codemirror/view";
|
} from "@codemirror/view";
|
||||||
import { Extension, EditorState } from "@codemirror/state";
|
import { Extension, EditorState } from "@codemirror/state";
|
||||||
@ -17,10 +18,9 @@ import {
|
|||||||
syntaxHighlighting,
|
syntaxHighlighting,
|
||||||
indentOnInput,
|
indentOnInput,
|
||||||
bracketMatching,
|
bracketMatching,
|
||||||
HighlightStyle,
|
|
||||||
} from "@codemirror/language";
|
} from "@codemirror/language";
|
||||||
import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
|
import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
|
||||||
import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
|
import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
|
||||||
import {
|
import {
|
||||||
autocompletion,
|
autocompletion,
|
||||||
closeBrackets,
|
closeBrackets,
|
||||||
@ -30,222 +30,19 @@ import { lintKeymap } from "@codemirror/lint";
|
|||||||
import { Compartment } from "@codemirror/state";
|
import { Compartment } from "@codemirror/state";
|
||||||
import { Editor } from "./main";
|
import { Editor } from "./main";
|
||||||
import { EditorView } from "codemirror";
|
import { EditorView } from "codemirror";
|
||||||
|
import { toposTheme } from "./themes/toposTheme";
|
||||||
import { javascript } from "@codemirror/lang-javascript";
|
import { javascript } from "@codemirror/lang-javascript";
|
||||||
import { inlineHoveringTips } from "./documentation/inlineHelp";
|
import { inlineHoveringTips } from "./documentation/inlineHelp";
|
||||||
import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
|
import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
|
||||||
import { javascriptLanguage } from "@codemirror/lang-javascript";
|
import { javascriptLanguage } from "@codemirror/lang-javascript"
|
||||||
|
|
||||||
export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => {
|
|
||||||
// @ts-ignore
|
|
||||||
const black = theme["black"],
|
|
||||||
red = theme["red"],
|
|
||||||
green = theme["green"],
|
|
||||||
yellow = theme["yellow"],
|
|
||||||
blue = theme["blue"],
|
|
||||||
magenta = theme["magenta"],
|
|
||||||
cyan = theme["cyan"],
|
|
||||||
white = theme["white"],
|
|
||||||
// @ts-ignore
|
|
||||||
brightblack = theme["brightblack"],
|
|
||||||
// @ts-ignore
|
|
||||||
brightred = theme["brightred"],
|
|
||||||
brightgreen = theme["brightgreen"],
|
|
||||||
// @ts-ignore
|
|
||||||
brightyellow = theme["brightyellow"],
|
|
||||||
// @ts-ignore
|
|
||||||
brightblue = theme["brightblue"],
|
|
||||||
// @ts-ignore
|
|
||||||
brightmagenta = theme["brightmagenta"],
|
|
||||||
// @ts-ignore
|
|
||||||
brightcyan = theme["brightcyan"],
|
|
||||||
brightwhite = theme["brightwhite"],
|
|
||||||
background = theme["background"],
|
|
||||||
selection_foreground = theme["selection_foreground"],
|
|
||||||
cursor = theme["cursor"],
|
|
||||||
foreground = theme["foreground"],
|
|
||||||
selection_background = theme["selection_background"];
|
|
||||||
const toposTheme = EditorView.theme( {
|
|
||||||
"&": {
|
|
||||||
color: background,
|
|
||||||
// backgroundColor: background,
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
fontSize: "24px",
|
|
||||||
fontFamily: "IBM Plex Mono",
|
|
||||||
},
|
|
||||||
".cm-content": {
|
|
||||||
caretColor: cursor,
|
|
||||||
fontFamily: "IBM Plex Mono",
|
|
||||||
},
|
|
||||||
".cm-cursor, .cm-dropCursor": {
|
|
||||||
borderLeftColor: cursor,
|
|
||||||
},
|
|
||||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
|
||||||
{
|
|
||||||
backgroundColor: selection_foreground,
|
|
||||||
border: `0.5px solid ${selection_background}`,
|
|
||||||
},
|
|
||||||
".cm-panels": {
|
|
||||||
backgroundColor: selection_background,
|
|
||||||
color: red,
|
|
||||||
},
|
|
||||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
|
||||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
|
||||||
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
|
||||||
".cm-searchMatch": {
|
|
||||||
outline: `1px solid ${magenta}`,
|
|
||||||
},
|
|
||||||
".cm-searchMatch.cm-searchMatch-selected": {
|
|
||||||
backgroundColor: red,
|
|
||||||
},
|
|
||||||
".cm-activeLine": {
|
|
||||||
// backgroundColor: highlightBackground
|
|
||||||
backgroundColor: `${selection_foreground}`,
|
|
||||||
},
|
|
||||||
".cm-selectionMatch": {
|
|
||||||
backgroundColor: yellow,
|
|
||||||
outline: `1px solid ${red}`,
|
|
||||||
},
|
|
||||||
"&.cm-focused .cm-matchingBracket": {
|
|
||||||
color: yellow,
|
|
||||||
// outline: `1px solid ${base02}`,
|
|
||||||
},
|
|
||||||
|
|
||||||
"&.cm-focused .cm-nonmatchingBracket": {
|
|
||||||
color: yellow,
|
|
||||||
},
|
|
||||||
|
|
||||||
".cm-gutters": {
|
|
||||||
//backgroundColor: base00,
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
color: foreground,
|
|
||||||
},
|
|
||||||
".cm-activeLineGutter": {
|
|
||||||
backgroundColor: selection_background,
|
|
||||||
color: selection_foreground,
|
|
||||||
},
|
|
||||||
|
|
||||||
".cm-foldPlaceholder": {
|
|
||||||
border: "none",
|
|
||||||
color: `${blue}`,
|
|
||||||
},
|
|
||||||
".cm-tooltip": {
|
|
||||||
border: "none",
|
|
||||||
backgroundColor: background,
|
|
||||||
},
|
|
||||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
|
||||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
|
||||||
borderTopColor: background,
|
|
||||||
borderBottomColor: background,
|
|
||||||
},
|
|
||||||
".cm-tooltip-autocomplete": {
|
|
||||||
"& > ul > li[aria-selected]": {
|
|
||||||
backgroundColor: background,
|
|
||||||
color: background,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{ dark: true },
|
|
||||||
);
|
|
||||||
|
|
||||||
let toposHighlightStyle = HighlightStyle.define([
|
|
||||||
{ tag: t.paren, color: brightwhite },
|
|
||||||
{ tag: [t.propertyName, t.punctuation, t.variableName], color: brightwhite },
|
|
||||||
{ tag: t.keyword, color: yellow },
|
|
||||||
{ tag: [t.name, t.deleted, t.character, t.macroName], color: red, },
|
|
||||||
{ tag: [t.function(t.variableName)], color: blue },
|
|
||||||
{ tag: [t.labelName], color: red },
|
|
||||||
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: cyan, },
|
|
||||||
{ tag: [t.definition(t.name), t.separator], color: magenta },
|
|
||||||
{ tag: [t.brace], color: white },
|
|
||||||
{ tag: [t.annotation], color: blue, },
|
|
||||||
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: yellow, },
|
|
||||||
{ tag: [t.typeName, t.className], color: magenta, },
|
|
||||||
{ tag: [t.operator, t.operatorKeyword], color: blue, },
|
|
||||||
{ tag: [t.tagName], color: blue, },
|
|
||||||
{ tag: [t.squareBracket], color: blue, },
|
|
||||||
{ tag: [t.angleBracket], color: blue, },
|
|
||||||
{ tag: [t.attributeName], color: red, },
|
|
||||||
{ tag: [t.regexp], color: brightgreen, },
|
|
||||||
{ tag: [t.quote], color: green, },
|
|
||||||
{ tag: [t.string], color: green },
|
|
||||||
{
|
|
||||||
tag: t.link,
|
|
||||||
color: green,
|
|
||||||
textDecoration: "underline",
|
|
||||||
textUnderlinePosition: "under",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: [t.url, t.escape, t.special(t.string)],
|
|
||||||
color: green,
|
|
||||||
},
|
|
||||||
{ tag: [t.meta], color: brightwhite },
|
|
||||||
{ tag: [t.comment], color: brightwhite, fontStyle: "italic" },
|
|
||||||
{ tag: t.monospace, color: brightwhite },
|
|
||||||
{ tag: t.strong, fontWeight: "bold", color: white },
|
|
||||||
{ tag: t.emphasis, fontStyle: "italic", color: white },
|
|
||||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
|
||||||
{ tag: t.heading, fontWeight: "bold", color: white },
|
|
||||||
{ tag: t.heading1, fontWeight: "bold", color: white },
|
|
||||||
{
|
|
||||||
tag: [t.heading2, t.heading3, t.heading4],
|
|
||||||
fontWeight: "bold",
|
|
||||||
color: yellow,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: [t.heading5, t.heading6],
|
|
||||||
color: red,
|
|
||||||
},
|
|
||||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green},
|
|
||||||
{
|
|
||||||
tag: [t.processingInstruction, t.inserted],
|
|
||||||
color: green,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: [t.contentSeparator],
|
|
||||||
color: green,
|
|
||||||
},
|
|
||||||
{ tag: t.invalid, color: red, borderBottom: `1px dotted ${red}` },
|
|
||||||
]);
|
|
||||||
return [ toposTheme, syntaxHighlighting(toposHighlightStyle),
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
// const debugTheme = EditorView.theme({
|
|
||||||
// ".cm-line span": {
|
|
||||||
// position: "relative",
|
|
||||||
// },
|
|
||||||
// ".cm-line span:hover::after": {
|
|
||||||
// position: "absolute",
|
|
||||||
// bottom: "100%",
|
|
||||||
// left: 0,
|
|
||||||
// background: "black",
|
|
||||||
// color: "white",
|
|
||||||
// border: "solid 2px",
|
|
||||||
// borderRadius: "5px",
|
|
||||||
// content: "var(--tags)",
|
|
||||||
// width: `max-content`,
|
|
||||||
// padding: "1px 4px",
|
|
||||||
// zIndex: 10,
|
|
||||||
// pointerEvents: "none",
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
|
|
||||||
// const debugHighlightStyle = HighlightStyle.define(
|
|
||||||
// // @ts-ignore
|
|
||||||
// Object.entries(t).map(([key, value]) => {
|
|
||||||
// return { tag: value, "--tags": `"tag.${key}"` };
|
|
||||||
// })
|
|
||||||
// );
|
|
||||||
// const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
|
|
||||||
|
|
||||||
|
|
||||||
export const jsCompletions = javascriptLanguage.data.of({
|
export const jsCompletions = javascriptLanguage.data.of({
|
||||||
autocomplete: toposCompletions,
|
autocomplete: toposCompletions
|
||||||
});
|
})
|
||||||
|
|
||||||
export const toposSoundCompletions = javascriptLanguage.data.of({
|
export const toposSoundCompletions = javascriptLanguage.data.of({
|
||||||
autocomplete: soundCompletions,
|
autocomplete: soundCompletions
|
||||||
});
|
})
|
||||||
|
|
||||||
export const editorSetup: Extension = (() => [
|
export const editorSetup: Extension = (() => [
|
||||||
highlightActiveLineGutter(),
|
highlightActiveLineGutter(),
|
||||||
@ -273,7 +70,6 @@ export const editorSetup: Extension = (() => [
|
|||||||
export const installEditor = (app: Editor) => {
|
export const installEditor = (app: Editor) => {
|
||||||
app.vimModeCompartment = new Compartment();
|
app.vimModeCompartment = new Compartment();
|
||||||
app.hoveringCompartment = new Compartment();
|
app.hoveringCompartment = new Compartment();
|
||||||
app.themeCompartment = new Compartment();
|
|
||||||
app.completionsCompartment = new Compartment();
|
app.completionsCompartment = new Compartment();
|
||||||
app.withLineNumbers = new Compartment();
|
app.withLineNumbers = new Compartment();
|
||||||
app.chosenLanguage = new Compartment();
|
app.chosenLanguage = new Compartment();
|
||||||
@ -299,14 +95,9 @@ export const installEditor = (app: Editor) => {
|
|||||||
app.withLineNumbers.of(lines),
|
app.withLineNumbers.of(lines),
|
||||||
app.fontSize.of(fontModif),
|
app.fontSize.of(fontModif),
|
||||||
app.hoveringCompartment.of(app.settings.tips ? inlineHoveringTips : []),
|
app.hoveringCompartment.of(app.settings.tips ? inlineHoveringTips : []),
|
||||||
app.completionsCompartment.of(
|
app.completionsCompartment.of(app.settings.completions ? [jsCompletions, toposSoundCompletions] : []),
|
||||||
app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
|
|
||||||
),
|
|
||||||
editorSetup,
|
editorSetup,
|
||||||
app.themeCompartment.of(
|
toposTheme,
|
||||||
getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
|
|
||||||
// debug
|
|
||||||
),
|
|
||||||
app.chosenLanguage.of(javascript()),
|
app.chosenLanguage.of(javascript()),
|
||||||
];
|
];
|
||||||
app.dynamicPlugins = new Compartment();
|
app.dynamicPlugins = new Compartment();
|
||||||
@ -323,7 +114,7 @@ export const installEditor = (app: Editor) => {
|
|||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]),
|
])
|
||||||
),
|
),
|
||||||
keymap.of([indentWithTab]),
|
keymap.of([indentWithTab]),
|
||||||
],
|
],
|
||||||
@ -348,7 +139,7 @@ export const installEditor = (app: Editor) => {
|
|||||||
".cm-gutters": {
|
".cm-gutters": {
|
||||||
fontSize: `${app.settings.font_size}px`,
|
fontSize: `${app.settings.font_size}px`,
|
||||||
},
|
},
|
||||||
}),
|
})
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
101
src/Evaluator.ts
101
src/Evaluator.ts
@ -1,45 +1,42 @@
|
|||||||
import type { Editor } from "./main";
|
import type { Editor } from "./main";
|
||||||
import type { File } from "./FileManagement";
|
import type { File } from "./FileManagement";
|
||||||
|
|
||||||
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
const delay = (ms: number) =>
|
||||||
|
new Promise((_, reject) =>
|
||||||
|
setTimeout(() => reject(new Error("Operation took too long")), ms)
|
||||||
|
);
|
||||||
|
|
||||||
const codeReplace = (code: string): string => {
|
const codeReplace = (code: string): string => {
|
||||||
return code.replace(/->|::/g, "&&");
|
let new_code = code.replace(/->/g, "&&").replace(/::/g, "&&");
|
||||||
|
return new_code;
|
||||||
};
|
};
|
||||||
|
|
||||||
const tryCatchWrapper = async (
|
const tryCatchWrapper = (
|
||||||
application: Editor,
|
application: Editor,
|
||||||
code: string,
|
code: string
|
||||||
): Promise<boolean> => {
|
): Promise<boolean> => {
|
||||||
/**
|
return new Promise((resolve, _) => {
|
||||||
* Wraps the provided code in a try-catch block and executes it.
|
try {
|
||||||
*
|
Function(
|
||||||
* @param application - The editor application.
|
`"use strict";try{
|
||||||
* @param code - The code to be executed.
|
${codeReplace(code)}; /* break block comments */;
|
||||||
* @returns A promise that resolves to a boolean indicating whether the code executed successfully or not.
|
} catch (e) {console.log(e); _reportError(e);};`
|
||||||
*/
|
).call(application.api);
|
||||||
|
resolve(true);
|
||||||
try {
|
} catch (error) {
|
||||||
await new Function(`"use strict"; ${codeReplace(code)}`).call(
|
application.interface.error_line.innerHTML = error as string;
|
||||||
application.api,
|
application.api._reportError(error as string)
|
||||||
);
|
resolve(false);
|
||||||
return true;
|
}
|
||||||
} catch (error) {
|
});
|
||||||
application.interface.error_line.innerHTML = error as string;
|
|
||||||
application.api._reportError(error as string);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const cache = new Map<string, Function>();
|
const cache = new Map<string, Function>();
|
||||||
const MAX_CACHE_SIZE = 40;
|
const MAX_CACHE_SIZE = 20;
|
||||||
|
|
||||||
const addFunctionToCache = (code: string, fn: Function) => {
|
const addFunctionToCache = (code: string, fn: Function) => {
|
||||||
/**
|
|
||||||
* Adds a function to the cache.
|
|
||||||
* @param code - The code associated with the function.
|
|
||||||
* @param fn - The function to be added to the cache.
|
|
||||||
*/
|
|
||||||
if (cache.size >= MAX_CACHE_SIZE) {
|
if (cache.size >= MAX_CACHE_SIZE) {
|
||||||
|
// Delete the first item if cache size exceeds max size
|
||||||
cache.delete(cache.keys().next().value);
|
cache.delete(cache.keys().next().value);
|
||||||
}
|
}
|
||||||
cache.set(code, fn);
|
cache.set(code, fn);
|
||||||
@ -48,36 +45,28 @@ const addFunctionToCache = (code: string, fn: Function) => {
|
|||||||
export const tryEvaluate = async (
|
export const tryEvaluate = async (
|
||||||
application: Editor,
|
application: Editor,
|
||||||
code: File,
|
code: File,
|
||||||
timeout = 5000,
|
timeout = 5000
|
||||||
): Promise<void> => {
|
): Promise<void> => {
|
||||||
/**
|
|
||||||
* Tries to evaluate the provided code within a specified timeout period.
|
|
||||||
* Increments the evaluation count of the code file.
|
|
||||||
* If the code is valid, updates the committed code and adds the evaluated function to the cache.
|
|
||||||
* If the code is invalid, retries the evaluation.
|
|
||||||
* @param application - The editor application.
|
|
||||||
* @param code - The code file to evaluate.
|
|
||||||
* @param timeout - The timeout period in milliseconds (default: 5000).
|
|
||||||
* @returns A Promise that resolves when the evaluation is complete.
|
|
||||||
*/
|
|
||||||
code.evaluations!++;
|
|
||||||
const candidateCode = code.candidate;
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const cachedFunction = cache.get(candidateCode);
|
code.evaluations!++;
|
||||||
if (cachedFunction) {
|
const candidateCode = code.candidate;
|
||||||
cachedFunction.call(application.api);
|
|
||||||
|
if (cache.has(candidateCode)) {
|
||||||
|
// If the code is already in cache, use it
|
||||||
|
cache.get(candidateCode)!.call(application.api);
|
||||||
} else {
|
} else {
|
||||||
const wrappedCode = `let i = ${code.evaluations}; ${candidateCode}`;
|
const wrappedCode = `let i = ${code.evaluations};` + candidateCode;
|
||||||
|
// Otherwise, evaluate the code and if valid, add it to the cache
|
||||||
const isCodeValid = await Promise.race([
|
const isCodeValid = await Promise.race([
|
||||||
tryCatchWrapper(application, wrappedCode),
|
tryCatchWrapper(application, wrappedCode as string),
|
||||||
delay(timeout),
|
delay(timeout),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
if (isCodeValid) {
|
if (isCodeValid) {
|
||||||
code.committed = code.candidate;
|
code.committed = code.candidate;
|
||||||
const newFunction = new Function(
|
const newFunction = new Function(
|
||||||
`"use strict"; ${codeReplace(wrappedCode)}`,
|
`"use strict";try{${codeReplace(
|
||||||
|
wrappedCode
|
||||||
|
)}} catch (e) {console.log(e); _reportError(e);};`
|
||||||
);
|
);
|
||||||
addFunctionToCache(candidateCode, newFunction);
|
addFunctionToCache(candidateCode, newFunction);
|
||||||
} else {
|
} else {
|
||||||
@ -86,23 +75,15 @@ export const tryEvaluate = async (
|
|||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
application.interface.error_line.innerHTML = error as string;
|
application.interface.error_line.innerHTML = error as string;
|
||||||
application.api._reportError(error as string);
|
application.api._reportError(error as string)
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const evaluate = async (
|
export const evaluate = async (
|
||||||
application: Editor,
|
application: Editor,
|
||||||
code: File,
|
code: File,
|
||||||
timeout = 1000,
|
timeout = 1000
|
||||||
): Promise<void> => {
|
): Promise<void> => {
|
||||||
/**
|
|
||||||
* Evaluates the given code using the provided application and timeout.
|
|
||||||
* @param application The editor application.
|
|
||||||
* @param code The code file to evaluate.
|
|
||||||
* @param timeout The timeout value in milliseconds (default: 1000).
|
|
||||||
* @returns A Promise that resolves when the evaluation is complete.
|
|
||||||
*/
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await Promise.race([
|
await Promise.race([
|
||||||
tryCatchWrapper(application, code.committed as string),
|
tryCatchWrapper(application, code.committed as string),
|
||||||
@ -117,7 +98,7 @@ export const evaluate = async (
|
|||||||
|
|
||||||
export const evaluateOnce = async (
|
export const evaluateOnce = async (
|
||||||
application: Editor,
|
application: Editor,
|
||||||
code: string,
|
code: string
|
||||||
): Promise<void> => {
|
): Promise<void> => {
|
||||||
/**
|
/**
|
||||||
* Evaluates the code once without any caching or error-handling mechanisms besides the tryCatchWrapper.
|
* Evaluates the code once without any caching or error-handling mechanisms besides the tryCatchWrapper.
|
||||||
|
|||||||
@ -136,7 +136,7 @@ export class AppSettings {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
public vimMode: boolean = false;
|
public vimMode: boolean = false;
|
||||||
public theme: string = "Everblush";
|
public theme: string = "toposTheme";
|
||||||
public font: string = "IBM Plex Mono";
|
public font: string = "IBM Plex Mono";
|
||||||
public font_size: number = 24;
|
public font_size: number = 24;
|
||||||
public universes: Universes;
|
public universes: Universes;
|
||||||
@ -154,7 +154,7 @@ export class AppSettings {
|
|||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
const settingsFromStorage = JSON.parse(
|
const settingsFromStorage = JSON.parse(
|
||||||
localStorage.getItem("topos") || "{}",
|
localStorage.getItem("topos") || "{}"
|
||||||
);
|
);
|
||||||
|
|
||||||
if (settingsFromStorage && Object.keys(settingsFromStorage).length !== 0) {
|
if (settingsFromStorage && Object.keys(settingsFromStorage).length !== 0) {
|
||||||
@ -210,7 +210,7 @@ export class AppSettings {
|
|||||||
|
|
||||||
saveApplicationToLocalStorage(
|
saveApplicationToLocalStorage(
|
||||||
universes: Universes,
|
universes: Universes,
|
||||||
settings: Settings,
|
settings: Settings
|
||||||
): void {
|
): void {
|
||||||
/**
|
/**
|
||||||
* Main method to store the application to local storage.
|
* Main method to store the application to local storage.
|
||||||
@ -263,9 +263,7 @@ export const initializeSelectedUniverse = (app: Editor): void => {
|
|||||||
app.universes[app.selected_universe] = structuredClone(template_universe);
|
app.universes[app.selected_universe] = structuredClone(template_universe);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
(
|
(app.interface.universe_viewer as HTMLInputElement).placeholder! = `${app.selected_universe}`;
|
||||||
app.interface.universe_viewer as HTMLInputElement
|
|
||||||
).placeholder! = `${app.selected_universe}`;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const emptyUrl = () => {
|
export const emptyUrl = () => {
|
||||||
@ -273,11 +271,6 @@ export const emptyUrl = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const share = async (app: Editor) => {
|
export const share = async (app: Editor) => {
|
||||||
/**
|
|
||||||
* Shares the current state of the app by generating a URL with encoded data and copying it to the clipboard.
|
|
||||||
* @param app - The Editor instance representing the app.
|
|
||||||
* @returns A Promise that resolves to void.
|
|
||||||
*/
|
|
||||||
async function bufferToBase64(buffer: Uint8Array) {
|
async function bufferToBase64(buffer: Uint8Array) {
|
||||||
const base64url: string = await new Promise((r) => {
|
const base64url: string = await new Promise((r) => {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
@ -328,20 +321,8 @@ export const loadUniverserFromUrl = (app: Editor): void => {
|
|||||||
export const loadUniverse = (
|
export const loadUniverse = (
|
||||||
app: Editor,
|
app: Editor,
|
||||||
universeName: string,
|
universeName: string,
|
||||||
universe: Universe = template_universe,
|
universe: Universe = template_universe
|
||||||
): void => {
|
): void => {
|
||||||
/**
|
|
||||||
* Loads a universe into the application.
|
|
||||||
* If the universe does not exist, a fresh clone of the template universe is created and added to the application.
|
|
||||||
* The references to the selected universe are updated in the application settings.
|
|
||||||
* The editor view is updated to reflect the selected universe.
|
|
||||||
* The initialization script for the selected universe is evaluated.
|
|
||||||
*
|
|
||||||
* @param app - The Editor application instance.
|
|
||||||
* @param universeName - The name of the universe to load.
|
|
||||||
* @param universe - The template universe to clone if the specified universe does not exist.
|
|
||||||
*/
|
|
||||||
|
|
||||||
let selectedUniverse = universeName.trim();
|
let selectedUniverse = universeName.trim();
|
||||||
if (app.universes[selectedUniverse] === undefined) {
|
if (app.universes[selectedUniverse] === undefined) {
|
||||||
// Pushing a freshly cloned template universe to:
|
// Pushing a freshly cloned template universe to:
|
||||||
@ -353,9 +334,7 @@ export const loadUniverse = (
|
|||||||
// Updating references to the currently selected universe
|
// Updating references to the currently selected universe
|
||||||
app.settings.selected_universe = selectedUniverse;
|
app.settings.selected_universe = selectedUniverse;
|
||||||
app.selected_universe = selectedUniverse;
|
app.selected_universe = selectedUniverse;
|
||||||
(
|
(app.interface.universe_viewer as HTMLInputElement).placeholder! = `${selectedUniverse}`;
|
||||||
app.interface.universe_viewer as HTMLInputElement
|
|
||||||
).placeholder! = `${selectedUniverse}`;
|
|
||||||
// Updating the editor View to reflect the selected universe
|
// Updating the editor View to reflect the selected universe
|
||||||
app.updateEditorView();
|
app.updateEditorView();
|
||||||
// Evaluating the initialisation script for the selected universe
|
// Evaluating the initialisation script for the selected universe
|
||||||
@ -363,11 +342,7 @@ export const loadUniverse = (
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const openUniverseModal = (): void => {
|
export const openUniverseModal = (): void => {
|
||||||
/**
|
// If the modal is hidden, unhide it and hide the editor
|
||||||
* Opens the universe modal.
|
|
||||||
* If the modal is hidden, it unhides it and hides the editor.
|
|
||||||
* If the modal is already visible, it closes the modal.
|
|
||||||
*/
|
|
||||||
if (
|
if (
|
||||||
document.getElementById("modal-buffers")!.classList.contains("invisible")
|
document.getElementById("modal-buffers")!.classList.contains("invisible")
|
||||||
) {
|
) {
|
||||||
@ -380,9 +355,6 @@ export const openUniverseModal = (): void => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const closeUniverseModal = (): void => {
|
export const closeUniverseModal = (): void => {
|
||||||
/**
|
|
||||||
* Closes the universe modal and performs necessary actions.
|
|
||||||
*/
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
document.getElementById("buffer-search")!.value = "";
|
document.getElementById("buffer-search")!.value = "";
|
||||||
document.getElementById("editor")!.classList.remove("invisible");
|
document.getElementById("editor")!.classList.remove("invisible");
|
||||||
@ -390,9 +362,6 @@ export const closeUniverseModal = (): void => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const openSettingsModal = (): void => {
|
export const openSettingsModal = (): void => {
|
||||||
/**
|
|
||||||
* Opens the settings modal.
|
|
||||||
*/
|
|
||||||
if (
|
if (
|
||||||
document.getElementById("modal-settings")!.classList.contains("invisible")
|
document.getElementById("modal-settings")!.classList.contains("invisible")
|
||||||
) {
|
) {
|
||||||
@ -404,9 +373,6 @@ export const openSettingsModal = (): void => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const closeSettingsModal = (): void => {
|
export const closeSettingsModal = (): void => {
|
||||||
/**
|
|
||||||
* Closes the settings modal and performs necessary actions.
|
|
||||||
*/
|
|
||||||
document.getElementById("editor")!.classList.remove("invisible");
|
document.getElementById("editor")!.classList.remove("invisible");
|
||||||
document.getElementById("modal-settings")!.classList.add("invisible");
|
document.getElementById("modal-settings")!.classList.add("invisible");
|
||||||
};
|
};
|
||||||
|
|||||||
@ -175,10 +175,10 @@ export class MidiConnection {
|
|||||||
*/
|
*/
|
||||||
if (this.midiInputs.length > 0) {
|
if (this.midiInputs.length > 0) {
|
||||||
const midiClockSelect = document.getElementById(
|
const midiClockSelect = document.getElementById(
|
||||||
"midi-clock-input",
|
"midi-clock-input"
|
||||||
) as HTMLSelectElement;
|
) as HTMLSelectElement;
|
||||||
const midiInputSelect = document.getElementById(
|
const midiInputSelect = document.getElementById(
|
||||||
"default-midi-input",
|
"default-midi-input"
|
||||||
) as HTMLSelectElement;
|
) as HTMLSelectElement;
|
||||||
|
|
||||||
midiClockSelect.innerHTML = "";
|
midiClockSelect.innerHTML = "";
|
||||||
@ -207,7 +207,7 @@ export class MidiConnection {
|
|||||||
|
|
||||||
if (this.settings.midi_clock_input) {
|
if (this.settings.midi_clock_input) {
|
||||||
const clockMidiInputIndex = this.getMidiInputIndex(
|
const clockMidiInputIndex = this.getMidiInputIndex(
|
||||||
this.settings.midi_clock_input,
|
this.settings.midi_clock_input
|
||||||
);
|
);
|
||||||
midiClockSelect.value = clockMidiInputIndex.toString();
|
midiClockSelect.value = clockMidiInputIndex.toString();
|
||||||
if (clockMidiInputIndex > 0) {
|
if (clockMidiInputIndex > 0) {
|
||||||
@ -220,7 +220,7 @@ export class MidiConnection {
|
|||||||
|
|
||||||
if (this.settings.default_midi_input) {
|
if (this.settings.default_midi_input) {
|
||||||
const defaultMidiInputIndex = this.getMidiInputIndex(
|
const defaultMidiInputIndex = this.getMidiInputIndex(
|
||||||
this.settings.default_midi_input,
|
this.settings.default_midi_input
|
||||||
);
|
);
|
||||||
midiInputSelect.value = defaultMidiInputIndex.toString();
|
midiInputSelect.value = defaultMidiInputIndex.toString();
|
||||||
if (defaultMidiInputIndex > 0) {
|
if (defaultMidiInputIndex > 0) {
|
||||||
@ -400,14 +400,14 @@ export class MidiConnection {
|
|||||||
|
|
||||||
public removeFromActiveNotes(note: number, channel: number): void {
|
public removeFromActiveNotes(note: number, channel: number): void {
|
||||||
const index = this.activeNotes.findIndex(
|
const index = this.activeNotes.findIndex(
|
||||||
(e) => e.note === note && e.channel === channel,
|
(e) => e.note === note && e.channel === channel
|
||||||
);
|
);
|
||||||
if (index >= 0) this.activeNotes.splice(index, 1);
|
if (index >= 0) this.activeNotes.splice(index, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
public removeFromStickyNotes(note: number, channel: number): boolean {
|
public removeFromStickyNotes(note: number, channel: number): boolean {
|
||||||
const index = this.stickyNotes.findIndex(
|
const index = this.stickyNotes.findIndex(
|
||||||
(e) => e.note === note && e.channel === channel,
|
(e) => e.note === note && e.channel === channel
|
||||||
);
|
);
|
||||||
if (index >= 0) {
|
if (index >= 0) {
|
||||||
this.stickyNotes.splice(index, 1);
|
this.stickyNotes.splice(index, 1);
|
||||||
@ -578,9 +578,8 @@ export class MidiConnection {
|
|||||||
if (typeof output === "number") {
|
if (typeof output === "number") {
|
||||||
if (output < 0 || output >= this.midiOutputs.length) {
|
if (output < 0 || output >= this.midiOutputs.length) {
|
||||||
console.error(
|
console.error(
|
||||||
`Invalid MIDI output index. Index must be in the range 0-${
|
`Invalid MIDI output index. Index must be in the range 0-${this.midiOutputs.length - 1
|
||||||
this.midiOutputs.length - 1
|
}.`
|
||||||
}.`,
|
|
||||||
);
|
);
|
||||||
return this.currentOutputIndex;
|
return this.currentOutputIndex;
|
||||||
} else {
|
} else {
|
||||||
@ -608,9 +607,8 @@ export class MidiConnection {
|
|||||||
if (typeof input === "number") {
|
if (typeof input === "number") {
|
||||||
if (input < 0 || input >= this.midiInputs.length) {
|
if (input < 0 || input >= this.midiInputs.length) {
|
||||||
console.error(
|
console.error(
|
||||||
`Invalid MIDI input index. Index must be in the range 0-${
|
`Invalid MIDI input index. Index must be in the range 0-${this.midiInputs.length - 1
|
||||||
this.midiInputs.length - 1
|
}.`
|
||||||
}.`,
|
|
||||||
);
|
);
|
||||||
return -1;
|
return -1;
|
||||||
} else {
|
} else {
|
||||||
@ -644,7 +642,7 @@ export class MidiConnection {
|
|||||||
velocity: number,
|
velocity: number,
|
||||||
duration: number,
|
duration: number,
|
||||||
port: number | string = this.currentOutputIndex,
|
port: number | string = this.currentOutputIndex,
|
||||||
bend: number | undefined = undefined,
|
bend: number | undefined = undefined
|
||||||
): void {
|
): void {
|
||||||
/**
|
/**
|
||||||
* Sending a MIDI Note on/off message with the same note number and channel. Automatically manages
|
* Sending a MIDI Note on/off message with the same note number and channel. Automatically manages
|
||||||
@ -670,14 +668,11 @@ export class MidiConnection {
|
|||||||
if (bend) this.sendPitchBend(bend, channel, port);
|
if (bend) this.sendPitchBend(bend, channel, port);
|
||||||
|
|
||||||
// Schedule Note Off
|
// Schedule Note Off
|
||||||
const timeoutId = setTimeout(
|
const timeoutId = setTimeout(() => {
|
||||||
() => {
|
output.send(noteOffMessage);
|
||||||
output.send(noteOffMessage);
|
if (bend) this.sendPitchBend(8192, channel, port);
|
||||||
if (bend) this.sendPitchBend(8192, channel, port);
|
delete this.scheduledNotes[noteNumber];
|
||||||
delete this.scheduledNotes[noteNumber];
|
}, (duration - 0.02) * 1000);
|
||||||
},
|
|
||||||
(duration - 0.02) * 1000,
|
|
||||||
);
|
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
this.scheduledNotes[noteNumber] = timeoutId;
|
this.scheduledNotes[noteNumber] = timeoutId;
|
||||||
@ -690,7 +685,7 @@ export class MidiConnection {
|
|||||||
note: number,
|
note: number,
|
||||||
channel: number,
|
channel: number,
|
||||||
velocity: number,
|
velocity: number,
|
||||||
port: number | string = this.currentOutputIndex,
|
port: number | string = this.currentOutputIndex
|
||||||
) {
|
) {
|
||||||
/**
|
/**
|
||||||
* Sending Midi Note on message
|
* Sending Midi Note on message
|
||||||
@ -709,7 +704,7 @@ export class MidiConnection {
|
|||||||
sendMidiOff(
|
sendMidiOff(
|
||||||
note: number,
|
note: number,
|
||||||
channel: number,
|
channel: number,
|
||||||
port: number | string = this.currentOutputIndex,
|
port: number | string = this.currentOutputIndex
|
||||||
) {
|
) {
|
||||||
/**
|
/**
|
||||||
* Sending Midi Note off message
|
* Sending Midi Note off message
|
||||||
@ -727,7 +722,7 @@ export class MidiConnection {
|
|||||||
|
|
||||||
sendAllNotesOff(
|
sendAllNotesOff(
|
||||||
channel: number,
|
channel: number,
|
||||||
port: number | string = this.currentOutputIndex,
|
port: number | string = this.currentOutputIndex
|
||||||
) {
|
) {
|
||||||
/**
|
/**
|
||||||
* Sending Midi Note off message
|
* Sending Midi Note off message
|
||||||
@ -744,7 +739,7 @@ export class MidiConnection {
|
|||||||
|
|
||||||
sendAllSoundOff(
|
sendAllSoundOff(
|
||||||
channel: number,
|
channel: number,
|
||||||
port: number | string = this.currentOutputIndex,
|
port: number | string = this.currentOutputIndex
|
||||||
) {
|
) {
|
||||||
/**
|
/**
|
||||||
* Sending all sound off
|
* Sending all sound off
|
||||||
@ -780,7 +775,7 @@ export class MidiConnection {
|
|||||||
public sendPitchBend(
|
public sendPitchBend(
|
||||||
value: number,
|
value: number,
|
||||||
channel: number,
|
channel: number,
|
||||||
port: number | string = this.currentOutputIndex,
|
port: number | string = this.currentOutputIndex
|
||||||
): void {
|
): void {
|
||||||
/**
|
/**
|
||||||
* Sends a MIDI Pitch Bend message to the currently selected MIDI output.
|
* Sends a MIDI Pitch Bend message to the currently selected MIDI output.
|
||||||
@ -791,7 +786,7 @@ export class MidiConnection {
|
|||||||
*/
|
*/
|
||||||
if (value < 0 || value > 16383) {
|
if (value < 0 || value > 16383) {
|
||||||
console.error(
|
console.error(
|
||||||
"Invalid pitch bend value. Value must be in the range 0-16383.",
|
"Invalid pitch bend value. Value must be in the range 0-16383."
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (channel < 0 || channel > 15) {
|
if (channel < 0 || channel > 15) {
|
||||||
@ -830,7 +825,7 @@ export class MidiConnection {
|
|||||||
public sendMidiControlChange(
|
public sendMidiControlChange(
|
||||||
controlNumber: number,
|
controlNumber: number,
|
||||||
value: number,
|
value: number,
|
||||||
channel: number,
|
channel: number
|
||||||
): void {
|
): void {
|
||||||
/**
|
/**
|
||||||
* Sends a MIDI Control Change message to the currently selected MIDI output.
|
* Sends a MIDI Control Change message to the currently selected MIDI output.
|
||||||
|
|||||||
@ -1,62 +0,0 @@
|
|||||||
export interface OSCMessage {
|
|
||||||
address: string;
|
|
||||||
port: number;
|
|
||||||
args: object;
|
|
||||||
timetag: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Send/receive messages from websocket
|
|
||||||
export let outputSocket = new WebSocket("ws://localhost:3000");
|
|
||||||
export let inputSocket = new WebSocket("ws://localhost:3001");
|
|
||||||
|
|
||||||
export let oscMessages: any[] = [];
|
|
||||||
inputSocket.addEventListener("message", (event) => {
|
|
||||||
let data = JSON.parse(event.data);
|
|
||||||
if (oscMessages.length >= 1000) {
|
|
||||||
oscMessages.shift();
|
|
||||||
}
|
|
||||||
oscMessages.push(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
outputSocket.onopen = function (event) {
|
|
||||||
console.log("Connected to WebSocket Server");
|
|
||||||
// Send an OSC-like message
|
|
||||||
outputSocket.send(
|
|
||||||
JSON.stringify({
|
|
||||||
address: "/successful_connexion",
|
|
||||||
port: 3000,
|
|
||||||
args: {},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
outputSocket.onerror = function (error) {
|
|
||||||
console.log("Websocket Error:", error);
|
|
||||||
};
|
|
||||||
|
|
||||||
outputSocket.onmessage = function (event) {
|
|
||||||
console.log("Received: ", event.data);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export function sendToServer(message: OSCMessage) {
|
|
||||||
if (outputSocket.readyState === WebSocket.OPEN) {
|
|
||||||
outputSocket.send(JSON.stringify(message));
|
|
||||||
} else {
|
|
||||||
console.log("WebSocket is not open. Attempting to reconnect...");
|
|
||||||
if (
|
|
||||||
outputSocket.readyState === WebSocket.CONNECTING ||
|
|
||||||
outputSocket.readyState === WebSocket.OPEN
|
|
||||||
) {
|
|
||||||
outputSocket.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a new WebSocket connection
|
|
||||||
outputSocket = new WebSocket("ws://localhost:3000");
|
|
||||||
|
|
||||||
// Send the message once the socket is open
|
|
||||||
outputSocket.onopen = () => {
|
|
||||||
outputSocket.send(JSON.stringify(message));
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,155 +0,0 @@
|
|||||||
/**
|
|
||||||
* This code is taken from https://github.com/tidalcycles/strudel/pull/839. The logic is written by
|
|
||||||
* daslyfe (Jade Rose Rowland). I have tweaked it a bit to fit the needs of this project (TypeScript),
|
|
||||||
* etc... Many thanks for this piece of code! This code is initially part of the Strudel project:
|
|
||||||
* https://github.com/tidalcycles/strudel.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
import { registerSound, onTriggerSample } from "superdough";
|
|
||||||
|
|
||||||
export const isAudioFile = (filename: string) => ['wav', 'mp3'].includes(filename.split('.').slice(-1)[0]);
|
|
||||||
|
|
||||||
interface samplesDBConfig {
|
|
||||||
dbName: string,
|
|
||||||
table: string,
|
|
||||||
columns: string[],
|
|
||||||
version: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export const samplesDBConfig = {
|
|
||||||
dbName: 'samples',
|
|
||||||
table: 'usersamples',
|
|
||||||
columns: ['data_url', 'title'],
|
|
||||||
version: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
async function bufferToDataUrl(buf: Buffer) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
var blob = new Blob([buf], { type: 'application/octet-binary' });
|
|
||||||
var reader = new FileReader();
|
|
||||||
reader.onload = function (event: Event) {
|
|
||||||
// @ts-ignore
|
|
||||||
resolve(event.target.result);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(blob);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const processFilesForIDB = async (files: FileList) => {
|
|
||||||
return await Promise.all(
|
|
||||||
Array.from(files)
|
|
||||||
.map(async (s: File) => {
|
|
||||||
const title = s.name;
|
|
||||||
if (!isAudioFile(title)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
//create obscured url to file system that can be fetched
|
|
||||||
const sUrl = URL.createObjectURL(s);
|
|
||||||
//fetch the sound and turn it into a buffer array
|
|
||||||
const buf = await fetch(sUrl).then((res) => res.arrayBuffer());
|
|
||||||
//create a url blob containing all of the buffer data
|
|
||||||
// @ts-ignore
|
|
||||||
// TODO: conversion to do here, remove ts-ignore
|
|
||||||
const base64 = await bufferToDataUrl(buf);
|
|
||||||
return {
|
|
||||||
title,
|
|
||||||
blob: base64,
|
|
||||||
id: s.webkitRelativePath,
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.filter(Boolean),
|
|
||||||
).catch((error) => {
|
|
||||||
console.log('Something went wrong while processing uploaded files', error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export const registerSamplesFromDB = (config: samplesDBConfig, onComplete = () => {}) => {
|
|
||||||
openDB(config, (objectStore: IDBObjectStore) => {
|
|
||||||
let query = objectStore.getAll();
|
|
||||||
query.onsuccess = (event: Event) => {
|
|
||||||
// @ts-ignore
|
|
||||||
const soundFiles = event.target.result;
|
|
||||||
if (!soundFiles?.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const sounds = new Map();
|
|
||||||
[...soundFiles]
|
|
||||||
.sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true, sensitivity: 'base' }))
|
|
||||||
.forEach((soundFile) => {
|
|
||||||
const title = soundFile.title;
|
|
||||||
if (!isAudioFile(title)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const splitRelativePath = soundFile.id?.split('/');
|
|
||||||
const parentDirectory = splitRelativePath[splitRelativePath.length - 2];
|
|
||||||
const soundPath = soundFile.blob;
|
|
||||||
const soundPaths = sounds.get(parentDirectory) ?? new Set();
|
|
||||||
soundPaths.add(soundPath);
|
|
||||||
sounds.set(parentDirectory, soundPaths);
|
|
||||||
});
|
|
||||||
|
|
||||||
sounds.forEach((soundPaths, key) => {
|
|
||||||
const value = Array.from(soundPaths);
|
|
||||||
// @ts-ignore
|
|
||||||
registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
|
|
||||||
type: 'sample',
|
|
||||||
samples: value,
|
|
||||||
baseUrl: undefined,
|
|
||||||
prebake: false,
|
|
||||||
tag: "user",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
onComplete();
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const openDB = (config: samplesDBConfig, onOpened: Function) => {
|
|
||||||
const { dbName, version, table, columns } = config
|
|
||||||
|
|
||||||
if (!('indexedDB' in window)) {
|
|
||||||
console.log('This browser doesn\'t support IndexedDB')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const dbOpen = indexedDB.open(dbName, version);
|
|
||||||
|
|
||||||
|
|
||||||
dbOpen.onupgradeneeded = (_event) => {
|
|
||||||
const db = dbOpen.result;
|
|
||||||
const objectStore = db.createObjectStore(table, { keyPath: 'id', autoIncrement: false });
|
|
||||||
columns.forEach((c: any) => {
|
|
||||||
objectStore.createIndex(c, c, { unique: false });
|
|
||||||
});
|
|
||||||
};
|
|
||||||
dbOpen.onerror = function (err: Event) {
|
|
||||||
console.log('Error opening DB: ', (err.target as IDBOpenDBRequest).error);
|
|
||||||
}
|
|
||||||
dbOpen.onsuccess = function (_event: Event) {
|
|
||||||
const db = dbOpen.result;
|
|
||||||
db.onversionchange = function() {
|
|
||||||
db.close();
|
|
||||||
alert("Database is outdated, please reload the page.")
|
|
||||||
};
|
|
||||||
const writeTransaction = db.transaction([table], 'readwrite'),
|
|
||||||
objectStore = writeTransaction.objectStore(table);
|
|
||||||
// Writing in the database here!
|
|
||||||
onOpened(objectStore)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const uploadSamplesToDB = async (config: samplesDBConfig, files: FileList) => {
|
|
||||||
await processFilesForIDB(files).then((files) => {
|
|
||||||
const onOpened = (objectStore: IDBObjectStore, _db: IDBDatabase) => {
|
|
||||||
// @ts-ignore
|
|
||||||
files.forEach((file: File) => {
|
|
||||||
if (file == null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
objectStore.put(file);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
openDB(config, onOpened);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -1,7 +1,6 @@
|
|||||||
import { EditorView } from "codemirror";
|
import { EditorView } from "codemirror";
|
||||||
import { vim } from "@replit/codemirror-vim";
|
import { vim } from "@replit/codemirror-vim";
|
||||||
import { type Editor } from "./main";
|
import { type Editor } from "./main";
|
||||||
import colors from "./colors.json";
|
|
||||||
import {
|
import {
|
||||||
documentation_factory,
|
documentation_factory,
|
||||||
hideDocumentation,
|
hideDocumentation,
|
||||||
@ -25,7 +24,6 @@ import { lineNumbers } from "@codemirror/view";
|
|||||||
import { jsCompletions } from "./EditorSetup";
|
import { jsCompletions } from "./EditorSetup";
|
||||||
import { createDocumentationStyle } from "./DomElements";
|
import { createDocumentationStyle } from "./DomElements";
|
||||||
import { saveState } from "./WindowBehavior";
|
import { saveState } from "./WindowBehavior";
|
||||||
import { registerSamplesFromDB, samplesDBConfig, uploadSamplesToDB } from "./IO/SampleLoading";
|
|
||||||
|
|
||||||
export const installInterfaceLogic = (app: Editor) => {
|
export const installInterfaceLogic = (app: Editor) => {
|
||||||
// Initialize style
|
// Initialize style
|
||||||
@ -59,11 +57,9 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
for (let i = 0; i < tabs.length; i++) {
|
for (let i = 0; i < tabs.length; i++) {
|
||||||
tabs[i].addEventListener("click", (event) => {
|
tabs[i].addEventListener("click", (event) => {
|
||||||
// Updating the CSS accordingly
|
// Updating the CSS accordingly
|
||||||
tabs[i].classList.add("bg-foreground");
|
tabs[i].classList.add("bg-orange-300");
|
||||||
tabs[i].classList.add("text-selection_foreground");
|
|
||||||
for (let j = 0; j < tabs.length; j++) {
|
for (let j = 0; j < tabs.length; j++) {
|
||||||
if (j != i) tabs[j].classList.remove("bg-foreground");
|
if (j != i) tabs[j].classList.remove("bg-orange-300");
|
||||||
if (j != i) tabs[j].classList.remove("text-selection_foreground");
|
|
||||||
}
|
}
|
||||||
app.currentFile().candidate = app.view.state.doc.toString();
|
app.currentFile().candidate = app.view.state.doc.toString();
|
||||||
|
|
||||||
@ -122,59 +118,35 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
|
|
||||||
app.interface.universe_viewer.addEventListener("keydown", (event: any) => {
|
app.interface.universe_viewer.addEventListener("keydown", (event: any) => {
|
||||||
if (event.key === "Enter") {
|
if (event.key === "Enter") {
|
||||||
let content = (
|
let content = (app.interface.universe_viewer as HTMLInputElement).value.trim();
|
||||||
app.interface.universe_viewer as HTMLInputElement
|
|
||||||
).value.trim();
|
|
||||||
if (content.length > 2 && content.length < 40) {
|
if (content.length > 2 && content.length < 40) {
|
||||||
if (content !== app.selected_universe) {
|
if (content !== app.selected_universe) {
|
||||||
Object.defineProperty(
|
Object.defineProperty(app.universes, content,
|
||||||
app.universes,
|
|
||||||
content,
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
Object.getOwnPropertyDescriptor(
|
Object.getOwnPropertyDescriptor(app.universes, app.selected_universe));
|
||||||
app.universes,
|
|
||||||
app.selected_universe,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
delete app.universes[app.selected_universe];
|
delete app.universes[app.selected_universe];
|
||||||
}
|
}
|
||||||
app.selected_universe = content;
|
app.selected_universe = content;
|
||||||
loadUniverse(app, app.selected_universe);
|
loadUniverse(app, app.selected_universe);
|
||||||
(app.interface.universe_viewer as HTMLInputElement).placeholder =
|
(app.interface.universe_viewer as HTMLInputElement).placeholder = content;
|
||||||
content;
|
(app.interface.universe_viewer as HTMLInputElement).value = '';
|
||||||
(app.interface.universe_viewer as HTMLInputElement).value = "";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
app.interface.audio_nudge_range.addEventListener("input", () => {
|
app.interface.audio_nudge_range.addEventListener("input", () => {
|
||||||
// TODO: rebuild this
|
app.clock.nudge = parseInt(
|
||||||
// app.clock.nudge = parseInt(
|
(app.interface.audio_nudge_range as HTMLInputElement).value
|
||||||
// (app.interface.audio_nudge_range as HTMLInputElement).value,
|
);
|
||||||
// );
|
|
||||||
});
|
});
|
||||||
|
|
||||||
app.interface.dough_nudge_range.addEventListener("input", () => {
|
app.interface.dough_nudge_range.addEventListener("input", () => {
|
||||||
app.dough_nudge = parseInt(
|
app.dough_nudge = parseInt(
|
||||||
(app.interface.dough_nudge_range as HTMLInputElement).value,
|
(app.interface.dough_nudge_range as HTMLInputElement).value
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
app.interface.upload_samples_button.addEventListener("input", async (event) => {
|
|
||||||
let fileInput = event.target as HTMLInputElement;
|
|
||||||
if (!fileInput.files?.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
app.interface.sample_indicator.innerText = "Loading...";
|
|
||||||
app.interface.sample_indicator.classList.add("animate-pulse");
|
|
||||||
await uploadSamplesToDB(samplesDBConfig, fileInput.files).then(() => {
|
|
||||||
registerSamplesFromDB(samplesDBConfig, () => {
|
|
||||||
app.interface.sample_indicator.innerText = "Import samples";
|
|
||||||
app.interface.sample_indicator.classList.remove("animate-pulse");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
app.interface.upload_universe_button.addEventListener("click", () => {
|
app.interface.upload_universe_button.addEventListener("click", () => {
|
||||||
const fileInput = document.createElement("input");
|
const fileInput = document.createElement("input");
|
||||||
fileInput.type = "file";
|
fileInput.type = "file";
|
||||||
@ -255,16 +227,16 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
app.interface.local_button.addEventListener("click", () =>
|
app.interface.local_button.addEventListener("click", () =>
|
||||||
app.changeModeFromInterface("local"),
|
app.changeModeFromInterface("local")
|
||||||
);
|
);
|
||||||
app.interface.global_button.addEventListener("click", () =>
|
app.interface.global_button.addEventListener("click", () =>
|
||||||
app.changeModeFromInterface("global"),
|
app.changeModeFromInterface("global")
|
||||||
);
|
);
|
||||||
app.interface.init_button.addEventListener("click", () =>
|
app.interface.init_button.addEventListener("click", () =>
|
||||||
app.changeModeFromInterface("init"),
|
app.changeModeFromInterface("init")
|
||||||
);
|
);
|
||||||
app.interface.note_button.addEventListener("click", () =>
|
app.interface.note_button.addEventListener("click", () =>
|
||||||
app.changeModeFromInterface("notes"),
|
app.changeModeFromInterface("notes")
|
||||||
);
|
);
|
||||||
|
|
||||||
app.interface.font_family_selector.addEventListener("change", () => {
|
app.interface.font_family_selector.addEventListener("change", () => {
|
||||||
@ -283,7 +255,7 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
fontSize: app.settings.font_size + "px",
|
fontSize: app.settings.font_size + "px",
|
||||||
},
|
},
|
||||||
".cm-gutters": { fontSize: app.settings.font_size + "px" },
|
".cm-gutters": { fontSize: app.settings.font_size + "px" },
|
||||||
}),
|
})
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -303,58 +275,26 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
fontSize: app.settings.font_size + "px",
|
fontSize: app.settings.font_size + "px",
|
||||||
},
|
},
|
||||||
".cm-gutters": { fontSize: app.settings.font_size + "px" },
|
".cm-gutters": { fontSize: app.settings.font_size + "px" },
|
||||||
}),
|
})
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
app.interface.theme_selector.addEventListener("change", () => {
|
|
||||||
app.settings.theme = (app.interface.theme_selector as HTMLSelectElement).value;
|
|
||||||
app.readTheme(app.settings.theme);
|
|
||||||
// @ts-ignore
|
|
||||||
let selected_theme = colors[app.settings.theme as string];
|
|
||||||
let theme_preview = "";
|
|
||||||
for (const [key, _] of Object.entries(selected_theme)) {
|
|
||||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</div>`;
|
|
||||||
}
|
|
||||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
|
||||||
});
|
|
||||||
|
|
||||||
app.interface.settings_button.addEventListener("click", () => {
|
app.interface.settings_button.addEventListener("click", () => {
|
||||||
// Populate the font selector
|
// Populate the font selector
|
||||||
const fontFamilySelect = document.getElementById(
|
const fontFamilySelect = document.getElementById(
|
||||||
"font-family",
|
"font-family"
|
||||||
) as HTMLSelectElement | null;
|
) as HTMLSelectElement | null;
|
||||||
if (fontFamilySelect) {
|
if (fontFamilySelect) {
|
||||||
fontFamilySelect.value = app.settings.font;
|
fontFamilySelect.value = app.settings.font;
|
||||||
}
|
}
|
||||||
|
|
||||||
app.interface.theme_selector.innerHTML = "";
|
|
||||||
let all_themes = Object.keys(colors);
|
|
||||||
all_themes.sort((a, b) => {
|
|
||||||
return a.toLowerCase().localeCompare(b.toLowerCase());
|
|
||||||
});
|
|
||||||
app.interface.theme_selector.innerHTML = all_themes.map((color) => {
|
|
||||||
return `<option value="${color}">${color}</option>`
|
|
||||||
}).join("");
|
|
||||||
// Set the selected theme in the selector to app.settings.theme
|
|
||||||
// @ts-ignore
|
|
||||||
app.interface.theme_selector.value = app.settings.theme;
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
let selected_theme = colors[app.settings.theme as string];
|
|
||||||
let theme_preview = "<div class='ml-6'>";
|
|
||||||
for (const [key, _] of Object.entries(selected_theme)) {
|
|
||||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</p>`;
|
|
||||||
}
|
|
||||||
theme_preview += "</div>";
|
|
||||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
|
||||||
// Populate the font family selector
|
// Populate the font family selector
|
||||||
const doughNudgeRange = app.interface.dough_nudge_range as HTMLInputElement;
|
const doughNudgeRange = app.interface.dough_nudge_range as HTMLInputElement;
|
||||||
doughNudgeRange.value = app.dough_nudge.toString();
|
doughNudgeRange.value = app.dough_nudge.toString();
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const doughNumber = document.getElementById(
|
const doughNumber = document.getElementById(
|
||||||
"doughnumber",
|
"doughnumber"
|
||||||
) as HTMLInputElement;
|
) as HTMLInputElement;
|
||||||
doughNumber.value = app.dough_nudge.toString();
|
doughNumber.value = app.dough_nudge.toString();
|
||||||
if (app.settings.font_size === null) {
|
if (app.settings.font_size === null) {
|
||||||
@ -410,7 +350,7 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
fontSize: app.settings.font_size + "px",
|
fontSize: app.settings.font_size + "px",
|
||||||
},
|
},
|
||||||
".cm-gutters": { fontSize: app.settings.font_size + "px" },
|
".cm-gutters": { fontSize: app.settings.font_size + "px" },
|
||||||
}),
|
})
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -468,7 +408,7 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
app.settings.tips = checked;
|
app.settings.tips = checked;
|
||||||
app.view.dispatch({
|
app.view.dispatch({
|
||||||
effects: app.hoveringCompartment.reconfigure(
|
effects: app.hoveringCompartment.reconfigure(
|
||||||
checked ? inlineHoveringTips : [],
|
checked ? inlineHoveringTips : []
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -481,7 +421,7 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
app.settings.completions = checked;
|
app.settings.completions = checked;
|
||||||
app.view.dispatch({
|
app.view.dispatch({
|
||||||
effects: app.completionsCompartment.reconfigure(
|
effects: app.completionsCompartment.reconfigure(
|
||||||
checked ? jsCompletions : [],
|
checked ? jsCompletions : []
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -504,7 +444,7 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
|
|
||||||
app.interface.midi_clock_ppqn.addEventListener("change", () => {
|
app.interface.midi_clock_ppqn.addEventListener("change", () => {
|
||||||
let value = parseInt(
|
let value = parseInt(
|
||||||
(app.interface.midi_clock_ppqn as HTMLInputElement).value,
|
(app.interface.midi_clock_ppqn as HTMLInputElement).value
|
||||||
);
|
);
|
||||||
app.settings.midi_clock_ppqn = value;
|
app.settings.midi_clock_ppqn = value;
|
||||||
});
|
});
|
||||||
@ -542,8 +482,7 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
"sampler",
|
"sampler",
|
||||||
"amplitude",
|
"amplitude",
|
||||||
"audio_basics",
|
"audio_basics",
|
||||||
"filters",
|
"reverb_delay",
|
||||||
"effects",
|
|
||||||
"interface",
|
"interface",
|
||||||
"interaction",
|
"interaction",
|
||||||
"code",
|
"code",
|
||||||
@ -551,19 +490,13 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
"linear",
|
"linear",
|
||||||
"cyclic",
|
"cyclic",
|
||||||
"longform",
|
"longform",
|
||||||
|
// "sound",
|
||||||
"synths",
|
"synths",
|
||||||
"chaining",
|
"chaining",
|
||||||
"patterns",
|
"patterns",
|
||||||
"ziffers_basics",
|
"ziffers",
|
||||||
"ziffers_scales",
|
|
||||||
"ziffers_rhythm",
|
|
||||||
"ziffers_algorithmic",
|
|
||||||
"ziffers_tonnetz",
|
|
||||||
"ziffers_syncing",
|
|
||||||
"midi",
|
"midi",
|
||||||
"osc",
|
|
||||||
"functions",
|
"functions",
|
||||||
"generators",
|
|
||||||
"lfos",
|
"lfos",
|
||||||
"probabilities",
|
"probabilities",
|
||||||
"variables",
|
"variables",
|
||||||
@ -577,25 +510,18 @@ export const installInterfaceLogic = (app: Editor) => {
|
|||||||
"loading_samples",
|
"loading_samples",
|
||||||
].forEach((e) => {
|
].forEach((e) => {
|
||||||
let name = `docs_` + e;
|
let name = `docs_` + e;
|
||||||
|
document.getElementById(name)!.addEventListener("click", async () => {
|
||||||
// Check if the element exists
|
if (name !== "docs_samples") {
|
||||||
let element = document.getElementById(name);
|
app.currentDocumentationPane = e;
|
||||||
if (element) {
|
updateDocumentationContent(app, bindings);
|
||||||
element.addEventListener("click", async () => {
|
} else {
|
||||||
if (name !== "docs_sample_list") {
|
console.log("Loading samples!");
|
||||||
|
await loadSamples().then(() => {
|
||||||
|
app.docs = documentation_factory(app);
|
||||||
app.currentDocumentationPane = e;
|
app.currentDocumentationPane = e;
|
||||||
updateDocumentationContent(app, bindings);
|
updateDocumentationContent(app, bindings);
|
||||||
} else {
|
});
|
||||||
console.log("Loading samples!");
|
}
|
||||||
await loadSamples().then(() => {
|
});
|
||||||
app.docs = documentation_factory(app);
|
|
||||||
app.currentDocumentationPane = e;
|
|
||||||
updateDocumentationContent(app, bindings);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.log("Could not find element " + name);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@ -26,31 +26,6 @@ export const registerOnKeyDown = (app: Editor) => {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (event.ctrlKey && event.key === "m") {
|
|
||||||
event.preventDefault();
|
|
||||||
let topbar = document.getElementById("topbar");
|
|
||||||
let sidebar = document.getElementById("sidebar");
|
|
||||||
console.log("oui ok");
|
|
||||||
if (app.hidden_interface) {
|
|
||||||
// Sidebar
|
|
||||||
sidebar?.classList.remove("flex");
|
|
||||||
sidebar?.classList.remove("flex-col");
|
|
||||||
sidebar?.classList.add("hidden");
|
|
||||||
// Topbar
|
|
||||||
topbar?.classList.add("hidden");
|
|
||||||
topbar?.classList.remove("flex");
|
|
||||||
} else {
|
|
||||||
// Sidebar
|
|
||||||
sidebar?.classList.remove("hidden");
|
|
||||||
sidebar?.classList.add("flex");
|
|
||||||
sidebar?.classList.add("flex-col");
|
|
||||||
// Topbar
|
|
||||||
topbar?.classList.remove("hidden");
|
|
||||||
topbar?.classList.add("flex");
|
|
||||||
}
|
|
||||||
app.hidden_interface = !app.hidden_interface;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.ctrlKey && event.key === "s") {
|
if (event.ctrlKey && event.key === "s") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
app.setButtonHighlighting("stop", true);
|
app.setButtonHighlighting("stop", true);
|
||||||
@ -109,15 +84,6 @@ export const registerOnKeyDown = (app: Editor) => {
|
|||||||
app.flashBackground("#404040", 200);
|
app.flashBackground("#404040", 200);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Force eval with clearing cache
|
|
||||||
if (event.ctrlKey && event.shiftKey && (event.key === "Backspace" || event.key === "Delete")) {
|
|
||||||
event.preventDefault();
|
|
||||||
app.api.clearPatternCache();
|
|
||||||
app.currentFile().candidate = app.view.state.doc.toString();
|
|
||||||
tryEvaluate(app, app.currentFile());
|
|
||||||
app.flashBackground("#404040", 200);
|
|
||||||
}
|
|
||||||
|
|
||||||
// app is the modal to switch between universes
|
// app is the modal to switch between universes
|
||||||
if (event.ctrlKey && event.key === "b") {
|
if (event.ctrlKey && event.key === "b") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|||||||
@ -1,79 +1,66 @@
|
|||||||
export function objectWithArraysToArrayOfObjects(
|
/*
|
||||||
input: Record<string, any>,
|
* Transforms object with arrays into array of objects
|
||||||
arraysToArrays: string[],
|
*
|
||||||
): Record<string, any>[] {
|
* @param {Record<string, any>} input - Object with arrays
|
||||||
/*
|
* @param {string[]} ignoredKeys - Keys to ignore
|
||||||
* Transforms object with arrays into array of objects
|
* @returns {Record<string, any>[]} Array of objects
|
||||||
*
|
*
|
||||||
* @param {Record<string, any>} input - Object with arrays
|
*/
|
||||||
* @param {string[]} ignoredKeys - Keys to ignore
|
export function objectWithArraysToArrayOfObjects(input: Record<string, any>, arraysToArrays: string[]): Record<string, any>[] {
|
||||||
* @returns {Record<string, any>[]} Array of objects
|
arraysToArrays.forEach((k) => {
|
||||||
*
|
// Transform single array to array of arrays and keep array of arrays as is
|
||||||
*/
|
if (Array.isArray(input[k]) && !Array.isArray(input[k][0])) {
|
||||||
const inputCopy = { ...input };
|
input[k] = [input[k]];
|
||||||
arraysToArrays.forEach((k) => {
|
|
||||||
if (Array.isArray(inputCopy[k]) && !Array.isArray(inputCopy[k][0])) {
|
|
||||||
inputCopy[k] = [inputCopy[k]];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const keysAndLengths = Object.entries(inputCopy).reduce(
|
|
||||||
(acc, [key, value]) => {
|
|
||||||
const length = Array.isArray(value) ? (value as any[]).length : 1;
|
|
||||||
acc.maxLength = Math.max(acc.maxLength, length);
|
|
||||||
acc.keys.push(key);
|
|
||||||
return acc;
|
|
||||||
},
|
|
||||||
{ keys: [] as string[], maxLength: 0 },
|
|
||||||
);
|
|
||||||
|
|
||||||
const output: Record<string, any>[] = [];
|
|
||||||
for (let i = 0; i < keysAndLengths.maxLength; i++) {
|
|
||||||
const event: Record<string, any> = {};
|
|
||||||
for (const k of keysAndLengths.keys) {
|
|
||||||
if (Array.isArray(inputCopy[k])) {
|
|
||||||
event[k] = (inputCopy[k] as any[])[i % (inputCopy[k] as any[]).length];
|
|
||||||
} else {
|
|
||||||
event[k] = inputCopy[k];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
output.push(event);
|
|
||||||
}
|
|
||||||
return output;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function arrayOfObjectsToObjectWithArrays<T extends Record<string, any>>(
|
|
||||||
array: T[],
|
|
||||||
mergeObject: Record<string, any> = {},
|
|
||||||
): Record<string, any> {
|
|
||||||
/*
|
|
||||||
* Transforms array of objects into object with arrays
|
|
||||||
*
|
|
||||||
* @param {Record<string, any>[]} array - Array of objects
|
|
||||||
* @param {Record<string, any>} mergeObject - Object that is merged to each object in the array
|
|
||||||
* @returns {object} Merged object with arrays
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
return array.reduce(
|
|
||||||
(acc, obj) => {
|
|
||||||
const mergedObj = { ...obj, ...mergeObject };
|
|
||||||
Object.keys(mergedObj).forEach((key) => {
|
|
||||||
if (!acc[key]) {
|
|
||||||
acc[key] = [];
|
|
||||||
}
|
}
|
||||||
acc[key].push(mergedObj[key]);
|
});
|
||||||
|
const keys = Object.keys(input);
|
||||||
|
|
||||||
|
const maxLength = Math.max(
|
||||||
|
...keys.map((k) =>
|
||||||
|
Array.isArray(input[k]) ? (input[k] as any[]).length : 1
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const output: Record<string, any>[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < maxLength; i++) {
|
||||||
|
const event: Record<string, any> = {};
|
||||||
|
for (const k of keys) {
|
||||||
|
if (Array.isArray(input[k])) {
|
||||||
|
event[k] = (input[k] as any[])[i % (input[k] as any[]).length];
|
||||||
|
} else {
|
||||||
|
event[k] = input[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
output.push(event);
|
||||||
|
}
|
||||||
|
return output;
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Transforms array of objects into object with arrays
|
||||||
|
*
|
||||||
|
* @param {Record<string, any>[]} array - Array of objects
|
||||||
|
* @param {Record<string, any>} mergeObject - Object that is merged to each object in the array
|
||||||
|
* @returns {object} Merged object with arrays
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export function arrayOfObjectsToObjectWithArrays<T extends Record<string, any>>(array: T[], mergeObject: Record<string, any> = {}): Record<string, any> {
|
||||||
|
return array.reduce((acc, obj) => {
|
||||||
|
Object.keys(mergeObject).forEach((key) => {
|
||||||
|
obj[key as keyof T] = mergeObject[key];
|
||||||
|
});
|
||||||
|
Object.keys(obj).forEach((key) => {
|
||||||
|
if (!acc[key as keyof T]) {
|
||||||
|
acc[key as keyof T] = [];
|
||||||
|
}
|
||||||
|
(acc[key as keyof T] as unknown[]).push(obj[key]);
|
||||||
});
|
});
|
||||||
return acc;
|
return acc;
|
||||||
},
|
}, {} as Record<keyof T, any[]>);
|
||||||
{} as Record<string, any>,
|
}
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function filterObject(
|
/*
|
||||||
obj: Record<string, any>,
|
|
||||||
filter: string[],
|
|
||||||
): Record<string, any> {
|
|
||||||
/*
|
|
||||||
* Filter certain keys from object
|
* Filter certain keys from object
|
||||||
*
|
*
|
||||||
* @param {Record<string, any>} obj - Object to filter
|
* @param {Record<string, any>} obj - Object to filter
|
||||||
@ -81,12 +68,6 @@ export function filterObject(
|
|||||||
* @returns {object} Filtered object
|
* @returns {object} Filtered object
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
return Object.fromEntries(
|
export function filterObject(obj: Record<string, any>, filter: string[]): Record<string, any> {
|
||||||
Object.entries(obj).filter(([key]) => filter.includes(key)),
|
return Object.fromEntries(Object.entries(obj).filter(([key]) => filter.includes(key)));
|
||||||
);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
export const GeneratorType = (function*(){yield undefined;}).constructor;
|
|
||||||
export const GeneratorIteratorType = (function*(){yield undefined;}).prototype.constructor;
|
|
||||||
export const isGenerator = (v:any) => Object.prototype.toString.call(v) === '[object Generator]';
|
|
||||||
export const isGeneratorFunction = (v:any) => Object.prototype.toString.call(v) === '[object GeneratorFunction]';
|
|
||||||
@ -1,118 +0,0 @@
|
|||||||
import { type Editor } from "../main";
|
|
||||||
|
|
||||||
export const drawCircle = (
|
|
||||||
/**
|
|
||||||
* Draw a circle at a specific position on the canvas.
|
|
||||||
* @param {number} x - The x-coordinate of the circle's center.
|
|
||||||
* @param {number} y - The y-coordinate of the circle's center.
|
|
||||||
* @param {number} radius - The radius of the circle.
|
|
||||||
* @param {string} color - The fill color of the circle.
|
|
||||||
*/
|
|
||||||
app: Editor,
|
|
||||||
x: number,
|
|
||||||
y: number,
|
|
||||||
radius: number,
|
|
||||||
color: string,
|
|
||||||
): void => {
|
|
||||||
// @ts-ignore
|
|
||||||
const canvas: HTMLCanvasElement = app.interface.feedback;
|
|
||||||
const ctx = canvas.getContext("2d");
|
|
||||||
if (!ctx) return;
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
|
||||||
ctx.fillStyle = color;
|
|
||||||
ctx.fill();
|
|
||||||
ctx.closePath();
|
|
||||||
};
|
|
||||||
|
|
||||||
export const blinkScript = (
|
|
||||||
/**
|
|
||||||
* Blinks a script indicator circle.
|
|
||||||
* @param script - The type of script.
|
|
||||||
* @param no - The shift amount multiplier.
|
|
||||||
*/
|
|
||||||
app: Editor,
|
|
||||||
script: "local" | "global" | "init",
|
|
||||||
no?: number,
|
|
||||||
) => {
|
|
||||||
if (no !== undefined && no < 1 && no > 9) return;
|
|
||||||
const blinkDuration =
|
|
||||||
(app.clock.bpm / 60 / app.clock.time_signature[1]) * 200;
|
|
||||||
// @ts-ignore
|
|
||||||
const ctx = app.interface.feedback.getContext("2d"); // Assuming a canvas context
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Draws a circle at a given shift.
|
|
||||||
* @param shift - The pixel distance from the origin.
|
|
||||||
*/
|
|
||||||
const _drawBlinker = (shift: number) => {
|
|
||||||
const horizontalOffset = 50;
|
|
||||||
drawCircle(
|
|
||||||
app,
|
|
||||||
horizontalOffset + shift,
|
|
||||||
app.interface.feedback.clientHeight - 15,
|
|
||||||
8,
|
|
||||||
"#fdba74",
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const _clearBlinker = (shift: number) => {
|
|
||||||
/**
|
|
||||||
* Clears the circle at a given shift.
|
|
||||||
* @param shift - The pixel distance from the origin.
|
|
||||||
*/
|
|
||||||
const x = 50 + shift;
|
|
||||||
const y = app.interface.feedback.clientHeight - 15;
|
|
||||||
const radius = 8;
|
|
||||||
ctx.clearRect(x - radius, y - radius, radius * 2, radius * 2);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (script === "local" && no !== undefined) {
|
|
||||||
const shiftAmount = no * 25;
|
|
||||||
|
|
||||||
// Clear existing timeout if any
|
|
||||||
if (app.blinkTimeouts[shiftAmount]) {
|
|
||||||
clearTimeout(app.blinkTimeouts[shiftAmount]);
|
|
||||||
}
|
|
||||||
|
|
||||||
_drawBlinker(shiftAmount);
|
|
||||||
|
|
||||||
// Save timeout ID for later clearing
|
|
||||||
// @ts-ignore
|
|
||||||
app.blinkTimeouts[shiftAmount] = setTimeout(() => {
|
|
||||||
_clearBlinker(shiftAmount);
|
|
||||||
// Clear the canvas before drawing new blinkers
|
|
||||||
(app.interface.feedback as HTMLCanvasElement)
|
|
||||||
.getContext("2d")!
|
|
||||||
.clearRect(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
(app.interface.feedback as HTMLCanvasElement).width,
|
|
||||||
(app.interface.feedback as HTMLCanvasElement).height,
|
|
||||||
);
|
|
||||||
}, blinkDuration);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const scriptBlinkers = () => {
|
|
||||||
/**
|
|
||||||
* Manages animation updates using requestAnimationFrame.
|
|
||||||
* @param app - The Editor application context.
|
|
||||||
*/
|
|
||||||
|
|
||||||
let lastFrameTime = Date.now();
|
|
||||||
const frameRate = 10;
|
|
||||||
const minFrameDelay = 1000 / frameRate;
|
|
||||||
|
|
||||||
const update = () => {
|
|
||||||
const now = Date.now();
|
|
||||||
const timeSinceLastFrame = now - lastFrameTime;
|
|
||||||
|
|
||||||
if (timeSinceLastFrame >= minFrameDelay) {
|
|
||||||
lastFrameTime = now;
|
|
||||||
}
|
|
||||||
requestAnimationFrame(update);
|
|
||||||
};
|
|
||||||
requestAnimationFrame(update);
|
|
||||||
};
|
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import { type Editor } from "./main";
|
import { type Editor } from "./main";
|
||||||
import { outputSocket, inputSocket } from "./IO/OSC";
|
|
||||||
|
|
||||||
const handleResize = (canvas: HTMLCanvasElement) => {
|
const handleResize = (canvas: HTMLCanvasElement) => {
|
||||||
if (!canvas) return;
|
if (!canvas) return;
|
||||||
@ -27,22 +26,19 @@ export const saveBeforeExit = (app: Editor): null => {
|
|||||||
app.currentFile().candidate = app.view.state.doc.toString();
|
app.currentFile().candidate = app.view.state.doc.toString();
|
||||||
app.currentFile().committed = app.view.state.doc.toString();
|
app.currentFile().committed = app.view.state.doc.toString();
|
||||||
app.settings.saveApplicationToLocalStorage(app.universes, app.settings);
|
app.settings.saveApplicationToLocalStorage(app.universes, app.settings);
|
||||||
// Close the websocket
|
|
||||||
inputSocket.close();
|
|
||||||
outputSocket.close();
|
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const installWindowBehaviors = (
|
export const installWindowBehaviors = (
|
||||||
app: Editor,
|
app: Editor,
|
||||||
window: Window,
|
window: Window,
|
||||||
preventMultipleTabs: boolean = false,
|
preventMultipleTabs: boolean = false
|
||||||
) => {
|
) => {
|
||||||
window.addEventListener("resize", () =>
|
window.addEventListener("resize", () =>
|
||||||
handleResize(app.interface.scope as HTMLCanvasElement),
|
handleResize(app.interface.scope as HTMLCanvasElement)
|
||||||
);
|
);
|
||||||
window.addEventListener("resize", () =>
|
window.addEventListener("resize", () =>
|
||||||
handleResize(app.interface.feedback as HTMLCanvasElement),
|
handleResize(app.interface.feedback as HTMLCanvasElement)
|
||||||
);
|
);
|
||||||
window.addEventListener("beforeunload", (event) => {
|
window.addEventListener("beforeunload", (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@ -65,11 +61,11 @@ export const installWindowBehaviors = (
|
|||||||
if (e.key == "page_available") {
|
if (e.key == "page_available") {
|
||||||
document.getElementById("all")!.classList.add("invisible");
|
document.getElementById("all")!.classList.add("invisible");
|
||||||
alert(
|
alert(
|
||||||
"Topos is already opened in another tab. Close this tab now to prevent data loss.",
|
"Topos is already opened in another tab. Close this tab now to prevent data loss."
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
false,
|
false
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,20 +1,14 @@
|
|||||||
import { type Editor } from "../main";
|
import { type Editor } from "../main";
|
||||||
import {
|
import {
|
||||||
freqToMidi,
|
freqToMidi,
|
||||||
chord as parseChord,
|
|
||||||
noteNameToMidi,
|
|
||||||
resolvePitchBend,
|
resolvePitchBend,
|
||||||
safeScale,
|
safeScale
|
||||||
} from "zifferjs";
|
} from "zifferjs";
|
||||||
import { SkipEvent } from "./SkipEvent";
|
|
||||||
import { SoundParams } from "./SoundEvent";
|
|
||||||
import { centsToSemitones, edoToSemitones, ratiosToSemitones } from "zifferjs/src/scale";
|
|
||||||
import { safeMod } from "zifferjs/src/utils";
|
|
||||||
|
|
||||||
export type EventOperation<T> = (instance: T, ...args: any[]) => void;
|
export type EventOperation<T> = (instance: T, ...args: any[]) => void;
|
||||||
|
|
||||||
export interface AbstractEvent {
|
export interface AbstractEvent {
|
||||||
[key: string]: any;
|
[key: string]: any
|
||||||
}
|
}
|
||||||
|
|
||||||
export class AbstractEvent {
|
export class AbstractEvent {
|
||||||
@ -211,79 +205,25 @@ export class AbstractEvent {
|
|||||||
* @param func - The function to be applied to the Event
|
* @param func - The function to be applied to the Event
|
||||||
* @returns The transformed Event
|
* @returns The transformed Event
|
||||||
*/
|
*/
|
||||||
return this.modify(func).update();
|
return this.modify(func);
|
||||||
};
|
};
|
||||||
|
|
||||||
mod = (value: number): AbstractEvent => {
|
noteLength = (value: number | number[], ...kwargs: number[]): AbstractEvent => {
|
||||||
this.values.originalPitch = safeMod(this.values.originalPitch, value);
|
|
||||||
return this.update();
|
|
||||||
}
|
|
||||||
|
|
||||||
noteLength = (
|
|
||||||
value: number | number[],
|
|
||||||
...kwargs: number[]
|
|
||||||
): AbstractEvent => {
|
|
||||||
/**
|
/**
|
||||||
* This function is used to set the note length of the Event.
|
* This function is used to set the note length of the Event.
|
||||||
*/
|
*/
|
||||||
if (kwargs.length > 0) {
|
if(kwargs.length > 0) {
|
||||||
value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
|
value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
|
||||||
}
|
}
|
||||||
if (Array.isArray(value)) {
|
if(Array.isArray(value)) {
|
||||||
this.values.dur = value.map((v) =>
|
this.values["noteLength"] = value;
|
||||||
this.app.clock.convertPulseToSecond(v * 4 * this.app.clock.ppqn),
|
this.values.dur = value.map((v) => this.app.clock.convertPulseToSecond(v*4*this.app.clock.ppqn));
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
this.values.dur = this.app.clock.convertPulseToSecond(
|
this.values["noteLength"] = value;
|
||||||
value * 4 * this.app.clock.ppqn,
|
this.values.dur = this.app.clock.convertPulseToSecond(value*4*this.app.clock.ppqn);
|
||||||
);
|
|
||||||
}
|
|
||||||
if(this.current) {
|
|
||||||
value = Array.isArray(value) ? value[this.index%value.length] : value;
|
|
||||||
this.current.duration = value;
|
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
protected processSound = (
|
|
||||||
sound: string | string[] | SoundParams | SoundParams[],
|
|
||||||
): SoundParams => {
|
|
||||||
if (Array.isArray(sound) && typeof sound[0] === "string") {
|
|
||||||
const s: string[] = [];
|
|
||||||
const n: number[] = [];
|
|
||||||
sound.forEach((str) => {
|
|
||||||
const parts = (str as string).split(":");
|
|
||||||
s.push(parts[0]);
|
|
||||||
if (parts[1]) {
|
|
||||||
n.push(parseInt(parts[1]));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
s,
|
|
||||||
n: n.length > 0 ? n : undefined,
|
|
||||||
dur: this.app.clock.convertPulseToSecond(this.app.clock.ppqn),
|
|
||||||
};
|
|
||||||
} else if (typeof sound === "object") {
|
|
||||||
const validatedObj: SoundParams = {
|
|
||||||
dur: this.app.clock.convertPulseToSecond(this.app.clock.ppqn),
|
|
||||||
...(sound as Partial<SoundParams>),
|
|
||||||
};
|
|
||||||
return validatedObj;
|
|
||||||
} else {
|
|
||||||
if (sound.includes(":")) {
|
|
||||||
const vals = sound.split(":");
|
|
||||||
const s = vals[0];
|
|
||||||
const n = parseInt(vals[1]);
|
|
||||||
return {
|
|
||||||
s,
|
|
||||||
n,
|
|
||||||
dur: this.app.clock.convertPulseToSecond(this.app.clock.ppqn),
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return { s: sound, dur: 0.5 };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export abstract class AudibleEvent extends AbstractEvent {
|
export abstract class AudibleEvent extends AbstractEvent {
|
||||||
@ -292,195 +232,83 @@ export abstract class AudibleEvent extends AbstractEvent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pitch = (value: number | number[], ...kwargs: number[]): this => {
|
pitch = (value: number | number[], ...kwargs: number[]): this => {
|
||||||
/*
|
/*
|
||||||
* This function is used to set the pitch of the Event.
|
* This function is used to set the pitch of the Event.
|
||||||
* @param value - The pitch value
|
* @param value - The pitch value
|
||||||
* @returns The Event
|
* @returns The Event
|
||||||
*/
|
*/
|
||||||
if (kwargs.length > 0) {
|
if(kwargs.length > 0) {
|
||||||
value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
|
value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
|
||||||
}
|
}
|
||||||
this.values["pitch"] = value;
|
this.values["pitch"] = value;
|
||||||
this.values["originalPitch"] = value;
|
if(this.values.key && this.values.parsedScale) this.update();
|
||||||
this.defaultPitchKeyScale();
|
return this;
|
||||||
return this.update();
|
}
|
||||||
};
|
|
||||||
|
|
||||||
pc = this.pitch;
|
pc = this.pitch;
|
||||||
|
|
||||||
octave = (value: number | number[], ...kwargs: number[]): this => {
|
octave = (value: number | number[], ...kwargs: number[]): this => {
|
||||||
/*
|
/*
|
||||||
* This function is used to set the octave of the Event.
|
* This function is used to set the octave of the Event.
|
||||||
* @param value - The octave value
|
* @param value - The octave value
|
||||||
* @returns The Event
|
* @returns The Event
|
||||||
*/
|
*/
|
||||||
if (kwargs.length > 0) {
|
if(kwargs.length > 0) {
|
||||||
value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
|
value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
|
||||||
}
|
}
|
||||||
this.values["paramOctave"] = value;
|
this.values["octave"] = value;
|
||||||
if (
|
if(this.values.key && (this.values.pitch || this.values.pitch === 0) && this.values.parsedScale) this.update();
|
||||||
this.values.key &&
|
|
||||||
(this.values.pitch || this.values.pitch === 0) &&
|
|
||||||
this.values.parsedScale
|
|
||||||
) {
|
|
||||||
return this.update();
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
key = (value: string | string[], ...kwargs: string[]): this => {
|
key = (value: string | string[], ...kwargs: string[]): this => {
|
||||||
/*
|
/*
|
||||||
* This function is used to set the key of the Event.
|
* This function is used to set the key of the Event.
|
||||||
* @param value - The key value
|
* @param value - The key value
|
||||||
* @returns The Event
|
* @returns The Event
|
||||||
*/
|
*/
|
||||||
if (kwargs.length > 0) {
|
if(kwargs.length > 0) {
|
||||||
value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
|
value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
|
||||||
}
|
}
|
||||||
this.values["key"] = value;
|
this.values["key"] = value;
|
||||||
if (
|
if((this.values.pitch || this.values.pitch === 0) && this.values.parsedScale) this.update();
|
||||||
(this.values.pitch || this.values.pitch === 0) &&
|
|
||||||
this.values.parsedScale
|
|
||||||
) {
|
|
||||||
return this.update();
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
defaultPitchKeyScale() {
|
scale = (value: string | number | (number|string)[], ...kwargs: (string|number)[]): this => {
|
||||||
if (!this.values.key) this.values.key = 60;
|
|
||||||
if (!(this.values.pitch || this.values.pitch === 0)) this.values.pitch = 0;
|
|
||||||
if (!this.values.parsedScale) this.values.parsedScale = safeScale("major");
|
|
||||||
}
|
|
||||||
|
|
||||||
scale = (
|
|
||||||
value: string | number | (number | string)[],
|
|
||||||
...kwargs: (string | number)[]
|
|
||||||
): this => {
|
|
||||||
/*
|
/*
|
||||||
* This function is used to set the scale of the Event.
|
* This function is used to set the scale of the Event.
|
||||||
* @param value - The scale value
|
* @param value - The scale value
|
||||||
* @returns The Event
|
* @returns The Event
|
||||||
*/
|
*/
|
||||||
if (kwargs.length > 0) {
|
if(kwargs.length > 0) {
|
||||||
value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
|
value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
|
||||||
}
|
}
|
||||||
if (typeof value === "string" || typeof value === "number") {
|
if (typeof value === "string" || typeof value === "number") {
|
||||||
this.values.parsedScale = safeScale(value) as number[];
|
this.values.parsedScale = safeScale(value) as number[];
|
||||||
} else if (Array.isArray(value)) {
|
} else if(Array.isArray(value)) {
|
||||||
this.values.parsedScale = value.map((v) => safeScale(v));
|
this.values.parsedScale = value.map((v) => safeScale(v));
|
||||||
}
|
}
|
||||||
this.defaultPitchKeyScale();
|
if(this.values.key && (this.values.pitch || this.values.pitch === 0)) {
|
||||||
return this.update();
|
this.update();
|
||||||
};
|
|
||||||
|
|
||||||
semitones(values: number|number[], ...rest: number[]) {
|
|
||||||
const scaleValues = typeof values === "number" ? [values, ...rest] : values;
|
|
||||||
this.values.parsedScale = safeScale(scaleValues);
|
|
||||||
this.defaultPitchKeyScale();
|
|
||||||
return this.update();
|
|
||||||
}
|
|
||||||
steps = this.semitones;
|
|
||||||
|
|
||||||
cents(values: number|number[], ...rest: number[]) {
|
|
||||||
const scaleValues = typeof values === "number" ? [values, ...rest] : values;
|
|
||||||
this.values.parsedScale = safeScale(centsToSemitones(scaleValues));
|
|
||||||
this.defaultPitchKeyScale();
|
|
||||||
return this.update();
|
|
||||||
}
|
|
||||||
|
|
||||||
ratios(values: number|number[], ...rest: number[]) {
|
|
||||||
const scaleValues = typeof values === "number" ? [values, ...rest] : values;
|
|
||||||
this.values.parsedScale = safeScale(ratiosToSemitones(scaleValues));
|
|
||||||
this.defaultPitchKeyScale();
|
|
||||||
return this.update();
|
|
||||||
}
|
|
||||||
|
|
||||||
edo(value: number, intervals: string|number[] = new Array(value).fill(1)) {
|
|
||||||
this.values.parsedScale = edoToSemitones(value, intervals);
|
|
||||||
this.defaultPitchKeyScale();
|
|
||||||
return this.update();
|
|
||||||
}
|
|
||||||
|
|
||||||
protected updateValue<T>(key: string, value: T | T[] | null): this {
|
|
||||||
if (value == null) return this;
|
|
||||||
this.values[key] = value;
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
public note = (
|
|
||||||
value: number | string | null,
|
|
||||||
...kwargs: number[] | string[]
|
|
||||||
) => {
|
|
||||||
if (typeof value === "string") {
|
|
||||||
const parsedNote = noteNameToMidi(value);
|
|
||||||
return this.updateValue("note", [parsedNote, ...kwargs].flat(Infinity));
|
|
||||||
} else if (typeof value == null || value == undefined) {
|
|
||||||
return new SkipEvent();
|
|
||||||
} else {
|
|
||||||
return this.updateValue("note", [value, ...kwargs].flat(Infinity));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
public chord = (value: number | string, ...kwargs: number[]) => {
|
|
||||||
if (typeof value === "string") {
|
|
||||||
const chord = parseChord(value);
|
|
||||||
return this.updateValue("note", chord);
|
|
||||||
} else {
|
|
||||||
const chord = [value, ...kwargs].flat(Infinity);
|
|
||||||
return this.updateValue("note", chord);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
public invert = (howMany: number = 0) => {
|
|
||||||
if(howMany === 0) return this;
|
|
||||||
if (this.values.note) {
|
|
||||||
let notes = [...this.values.note];
|
|
||||||
notes = howMany < 0 ? [...notes].reverse() : notes;
|
|
||||||
for (let i = 0; i < Math.abs(howMany); i++) {
|
|
||||||
notes[i % notes.length] += howMany <= 0 ? -12 : 12;
|
|
||||||
}
|
|
||||||
return this.updateValue("note", notes);
|
|
||||||
} else {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
public log = (key: string|string[], ...args: string[]) => {
|
|
||||||
/*
|
|
||||||
* Log values from values using log()
|
|
||||||
*
|
|
||||||
* @param key - The key(s) to log
|
|
||||||
* @returns this and logs the values
|
|
||||||
*/
|
|
||||||
if (typeof key === "string") {
|
|
||||||
if(args && args.length > 0) {
|
|
||||||
this.app.api.log([key, ...args].map((k) => this.values[k]));
|
|
||||||
} else {
|
|
||||||
this.app.api.log(this.values[key]);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.app.api.log([...key, ...args].map((k) => this.values[k]));
|
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
}
|
};
|
||||||
|
|
||||||
freq = (value: number | number[], ...kwargs: number[]): this => {
|
freq = (value: number | number[], ...kwargs: number[]): this => {
|
||||||
/*
|
/*
|
||||||
* This function is used to set the frequency of the Event.
|
* This function is used to set the frequency of the Event.
|
||||||
* @param value - The frequency value
|
* @param value - The frequency value
|
||||||
* @returns The Event
|
* @returns The Event
|
||||||
*/
|
*/
|
||||||
if (kwargs.length > 0) {
|
if(kwargs.length > 0) {
|
||||||
value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
|
value = (Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs]);
|
||||||
}
|
}
|
||||||
this.values["freq"] = value;
|
this.values["freq"] = value;
|
||||||
if (Array.isArray(value)) {
|
if(Array.isArray(value)) {
|
||||||
this.values["note"] = [];
|
this.values["note"] = [];
|
||||||
this.values["bend"] = [];
|
this.values["bend"] = [];
|
||||||
for (const v of value) {
|
for(const v of value) {
|
||||||
const midiNote = freqToMidi(v);
|
const midiNote = freqToMidi(v);
|
||||||
if (midiNote % 1 !== 0) {
|
if (midiNote % 1 !== 0) {
|
||||||
this.values["note"].push(Math.floor(midiNote));
|
this.values["note"].push(Math.floor(midiNote));
|
||||||
@ -489,7 +317,7 @@ export abstract class AudibleEvent extends AbstractEvent {
|
|||||||
this.values["note"].push(midiNote);
|
this.values["note"].push(midiNote);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.values.bend.length === 0) delete this.values.bend;
|
if(this.values.bend.length === 0) delete this.values.bend;
|
||||||
} else {
|
} else {
|
||||||
const midiNote = freqToMidi(value);
|
const midiNote = freqToMidi(value);
|
||||||
if (midiNote % 1 !== 0) {
|
if (midiNote % 1 !== 0) {
|
||||||
@ -502,13 +330,7 @@ export abstract class AudibleEvent extends AbstractEvent {
|
|||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
update = (): this => {
|
update = (): void => {
|
||||||
// Overwrite in subclasses
|
// Overwrite in subclasses
|
||||||
return this;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
cue = (functionName: string|Function): this => {
|
|
||||||
this.app.api.cue(functionName);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,12 +1,8 @@
|
|||||||
import { AudibleEvent } from "./AbstractEvents";
|
import { AudibleEvent } from "./AbstractEvents";
|
||||||
import { type Editor } from "../main";
|
import { type Editor } from "../main";
|
||||||
import { MidiConnection } from "../IO/MidiConnection";
|
import { MidiConnection } from "../IO/MidiConnection";
|
||||||
import { resolvePitchClass } from "zifferjs";
|
import { noteFromPc, chord as parseChord } from "zifferjs";
|
||||||
import {
|
import { filterObject, arrayOfObjectsToObjectWithArrays, objectWithArraysToArrayOfObjects } from "../Utils/Generic";
|
||||||
filterObject,
|
|
||||||
arrayOfObjectsToObjectWithArrays,
|
|
||||||
objectWithArraysToArrayOfObjects,
|
|
||||||
} from "../Utils/Generic";
|
|
||||||
|
|
||||||
export type MidiParams = {
|
export type MidiParams = {
|
||||||
note: number;
|
note: number;
|
||||||
@ -15,20 +11,27 @@ export type MidiParams = {
|
|||||||
port?: number;
|
port?: number;
|
||||||
sustain?: number;
|
sustain?: number;
|
||||||
velocity?: number;
|
velocity?: number;
|
||||||
};
|
}
|
||||||
|
|
||||||
export class MidiEvent extends AudibleEvent {
|
export class MidiEvent extends AudibleEvent {
|
||||||
midiConnection: MidiConnection;
|
midiConnection: MidiConnection;
|
||||||
|
|
||||||
constructor(
|
constructor(input: MidiParams, public app: Editor) {
|
||||||
input: MidiParams,
|
|
||||||
public app: Editor,
|
|
||||||
) {
|
|
||||||
super(app);
|
super(app);
|
||||||
this.values = input;
|
this.values = input;
|
||||||
this.midiConnection = app.api.MidiConnection;
|
this.midiConnection = app.api.MidiConnection;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public chord = (value: string) => {
|
||||||
|
this.values.note = parseChord(value);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
note = (value: number | number[]): this => {
|
||||||
|
this.values["note"] = value;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
sustain = (value: number | number[]): this => {
|
sustain = (value: number | number[]): this => {
|
||||||
this.values["sustain"] = value;
|
this.values["sustain"] = value;
|
||||||
return this;
|
return this;
|
||||||
@ -37,7 +40,7 @@ export class MidiEvent extends AudibleEvent {
|
|||||||
velocity = (value: number | number[]): this => {
|
velocity = (value: number | number[]): this => {
|
||||||
this.values["velocity"] = value;
|
this.values["velocity"] = value;
|
||||||
return this;
|
return this;
|
||||||
};
|
}
|
||||||
|
|
||||||
channel = (value: number | number[]): this => {
|
channel = (value: number | number[]): this => {
|
||||||
this.values["channel"] = value;
|
this.values["channel"] = value;
|
||||||
@ -45,12 +48,10 @@ export class MidiEvent extends AudibleEvent {
|
|||||||
};
|
};
|
||||||
|
|
||||||
port = (value: number | string | number[] | string[]): this => {
|
port = (value: number | string | number[] | string[]): this => {
|
||||||
if (typeof value === "string") {
|
if(typeof value === "string"){
|
||||||
this.values["port"] = this.midiConnection.getMidiOutputIndex(value);
|
this.values["port"] = this.midiConnection.getMidiOutputIndex(value);
|
||||||
} else if (Array.isArray(value)) {
|
} else if(Array.isArray(value)){
|
||||||
this.values["port"] = value.map((v) =>
|
this.values["port"] = value.map((v) => typeof v === "string" ? this.midiConnection.getMidiOutputIndex(v) : v);
|
||||||
typeof v === "string" ? this.midiConnection.getMidiOutputIndex(v) : v,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
@ -66,7 +67,8 @@ export class MidiEvent extends AudibleEvent {
|
|||||||
return funcResult;
|
return funcResult;
|
||||||
} else {
|
} else {
|
||||||
func(this.values);
|
func(this.values);
|
||||||
return this.update();
|
this.update();
|
||||||
|
return this;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -82,36 +84,27 @@ export class MidiEvent extends AudibleEvent {
|
|||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
update = (): this => {
|
update = (): void => {
|
||||||
const filteredValues = filterObject(this.values, [
|
// Get key, pitch, parsedScale and octave from this.values object
|
||||||
"key",
|
const filteredValues = filterObject(this.values, ["key", "pitch", "parsedScale", "octave"]);
|
||||||
"pitch",
|
|
||||||
"originalPitch",
|
const events = objectWithArraysToArrayOfObjects(filteredValues,["parsedScale"]);
|
||||||
"parsedScale",
|
|
||||||
"addedOctave"
|
|
||||||
]);
|
|
||||||
|
|
||||||
const events = objectWithArraysToArrayOfObjects(filteredValues, [
|
events.forEach((event) => {
|
||||||
"parsedScale",
|
const [note, bend] = noteFromPc(
|
||||||
]);
|
event.key as number || "C4",
|
||||||
|
event.pitch as number || 0,
|
||||||
events.forEach((soundEvent) => {
|
event.parsedScale as number[] || event.scale || "MAJOR",
|
||||||
const resolvedPitchClass = resolvePitchClass(
|
event.octave as number || 0
|
||||||
(soundEvent.key || "C4"),
|
|
||||||
(soundEvent.originalPitch || soundEvent.pitch || 0),
|
|
||||||
(soundEvent.parsedScale || soundEvent.scale || "MAJOR"),
|
|
||||||
(soundEvent.addedOctave || 0)
|
|
||||||
);
|
);
|
||||||
soundEvent.note = resolvedPitchClass.note;
|
event.note = note;
|
||||||
soundEvent.pitch = resolvedPitchClass.pitch;
|
if(bend) event.bend = bend;
|
||||||
soundEvent.octave = resolvedPitchClass.octave;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const newArrays = arrayOfObjectsToObjectWithArrays(events) as MidiParams;
|
const newArrays = arrayOfObjectsToObjectWithArrays(events) as MidiParams;
|
||||||
|
|
||||||
this.values.note = newArrays.note;
|
this.values.note = newArrays.note;
|
||||||
if (newArrays.bend) this.values.bend = newArrays.bend;
|
if(newArrays.bend) this.values.bend = newArrays.bend;
|
||||||
return this;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
out = (): void => {
|
out = (): void => {
|
||||||
@ -121,7 +114,9 @@ export class MidiEvent extends AudibleEvent {
|
|||||||
const note = params.note ? params.note : 60;
|
const note = params.note ? params.note : 60;
|
||||||
|
|
||||||
const sustain = params.sustain
|
const sustain = params.sustain
|
||||||
? params.sustain * event.app.clock.pulse_duration * event.app.api.ppqn()
|
? params.sustain *
|
||||||
|
event.app.clock.pulse_duration *
|
||||||
|
event.app.api.ppqn()
|
||||||
: event.app.clock.pulse_duration * event.app.api.ppqn();
|
: event.app.clock.pulse_duration * event.app.api.ppqn();
|
||||||
|
|
||||||
const bend = params.bend ? params.bend : undefined;
|
const bend = params.bend ? params.bend : undefined;
|
||||||
@ -129,23 +124,22 @@ export class MidiEvent extends AudibleEvent {
|
|||||||
const port = params.port
|
const port = params.port
|
||||||
? event.midiConnection.getMidiOutputIndex(params.port)
|
? event.midiConnection.getMidiOutputIndex(params.port)
|
||||||
: event.midiConnection.getCurrentMidiPortIndex() || 0;
|
: event.midiConnection.getCurrentMidiPortIndex() || 0;
|
||||||
|
|
||||||
event.midiConnection.sendMidiNote(
|
event.midiConnection.sendMidiNote(
|
||||||
note,
|
note,
|
||||||
channel,
|
channel,
|
||||||
velocity,
|
velocity,
|
||||||
sustain,
|
sustain,
|
||||||
port,
|
port,
|
||||||
bend,
|
bend
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const events = objectWithArraysToArrayOfObjects(this.values, [
|
const events = objectWithArraysToArrayOfObjects(this.values,["parsedScale"]) as MidiParams[];
|
||||||
"parsedScale",
|
|
||||||
]) as MidiParams[];
|
|
||||||
|
|
||||||
events.forEach((p: MidiParams) => {
|
events.forEach((p: MidiParams) => {
|
||||||
play(this, p);
|
play(this,p);
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,7 +11,10 @@ export class RestEvent extends AbstractEvent {
|
|||||||
return RestEvent.createRestProxy(this.values["noteLength"], this.app);
|
return RestEvent.createRestProxy(this.values["noteLength"], this.app);
|
||||||
};
|
};
|
||||||
|
|
||||||
public static createRestProxy = (length: number, app: Editor): RestEvent => {
|
public static createRestProxy = (
|
||||||
|
length: number,
|
||||||
|
app: Editor
|
||||||
|
): RestEvent => {
|
||||||
const instance = new RestEvent(length, app);
|
const instance = new RestEvent(length, app);
|
||||||
return new Proxy(instance, {
|
return new Proxy(instance, {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|||||||
@ -1,18 +1,21 @@
|
|||||||
import { type Editor } from "../main";
|
import { type Editor } from "../main";
|
||||||
import { AudibleEvent } from "./AbstractEvents";
|
import { AudibleEvent } from "./AbstractEvents";
|
||||||
import { sendToServer, type OSCMessage } from "../IO/OSC";
|
|
||||||
import {
|
import {
|
||||||
filterObject,
|
filterObject,
|
||||||
arrayOfObjectsToObjectWithArrays,
|
arrayOfObjectsToObjectWithArrays,
|
||||||
objectWithArraysToArrayOfObjects,
|
objectWithArraysToArrayOfObjects,
|
||||||
} from "../Utils/Generic";
|
} from "../Utils/Generic";
|
||||||
import { midiToFreq, resolvePitchClass } from "zifferjs";
|
import {
|
||||||
|
chord as parseChord,
|
||||||
|
midiToFreq,
|
||||||
|
noteFromPc,
|
||||||
|
noteNameToMidi,
|
||||||
|
} from "zifferjs";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
superdough,
|
superdough,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
} from "superdough";
|
} from "superdough";
|
||||||
// import { Sound } from "zifferjs/src/types";
|
|
||||||
|
|
||||||
export type SoundParams = {
|
export type SoundParams = {
|
||||||
dur: number | number[];
|
dur: number | number[];
|
||||||
@ -22,20 +25,17 @@ export type SoundParams = {
|
|||||||
note?: number | number[];
|
note?: number | number[];
|
||||||
freq?: number | number[];
|
freq?: number | number[];
|
||||||
pitch?: number | number[];
|
pitch?: number | number[];
|
||||||
originalPitch?: number | number[];
|
|
||||||
key?: string;
|
key?: string;
|
||||||
scale?: string;
|
scale?: string;
|
||||||
parsedScale?: number[];
|
parsedScale?: number[];
|
||||||
octave?: number | number[];
|
octave?: number | number[];
|
||||||
addedOctave?: number | number[];
|
|
||||||
pitchOctave?: number | number[];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export class SoundEvent extends AudibleEvent {
|
export class SoundEvent extends AudibleEvent {
|
||||||
nudge: number;
|
nudge: number;
|
||||||
sound: any;
|
sound: any;
|
||||||
|
|
||||||
private static methodMap = {
|
private methodMap = {
|
||||||
volume: ["volume", "vol"],
|
volume: ["volume", "vol"],
|
||||||
zrand: ["zrand", "zr"],
|
zrand: ["zrand", "zr"],
|
||||||
curve: ["curve"],
|
curve: ["curve"],
|
||||||
@ -46,8 +46,6 @@ export class SoundEvent extends AudibleEvent {
|
|||||||
pitchJumpTime: ["pitchJumpTime", "pjt"],
|
pitchJumpTime: ["pitchJumpTime", "pjt"],
|
||||||
lfo: ["lfo"],
|
lfo: ["lfo"],
|
||||||
znoise: ["znoise"],
|
znoise: ["znoise"],
|
||||||
address: ["address", "add"],
|
|
||||||
port: ["port"],
|
|
||||||
noise: ["noise"],
|
noise: ["noise"],
|
||||||
zmod: ["zmod"],
|
zmod: ["zmod"],
|
||||||
zcrush: ["zcrush"],
|
zcrush: ["zcrush"],
|
||||||
@ -69,23 +67,17 @@ export class SoundEvent extends AudibleEvent {
|
|||||||
phaserDepth: ["phaserDepth", "phasdepth"],
|
phaserDepth: ["phaserDepth", "phasdepth"],
|
||||||
phaserSweep: ["phaserSweep", "phassweep"],
|
phaserSweep: ["phaserSweep", "phassweep"],
|
||||||
phaserCenter: ["phaserCenter", "phascenter"],
|
phaserCenter: ["phaserCenter", "phascenter"],
|
||||||
fmadsr: function (
|
fmadsr: (a: number, d: number, s: number, r: number) => {
|
||||||
self: SoundEvent,
|
this.updateValue("fmattack", a);
|
||||||
a: number,
|
this.updateValue("fmdecay", d);
|
||||||
d: number,
|
this.updateValue("fmsustain", s);
|
||||||
s: number,
|
this.updateValue("fmrelease", r);
|
||||||
r: number,
|
return this;
|
||||||
) {
|
|
||||||
self.updateValue("fmattack", a);
|
|
||||||
self.updateValue("fmdecay", d);
|
|
||||||
self.updateValue("fmsustain", s);
|
|
||||||
self.updateValue("fmrelease", r);
|
|
||||||
return self;
|
|
||||||
},
|
},
|
||||||
fmad: function (self: SoundEvent, a: number, d: number) {
|
fmad: (a: number, d: number) => {
|
||||||
self.updateValue("fmattack", a);
|
this.updateValue("fmattack", a);
|
||||||
self.updateValue("fmdecay", d);
|
this.updateValue("fmdecay", d);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
ftype: ["ftype"],
|
ftype: ["ftype"],
|
||||||
fanchor: ["fanchor"],
|
fanchor: ["fanchor"],
|
||||||
@ -93,185 +85,147 @@ export class SoundEvent extends AudibleEvent {
|
|||||||
decay: ["decay", "dec"],
|
decay: ["decay", "dec"],
|
||||||
sustain: ["sustain", "sus"],
|
sustain: ["sustain", "sus"],
|
||||||
release: ["release", "rel"],
|
release: ["release", "rel"],
|
||||||
adsr: function (
|
adsr: (a: number, d: number, s: number, r: number) => {
|
||||||
self: SoundEvent,
|
this.updateValue("attack", a);
|
||||||
a: number,
|
this.updateValue("decay", d);
|
||||||
d: number,
|
this.updateValue("sustain", s);
|
||||||
s: number,
|
this.updateValue("release", r);
|
||||||
r: number,
|
return this;
|
||||||
) {
|
|
||||||
self.updateValue("attack", a);
|
|
||||||
self.updateValue("decay", d);
|
|
||||||
self.updateValue("sustain", s);
|
|
||||||
self.updateValue("release", r);
|
|
||||||
return self;
|
|
||||||
},
|
},
|
||||||
ad: function (self: SoundEvent, a: number, d: number) {
|
ad: (a: number, d: number) => {
|
||||||
self.updateValue("attack", a);
|
this.updateValue("attack", a);
|
||||||
self.updateValue("decay", d);
|
this.updateValue("decay", d);
|
||||||
self.updateValue("sustain", 0.0);
|
this.updateValue("sustain", 0.0);
|
||||||
self.updateValue("release", 0.0);
|
this.updateValue("release", 0.0);
|
||||||
return self;
|
return this;
|
||||||
},
|
|
||||||
scope: function (self: SoundEvent) {
|
|
||||||
self.updateValue("analyze", true);
|
|
||||||
return self;
|
|
||||||
},
|
|
||||||
debug: function (self: SoundEvent, callback?: Function) {
|
|
||||||
self.updateValue("debug", true);
|
|
||||||
if (callback) {
|
|
||||||
self.updateValue("debugFunction", callback);
|
|
||||||
}
|
|
||||||
return self;
|
|
||||||
},
|
},
|
||||||
lpenv: ["lpenv", "lpe"],
|
lpenv: ["lpenv", "lpe"],
|
||||||
lpattack: ["lpattack", "lpa"],
|
lpattack: ["lpattack", "lpa"],
|
||||||
lpdecay: ["lpdecay", "lpd"],
|
lpdecay: ["lpdecay", "lpd"],
|
||||||
lpsustain: ["lpsustain", "lps"],
|
lpsustain: ["lpsustain", "lps"],
|
||||||
lprelease: ["lprelease", "lpr"],
|
lprelease: ["lprelease", "lpr"],
|
||||||
cutoff: function (self: SoundEvent, value: number, resonance?: number) {
|
cutoff: (value: number, resonance?: number) => {
|
||||||
self.updateValue("cutoff", value);
|
this.updateValue("cutoff", value);
|
||||||
if (resonance) {
|
if (resonance) {
|
||||||
self.updateValue("resonance", resonance);
|
this.updateValue("resonance", resonance);
|
||||||
}
|
}
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
lpf: function (self: SoundEvent, value: number, resonance?: number) {
|
lpf: (value: number, resonance?: number) => {
|
||||||
self.updateValue("cutoff", value);
|
this.updateValue("cutoff", value);
|
||||||
if (resonance) {
|
if (resonance) {
|
||||||
self.updateValue("resonance", resonance);
|
this.updateValue("resonance", resonance);
|
||||||
}
|
}
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
resonance: function (self: SoundEvent, value: number) {
|
resonance: (value: number) => {
|
||||||
if (value >= 0 && value <= 1) {
|
if (value >= 0 && value <= 1) {
|
||||||
self.updateValue("resonance", 50 * value);
|
this.updateValue("resonance", 50 * value);
|
||||||
}
|
}
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
lpadsr: function (
|
lpadsr: (depth: number, a: number, d: number, s: number, r: number) => {
|
||||||
self: SoundEvent,
|
this.updateValue("lpenv", depth);
|
||||||
depth: number,
|
this.updateValue("lpattack", a);
|
||||||
a: number,
|
this.updateValue("lpdecay", d);
|
||||||
d: number,
|
this.updateValue("lpsustain", s);
|
||||||
s: number,
|
this.updateValue("lprelease", r);
|
||||||
r: number,
|
return this;
|
||||||
) {
|
|
||||||
self.updateValue("lpenv", depth);
|
|
||||||
self.updateValue("lpattack", a);
|
|
||||||
self.updateValue("lpdecay", d);
|
|
||||||
self.updateValue("lpsustain", s);
|
|
||||||
self.updateValue("lprelease", r);
|
|
||||||
return self;
|
|
||||||
},
|
},
|
||||||
lpad: function (self: SoundEvent, depth: number, a: number, d: number) {
|
lpad: (depth: number, a: number, d: number) => {
|
||||||
self.updateValue("lpenv", depth);
|
this.updateValue("lpenv", depth);
|
||||||
self.updateValue("lpattack", a);
|
this.updateValue("lpattack", a);
|
||||||
self.updateValue("lpdecay", d);
|
this.updateValue("lpdecay", d);
|
||||||
self.updateValue("lpsustain", 0);
|
this.updateValue("lpsustain", 0);
|
||||||
self.updateValue("lprelease", 0);
|
this.updateValue("lprelease", 0);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
hpenv: ["hpenv", "hpe"],
|
hpenv: ["hpenv", "hpe"],
|
||||||
hpattack: ["hpattack", "hpa"],
|
hpattack: ["hpattack", "hpa"],
|
||||||
hpdecay: ["hpdecay", "hpd"],
|
hpdecay: ["hpdecay", "hpd"],
|
||||||
hpsustain: ["hpsustain", "hpsus"],
|
hpsustain: ["hpsustain", "hpsus"],
|
||||||
hprelease: ["hprelease", "hpr"],
|
hprelease: ["hprelease", "hpr"],
|
||||||
hcutoff: function (self: SoundEvent, value: number, resonance?: number) {
|
hcutoff: (value: number, resonance?: number) => {
|
||||||
self.updateValue("hcutoff", value);
|
this.updateValue("hcutoff", value);
|
||||||
if (resonance) {
|
if (resonance) {
|
||||||
self.updateValue("hresonance", resonance);
|
this.updateValue("hresonance", resonance);
|
||||||
}
|
}
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
hpf: function (self: SoundEvent, value: number, resonance?: number) {
|
hpf: (value: number, resonance?: number) => {
|
||||||
self.updateValue("hcutoff", value);
|
this.updateValue("hcutoff", value);
|
||||||
if (resonance) {
|
if (resonance) {
|
||||||
self.updateValue("hresonance", resonance);
|
this.updateValue("hresonance", resonance);
|
||||||
}
|
}
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
hpq: function (self: SoundEvent, value: number) {
|
hpq: (value: number) => {
|
||||||
self.updateValue("hresonance", value);
|
this.updateValue("hresonance", value);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
hpadsr: function (
|
hpadsr: (depth: number, a: number, d: number, s: number, r: number) => {
|
||||||
self: SoundEvent,
|
this.updateValue("hpenv", depth);
|
||||||
depth: number,
|
this.updateValue("hpattack", a);
|
||||||
a: number,
|
this.updateValue("hpdecay", d);
|
||||||
d: number,
|
this.updateValue("hpsustain", s);
|
||||||
s: number,
|
this.updateValue("hprelease", r);
|
||||||
r: number,
|
return this;
|
||||||
) {
|
|
||||||
self.updateValue("hpenv", depth);
|
|
||||||
self.updateValue("hpattack", a);
|
|
||||||
self.updateValue("hpdecay", d);
|
|
||||||
self.updateValue("hpsustain", s);
|
|
||||||
self.updateValue("hprelease", r);
|
|
||||||
return self;
|
|
||||||
},
|
},
|
||||||
hpad: function (self: SoundEvent, depth: number, a: number, d: number) {
|
hpad: (depth: number, a: number, d: number) => {
|
||||||
self.updateValue("hpenv", depth);
|
this.updateValue("hpenv", depth);
|
||||||
self.updateValue("hpattack", a);
|
this.updateValue("hpattack", a);
|
||||||
self.updateValue("hpdecay", d);
|
this.updateValue("hpdecay", d);
|
||||||
self.updateValue("hpsustain", 0);
|
this.updateValue("hpsustain", 0);
|
||||||
self.updateValue("hprelease", 0);
|
this.updateValue("hprelease", 0);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
bpenv: ["bpenv", "bpe"],
|
bpenv: ["bpenv", "bpe"],
|
||||||
bpattack: ["bpattack", "bpa"],
|
bpattack: ["bpattack", "bpa"],
|
||||||
bpdecay: ["bpdecay", "bpd"],
|
bpdecay: ["bpdecay", "bpd"],
|
||||||
bpsustain: ["bpsustain", "bps"],
|
bpsustain: ["bpsustain", "bps"],
|
||||||
bprelease: ["bprelease", "bpr"],
|
bprelease: ["bprelease", "bpr"],
|
||||||
bandf: function (self: SoundEvent, value: number, resonance?: number) {
|
bandf: (value: number, resonance?: number) => {
|
||||||
self.updateValue("bandf", value);
|
this.updateValue("bandf", value);
|
||||||
if (resonance) {
|
if (resonance) {
|
||||||
self.updateValue("bandq", resonance);
|
this.updateValue("bandq", resonance);
|
||||||
}
|
}
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
bpf: function (self: SoundEvent, value: number, resonance?: number) {
|
bpf: (value: number, resonance?: number) => {
|
||||||
self.updateValue("bandf", value);
|
this.updateValue("bandf", value);
|
||||||
if (resonance) {
|
if (resonance) {
|
||||||
self.updateValue("bandq", resonance);
|
this.updateValue("bandq", resonance);
|
||||||
}
|
}
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
bandq: ["bandq", "bpq"],
|
bandq: ["bandq", "bpq"],
|
||||||
bpadsr: function (
|
bpadsr: (depth: number, a: number, d: number, s: number, r: number) => {
|
||||||
self: SoundEvent,
|
this.updateValue("bpenv", depth);
|
||||||
depth: number,
|
this.updateValue("bpattack", a);
|
||||||
a: number,
|
this.updateValue("bpdecay", d);
|
||||||
d: number,
|
this.updateValue("bpsustain", s);
|
||||||
s: number,
|
this.updateValue("bprelease", r);
|
||||||
r: number,
|
return this;
|
||||||
) {
|
|
||||||
self.updateValue("bpenv", depth);
|
|
||||||
self.updateValue("bpattack", a);
|
|
||||||
self.updateValue("bpdecay", d);
|
|
||||||
self.updateValue("bpsustain", s);
|
|
||||||
self.updateValue("bprelease", r);
|
|
||||||
return self;
|
|
||||||
},
|
},
|
||||||
bpad: function (self: SoundEvent, depth: number, a: number, d: number) {
|
bpad: (depth: number, a: number, d: number) => {
|
||||||
self.updateValue("bpenv", depth);
|
this.updateValue("bpenv", depth);
|
||||||
self.updateValue("bpattack", a);
|
this.updateValue("bpattack", a);
|
||||||
self.updateValue("bpdecay", d);
|
this.updateValue("bpdecay", d);
|
||||||
self.updateValue("bpsustain", 0);
|
this.updateValue("bpsustain", 0);
|
||||||
self.updateValue("bprelease", 0);
|
this.updateValue("bprelease", 0);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
vib: ["vib"],
|
vib: ["vib"],
|
||||||
vibmod: ["vibmod"],
|
vibmod: ["vibmod"],
|
||||||
fm: function (self: SoundEvent, value: number | string) {
|
fm: (value: number | string) => {
|
||||||
if (typeof value === "number") {
|
if (typeof value === "number") {
|
||||||
self.values["fmi"] = value;
|
this.values["fmi"] = value;
|
||||||
} else {
|
} else {
|
||||||
let values = value.split(":");
|
let values = value.split(":");
|
||||||
self.values["fmi"] = parseFloat(values[0]);
|
this.values["fmi"] = parseFloat(values[0]);
|
||||||
if (values.length > 1) self.values["fmh"] = parseFloat(values[1]);
|
if (values.length > 1) this.values["fmh"] = parseFloat(values[1]);
|
||||||
}
|
}
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
loop: ["loop"],
|
loop: ["loop"],
|
||||||
loopBegin: ["loopBegin", "loopb"],
|
loopBegin: ["loopBegin", "loopb"],
|
||||||
@ -279,13 +233,13 @@ export class SoundEvent extends AudibleEvent {
|
|||||||
begin: ["begin"],
|
begin: ["begin"],
|
||||||
end: ["end"],
|
end: ["end"],
|
||||||
gain: ["gain"],
|
gain: ["gain"],
|
||||||
dbgain: function (self: SoundEvent, value: number) {
|
dbgain: (value: number) => {
|
||||||
self.updateValue("gain", Math.min(Math.pow(10, value / 20), 10));
|
this.updateValue("gain", Math.min(Math.pow(10, value / 20), 10));
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
db: function (self: SoundEvent, value: number) {
|
db: (value: number) => {
|
||||||
self.updateValue("gain", Math.min(Math.pow(10, value / 20), 10));
|
this.updateValue("gain", Math.min(Math.pow(10, value / 20), 10));
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
velocity: ["velocity", "vel"],
|
velocity: ["velocity", "vel"],
|
||||||
pan: ["pan"],
|
pan: ["pan"],
|
||||||
@ -306,72 +260,109 @@ export class SoundEvent extends AudibleEvent {
|
|||||||
roomlp: ["roomlp", "rlp"],
|
roomlp: ["roomlp", "rlp"],
|
||||||
roomdim: ["roomdim", "rdim"],
|
roomdim: ["roomdim", "rdim"],
|
||||||
sound: ["s", "sound"],
|
sound: ["s", "sound"],
|
||||||
size: function (self: SoundEvent, value: number) {
|
size: (value: number) => {
|
||||||
self.updateValue("roomsize", value);
|
this.updateValue("roomsize", value);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
sz: function (self: SoundEvent, value: number) {
|
sz: (value: number) => {
|
||||||
self.updateValue("roomsize", value);
|
this.updateValue("roomsize", value);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
comp: ["comp","compressor", "cmp"],
|
comp: ["compressor", "cmp"],
|
||||||
ratio: function (self: SoundEvent, value: number) {
|
ratio: (value: number) => {
|
||||||
self.updateValue("compressorRatio", value);
|
this.updateValue("compressorRatio", value);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
knee: function (self: SoundEvent, value: number) {
|
knee: (value: number) => {
|
||||||
self.updateValue("compressorKnee", value);
|
this.updateValue("compressorKnee", value);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
compAttack: function (self: SoundEvent, value: number) {
|
compAttack: (value: number) => {
|
||||||
self.updateValue("compressorAttack", value);
|
this.updateValue("compressorAttack", value);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
compRelease: function (self: SoundEvent, value: number) {
|
compRelease: (value: number) => {
|
||||||
self.updateValue("compressorRelease", value);
|
this.updateValue("compressorRelease", value);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
stretch: function (self: SoundEvent, beat: number) {
|
stretch: (beat: number) => {
|
||||||
self.updateValue("unit", "c");
|
this.updateValue("unit", "c");
|
||||||
self.updateValue("speed", 1 / beat);
|
this.updateValue("speed", 1 / beat);
|
||||||
self.updateValue("cut", beat);
|
this.updateValue("cut", beat);
|
||||||
return self;
|
return this;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(
|
constructor(sound: string | string[] | SoundParams, public app: Editor) {
|
||||||
sound: string | string[] | SoundParams,
|
|
||||||
public app: Editor,
|
|
||||||
) {
|
|
||||||
super(app);
|
super(app);
|
||||||
this.nudge = app.dough_nudge / 100;
|
this.nudge = app.dough_nudge / 100;
|
||||||
|
|
||||||
for (const [methodName, keys] of Object.entries(SoundEvent.methodMap)) {
|
for (const [methodName, keys] of Object.entries(this.methodMap)) {
|
||||||
if (typeof keys === "object" && Symbol.iterator in Object(keys)) {
|
if (Symbol.iterator in Object(keys)) {
|
||||||
for (const key of keys as string[]) {
|
for (const key of keys as string[]) {
|
||||||
// Using arrow function to maintain 'this' context
|
// @ts-ignore
|
||||||
this[key] = (value: number) => this.updateValue(keys[0], value);
|
this[key] = (value: number) => this.updateValue(keys[0], value);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
this[methodName] = (...args) => keys(this, ...args);
|
this[methodName] = keys;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// for (const [methodName, keys] of Object.entries(SoundEvent.methodMap)) {
|
|
||||||
// if (typeof keys === "object" && Symbol.iterator in Object(keys)) {
|
|
||||||
// for (const key of keys as string[]) {
|
|
||||||
// // @ts-ignore
|
|
||||||
// this[key] = (value: number) => this.updateValue(this, keys[0], value);
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// // @ts-ignore
|
|
||||||
// this[methodName] = keys;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
this.values = this.processSound(sound);
|
this.values = this.processSound(sound);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private processSound = (
|
||||||
|
sound: string | string[] | SoundParams | SoundParams[]
|
||||||
|
): SoundParams => {
|
||||||
|
if (Array.isArray(sound) && typeof sound[0] === "string") {
|
||||||
|
const s: string[] = [];
|
||||||
|
const n: number[] = [];
|
||||||
|
sound.forEach((str) => {
|
||||||
|
const parts = (str as string).split(":");
|
||||||
|
s.push(parts[0]);
|
||||||
|
if (parts[1]) {
|
||||||
|
n.push(parseInt(parts[1]));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
s,
|
||||||
|
n: n.length > 0 ? n : undefined,
|
||||||
|
dur: this.app.clock.convertPulseToSecond(this.app.clock.ppqn),
|
||||||
|
analyze: true,
|
||||||
|
};
|
||||||
|
} else if (typeof sound === "object") {
|
||||||
|
const validatedObj: SoundParams = {
|
||||||
|
dur: this.app.clock.convertPulseToSecond(this.app.clock.ppqn),
|
||||||
|
analyze: true,
|
||||||
|
...(sound as Partial<SoundParams>),
|
||||||
|
};
|
||||||
|
return validatedObj;
|
||||||
|
} else {
|
||||||
|
if (sound.includes(":")) {
|
||||||
|
const vals = sound.split(":");
|
||||||
|
const s = vals[0];
|
||||||
|
const n = parseInt(vals[1]);
|
||||||
|
return {
|
||||||
|
s,
|
||||||
|
n,
|
||||||
|
dur: this.app.clock.convertPulseToSecond(this.app.clock.ppqn),
|
||||||
|
analyze: true,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return { s: sound, dur: 0.5, analyze: true };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private updateValue<T>(
|
||||||
|
key: string,
|
||||||
|
value: T | T[] | SoundParams[] | null
|
||||||
|
): this {
|
||||||
|
if (value == null) return this;
|
||||||
|
this.values[key] = value;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
// AbstactEvent overrides
|
// AbstactEvent overrides
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
@ -381,87 +372,85 @@ export class SoundEvent extends AudibleEvent {
|
|||||||
if (funcResult instanceof Object) return funcResult;
|
if (funcResult instanceof Object) return funcResult;
|
||||||
else {
|
else {
|
||||||
func(this.values);
|
func(this.values);
|
||||||
return this.update();
|
this.update();
|
||||||
|
return this;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
update = (): this => {
|
update = (): void => {
|
||||||
const filteredValues = filterObject(this.values, [
|
const filteredValues = filterObject(this.values, [
|
||||||
"key",
|
"key",
|
||||||
"pitch",
|
"pitch",
|
||||||
"originalPitch",
|
|
||||||
"parsedScale",
|
"parsedScale",
|
||||||
"addedOctave",
|
|
||||||
"octave",
|
"octave",
|
||||||
"paramOctave"
|
|
||||||
]);
|
]);
|
||||||
const events = objectWithArraysToArrayOfObjects(filteredValues, [
|
const events = objectWithArraysToArrayOfObjects(filteredValues, [
|
||||||
"parsedScale",
|
"parsedScale",
|
||||||
]);
|
]);
|
||||||
events.forEach((soundEvent) => {
|
events.forEach((event) => {
|
||||||
const resolvedPitchClass = resolvePitchClass(
|
const [note, _] = noteFromPc(
|
||||||
(soundEvent.key || "C4"),
|
(event.key as number) || "C4",
|
||||||
(soundEvent.originalPitch || soundEvent.pitch || 0),
|
(event.pitch as number) || 0,
|
||||||
(soundEvent.parsedScale || soundEvent.scale || "MAJOR"),
|
(event.parsedScale as number[]) || event.scale || "MAJOR",
|
||||||
(soundEvent.paramOctave || 0)+(soundEvent.addedOctave || 0)
|
(event.octave as number) || 0
|
||||||
);
|
);
|
||||||
soundEvent.note = resolvedPitchClass.note;
|
event.note = note;
|
||||||
soundEvent.freq = midiToFreq(resolvedPitchClass.note);
|
event.freq = midiToFreq(note);
|
||||||
soundEvent.pitch = resolvedPitchClass.pitch;
|
|
||||||
soundEvent.octave = resolvedPitchClass.octave;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const newArrays = arrayOfObjectsToObjectWithArrays(events) as SoundParams;
|
const newArrays = arrayOfObjectsToObjectWithArrays(events) as SoundParams;
|
||||||
|
|
||||||
this.values.note = newArrays.note;
|
this.values.note = newArrays.note;
|
||||||
this.values.freq = newArrays.freq;
|
this.values.freq = newArrays.freq;
|
||||||
this.values.pitch = newArrays.pitch;
|
|
||||||
this.values.octave = newArrays.octave;
|
|
||||||
this.values.pitchOctave = newArrays.pitchOctave;
|
|
||||||
return this;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
public chord = (value: string) => {
|
||||||
|
const chord = parseChord(value);
|
||||||
|
return this.updateValue("note", chord);
|
||||||
|
};
|
||||||
|
|
||||||
|
public invert = (howMany: number = 0) => {
|
||||||
|
if (this.values.chord) {
|
||||||
|
let notes = this.values.chord.map(
|
||||||
|
(obj: { [key: string]: number }) => obj.note
|
||||||
|
);
|
||||||
|
notes = howMany < 0 ? [...notes].reverse() : notes;
|
||||||
|
for (let i = 0; i < Math.abs(howMany); i++) {
|
||||||
|
notes[i % notes.length] += howMany <= 0 ? -12 : 12;
|
||||||
|
}
|
||||||
|
const chord = notes.map((note: number) => {
|
||||||
|
return { note: note, freq: midiToFreq(note) };
|
||||||
|
});
|
||||||
|
return this.updateValue("chord", chord);
|
||||||
|
} else {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
public note = (value: number | string | null) => {
|
||||||
|
if (typeof value === "string") {
|
||||||
|
return this.updateValue("note", noteNameToMidi(value));
|
||||||
|
} else if (typeof value == null || value == undefined) {
|
||||||
|
return this.updateValue("note", 0).updateValue("gain", 0);
|
||||||
|
} else {
|
||||||
|
return this.updateValue("note", value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
out = (orbit?: number | number[]): void => {
|
out = (orbit?: number | number[]): void => {
|
||||||
if (orbit) this.values["orbit"] = orbit;
|
if (orbit) this.values["orbit"] = orbit;
|
||||||
const events = objectWithArraysToArrayOfObjects(this.values, [
|
const events = objectWithArraysToArrayOfObjects(this.values, [
|
||||||
"parsedScale",
|
"parsedScale",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
for (const event of events) {
|
for (const event of events) {
|
||||||
// Filter non superdough parameters
|
// Filter non superdough parameters
|
||||||
// TODO: Should filter relevant fields for superdough
|
// TODO: Should filter relevant fields for superdough
|
||||||
// const filteredEvent = filterObject(event, ["analyze","note","dur","freq","s"]);
|
// const filteredEvent = filterObject(event, ["analyze","note","dur","freq","s"]);
|
||||||
const filteredEvent = event;
|
const filteredEvent = event;
|
||||||
// No need for note if there is freq
|
// No need for note if there is freq
|
||||||
if (filteredEvent.freq) {
|
if (filteredEvent.freq) { delete filteredEvent.note; }
|
||||||
delete filteredEvent.note;
|
// const correction = Math.max(this.nudge - this.app.clock.deviation, 0);
|
||||||
}
|
superdough(filteredEvent, this.nudge, filteredEvent.dur);
|
||||||
superdough(filteredEvent, this.app.clock.deadline, filteredEvent.dur);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
osc = (orbit?: number | number[]): void => {
|
|
||||||
if (orbit) this.values["orbit"] = orbit;
|
|
||||||
const events = objectWithArraysToArrayOfObjects(this.values, [
|
|
||||||
"parsedScale",
|
|
||||||
]);
|
|
||||||
for (const event of events) {
|
|
||||||
const filteredEvent = event;
|
|
||||||
|
|
||||||
let oscAddress = "address" in event ? event.address : "/topos";
|
|
||||||
oscAddress = oscAddress?.startsWith("/") ? oscAddress : "/" + oscAddress;
|
|
||||||
|
|
||||||
let oscPort = "port" in event ? event.port : 57120;
|
|
||||||
|
|
||||||
if (filteredEvent.freq) {
|
|
||||||
delete filteredEvent.note;
|
|
||||||
}
|
|
||||||
sendToServer({
|
|
||||||
address: oscAddress,
|
|
||||||
port: oscPort,
|
|
||||||
args: event,
|
|
||||||
timetag: Math.round(Date.now() + this.app.clock.deadline),
|
|
||||||
} as OSCMessage);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,19 +5,18 @@ import { SkipEvent } from "./SkipEvent";
|
|||||||
import { SoundEvent, SoundParams } from "./SoundEvent";
|
import { SoundEvent, SoundParams } from "./SoundEvent";
|
||||||
import { MidiEvent, MidiParams } from "./MidiEvent";
|
import { MidiEvent, MidiParams } from "./MidiEvent";
|
||||||
import { RestEvent } from "./RestEvent";
|
import { RestEvent } from "./RestEvent";
|
||||||
import { arrayOfObjectsToObjectWithArrays, isGenerator } from "../Utils/Generic";
|
import { arrayOfObjectsToObjectWithArrays } from "../Utils/Generic";
|
||||||
import { TonnetzSpaces } from "zifferjs/src/tonnetz";
|
import { TonnetzSpaces } from "zifferjs/src/tonnetz";
|
||||||
|
|
||||||
export type InputOptions = { [key: string]: string | number };
|
export type InputOptions = { [key: string]: string | number };
|
||||||
|
|
||||||
export class Player extends AbstractEvent {
|
export class Player extends AbstractEvent {
|
||||||
input: string | number;
|
input: string|number;
|
||||||
ziffers: Ziffers;
|
ziffers: Ziffers;
|
||||||
initCallTime: number = 0;
|
initCallTime: number = 0;
|
||||||
startCallTime: number = 0;
|
startCallTime: number = 0;
|
||||||
lastCallTime: number = 0;
|
lastCallTime: number = 0;
|
||||||
waitTime = 0;
|
waitTime = 0;
|
||||||
cueName: string|undefined = undefined;
|
|
||||||
played: boolean = false;
|
played: boolean = false;
|
||||||
current!: Pitch | Chord | ZRest;
|
current!: Pitch | Chord | ZRest;
|
||||||
retro: boolean = false;
|
retro: boolean = false;
|
||||||
@ -27,10 +26,10 @@ export class Player extends AbstractEvent {
|
|||||||
skipIndex = 0;
|
skipIndex = 0;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
input: string | number | Generator<number>,
|
input: string|number|Generator<number>,
|
||||||
options: InputOptions,
|
options: InputOptions,
|
||||||
public app: Editor,
|
public app: Editor,
|
||||||
zid: string = "",
|
zid: string = ""
|
||||||
) {
|
) {
|
||||||
super(app);
|
super(app);
|
||||||
this.options = options;
|
this.options = options;
|
||||||
@ -39,20 +38,14 @@ export class Player extends AbstractEvent {
|
|||||||
this.ziffers = new Ziffers(input, options);
|
this.ziffers = new Ziffers(input, options);
|
||||||
} else if (typeof input === "number") {
|
} else if (typeof input === "number") {
|
||||||
this.input = input;
|
this.input = input;
|
||||||
this.ziffers = Ziffers.fromNumber(input, options);
|
this.ziffers = Ziffers.fromNumber(input,options);
|
||||||
} else if (isGenerator(input)) {
|
|
||||||
this.ziffers = Ziffers.fromGenerator(input, options);
|
|
||||||
this.input = this.ziffers.input;
|
|
||||||
} else {
|
} else {
|
||||||
throw new Error("Invalid input");
|
this.ziffers = Ziffers.fromGenerator(input,options);
|
||||||
|
this.input = this.ziffers.input;
|
||||||
}
|
}
|
||||||
this.zid = zid;
|
this.zid = zid;
|
||||||
}
|
}
|
||||||
|
|
||||||
isValid() {
|
|
||||||
return this.ziffers.values.length > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
reset() {
|
reset() {
|
||||||
this.initCallTime = 0;
|
this.initCallTime = 0;
|
||||||
this.startCallTime = 0;
|
this.startCallTime = 0;
|
||||||
@ -132,13 +125,11 @@ export class Player extends AbstractEvent {
|
|||||||
|
|
||||||
const patternIsStarting =
|
const patternIsStarting =
|
||||||
this.notStarted() &&
|
this.notStarted() &&
|
||||||
this.waitTime >= 0 &&
|
(this.pulse() === 0 || this.origin() >= this.nextBeatInTicks()) &&
|
||||||
this.origin() >= this.waitTime &&
|
this.origin() >= this.waitTime;
|
||||||
(this.pulse() === 0 || this.origin() >= this.nextBeatInTicks());
|
|
||||||
|
|
||||||
const timeToPlayNext =
|
const timeToPlayNext =
|
||||||
this.current &&
|
this.current &&
|
||||||
this.waitTime >= 0 &&
|
|
||||||
this.pulseToSecond(this.origin()) >=
|
this.pulseToSecond(this.origin()) >=
|
||||||
this.pulseToSecond(this.lastCallTime) +
|
this.pulseToSecond(this.lastCallTime) +
|
||||||
this.pulseToSecond(this.current.duration * 4 * this.app.clock.ppqn) &&
|
this.pulseToSecond(this.current.duration * 4 * this.app.clock.ppqn) &&
|
||||||
@ -164,67 +155,43 @@ export class Player extends AbstractEvent {
|
|||||||
return areWeThereYet;
|
return areWeThereYet;
|
||||||
};
|
};
|
||||||
|
|
||||||
checkCue() {
|
sound(name?: string) {
|
||||||
if(this.ziffers.atLast()) {
|
|
||||||
if(this.cueName && this.app.api.cueTimes[this.cueName]) {
|
|
||||||
delete this.app.api.cueTimes[this.cueName];
|
|
||||||
this.cueName = undefined;
|
|
||||||
this.waitTime = -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sound(name?: string | string[] | SoundParams | SoundParams[]) {
|
|
||||||
if (this.areWeThereYet()) {
|
if (this.areWeThereYet()) {
|
||||||
this.checkCue();
|
|
||||||
const event = this.next() as Pitch | Chord | ZRest;
|
const event = this.next() as Pitch | Chord | ZRest;
|
||||||
const noteLengthInSeconds = this.app.clock.convertPulseToSecond(
|
const noteLengthInSeconds = this.app.clock.convertPulseToSecond(
|
||||||
event.duration * 4 * this.app.clock.ppqn,
|
event.duration * 4 * this.app.clock.ppqn
|
||||||
);
|
);
|
||||||
if (event instanceof Pitch) {
|
if (event instanceof Pitch) {
|
||||||
let obj = event.getExisting(
|
const obj = event.getExisting(
|
||||||
"freq",
|
"freq",
|
||||||
"note",
|
"note",
|
||||||
"pitch",
|
"pitch",
|
||||||
"originalPitch",
|
|
||||||
"key",
|
"key",
|
||||||
"scale",
|
"scale",
|
||||||
"octave",
|
"octave",
|
||||||
"pitchOctave",
|
"parsedScale"
|
||||||
"addedOctave",
|
|
||||||
"parsedScale",
|
|
||||||
) as SoundParams;
|
) as SoundParams;
|
||||||
|
|
||||||
if (event.sound) name = event.sound as string;
|
if (event.sound) name = event.sound as string;
|
||||||
if(name) obj = {...obj, ...this.processSound(name)};
|
|
||||||
else obj.s = "sine";
|
|
||||||
|
|
||||||
if (event.soundIndex) obj.n = event.soundIndex as number;
|
if (event.soundIndex) obj.n = event.soundIndex as number;
|
||||||
obj.dur = noteLengthInSeconds;
|
obj.dur = noteLengthInSeconds;
|
||||||
return new SoundEvent(obj, this.app);
|
return new SoundEvent(obj, this.app).sound(name || "sine");
|
||||||
} else if (event instanceof Chord) {
|
} else if (event instanceof Chord) {
|
||||||
const pitches = event.pitches.map((p) => {
|
const pitches = event.pitches.map((p) => {
|
||||||
return p.getExisting(
|
return p.getExisting(
|
||||||
"freq",
|
"freq",
|
||||||
"note",
|
"note",
|
||||||
"pitch",
|
"pitch",
|
||||||
"originalPitch",
|
|
||||||
"key",
|
"key",
|
||||||
"scale",
|
"scale",
|
||||||
"octave",
|
"octave",
|
||||||
"pitchOctave",
|
"parsedScale"
|
||||||
"addedOctave",
|
|
||||||
"parsedScale",
|
|
||||||
);
|
);
|
||||||
}) as SoundParams[];
|
}) as SoundParams[];
|
||||||
|
const add = { dur: noteLengthInSeconds } as SoundParams;
|
||||||
let add = { dur: noteLengthInSeconds} as SoundParams;
|
if (name) add.s = name;
|
||||||
if(name) add = {...add, ...this.processSound(name)};
|
|
||||||
else add.s = "sine";
|
|
||||||
|
|
||||||
let sound = arrayOfObjectsToObjectWithArrays(
|
let sound = arrayOfObjectsToObjectWithArrays(
|
||||||
pitches,
|
pitches,
|
||||||
add,
|
add
|
||||||
) as SoundParams;
|
) as SoundParams;
|
||||||
return new SoundEvent(sound, this.app);
|
return new SoundEvent(sound, this.app);
|
||||||
} else if (event instanceof ZRest) {
|
} else if (event instanceof ZRest) {
|
||||||
@ -237,19 +204,15 @@ export class Player extends AbstractEvent {
|
|||||||
|
|
||||||
midi(value: number | undefined = undefined) {
|
midi(value: number | undefined = undefined) {
|
||||||
if (this.areWeThereYet()) {
|
if (this.areWeThereYet()) {
|
||||||
this.checkCue();
|
|
||||||
const event = this.next() as Pitch | Chord | ZRest;
|
const event = this.next() as Pitch | Chord | ZRest;
|
||||||
const obj = event.getExisting(
|
const obj = event.getExisting(
|
||||||
"note",
|
"note",
|
||||||
"pitch",
|
"pitch",
|
||||||
"originalPitch",
|
|
||||||
"bend",
|
"bend",
|
||||||
"key",
|
"key",
|
||||||
"scale",
|
"scale",
|
||||||
"octave",
|
"octave",
|
||||||
"pitchOctave",
|
"parsedScale"
|
||||||
"addedOctave",
|
|
||||||
"parsedScale",
|
|
||||||
) as MidiParams;
|
) as MidiParams;
|
||||||
if (event instanceof Pitch) {
|
if (event instanceof Pitch) {
|
||||||
if (event.soundIndex) obj.channel = event.soundIndex as number;
|
if (event.soundIndex) obj.channel = event.soundIndex as number;
|
||||||
@ -267,34 +230,11 @@ export class Player extends AbstractEvent {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
scale(name: string|number[]) {
|
scale(name: string) {
|
||||||
if (this.atTheBeginning()) this.ziffers.scale(name);
|
if (this.atTheBeginning()) this.ziffers.scale(name);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
semitones(values: number|number[], ...rest: number[]) {
|
|
||||||
values = typeof values === "number" ? [values, ...rest] : values;
|
|
||||||
if (this.atTheBeginning()) this.ziffers.semitones(values);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
cents(values: number|number[], ...rest: number[]) {
|
|
||||||
values = typeof values === "number" ? [values, ...rest] : values;
|
|
||||||
if (this.atTheBeginning()) this.ziffers.cents(values);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
ratios(values: number|number[], ...rest: number[]) {
|
|
||||||
values = typeof values === "number" ? [values, ...rest] : values;
|
|
||||||
if (this.atTheBeginning()) this.ziffers.ratios(values);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
edo(value: number, scale: string|number[] = new Array(value).fill(1)) {
|
|
||||||
if (this.atTheBeginning()) this.ziffers.edo(value, scale);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
key(name: string) {
|
key(name: string) {
|
||||||
if (this.atTheBeginning()) this.ziffers.key(name);
|
if (this.atTheBeginning()) this.ziffers.key(name);
|
||||||
return this;
|
return this;
|
||||||
@ -305,12 +245,6 @@ export class Player extends AbstractEvent {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
tonnetz(transform: string, tonnetz: TonnetzSpaces = [3, 4, 5]) {
|
|
||||||
// @ts-ignore
|
|
||||||
if (this.atTheBeginning()) this.ziffers.tonnetz(transform, tonnetz);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
triadTonnetz(transform: string, tonnetz: TonnetzSpaces = [3, 4, 5]) {
|
triadTonnetz(transform: string, tonnetz: TonnetzSpaces = [3, 4, 5]) {
|
||||||
if (this.atTheBeginning()) this.ziffers.triadTonnetz(transform, tonnetz);
|
if (this.atTheBeginning()) this.ziffers.triadTonnetz(transform, tonnetz);
|
||||||
return this;
|
return this;
|
||||||
@ -321,18 +255,18 @@ export class Player extends AbstractEvent {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
octaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 4) {
|
octaCycle(tonnetz: TonnetzSpaces = [3, 4, 5]) {
|
||||||
if (this.atTheBeginning()) this.ziffers.octaCycle(tonnetz, repeats);
|
if (this.atTheBeginning()) this.ziffers.octaCycle(tonnetz);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
hexaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3) {
|
hexaCycle(tonnetz: TonnetzSpaces = [3, 4, 5]) {
|
||||||
if (this.atTheBeginning()) this.ziffers.hexaCycle(tonnetz, repeats);
|
if (this.atTheBeginning()) this.ziffers.hexaCycle(tonnetz);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
enneaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3) {
|
enneaCycle(tonnetz: TonnetzSpaces = [3, 4, 5]) {
|
||||||
if (this.atTheBeginning()) this.ziffers.enneaCycle(tonnetz, repeats);
|
if (this.atTheBeginning()) this.ziffers.enneaCycle(tonnetz);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -348,12 +282,6 @@ export class Player extends AbstractEvent {
|
|||||||
|
|
||||||
lead = () => this.voiceleading();
|
lead = () => this.voiceleading();
|
||||||
|
|
||||||
arpeggio(indexes: string|number[], ...rest: number[]) {
|
|
||||||
if(typeof indexes === "number") indexes = [indexes, ...rest];
|
|
||||||
if (this.atTheBeginning()) this.ziffers.arpeggio(indexes);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
invert = (n: number) => {
|
invert = (n: number) => {
|
||||||
if (this.atTheBeginning()) {
|
if (this.atTheBeginning()) {
|
||||||
this.ziffers.invert(n);
|
this.ziffers.invert(n);
|
||||||
@ -366,65 +294,25 @@ export class Player extends AbstractEvent {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
listen(value: string) {
|
wait(value: number | Function) {
|
||||||
if(typeof value === "string") {
|
|
||||||
const cueTime = this.app.api.cueTimes[value];
|
|
||||||
this.cueName = value;
|
|
||||||
if(cueTime && this.app.clock.pulses_since_origin <= cueTime) {
|
|
||||||
this.waitTime = cueTime;
|
|
||||||
} else {
|
|
||||||
this.waitTime = -1;
|
|
||||||
}
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
wait(value: number | string | Function) {
|
|
||||||
|
|
||||||
if(typeof value === "string") {
|
|
||||||
const cueTime = this.app.api.cueTimes[value];
|
|
||||||
this.cueName = value;
|
|
||||||
if(cueTime && this.app.clock.pulses_since_origin <= cueTime) {
|
|
||||||
this.waitTime = cueTime;
|
|
||||||
} else if(this.atTheBeginning()){
|
|
||||||
this.waitTime = -1;
|
|
||||||
}
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.atTheBeginning()) {
|
if (this.atTheBeginning()) {
|
||||||
if (typeof value === "function") {
|
if (typeof value === "function") {
|
||||||
const refPat = this.app.api.patternCache.get(value.name) as Player;
|
const refPat = this.app.api.patternCache.get(value.name) as Player;
|
||||||
if (refPat) this.waitTime = refPat.nextEndTime();
|
if (refPat) this.waitTime = refPat.nextEndTime();
|
||||||
return this;
|
return this;
|
||||||
} else if(typeof value === "number") {
|
|
||||||
this.waitTime =
|
|
||||||
this.origin() + Math.ceil(value * 4 * this.app.clock.ppqn);
|
|
||||||
return this;
|
|
||||||
}
|
}
|
||||||
|
this.waitTime =
|
||||||
|
this.origin() + Math.ceil(value * 4 * this.app.clock.ppqn);
|
||||||
}
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
sync(value: string | Function, manualSync: boolean = true) {
|
sync(value: string | Function) {
|
||||||
|
|
||||||
if(typeof value === "string") {
|
|
||||||
if(manualSync) {
|
|
||||||
const cueTime = this.app.api.cueTimes[value];
|
|
||||||
if(cueTime) {
|
|
||||||
this.waitTime = cueTime;
|
|
||||||
} else {
|
|
||||||
this.waitTime = -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.atTheBeginning() && this.notStarted()) {
|
if (this.atTheBeginning() && this.notStarted()) {
|
||||||
const origin = this.app.clock.pulses_since_origin;
|
const origin = this.app.clock.pulses_since_origin;
|
||||||
|
const syncId = typeof value === "function" ? value.name : value;
|
||||||
if (origin > 0) {
|
if (origin > 0) {
|
||||||
const syncPattern = this.app.api.patternCache.get(value.name) as Player;
|
const syncPattern = this.app.api.patternCache.get(syncId) as Player;
|
||||||
if (syncPattern) {
|
if (syncPattern) {
|
||||||
const syncPatternDuration = syncPattern.ziffers.duration;
|
const syncPatternDuration = syncPattern.ziffers.duration;
|
||||||
const syncPatternStart = syncPattern.startCallTime;
|
const syncPatternStart = syncPattern.startCallTime;
|
||||||
@ -436,13 +324,6 @@ export class Player extends AbstractEvent {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
log(key: string, ...args: string[]) {
|
|
||||||
this.app.api.log(this.ziffers.evaluated.map((p) => {
|
|
||||||
return Object.values(p.getExisting(...[key,...args]));
|
|
||||||
}).join(" "));
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
out = (): void => {
|
out = (): void => {
|
||||||
// TODO?
|
// TODO?
|
||||||
};
|
};
|
||||||
|
|||||||
7181
src/colors.json
7181
src/colors.json
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
|
|
||||||
export const amplitude = (application: Editor): string => {
|
export const amplitude = (application: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -17,11 +17,11 @@ Controlling the volume is probably the most important concept you need to know a
|
|||||||
| <ic>dbgain</ic> | db | Attenuation in dB from <ic>-inf</ic> to <ic>+10</ic> (acts as a sound mixer fader).|
|
| <ic>dbgain</ic> | db | Attenuation in dB from <ic>-inf</ic> to <ic>+10</ic> (acts as a sound mixer fader).|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Velocity manipulated by a counter",
|
"Velocity manipulated by a counter",
|
||||||
`
|
`
|
||||||
beat(.5)::snd('cp').vel($(1)%10 / 10).out()`,
|
beat(.5)::snd('cp').vel($(1)%10 / 10).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Amplitude Enveloppe
|
## Amplitude Enveloppe
|
||||||
|
|
||||||
@ -33,46 +33,46 @@ beat(.5)::snd('cp').vel($(1)%10 / 10).out()`,
|
|||||||
| <ic>decay</ic> | dec | Decay value (time to decay to sustain level) |
|
| <ic>decay</ic> | dec | Decay value (time to decay to sustain level) |
|
||||||
| <ic>sustain</ic> | sus | Sustain value (gain when sound is held) |
|
| <ic>sustain</ic> | sus | Sustain value (gain when sound is held) |
|
||||||
| <ic>release</ic> | rel | Release value (time for the sound to die off) |
|
| <ic>release</ic> | rel | Release value (time for the sound to die off) |
|
||||||
| <ic>adsr</ic> | | Shortcut that combines all the parameters together |
|
|
||||||
|
|
||||||
Note that the **sustain** value is not a duration but an amplitude value (how loud). The other values are the time for each stage to take place. Here is a fairly complete example using the <ic>sawtooth</ic> basic waveform.
|
Note that the **sustain** value is not a duration but an amplitude value (how loud). The other values are the time for each stage to take place. Here is a fairly complete example using the <ic>sawtooth</ic> basic waveform.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Simple synthesizer",
|
"Simple synthesizer",
|
||||||
`
|
`
|
||||||
register("smooth", x => x.cutoff(r(100,500))
|
let smooth = (sound) => {
|
||||||
.lpadsr(usaw(1/8) * 8, 0.05, .125, 0, 0)
|
return sound.cutoff(r(100,500))
|
||||||
.gain(r(0.25, 0.4)).adsr(0, r(.2,.4), r(0,0.5), 0)
|
.lpadsr(usaw(1/8) * 8, 0.05, .125, 0, 0)
|
||||||
.room(0.9).size(2).o(2).vib(r(2,8)).vibmod(0.125))
|
.gain(r(0.25, 0.4)).adsr(0, r(.2,.4), r(0,0.5), 0)
|
||||||
beat(.25)::sound('sawtooth')
|
.room(0.9).size(2).o(2).vib(r(2,8)).vibmod(0.125)
|
||||||
.note([50,57,55,60].beat(1))
|
}
|
||||||
.smooth().out();
|
beat(.25)::smooth(sound('sawtooth')
|
||||||
beat(.25)::sound('sawtooth')
|
.note([50,57,55,60].beat(1))).out();
|
||||||
.note([50,57,55,60].add(12).beat(1.5))
|
beat(.25)::smooth(sound('sawtooth')
|
||||||
.smooth().out();
|
.note([50,57,55,60].add(12).beat(1.5))).out();
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
|
||||||
Sometimes, using a full ADSR envelope is a bit overkill. There are other simpler controls to manipulate the envelope like the <ic>.ad</ic> method:
|
Sometimes, using a full ADSR envelope is a bit overkill. There are other simpler controls to manipulate the envelope like the <ic>.ad</ic> method:
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Replacing .adsr by .ad",
|
"Replacing .adsr by .ad",
|
||||||
`
|
`
|
||||||
register("smooth", x => x.cutoff(r(100,500))
|
let smooth = (sound) => {
|
||||||
.lpadsr(usaw(1/8) * 8, 0.05, .125, 0, 0)
|
return sound.cutoff(r(100,500))
|
||||||
.gain(r(0.25, 0.4)).ad(0, 0.25)
|
.lpadsr(usaw(1/8) * 8, 0.05, .125, 0, 0)
|
||||||
.room(0.9).size(2).o(2).vib(r(2,8)).vibmod(0.125))
|
.gain(r(0.25, 0.4)).ad(0, .25)
|
||||||
beat(.25)::sound('sawtooth')
|
.room(0.9).size(2).o(2).vib(r(2,8)).vibmod(0.125)
|
||||||
.note([50,57,55,60].beat(1))
|
}
|
||||||
.smooth().out();
|
beat(.25)::smooth(sound('sawtooth')
|
||||||
beat(.25)::sound('sawtooth')
|
.note([50,57,55,60].beat(1))).out();
|
||||||
.note([50,57,55,60].add(12).beat(1.5))
|
beat(.25)::smooth(sound('sawtooth')
|
||||||
.smooth().out();
|
.note([50,57,55,60].add(12).beat(1.5))).out();
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
|
||||||
|
`}
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
|
|
||||||
export const audio_basics = (application: Editor): string => {
|
export const audio_basics = (application: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -17,13 +17,13 @@ Use the <ic>sound(name: string)</ic> function to play a sound. You can also writ
|
|||||||
Whatever you choose, the syntax stays the same. See the following example:
|
Whatever you choose, the syntax stays the same. See the following example:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Playing sounds is easy",
|
"Playing sounds is easy",
|
||||||
`
|
`
|
||||||
beat(1) && sound('bd').out()
|
beat(1) && sound('bd').out()
|
||||||
beat(0.5) && sound('hh').out()
|
beat(0.5) && sound('hh').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
These commands, in plain english, can be translated to:
|
These commands, in plain english, can be translated to:
|
||||||
|
|
||||||
@ -33,13 +33,13 @@ These commands, in plain english, can be translated to:
|
|||||||
Let's make this example a bit more complex:
|
Let's make this example a bit more complex:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Adding some effects",
|
"Adding some effects",
|
||||||
`
|
`
|
||||||
beat(1) && sound('bd').coarse(0.25).room(0.5).orbit(2).out();
|
beat(1) && sound('bd').coarse(0.25).room(0.5).orbit(2).out();
|
||||||
beat(0.5) && sound('hh').delay(0.25).delaytime(0.125).out();
|
beat(0.5) && sound('hh').delay(0.25).delaytime(0.125).out();
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
Now, it translates as follows:
|
Now, it translates as follows:
|
||||||
|
|
||||||
@ -53,14 +53,12 @@ If you remove <ic>beat</ic> instruction, you will end up with a deluge of kick d
|
|||||||
|
|
||||||
To play a sound, you always need the <ic>.out()</ic> method at the end of your chain. THis method tells **Topos** to send the chain to the audio engine. The <ic>.out</ic> method can take an optional argument to send the sound to a numbered effect bus, from <ic>0</ic> to <ic>n</ic> :
|
To play a sound, you always need the <ic>.out()</ic> method at the end of your chain. THis method tells **Topos** to send the chain to the audio engine. The <ic>.out</ic> method can take an optional argument to send the sound to a numbered effect bus, from <ic>0</ic> to <ic>n</ic> :
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Using the .out method",
|
||||||
"Using the .out method",
|
`
|
||||||
`
|
|
||||||
// Playing a clap on the third bus (0-indexed)
|
// Playing a clap on the third bus (0-indexed)
|
||||||
beat(1)::sound('cp').out(2)
|
beat(1)::sound('cp').out(2)
|
||||||
`,
|
`, true
|
||||||
true,
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
Try to remove <ic>.out</ic>. You will see that no sound is playing at all!
|
Try to remove <ic>.out</ic>. You will see that no sound is playing at all!
|
||||||
|
|
||||||
@ -69,16 +67,16 @@ Try to remove <ic>.out</ic>. You will see that no sound is playing at all!
|
|||||||
- Sounds are **composed** by adding qualifiers/parameters that modify the sound or synthesizer you have picked (_e.g_ <ic>sound('...').blabla(...)..something(...).out()</ic>. Think of it as _audio chains_.
|
- Sounds are **composed** by adding qualifiers/parameters that modify the sound or synthesizer you have picked (_e.g_ <ic>sound('...').blabla(...)..something(...).out()</ic>. Think of it as _audio chains_.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Complex sonic object",
|
'Complex sonic object',
|
||||||
`
|
`
|
||||||
beat(1) :: sound('pad').n(1)
|
beat(1) :: sound('pad').n(1)
|
||||||
.begin(rand(0, 0.4))
|
.begin(rand(0, 0.4))
|
||||||
.freq([50,52].beat())
|
.freq([50,52].beat())
|
||||||
.size(0.9).room(0.9)
|
.size(0.9).room(0.9)
|
||||||
.velocity(0.25)
|
.velocity(0.25)
|
||||||
.pan(usine()).release(2).out()`,
|
.pan(usine()).release(2).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Picking a specific sound
|
## Picking a specific sound
|
||||||
|
|
||||||
@ -102,12 +100,12 @@ If you choose the sound <ic>kick</ic>, you are asking for the first sample in th
|
|||||||
|
|
||||||
The <ic>.n(number)</ic> method can be used to pick a sample from the currently selected sample folder. For instance, the following script will play a random sample from the _kick_ folder:
|
The <ic>.n(number)</ic> method can be used to pick a sample from the currently selected sample folder. For instance, the following script will play a random sample from the _kick_ folder:
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Picking a sample",
|
"Picking a sample",
|
||||||
`
|
`
|
||||||
beat(1) && sound('kick').n([1,2,3,4,5,6,7,8].pick()).out()
|
beat(1) && sound('kick').n([1,2,3,4,5,6,7,8].pick()).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
You can also use the <ic>:</ic> to pick a sample number directly from the <ic>sound</ic> function:
|
You can also use the <ic>:</ic> to pick a sample number directly from the <ic>sound</ic> function:
|
||||||
|
|
||||||
@ -116,18 +114,18 @@ You can also use the <ic>:</ic> to pick a sample number directly from the <ic>so
|
|||||||
`
|
`
|
||||||
beat(1) && sound('kick:3').out()
|
beat(1) && sound('kick:3').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
You can use any number to pick a sound. Don't be afraid of using a number too big. If the number exceeds the number of available samples, it will simply wrap around and loop infinitely over the folder. Let's demonstrate this by using the mouse over a very large sample folder:
|
You can use any number to pick a sound. Don't be afraid of using a number too big. If the number exceeds the number of available samples, it will simply wrap around and loop infinitely over the folder. Let's demonstrate this by using the mouse over a very large sample folder:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Picking a sample... with the mouse!",
|
"Picking a sample... with the mouse!",
|
||||||
`
|
`
|
||||||
// Move your mouse to change the sample being used!
|
// Move your mouse to change the sample being used!
|
||||||
beat(.25) && sound('ST09').n(Math.floor(mouseX())).out()`,
|
beat(.25) && sound('ST09').n(Math.floor(mouseX())).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
The <ic>.n</ic> method is also used for synthesizers but it behaves differently. When using a synthesizer, this method can help you determine the number of harmonics in your waveform. See the **Synthesizers** section to learn more about this.
|
The <ic>.n</ic> method is also used for synthesizers but it behaves differently. When using a synthesizer, this method can help you determine the number of harmonics in your waveform. See the **Synthesizers** section to learn more about this.
|
||||||
@ -149,34 +147,31 @@ There is a special method to choose the _orbit_ that your sound is going to use:
|
|||||||
|
|
||||||
You can play a sound _dry_ and another sound _wet_. Take a look at this example where the reverb is only affecting one of the sounds:
|
You can play a sound _dry_ and another sound _wet_. Take a look at this example where the reverb is only affecting one of the sounds:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Dry and wet", `
|
||||||
"Dry and wet",
|
|
||||||
`
|
|
||||||
|
|
||||||
// This sound is dry
|
// This sound is dry
|
||||||
beat(1)::sound('hh').out()
|
beat(1)::sound('hh').out()
|
||||||
|
|
||||||
// This sound is wet (reverb)
|
// This sound is wet (reverb)
|
||||||
beat(2)::sound('cp').orbit(2).room(0.5).size(8).out()
|
beat(2)::sound('cp').orbit(2).room(0.5).size(8).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## The art of chaining
|
## The art of chaining
|
||||||
|
|
||||||
Learning to create complex chains is very important when using **Topos**. It can take some time to learn all the possible parameters. Don't worry, it's actually rather easy to learn.
|
Learning to create complex chains is very important when using **Topos**. It can take some time to learn all the possible parameters. Don't worry, it's actually rather easy to learn.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Complex chain",
|
"Complex chain",
|
||||||
`
|
`
|
||||||
beat(0.25) && sound('fhh')
|
beat(0.25) && sound('fhh')
|
||||||
.sometimes(s=>s.speed([2, 0.5].pick()))
|
.sometimes(s=>s.speed([2, 0.5].pick()))
|
||||||
.room(0.9).size(0.9).gain(1)
|
.room(0.9).size(0.9).gain(1)
|
||||||
.cutoff(usine(1/2) * 5000)
|
.cutoff(usine(1/2) * 5000)
|
||||||
.out()`,
|
.out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
Most audio parameters can be used both for samples and synthesizers. This is quite unconventional if you are familiar with a more traditional music software.
|
Most audio parameters can be used both for samples and synthesizers. This is quite unconventional if you are familiar with a more traditional music software.
|
||||||
`;
|
`}
|
||||||
};
|
|
||||||
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
|
|
||||||
export const distortion = (application: Editor): string => {
|
export const distortion = (application: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -18,13 +18,14 @@ Three additional effects that are easy enough to understand. These effects are d
|
|||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Crunch... crunch... crunch!",
|
"Crunch... crunch... crunch!",
|
||||||
`
|
`
|
||||||
beat(.5)::snd('pad').coarse($(1) % 16).clip(.5).out(); // Comment me
|
beat(.5)::snd('pad').coarse($(1) % 16).clip(.5).out(); // Comment me
|
||||||
beat(.5)::snd('pad').crush([16, 8, 4].beat(2)).clip(.5).out()
|
beat(.5)::snd('pad').crush([16, 8, 4].beat(2)).clip(.5).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
|
||||||
|
`}
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
|
|
||||||
export const effects = (application: Editor): string => {
|
export const reverb = (application: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
return `
|
return `
|
||||||
@ -24,12 +24,12 @@ For that reason, it is often a good idea to set fixed reverb values per orbit. D
|
|||||||
| <ic>roomdim</ic> | | Reverb lowpass frequency at -60db (in hertz) |
|
| <ic>roomdim</ic> | | Reverb lowpass frequency at -60db (in hertz) |
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Clapping in the cavern",
|
"Clapping in the cavern",
|
||||||
`
|
`
|
||||||
beat(2)::snd('cp').room(0.5).size(4).out()
|
beat(2)::snd('cp').room(0.5).size(4).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
|
||||||
## Delay
|
## Delay
|
||||||
|
|
||||||
@ -42,13 +42,10 @@ A good sounding delay unit that can go into feedback territory. Use it without m
|
|||||||
| <ic>delayfeedback</ic> | delayfb | Delay feedback (between <ic>0</ic> and <ic>1</ic>) |
|
| <ic>delayfeedback</ic> | delayfb | Delay feedback (between <ic>0</ic> and <ic>1</ic>) |
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Who doesn't like delay?",
|
"Who doesn't like delay?", `
|
||||||
`
|
|
||||||
beat(2)::snd('cp').delay(0.5).delaytime(0.75).delayfb(0.8).out()
|
beat(2)::snd('cp').delay(0.5).delaytime(0.75).delayfb(0.8).out()
|
||||||
beat(4)::snd('snare').out()
|
beat(4)::snd('snare').out()
|
||||||
beat(1)::snd('kick').out()`,
|
beat(1)::snd('kick').out()`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Phaser
|
## Phaser
|
||||||
|
|
||||||
@ -59,17 +56,13 @@ beat(1)::snd('kick').out()`,
|
|||||||
| <ic>phaserSweep</ic> | <ic>phassweep</ic> | Phaser frequency sweep (in hertz) |
|
| <ic>phaserSweep</ic> | <ic>phassweep</ic> | Phaser frequency sweep (in hertz) |
|
||||||
| <ic>phaserCenter</ic> | <ic>phascenter</ic> | Phaser center frequency (default to 1000) |
|
| <ic>phaserCenter</ic> | <ic>phascenter</ic> | Phaser center frequency (default to 1000) |
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Super cool phaser lick", `
|
||||||
"Super cool phaser lick",
|
|
||||||
`
|
|
||||||
rhythm(.5, 7, 8)::sound('wt_stereo')
|
rhythm(.5, 7, 8)::sound('wt_stereo')
|
||||||
.phaser(0.75).phaserSweep(3000)
|
.phaser(0.75).phaserSweep(3000)
|
||||||
.phaserCenter(1500).phaserDepth(1)
|
.phaserCenter(1500).phaserDepth(1)
|
||||||
.note([0, 1, 2, 3, 4, 5, 6].scale('pentatonic', 50).beat(0.25))
|
.note([0, 1, 2, 3, 4, 5, 6].scale('pentatonic', 50).beat(0.25))
|
||||||
.room(0.5).size(4).out()
|
.room(0.5).size(4).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Distorsion, saturation, destruction
|
## Distorsion, saturation, destruction
|
||||||
|
|
||||||
@ -83,41 +76,11 @@ Three additional effects that are easy enough to understand. These effects are d
|
|||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Crunch... crunch... crunch!",
|
"Crunch... crunch... crunch!",
|
||||||
`
|
`
|
||||||
beat(.5)::snd('pad').coarse($(1) % 16).clip(.5).out(); // Comment me
|
beat(.5)::snd('pad').coarse($(1) % 16).clip(.5).out(); // Comment me
|
||||||
beat(.5)::snd('pad').crush([16, 8, 4].beat(2)).clip(.5).out()
|
beat(.5)::snd('pad').crush([16, 8, 4].beat(2)).clip(.5).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
`}
|
||||||
## Vibrato
|
|
||||||
|
|
||||||
You can also add some amount of vibrato to the sound using the <ic>vib</ic> and <ic>vibmod</ic> methods. These can turn any oscillator into something more lively and/or into a sound effect when used with a high amount of modulation.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Different vibrato settings",
|
|
||||||
`
|
|
||||||
tempo(140);
|
|
||||||
beat(1) :: sound('triangle')
|
|
||||||
.freq(400).release(0.2)
|
|
||||||
.vib([1/2, 1, 2, 4].beat())
|
|
||||||
.vibmod([1,2,4,8].beat(2))
|
|
||||||
.out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Compression
|
|
||||||
|
|
||||||
This effect is leveraging the basic WebAudio compressor. More information can be found about it on the [DynamicsCompressorNode](https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode?retiredLocale=de#instance_properties) page. This can be come quite complex :)
|
|
||||||
|
|
||||||
| Method | Alias | Description |
|
|
||||||
|------------|-----------|---------------------------------|
|
|
||||||
| <ic>comp</ic> | cmp | Compressor threshold value (dB) over which compressor operates |
|
|
||||||
| <ic>ratio</ic> | rt | Compressor ratio: input amount in dB needed for 1dB change in the output |
|
|
||||||
| <ic>knee</ic> | kn | dB value defining the range over which the signal transitions to compressed section |
|
|
||||||
| <ic>compAttack</ic> | cmpa | In seconds, time to decrease the gain by 10db |
|
|
||||||
| <ic>compRelease</ic> | cmpr | In seconds, time to increase the gain by 10db |
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
|
|
||||||
export const sampler = (application: Editor): string => {
|
export const sampler = (application: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -28,8 +28,8 @@ The sampler is a rather complex beast. There is a lot you can do by manipulating
|
|||||||
Let's apply some of these methods naïvely. We will then break everything using simpler examples.
|
Let's apply some of these methods naïvely. We will then break everything using simpler examples.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Complex sampling duties",
|
"Complex sampling duties",
|
||||||
`
|
`
|
||||||
// Using some of the modifiers described above :)
|
// Using some of the modifiers described above :)
|
||||||
beat(.5)::snd('pad').begin(0.2)
|
beat(.5)::snd('pad').begin(0.2)
|
||||||
.speed([1, 0.9, 0.8].beat(4))
|
.speed([1, 0.9, 0.8].beat(4))
|
||||||
@ -38,61 +38,45 @@ beat(.5)::snd('pad').begin(0.2)
|
|||||||
.room(0.8).size(0.5)
|
.room(0.8).size(0.5)
|
||||||
.clip(1).out()
|
.clip(1).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
|
||||||
|
|
||||||
## Playback speed / pitching samples
|
## Playback speed / pitching samples
|
||||||
|
|
||||||
Let's play with the <ic>speed</ic> parameter to control the pitch of sample playback:
|
Let's play with the <ic>speed</ic> parameter to control the pitch of sample playback:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Controlling the playback speed", `
|
||||||
"Controlling the playback speed",
|
|
||||||
`
|
|
||||||
beat(0.5)::sound('notes')
|
beat(0.5)::sound('notes')
|
||||||
.speed([1,2,3,4].palindrome().beat(0.5)).out()
|
.speed([1,2,3,4].palindrome().beat(0.5)).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
It also works by using negative values. It reverses the playback:
|
It also works by using negative values. It reverses the playback:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Playing samples backwards", `
|
||||||
"Playing samples backwards",
|
|
||||||
`
|
|
||||||
beat(0.5)::sound('notes')
|
beat(0.5)::sound('notes')
|
||||||
.speed(-[1,2,3,4].palindrome().beat(0.5)).out()
|
.speed(-[1,2,3,4].palindrome().beat(0.5)).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
Of course you can play melodies using samples:
|
Of course you can play melodies using samples:
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Playing melodies using samples", `
|
||||||
"Playing melodies using samples",
|
|
||||||
`
|
|
||||||
beat(0.5)::sound('notes')
|
beat(0.5)::sound('notes')
|
||||||
.room(0.5).size(4)
|
.room(0.5).size(4)
|
||||||
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.5)).out()
|
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.5)).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Panning
|
## Panning
|
||||||
|
|
||||||
To pan samples, use the <ic>.pan</ic> method with a number between <ic>0</ic> and <ic>1</ic>.
|
To pan samples, use the <ic>.pan</ic> method with a number between <ic>0</ic> and <ic>1</ic>.
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Playing melodies using samples", `
|
||||||
"Playing melodies using samples",
|
|
||||||
`
|
|
||||||
beat(0.25)::sound('notes')
|
beat(0.25)::sound('notes')
|
||||||
.room(0.5).size(4).pan(r(0, 1))
|
.room(0.5).size(4).pan(r(0, 1))
|
||||||
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.25)).out()
|
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.25)).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
## Looping over a sample
|
## Looping over a sample
|
||||||
@ -100,30 +84,26 @@ beat(0.25)::sound('notes')
|
|||||||
Using <ic>loop</ic> (<ic>1</ic> for looping), <ic>loopBegin</ic> and <ic>loopEnd</ic> (between <ic>0</ic> and <ic>1</ic>), you can loop over the length of a sample. It can be super effective to create granular effects.
|
Using <ic>loop</ic> (<ic>1</ic> for looping), <ic>loopBegin</ic> and <ic>loopEnd</ic> (between <ic>0</ic> and <ic>1</ic>), you can loop over the length of a sample. It can be super effective to create granular effects.
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Granulation using loop", `
|
||||||
"Granulation using loop",
|
|
||||||
`
|
|
||||||
beat(0.25)::sound('fikea').loop(1)
|
beat(0.25)::sound('fikea').loop(1)
|
||||||
.lpf(ir(2000, 5000))
|
.lpf(ir(2000, 5000))
|
||||||
.loopBegin(0).loopEnd(r(0, 1))
|
.loopBegin(0).loopEnd(r(0, 1))
|
||||||
.room(0.5).size(4).pan(r(0, 1))
|
.room(0.5).size(4).pan(r(0, 1))
|
||||||
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.25)).out()
|
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.25)).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Stretching a sample
|
## Stretching a sample
|
||||||
|
|
||||||
The <ic>stretch</ic> parameter can help you to stretch long samples like amen breaks:
|
The <ic>stretch</ic> parameter can help you to stretch long samples like amen breaks:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Playing an amen break",
|
"Playing an amen break",
|
||||||
`
|
`
|
||||||
// Note that stretch has the same value as beat
|
// Note that stretch has the same value as beat
|
||||||
beat(4) :: sound('amen1').n(11).stretch(4).out()
|
beat(4) :: sound('amen1').n(11).stretch(4).out()
|
||||||
beat(1) :: sound('kick').shape(0.35).out()`,
|
beat(1) :: sound('kick').shape(0.35).out()`,
|
||||||
true,
|
true,
|
||||||
)};
|
)};
|
||||||
|
|
||||||
## Cutting samples
|
## Cutting samples
|
||||||
|
|
||||||
@ -131,45 +111,34 @@ Sometimes, you will find it necessary to cut a sample. It can be because the sam
|
|||||||
|
|
||||||
Know about the <ic>begin</ic> and <ic>end</ic> parameters. They are not related to the sampler itself, but to the length of the event you are playing. Let's cut the granular example:
|
Know about the <ic>begin</ic> and <ic>end</ic> parameters. They are not related to the sampler itself, but to the length of the event you are playing. Let's cut the granular example:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Cutting a sample using end", `
|
||||||
"Cutting a sample using end",
|
|
||||||
`
|
|
||||||
beat(0.25)::sound('notes')
|
beat(0.25)::sound('notes')
|
||||||
.end(usine(1/2)/0.5)
|
.end(usine(1/2)/0.5)
|
||||||
.room(0.5).size(4).pan(r(0, 1))
|
.room(0.5).size(4).pan(r(0, 1))
|
||||||
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.25)).out()
|
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.25)).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
You can also use <ic>clip</ic> to cut the sample everytime a new sample comes in:
|
You can also use <ic>clip</ic> to cut the sample everytime a new sample comes in:
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Cutting a sample using end", `
|
||||||
"Cutting a sample using end",
|
|
||||||
`
|
|
||||||
beat(0.125)::sound('notes')
|
beat(0.125)::sound('notes')
|
||||||
.cut(1)
|
.cut(1)
|
||||||
.room(0.5).size(4).pan(r(0, 1))
|
.room(0.5).size(4).pan(r(0, 1))
|
||||||
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.125)
|
.note([0, 2, 3, 4, 5].scale('minor', 50).beat(0.125)
|
||||||
+ [-12,12].beat()).out()
|
+ [-12,12].beat()).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Adding vibrato to samples
|
## Adding vibrato to samples
|
||||||
|
|
||||||
You can add vibrato to any sample using <ic>vib</ic> and <ic>vibmod</ic>:
|
You can add vibrato to any sample using <ic>vib</ic> and <ic>vibmod</ic>:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Adding vibrato to a sample", `
|
||||||
"Adding vibrato to a sample",
|
|
||||||
`
|
|
||||||
|
|
||||||
beat(1)::sound('fhang').vib([1, 2, 4].bar()).vibmod([0.5, 2].beat()).out()
|
beat(1)::sound('fhang').vib([1, 2, 4].bar()).vibmod([0.5, 2].beat()).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
`}
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -22,7 +22,7 @@ The code you enter in any of the scripts is evaluated in strict mode. This tells
|
|||||||
|
|
||||||
- **about variables:** the state of your variables is not kept between iterations. If you write <ic>let a = 2</ic> and remove that value from your script, **it will crash**! Variable and state is not preserved between each run of the script. There are other ways to deal with variables and to share variables between scripts! Some variables like **iterators** can keep their state between iterations because they are saved **with the file itself**. There is also **global variables**.
|
- **about variables:** the state of your variables is not kept between iterations. If you write <ic>let a = 2</ic> and remove that value from your script, **it will crash**! Variable and state is not preserved between each run of the script. There are other ways to deal with variables and to share variables between scripts! Some variables like **iterators** can keep their state between iterations because they are saved **with the file itself**. There is also **global variables**.
|
||||||
- **about errors and printing:** your code will crash! Don't worry, we do our best to make it crash in the most gracious way possible. Most errors are caught and displayed in the interface. For weirder bugs, open the dev console with ${key_shortcut(
|
- **about errors and printing:** your code will crash! Don't worry, we do our best to make it crash in the most gracious way possible. Most errors are caught and displayed in the interface. For weirder bugs, open the dev console with ${key_shortcut(
|
||||||
"Ctrl + Shift + I",
|
"Ctrl + Shift + I"
|
||||||
)}. You cannot directly use <ic>console.log('hello, world')</ic> in the interface but you can use <ic>log(message)</ic> to print a one line message. You will have to open the console as well to see your messages being printed there!
|
)}. You cannot directly use <ic>console.log('hello, world')</ic> in the interface but you can use <ic>log(message)</ic> to print a one line message. You will have to open the console as well to see your messages being printed there!
|
||||||
- **about new syntax:** sometimes, we had some fun with JavaScript's syntax in order to make it easier/faster to write on stage. <ic>&&</ic> can also be written <ic>::</ic> or <ic>-></ic> because it is faster to type or better for the eyes!
|
- **about new syntax:** sometimes, we had some fun with JavaScript's syntax in order to make it easier/faster to write on stage. <ic>&&</ic> can also be written <ic>::</ic> or <ic>-></ic> because it is faster to type or better for the eyes!
|
||||||
|
|
||||||
@ -31,8 +31,8 @@ The code you enter in any of the scripts is evaluated in strict mode. This tells
|
|||||||
There are some techniques to keep code short and tidy. Don't try to write the shortest possible code! Use shortcuts when it makes sense. Take a look at the following examples:
|
There are some techniques to keep code short and tidy. Don't try to write the shortest possible code! Use shortcuts when it makes sense. Take a look at the following examples:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Shortening your if conditions",
|
"Shortening your if conditions",
|
||||||
`
|
`
|
||||||
// The && symbol (overriden by :: in Topos) is very often used for conditions!
|
// The && symbol (overriden by :: in Topos) is very often used for conditions!
|
||||||
beat(.75) :: snd('linnhats').n([1,4,5].beat()).out()
|
beat(.75) :: snd('linnhats').n([1,4,5].beat()).out()
|
||||||
beat(1) :: snd('bd').out()
|
beat(1) :: snd('bd').out()
|
||||||
@ -42,42 +42,42 @@ beat(1) :: snd('bd').out()
|
|||||||
//// beat(1) :: snd('bd').out()
|
//// beat(1) :: snd('bd').out()
|
||||||
|
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"More complex conditions using ?",
|
"More complex conditions using ?",
|
||||||
`
|
`
|
||||||
// The ? symbol can be used to write a if/true/false condition
|
// The ? symbol can be used to write a if/true/false condition
|
||||||
beat(4) ? snd('kick').out() : beat(2) :: snd('snare').out()
|
beat(4) ? snd('kick').out() : beat(2) :: snd('snare').out()
|
||||||
// (true) ? log('very true') : log('very false')
|
// (true) ? log('very true') : log('very false')
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using not and other short symbols",
|
"Using not and other short symbols",
|
||||||
`
|
`
|
||||||
// The ! symbol can be used to reverse a condition
|
// The ! symbol can be used to reverse a condition
|
||||||
beat(4) ? snd('kick').out() : beat(2) :: snd('snare').out()
|
beat(4) ? snd('kick').out() : beat(2) :: snd('snare').out()
|
||||||
!beat(2) :: beat(0.5) :: snd('clap').out()
|
!beat(2) :: beat(0.5) :: snd('clap').out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
# About crashes and bugs
|
# About crashes and bugs
|
||||||
|
|
||||||
Things will crash! It's 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 is no safeguard to stop you from doing most things. This is to ensure that you have all the available possible room to write bespoke code and experiment with your ideas through code.
|
Things will crash! It's 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 is no safeguard to stop you from doing most things. This is to ensure that you have all the available possible room to write bespoke code and experiment with your ideas through code.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"This example will crash! Who cares?",
|
"This example will crash! Who cares?",
|
||||||
`
|
`
|
||||||
// This is crashing. See? No harm!
|
// This is crashing. See? No harm!
|
||||||
qjldfqsdklqsjdlkqjsdlqkjdlksjd
|
qjldfqsdklqsjdlkqjsdlqkjdlksjd
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -18,44 +18,44 @@ The Topos interface is designed on a simple concept: _scripts_ and _universes_.
|
|||||||
Every Topos session is composed of **local**, **global** and **init** scripts. These scripts form a structure called a "_universe_". The scripts can describe whatever you want: songs, sketches, small tools, or whatever. All the scripts are written using the JavaScript programming language. They describe a musical or algorithmic process. You can call them anytime.
|
Every Topos session is composed of **local**, **global** and **init** scripts. These scripts form a structure called a "_universe_". The scripts can describe whatever you want: songs, sketches, small tools, or whatever. All the scripts are written using the JavaScript programming language. They describe a musical or algorithmic process. You can call them anytime.
|
||||||
|
|
||||||
- **the global script** (${key_shortcut(
|
- **the global script** (${key_shortcut(
|
||||||
"Ctrl + G",
|
"Ctrl + G"
|
||||||
)}): _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. You can also access that script using the ${key_shortcut(
|
)}): _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. You can also access that script using the ${key_shortcut(
|
||||||
"F10",
|
"F10"
|
||||||
)} key.
|
)} key.
|
||||||
- **the local scripts** (${key_shortcut(
|
- **the local scripts** (${key_shortcut(
|
||||||
"Ctrl + L",
|
"Ctrl + L"
|
||||||
)}): _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... You can also switch to one of the local scripts by using the function keys (${key_shortcut(
|
)}): _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... You can also switch to one of the local scripts by using the function keys (${key_shortcut(
|
||||||
"F1",
|
"F1"
|
||||||
)} to ${key_shortcut("F9")}).
|
)} to ${key_shortcut("F9")}).
|
||||||
- **the init script** (${key_shortcut(
|
- **the init script** (${key_shortcut(
|
||||||
"Ctrl + I",
|
"Ctrl + I"
|
||||||
)}): _Evaluated on program load_. Used to set up the software the session to the desired state before playing, for example changing bpm or to initialize global variables (See Functions). You can also access that script using the ${key_shortcut(
|
)}): _Evaluated on program load_. Used to set up the software the session to the desired state before playing, for example changing bpm or to initialize global variables (See Functions). You can also access that script using the ${key_shortcut(
|
||||||
"F11",
|
"F11"
|
||||||
)} key.
|
)} key.
|
||||||
- **the note file** (${key_shortcut(
|
- **the note file** (${key_shortcut(
|
||||||
"Ctrl + N",
|
"Ctrl + N"
|
||||||
)}): _Not evaluated_. Used to store your thoughts or commentaries about the session you are currently playing. It is nothing more than a scratchpad really!
|
)}): _Not evaluated_. Used to store your thoughts or commentaries about the session you are currently playing. It is nothing more than a scratchpad really!
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Calling scripts to form a musical piece",
|
"Calling scripts to form a musical piece",
|
||||||
`
|
`
|
||||||
beat(1) :: script(1) // Calling local script n°1
|
beat(1) :: script(1) // Calling local script n°1
|
||||||
flip(4) :: beat(.5) :: script(2) // Calling script n°2
|
flip(4) :: beat(.5) :: script(2) // Calling script n°2
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Script execution can become musical too!",
|
"Script execution can become musical too!",
|
||||||
`
|
`
|
||||||
// Use algorithms to pick a script.
|
// Use algorithms to pick a script.
|
||||||
beat(1) :: script([1, 3, 5].pick())
|
beat(1) :: script([1, 3, 5].pick())
|
||||||
flip(4) :: beat([.5, .25].beat(16)) :: script(
|
flip(4) :: beat([.5, .25].beat(16)) :: script(
|
||||||
[5, 6, 7, 8].beat())
|
[5, 6, 7, 8].beat())
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
### Navigating the interface
|
### Navigating the interface
|
||||||
|
|
||||||
@ -81,7 +81,7 @@ There are some useful functions to help you manage your scripts:
|
|||||||
|
|
||||||
|
|
||||||
A set of files is called a _universe_. You can switch between universes immediately immediately by pressing ${key_shortcut(
|
A set of files is called a _universe_. You can switch between universes immediately immediately by pressing ${key_shortcut(
|
||||||
"Ctrl + B",
|
"Ctrl + B"
|
||||||
)}. You can also create a new universe by entering a name. Load a universe by typing its name. Once a universe is loaded, it is not possible to call any data/code from any other universe. Switching between universes does not stop the transport nor reset the clock. The context switches but time keeps flowing. This can be useful for transitioning between songs / parts.
|
)}. You can also create a new universe by entering a name. Load a universe by typing its name. Once a universe is loaded, it is not possible to call any data/code from any other universe. Switching between universes does not stop the transport nor reset the clock. The context switches but time keeps flowing. This can be useful for transitioning between songs / parts.
|
||||||
|
|
||||||
There are some useful functions to help you manage your universes:
|
There are some useful functions to help you manage your universes:
|
||||||
|
|||||||
@ -14,10 +14,10 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
|
|||||||
| Shortcut | Key | Description |
|
| Shortcut | Key | Description |
|
||||||
|----------|-------|------------------------------------------------------------|
|
|----------|-------|------------------------------------------------------------|
|
||||||
|**Start/Pause** transport|${key_shortcut(
|
|**Start/Pause** transport|${key_shortcut(
|
||||||
"Ctrl + P",
|
"Ctrl + P"
|
||||||
)}|Start or pause audio playback|
|
)}|Start or pause audio playback|
|
||||||
|**Stop** the transport |${key_shortcut(
|
|**Stop** the transport |${key_shortcut(
|
||||||
"Ctrl + S",
|
"Ctrl + S"
|
||||||
)}|Stop and rewind audio playback|
|
)}|Stop and rewind audio playback|
|
||||||
|
|
||||||
### Moving in the interface
|
### Moving in the interface
|
||||||
@ -26,15 +26,15 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
|
|||||||
|----------|-------|------------------------------------------------------------|
|
|----------|-------|------------------------------------------------------------|
|
||||||
|Universe switch|${key_shortcut("Ctrl + B")}|Switch to a new universe|
|
|Universe switch|${key_shortcut("Ctrl + B")}|Switch to a new universe|
|
||||||
|Global Script|${key_shortcut("Ctrl + G")} or ${key_shortcut(
|
|Global Script|${key_shortcut("Ctrl + G")} or ${key_shortcut(
|
||||||
"F10",
|
"F10"
|
||||||
)}|Switch to global script |
|
)}|Switch to global script |
|
||||||
|Local scripts|${key_shortcut("Ctrl + L")} or ${key_shortcut(
|
|Local scripts|${key_shortcut("Ctrl + L")} or ${key_shortcut(
|
||||||
"F11",
|
"F11"
|
||||||
)}|Switch to local scripts |
|
)}|Switch to local scripts |
|
||||||
|Init script|${key_shortcut("Ctrl + L")}|Switch to init script|
|
|Init script|${key_shortcut("Ctrl + L")}|Switch to init script|
|
||||||
|Note File|${key_shortcut("Ctrl + N")}|Switch to note file|
|
|Note File|${key_shortcut("Ctrl + N")}|Switch to note file|
|
||||||
|Local Script|${key_shortcut("F1")} to ${key_shortcut(
|
|Local Script|${key_shortcut("F1")} to ${key_shortcut(
|
||||||
"F9",
|
"F9"
|
||||||
)}|Switch to a specific local script|
|
)}|Switch to a specific local script|
|
||||||
|Documentation|${key_shortcut("Ctrl + D")}|Open the documentation|
|
|Documentation|${key_shortcut("Ctrl + D")}|Open the documentation|
|
||||||
|
|
||||||
@ -44,37 +44,33 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
|
|||||||
|----------|-------|------------------------------------------------------------|
|
|----------|-------|------------------------------------------------------------|
|
||||||
|Evaluate|${key_shortcut("Ctrl + Enter")}| Evaluate the current script |
|
|Evaluate|${key_shortcut("Ctrl + Enter")}| Evaluate the current script |
|
||||||
|Local Eval|${key_shortcut("Ctrl + F1")} to ${key_shortcut(
|
|Local Eval|${key_shortcut("Ctrl + F1")} to ${key_shortcut(
|
||||||
"Ctrl + F9",
|
"Ctrl + F9"
|
||||||
)}|Local File Evaluation|
|
)}|Local File Evaluation|
|
||||||
|Force Eval|${key_shortcut(
|
|Force Eval|${key_shortcut(
|
||||||
"Ctrl + Shift + Enter",
|
"Ctrl + Shift + Enter"
|
||||||
)}|Force evaluation of the current script|
|
)}|Force evaluation of the current script|
|
||||||
|Clear cache & Eval|${key_shortcut(
|
|
||||||
"Ctrl + Shift + Backspace (Delete)",
|
|
||||||
)}|Clears cache and forces evaluation to update cached scripts|
|
|
||||||
|
|
||||||
### Special
|
### Special
|
||||||
|
|
||||||
| Shortcut | Key | Description |
|
| Shortcut | Key | Description |
|
||||||
|----------|-------|------------------------------------------------------------|
|
|----------|-------|------------------------------------------------------------|
|
||||||
|Vim Mode|${key_shortcut("Ctrl + V")}| Switch between Vim and Normal Mode|
|
|Vim Mode|${key_shortcut("Ctrl + V")}| Switch between Vim and Normal Mode|
|
||||||
|Maximize|${key_shortcut("Ctrl + M")}| Show/Hide the interface|
|
|
||||||
|
|
||||||
# Keyboard Fill
|
# Keyboard Fill
|
||||||
|
|
||||||
By pressing the ${key_shortcut(
|
By pressing the ${key_shortcut(
|
||||||
"Alt",
|
"Alt"
|
||||||
)} key, you can trigger the <ic>Fill</ic> mode which can either be <ic>true</ic> or <ic>false</ic>. The fill will be set to <ic>true</ic> as long as the key is held. Try pressing ${key_shortcut(
|
)} key, you can trigger the <ic>Fill</ic> mode which can either be <ic>true</ic> or <ic>false</ic>. The fill will be set to <ic>true</ic> as long as the key is held. Try pressing ${key_shortcut(
|
||||||
"Alt",
|
"Alt"
|
||||||
)} when playing this example:
|
)} when playing this example:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Claping twice as fast with fill",
|
"Claping twice as fast with fill",
|
||||||
`
|
`
|
||||||
beat(fill() ? 1/4 : 1/2)::sound('cp').out()
|
beat(fill() ? 1/4 : 1/2)::sound('cp').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -16,8 +16,8 @@ You can get the current position of the mouse on the screen by using the followi
|
|||||||
- <ic>mouseY()</ic>: the vertical position of the mouse on the screen (as a floating point number).
|
- <ic>mouseY()</ic>: the vertical position of the mouse on the screen (as a floating point number).
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Vibrato controlled by mouse",
|
"Vibrato controlled by mouse",
|
||||||
`
|
`
|
||||||
beat(.25) :: sound('sine')
|
beat(.25) :: sound('sine')
|
||||||
.note([0,4,5,10,11,15,16]
|
.note([0,4,5,10,11,15,16]
|
||||||
.palindrome()
|
.palindrome()
|
||||||
@ -27,8 +27,8 @@ beat(.25) :: sound('sine')
|
|||||||
.pan(r(0, 1))
|
.pan(r(0, 1))
|
||||||
.room(0.35).size(4).out()
|
.room(0.35).size(4).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
@ -39,15 +39,15 @@ Current mouse position can also be used to generate notes:
|
|||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using the mouse to output a note!",
|
"Using the mouse to output a note!",
|
||||||
`
|
`
|
||||||
beat(.25) :: sound('sine')
|
beat(.25) :: sound('sine')
|
||||||
.lpf(7000)
|
.lpf(7000)
|
||||||
.delay(0.5).delayt(1/6).delayfb(0.2)
|
.delay(0.5).delayt(1/6).delayfb(0.2)
|
||||||
.note(noteX())
|
.note(noteX())
|
||||||
.room(0.35).size(4).out()`,
|
.room(0.35).size(4).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Mouse and Arrays
|
## Mouse and Arrays
|
||||||
|
|
||||||
@ -58,14 +58,14 @@ You can use the mouse to explore the valuesq contained in an Array:
|
|||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Taking values out of an Array with the mouse",
|
"Taking values out of an Array with the mouse",
|
||||||
`
|
`
|
||||||
log([1,2,3,4].mouseX())
|
log([1,2,3,4].mouseX())
|
||||||
log([4,5,6,7].mouseY())
|
log([4,5,6,7].mouseY())
|
||||||
|
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -8,34 +8,34 @@ export const introduction = (application: Editor): string => {
|
|||||||
# Welcome
|
# Welcome
|
||||||
|
|
||||||
Welcome to the **Topos** documentation. You can jump here anytime by pressing ${key_shortcut(
|
Welcome to the **Topos** documentation. You can jump here anytime by pressing ${key_shortcut(
|
||||||
"Ctrl + D",
|
"Ctrl + D"
|
||||||
)}. Press again to make the documentation disappear. Contributions are much appreciated! The documentation [lives here](https://github.com/Bubobubobubobubo/topos/tree/main/src/documentation).
|
)}. Press again to make the documentation disappear. Contributions are much appreciated! The documentation [lives here](https://github.com/Bubobubobubobubo/topos/tree/main/src/documentation).
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Welcome! Eval to get started",
|
"Welcome! Eval to get started",
|
||||||
examples[Math.floor(Math.random() * examples.length)],
|
examples[Math.floor(Math.random() * examples.length)],
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
# What is Topos?
|
# What is Topos?
|
||||||
|
|
||||||
Topos is an _algorithmic_ sequencer. Topos is also a _live coding_ environment. To sum it up, think: "_making music in real time through code_". Code used as an expressive medium for musical improvisation! Topos uses small algorithms to represent musical sequences and processes.
|
Topos is an _algorithmic_ sequencer. Topos is also a _live coding_ environment. To sum it up, think: "_making music in real time through code_". Code used as an expressive medium for musical improvisation! Topos uses small algorithms to represent musical sequences and processes.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Small algorithms for direct musical expression",
|
"Small algorithms for direct musical expression",
|
||||||
`
|
`
|
||||||
rhythm(.5, 4, 8) :: sound('drum').out()
|
rhythm(.5, 4, 8) :: sound('drum').out()
|
||||||
rhythm(.25, [5, 7].beat(2), 8) :: sound(['hc', 'fikea', 'hat'].pick(1))
|
rhythm(.25, [5, 7].beat(2), 8) :: sound(['hc', 'fikea', 'hat'].pick(1))
|
||||||
.lpf([500, 4000+usine(1/2)*2000]).pan(r(0, 1)).ad(0, [1, .5])
|
.lpf([500, 4000+usine(1/2)*2000]).pan(r(0, 1)).ad(0, [1, .5])
|
||||||
.db(-ir(1,8)).speed([1,[0.5, 2].pick()]).room(0.5).size(3).o(4).out()
|
.db(-ir(1,8)).speed([1,[0.5, 2].pick()]).room(0.5).size(3).o(4).out()
|
||||||
beat([2,0.5].dur(13.5, 0.5))::snd('fsoftsnare')
|
beat([2,0.5].dur(13.5, 0.5))::snd('fsoftsnare')
|
||||||
.n(0).speed([1, 0.5]).o(4).out()`,
|
.n(0).speed([1, 0.5]).o(4).out()`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Computer music should be immediate and intuitive",
|
"Computer music should be immediate and intuitive",
|
||||||
`
|
`
|
||||||
let chord_prog = [0, 0, 5].bar() // Chord progression
|
let chord_prog = [0, 0, 5].bar() // Chord progression
|
||||||
beat(.25)::snd('sine')
|
beat(.25)::snd('sine')
|
||||||
.note(chord_prog + [60, 64, 67, 71].mouseX()
|
.note(chord_prog + [60, 64, 67, 71].mouseX()
|
||||||
@ -47,31 +47,26 @@ beat(.25)::snd('sine')
|
|||||||
.delay(0.5).delayt(0.25).delayfb(0.7) // Delay
|
.delay(0.5).delayt(0.25).delayfb(0.7) // Delay
|
||||||
.room(0.5).size(8) // Reverb
|
.room(0.5).size(8) // Reverb
|
||||||
.out()`,
|
.out()`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Making the web less dreadful, one beep at at time",
|
"Making the web less dreadful, one beep at at time",
|
||||||
`
|
`
|
||||||
beat(.5) :: sound('sid').n($(2))
|
beat(.5) :: sound('sid').n($(2))
|
||||||
.room(1).speed([1,2].pick()).out()
|
.room(1).speed([1,2].pick()).out()
|
||||||
beat(.25) :: sound('sid').note(
|
beat(.25) :: sound('sid').note(
|
||||||
[34, 36, 41].beat(.25) + [[0,-24].pick(),12].beat())
|
[34, 36, 41].beat(.25) + [[0,-24].pick(),12].beat())
|
||||||
.room(0.9).size(0.9).n(4).out()`,
|
.room(0.9).size(0.9).n(4).out()`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
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 cousin of it! It is a sequencer, a scriptable interface, a companion for algorithmic music-making. Topos wishes to fullfill the same goal as the Teletype, keeping the same spirit alive on the web. It is free, open-source, and made to be shared and used by everyone. Learn more about live coding on [livecoding.fr](https://livecoding.fr).
|
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 cousin of it! It is a sequencer, a scriptable interface, a companion for algorithmic music-making. Topos wishes to fullfill the same goal as the Teletype, keeping the same spirit alive on the web. It is free, open-source, and made to be shared and used by everyone. Learn more about live coding on [livecoding.fr](https://livecoding.fr).
|
||||||
|
|
||||||
## Demo Songs
|
## Demo Songs
|
||||||
|
|
||||||
Reloading the application will get you one random song example to study every time. Press ${key_shortcut(
|
Reloading the application will get you one random song example to study every time. Press ${key_shortcut(
|
||||||
"F5",
|
"F5"
|
||||||
)} and listen to them all! The demo songs are also used a bit everywhere in the documentation to illustrate some of the working principles :).
|
)} and listen to them all! The demo songs are also used a bit everywhere in the documentation to illustrate some of the working principles :).
|
||||||
|
|
||||||
## Support
|
|
||||||
|
|
||||||
<p>You can <a href='https://ko-fi.com/I2I2RSBHF' target='_blank'><img height='36' style='display: inline; border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a> to support the development :) </p>
|
|
||||||
|
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { makeExampleFactory } from "../../Documentation";
|
import { makeExampleFactory } from "../Documentation";
|
||||||
import { type Editor } from "../../main";
|
import { type Editor } from "../main";
|
||||||
|
|
||||||
export const chaining = (application: Editor): string => {
|
export const chaining = (application: Editor): string => {
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
@ -9,12 +9,11 @@ export const chaining = (application: Editor): string => {
|
|||||||
You might have noticed that **Topos** is using chains a lot. Chains are a very common pattern when programming, especially when you deal with objets that can be composed from many changing properties. Method chaining is used by many objects but mostly by <ic>sound()</ic> and <ic>midi()</ic>. It looks like this:
|
You might have noticed that **Topos** is using chains a lot. Chains are a very common pattern when programming, especially when you deal with objets that can be composed from many changing properties. Method chaining is used by many objects but mostly by <ic>sound()</ic> and <ic>midi()</ic>. It looks like this:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Method chaining",
|
"Method chaining",
|
||||||
`
|
`
|
||||||
beat(1)::sound('bd').speed(2).lpf(500).out()
|
beat(1)::sound('bd').speed(2).lpf(500).out()
|
||||||
`,
|
`, true
|
||||||
true,
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
Method chains become fun if you add just a little bit of complexity to them. You can start to add conditions, start to register complex chains to be re-used later on, etc.. We will not remind you how to write basic chains. The whole documentation is full of examples! Let's explore more delicate patterns!
|
Method chains become fun if you add just a little bit of complexity to them. You can start to add conditions, start to register complex chains to be re-used later on, etc.. We will not remind you how to write basic chains. The whole documentation is full of examples! Let's explore more delicate patterns!
|
||||||
|
|
||||||
@ -23,22 +22,21 @@ Method chains become fun if you add just a little bit of complexity to them. You
|
|||||||
You can use the <ic>register(...args)</ic> function to... register a chain that you would like to re-use later on.
|
You can use the <ic>register(...args)</ic> function to... register a chain that you would like to re-use later on.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Re-creating a classic Tidal function",
|
"Re-creating a classic Tidal function",
|
||||||
`
|
`
|
||||||
// Playing with extreme panning and playback rate
|
// Playing with extreme panning and playback rate
|
||||||
register('juxrev', n=>n.pan([0, 1]).speed([1, -1]))
|
register('juxrev', n=>n.pan([0, 1]).speed([1, -1]))
|
||||||
|
|
||||||
// Using our new abstraction
|
// Using our new abstraction
|
||||||
beat(1)::sound('fhh').juxrev().out()
|
beat(1)::sound('fhh').juxrev().out()
|
||||||
`,
|
`, true
|
||||||
true,
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
This is an extremely powerful construct. For example, you can use it to create synthesizer presets and reuse them later on. You can also define parameters for your registered functions. For example:
|
This is an extremely powerful construct. For example, you can use it to create synthesizer presets and reuse them later on. You can also define parameters for your registered functions. For example:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Re-creating a classic Tidal function",
|
"Re-creating a classic Tidal function",
|
||||||
`
|
`
|
||||||
// Registering a specific synth architecture
|
// Registering a specific synth architecture
|
||||||
register('sub', (n,x=4,y=80)=>n.ad(0, .25)
|
register('sub', (n,x=4,y=80)=>n.ad(0, .25)
|
||||||
.fmi(x).pan([0, 1])
|
.fmi(x).pan([0, 1])
|
||||||
@ -50,29 +48,9 @@ register('sub', (n,x=4,y=80)=>n.ad(0, .25)
|
|||||||
// Using it with an arpeggio
|
// Using it with an arpeggio
|
||||||
rhythm(.25, [6, 8].beat(), 12)::sound('sine')
|
rhythm(.25, [6, 8].beat(), 12)::sound('sine')
|
||||||
.note([0, 2, 4, 5].scale('minor', 50).beat(0.5))
|
.note([0, 2, 4, 5].scale('minor', 50).beat(0.5))
|
||||||
.sub(8).out()`,
|
.sub(8).out()`, true
|
||||||
true,
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
## Logging values from the chain
|
|
||||||
|
|
||||||
You can use the <ic>log()</ic> function to print values from the current event. This can be useful to debug your code. Useful parameters to log could be **note**, **pitch**, **dur**, **octave** etc...
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Logging values from the chain",
|
|
||||||
`
|
|
||||||
beat(1) :: sound("sine").pitch(rI(1,6)).log("note").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Logging values from ziffers pattern",
|
|
||||||
`
|
|
||||||
z1("0 3 2 5").scale("rocritonic").sound("sine").log("pitch","note","key").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Conditional chaining
|
## Conditional chaining
|
||||||
|
|
||||||
@ -81,17 +59,17 @@ There are cases when you don't always want to apply one or many elements that ar
|
|||||||
All functions from the sound object can be used to modify the event, for example:
|
All functions from the sound object can be used to modify the event, for example:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Modifying sound events with probabilities",
|
"Modifying sound events with probabilities",
|
||||||
`
|
`
|
||||||
beat(.5) && sound('fhh')
|
beat(.5) && sound('fhh')
|
||||||
.odds(1/4, s => s.speed(irand(1,4)))
|
.odds(1/4, s => s.speed(irand(1,4)))
|
||||||
.rarely(s => s.room(0.5).size(8).speed(0.5))
|
.rarely(s => s.room(0.5).size(8).speed(0.5))
|
||||||
.out()`,
|
.out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Chance to play a random note",
|
"Chance to play a random note",
|
||||||
`
|
`
|
||||||
rhythm(.5, 3, 8) && sound('pluck').note(38).out()
|
rhythm(.5, 3, 8) && sound('pluck').note(38).out()
|
||||||
beat(.5) && sound('pluck').note(60)
|
beat(.5) && sound('pluck').note(60)
|
||||||
.often(s => s.note(57))
|
.often(s => s.note(57))
|
||||||
@ -99,8 +77,8 @@ beat(.5) && sound('pluck').note(60)
|
|||||||
.note(62)
|
.note(62)
|
||||||
.room(0.5).size(3)
|
.room(0.5).size(3)
|
||||||
.out()`,
|
.out()`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
There is a growing collection of probability and chance methods you can use:
|
There is a growing collection of probability and chance methods you can use:
|
||||||
|
|
||||||
@ -127,14 +105,14 @@ There is a growing collection of probability and chance methods you can use:
|
|||||||
The conditional chaining also applies to MIDI. Values can also be incremented using <ic>+=</ic> notation.
|
The conditional chaining also applies to MIDI. Values can also be incremented using <ic>+=</ic> notation.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Modifying midi events with probabilities",
|
"Modifying midi events with probabilities",
|
||||||
`beat(.5) && midi(60).channel(1)
|
`beat(.5) && midi(60).channel(1)
|
||||||
.odds(1/4, n => n.channel(2))
|
.odds(1/4, n => n.channel(2))
|
||||||
.often(n => n.note+=4)
|
.often(n => n.note+=4)
|
||||||
.sometimes(s => s.velocity(irand(50,100)))
|
.sometimes(s => s.velocity(irand(50,100)))
|
||||||
.out()`,
|
.out()`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
|
||||||
## Ziffers
|
## Ziffers
|
||||||
|
|
||||||
@ -147,8 +125,8 @@ Ziffers patterns can be chained to <ic>sound()</ic> and <ic>midi()</ic> as well.
|
|||||||
* <ic>midi()</ic> - for outputting pattern as MIDI (See **MIDI**)
|
* <ic>midi()</ic> - for outputting pattern as MIDI (See **MIDI**)
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Ziffer player using a sound chain and probabilities!",
|
"Ziffer player using a sound chain and probabilities!",
|
||||||
`
|
`
|
||||||
z1('s 0 5 7 0 3 7 0 2 7 0 1 7 0 1 6 5 4 3 2')
|
z1('s 0 5 7 0 3 7 0 2 7 0 1 7 0 1 6 5 4 3 2')
|
||||||
.octave([0, 1].beat(2) - 1)
|
.octave([0, 1].beat(2) - 1)
|
||||||
.scale('pentatonic').sound('pluck')
|
.scale('pentatonic').sound('pluck')
|
||||||
@ -156,7 +134,7 @@ z1('s 0 5 7 0 3 7 0 2 7 0 1 7 0 1 6 5 4 3 2')
|
|||||||
.odds(1/2, n => n.speed(0.5))
|
.odds(1/2, n => n.speed(0.5))
|
||||||
.room(0.5).size(0.5).out()
|
.room(0.5).size(0.5).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
91
src/documentation/engine.ts
Normal file
91
src/documentation/engine.ts
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
import { type Editor } from "../main";
|
||||||
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
|
export const sound = (application: Editor): string => {
|
||||||
|
const makeExample = makeExampleFactory(application);
|
||||||
|
return `
|
||||||
|
|
||||||
|
|
||||||
|
## Sample Controls
|
||||||
|
|
||||||
|
There are some basic controls over the playback of each sample. This allows you to get into more serious sampling if you take the time to really work with your audio materials.
|
||||||
|
|
||||||
|
| Method | Alias | Description |
|
||||||
|
|---------|-------|--------------------------------------------------------|
|
||||||
|
| <ic>n</ic> | | Select a sample in the current folder (from <ic>0</ic> to infinity) |
|
||||||
|
| <ic>begin</ic> | | Beginning of the sample playback (between <ic>0</ic> and <ic>1</ic>) |
|
||||||
|
| <ic>end</ic> | | End of the sample (between <ic>0</ic> and <ic>1</ic>) |
|
||||||
|
| <ic>loopBegin</ic> | | Beginning of the loop section (between <ic>0</ic> and <ic>1</ic>) |
|
||||||
|
| <ic>loopEnd</ic> | | End of the loop section (between <ic>0</ic> and <ic>1</ic>) |
|
||||||
|
| <ic>loop</ic> | | Whether to loop or not the audio sample |
|
||||||
|
| <ic>stretch</ic> | | Stretches the audio playback rate of a sample over <ic>n</ic> beats |
|
||||||
|
| <ic>speed</ic> | | Playback speed (<ic>2</ic> = twice as fast) |
|
||||||
|
| <ic>cut</ic> | | Set with <ic>0</ic> or <ic>1</ic>. Will cut the sample as soon as another sample is played on the same bus |
|
||||||
|
| <ic>clip</ic> | | Multiply the duration of the sample with the given number |
|
||||||
|
| <ic>pan</ic> | | Stereo position of the audio playback (<ic>0</ic> = left, <ic>1</ic> = right)|
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Complex sampling duties",
|
||||||
|
`
|
||||||
|
// Using some of the modifiers described above :)
|
||||||
|
beat(.5)::snd('pad').begin(0.2)
|
||||||
|
.speed([1, 0.9, 0.8].beat(4))
|
||||||
|
.n(2).pan(usine(.5))
|
||||||
|
.end(rand(0.3,0.8))
|
||||||
|
.room(0.8).size(0.5)
|
||||||
|
.clip(1).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)};
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Playing an amen break",
|
||||||
|
`
|
||||||
|
// Note that stretch has the same value as beat
|
||||||
|
beat(4) :: sound('amen1').n(11).stretch(4).out()
|
||||||
|
beat(1) :: sound('kick').shape(0.35).out()`,
|
||||||
|
true,
|
||||||
|
)};
|
||||||
|
|
||||||
|
|
||||||
|
## Filters
|
||||||
|
|
||||||
|
There are three basic filters: a _lowpass_, _highpass_ and _bandpass_ filters with rather soft slope. Each of them can take up to two arguments. You can also use only the _cutoff_ frequency and the resonance will stay to its default nominal value. You will learn more about the usage of filters in the synths page!
|
||||||
|
|
||||||
|
| Method | Alias | Description |
|
||||||
|
|------------|-------|-----------------------------------------|
|
||||||
|
| <ic>cutoff</ic> | lpf | Cutoff frequency of the lowpass filter |
|
||||||
|
| <ic>resonance</ic> | lpq | Resonance of the lowpass filter |
|
||||||
|
| <ic>hcutoff</ic> | hpf | Cutoff frequency of the highpass filter |
|
||||||
|
| <ic>hresonance</ic> | hpq | Resonance of the highpass filter |
|
||||||
|
| <ic>bandf</ic> | bpf | Cutoff frequency of the bandpass filter |
|
||||||
|
| <ic>bandq</ic> | bpq | Resonance of the bandpass filter |
|
||||||
|
| <ic>vowel</ic> | | Formant filter with (vocal quality) |
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Filter sweep using a low frequency oscillator",
|
||||||
|
`
|
||||||
|
beat(.5) && snd('sawtooth')
|
||||||
|
.cutoff([2000,500].pick() + usine(.5) * 4000)
|
||||||
|
.resonance(0.9).freq([100,150].pick())
|
||||||
|
.out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)};
|
||||||
|
|
||||||
|
|
||||||
|
## Compression
|
||||||
|
|
||||||
|
This effect is leveraging the basic WebAudio compressor. More information can be found about it on the [DynamicsCompressorNode](https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode?retiredLocale=de#instance_properties) page. This can be come quite complex :)
|
||||||
|
|
||||||
|
| Method | Alias | Description |
|
||||||
|
|------------|-----------|---------------------------------|
|
||||||
|
| <ic>comp</ic> | cmp | Compressor threshold value (dB) over which compressor operates |
|
||||||
|
| <ic>ratio</ic> | rt | Compressor ratio: input amount in dB needed for 1dB change in the output |
|
||||||
|
| <ic>knee</ic> | kn | dB value defining the range over which the signal transitions to compressed section |
|
||||||
|
| <ic>compAttack</ic> | cmpa | In seconds, time to decrease the gain by 10db |
|
||||||
|
| <ic>compRelease</ic> | cmpr | In seconds, time to increase the gain by 10db |
|
||||||
|
|
||||||
|
|
||||||
|
`;
|
||||||
|
};
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../main";
|
import { type Editor } from "../main";
|
||||||
import { makeExampleFactory } from "../../Documentation";
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
export const functions = (application: Editor): string => {
|
export const functions = (application: Editor): string => {
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
@ -15,20 +15,20 @@ You can control scripts programatically. This is the core concept of Topos after
|
|||||||
- <ic>copy_script(from: number, to: number)</ic>: copies a local script denoted by its number to another local script. **This is a destructive operation!**
|
- <ic>copy_script(from: number, to: number)</ic>: copies a local script denoted by its number to another local script. **This is a destructive operation!**
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Calling a script! The most important feature!",
|
"Calling a script! The most important feature!",
|
||||||
`
|
`
|
||||||
beat(1) :: script(1)
|
beat(1) :: script(1)
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Calling mutliple scripts at the same time.",
|
"Calling mutliple scripts at the same time.",
|
||||||
`
|
`
|
||||||
beat(1) :: script(1, 3, 5)
|
beat(1) :: script(1, 3, 5)
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Math functions
|
## Math functions
|
||||||
|
|
||||||
@ -42,24 +42,24 @@ beat(1) :: script(1, 3, 5)
|
|||||||
- <ic>delay(ms: number, func: Function): void</ic>: Delays the execution of a function by a given number of milliseconds.
|
- <ic>delay(ms: number, func: Function): void</ic>: Delays the execution of a function by a given number of milliseconds.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Phased woodblocks",
|
"Phased woodblocks",
|
||||||
`
|
`
|
||||||
// Some very low-budget version of phase music
|
// Some very low-budget version of phase music
|
||||||
beat(.5) :: delay(usine(.125) * 80, () => sound('east').out())
|
beat(.5) :: delay(usine(.125) * 80, () => sound('east').out())
|
||||||
beat(.5) :: delay(50, () => sound('east').out())
|
beat(.5) :: delay(50, () => sound('east').out())
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>delayr(ms: number, nb: number, func: Function): void</ic>: Delays the execution of a function by a given number of milliseconds, repeated a given number of times.
|
- <ic>delayr(ms: number, nb: number, func: Function): void</ic>: Delays the execution of a function by a given number of milliseconds, repeated a given number of times.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Another woodblock texture",
|
"Another woodblock texture",
|
||||||
`
|
`
|
||||||
beat(1) :: delayr(50, 4, () => sound('east').speed([0.5,.25].beat()).out())
|
beat(1) :: delayr(50, 4, () => sound('east').speed([0.5,.25].beat()).out())
|
||||||
flip(2) :: beat(2) :: delayr(150, 4, () => sound('east').speed([0.5,.25].beat() * 4).out())
|
flip(2) :: beat(2) :: delayr(150, 4, () => sound('east').speed([0.5,.25].beat() * 4).out())
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
@ -898,6 +898,12 @@ const completionDatabase: CompletionDatabase = {
|
|||||||
description: "Detects if the Alt key is pressed",
|
description: "Detects if the Alt key is pressed",
|
||||||
example: "fill() ? 1 : 0.5",
|
example: "fill() ? 1 : 0.5",
|
||||||
},
|
},
|
||||||
|
comp: {
|
||||||
|
name: "comp",
|
||||||
|
category: "synthesis",
|
||||||
|
description: "Compressor threshold (dB)",
|
||||||
|
example: "sound('sine').comp(-4).out()",
|
||||||
|
},
|
||||||
ratio: {
|
ratio: {
|
||||||
name: "ratio",
|
name: "ratio",
|
||||||
category: "synthesis",
|
category: "synthesis",
|
||||||
@ -963,7 +969,7 @@ export const inlineHoveringTips = hoverTooltip(
|
|||||||
return { dom };
|
return { dom };
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
export const toposCompletions = (context: CompletionContext) => {
|
export const toposCompletions = (context: CompletionContext) => {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../main";
|
import { type Editor } from "../main";
|
||||||
import { makeExampleFactory } from "../../Documentation";
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
export const interaction = (application: Editor): string => {
|
export const interaction = (application: Editor): string => {
|
||||||
@ -24,7 +24,7 @@ ${makeExample(
|
|||||||
`
|
`
|
||||||
beat(1) && active_notes() && sound('sine').chord(active_notes()).out()
|
beat(1) && active_notes() && sound('sine').chord(active_notes()).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
@ -34,7 +34,7 @@ ${makeExample(
|
|||||||
active_notes().beat(0.5)+[12,24].beat(0.25)
|
active_notes().beat(0.5)+[12,24].beat(0.25)
|
||||||
).cutoff(300 + usine(1/4) * 2000).out()
|
).cutoff(300 + usine(1/4) * 2000).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
@ -46,7 +46,7 @@ ${makeExample(
|
|||||||
beat(0.25) && sticky_notes() && sound('arp')
|
beat(0.25) && sticky_notes() && sound('arp')
|
||||||
.note(sticky_notes().palindrome().beat(0.25)).out()
|
.note(sticky_notes().palindrome().beat(0.25)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
* <ic>last_note(channel?: number)</ic>: returns the last note that has been received. Returns 60 if no other notes have been received.
|
* <ic>last_note(channel?: number)</ic>: returns the last note that has been received. Returns 60 if no other notes have been received.
|
||||||
@ -58,7 +58,7 @@ ${makeExample(
|
|||||||
.vib([1, 3, 5].beat(1))
|
.vib([1, 3, 5].beat(1))
|
||||||
.vibmod([1,3,2,4].beat(2)).out()
|
.vibmod([1,3,2,4].beat(2)).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
* <ic>buffer()</ic>: return true if there are notes in the buffer.
|
* <ic>buffer()</ic>: return true if there are notes in the buffer.
|
||||||
@ -69,7 +69,7 @@ ${makeExample(
|
|||||||
`
|
`
|
||||||
beat(1) && buffer() && sound('sine').note(buffer_note()).out()
|
beat(1) && buffer() && sound('sine').note(buffer_note()).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
@ -87,7 +87,7 @@ ${makeExample(
|
|||||||
`
|
`
|
||||||
beat(0.5) && sound('arp').note(last_cc(74)).out()
|
beat(0.5) && sound('arp').note(last_cc(74)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
@ -105,7 +105,7 @@ beat(last_cc(74)/127*.5) :: sound('sine')
|
|||||||
.sustain(last_cc(74)/127*.25)
|
.sustain(last_cc(74)/127*.25)
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
@ -128,7 +128,7 @@ Topos can output scales to external keyboards lighted keys using the following f
|
|||||||
${makeExample(
|
${makeExample(
|
||||||
"Show scale on external keyboard",
|
"Show scale on external keyboard",
|
||||||
`show_scale("F","aeolian",0,4)`,
|
`show_scale("F","aeolian",0,4)`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample("Hide scale", `hide_scale("F","aeolian",0,4)`, true)}
|
${makeExample("Hide scale", `hide_scale("F","aeolian",0,4)`, true)}
|
||||||
@ -1,145 +0,0 @@
|
|||||||
import { type Editor } from "../../../main";
|
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
|
||||||
|
|
||||||
export const filters = (application: Editor): string => {
|
|
||||||
const makeExample = makeExampleFactory(application);
|
|
||||||
return `
|
|
||||||
# Filters
|
|
||||||
|
|
||||||
Filters can be applied to both synthesizers and samples. They are used to shape the sound by removing or emphasizing certain frequencies. They are also used to create movement in the sound by modulating the cutoff frequency of the filter over time.
|
|
||||||
|
|
||||||
- **lowpass filter**: filters the high frequencies, keeping the low frequencies.
|
|
||||||
- **highpass filter**: filtering the low frequencies, keeping the high frequencies.
|
|
||||||
- **bandpass filter**: filters the low and high frequencies around a frequency band, keeping what's in the middle.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Filtering the high frequencies of an oscillator",
|
|
||||||
`beat(.5) :: sound('sawtooth').cutoff(50 + usine(1/8) * 2000).out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
These filters all come with their own set of parameters. Note that we are describing the parameters of the three different filter types here. Choose the right parameters depending on the filter type you are using:
|
|
||||||
|
|
||||||
|
|
||||||
### Lowpass filter
|
|
||||||
|
|
||||||
| Method | Alias | Description |
|
|
||||||
|------------|-----------|---------------------------------|
|
|
||||||
| <ic>cutoff</ic> | <ic>lpf</ic> | cutoff frequency of the lowpass filter |
|
|
||||||
| <ic>resonance</ic> | <ic>lpq</ic> | resonance of the lowpass filter (0-1) |
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Filtering a bass",
|
|
||||||
`beat(.5) :: sound('jvbass').lpf([250,1000,8000].beat()).out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
### Highpass filter
|
|
||||||
|
|
||||||
| Method | Alias | Description |
|
|
||||||
|------------|-----------|---------------------------------|
|
|
||||||
| <ic>hcutoff</ic> | <ic>hpf</ic> | cutoff frequency of the highpass filter |
|
|
||||||
| <ic>hresonance</ic> | <ic>hpq</ic> | resonance of the highpass filter (0-1) |
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Filtering a noise source",
|
|
||||||
`beat(.5) :: sound('gtr').hpf([250,1000, 2000, 3000, 4000].beat()).end(0.5).out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
### Bandpass filter
|
|
||||||
|
|
||||||
| Method | Alias | Description |
|
|
||||||
|------------|-----------|---------------------------------|
|
|
||||||
| <ic>bandf</ic> | <ic>bpf</ic> | cutoff frequency of the bandpass filter |
|
|
||||||
| <ic>bandq</ic> | <ic>bpq</ic> | resonance of the bandpass filter (0-1) |
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Sweeping the filter on the same guitar sample",
|
|
||||||
`beat(.5) :: sound('gtr').bandf(100 + usine(1/8) * 4000).end(0.5).out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
Alternatively, <ic>lpf</ic>, <ic>hpf</ic> and <ic>bpf</ic> can take a second argument, the **resonance**.
|
|
||||||
|
|
||||||
## Filter order (type)
|
|
||||||
|
|
||||||
You can also use the <ic>ftype</ic> method to change the filter type (order). There are two types by default, <ic>12db</ic> for a gentle slope or <ic>24db</ic> for a really steep filtering slope. The <ic>24db</ic> type is particularly useful for substractive synthesis if you are trying to emulate some of the Moog or Prophet sounds:
|
|
||||||
|
|
||||||
- <ic>ftype(type: string)</ic>: sets the filter type (order), either <ic>12db</ic> or <ic>24db</ic>.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Filtering a bass",
|
|
||||||
`beat(.5) :: sound('jvbass').ftype(['12db', '24db'].beat(4)).lpf([250,1000,8000].beat()).out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Filter envelopes
|
|
||||||
|
|
||||||
The examples we have studied so far are static. They filter the sound around a fixed cutoff frequency. To make the sound more interesting, you can use the ADSR filter envelopes to shape the filter cutoff frequency over time. You will always find amplitude and filter envelopes on most commercial synthesizers. This is done using the following methods:
|
|
||||||
|
|
||||||
### Lowpass envelope
|
|
||||||
|
|
||||||
| Method | Alias | Description |
|
|
||||||
|------------|-----------|---------------------------------|
|
|
||||||
| <ic>lpenv</ic> | <ic>lpe</ic> | lowpass frequency modulation amount (negative or positive) |
|
|
||||||
| <ic>lpattack</ic> | <ic>lpa</ic> | attack of the lowpass filter |
|
|
||||||
| <ic>lpdecay</ic> | <ic>lpd</ic> | decay of the lowpass filter |
|
|
||||||
| <ic>lpsustain</ic> | <ic>lps</ic> | sustain of the lowpass filter |
|
|
||||||
| <ic>lprelease</ic> | <ic>lpr</ic> | release of the lowpass filter |
|
|
||||||
| <ic>lpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Filtering a sawtooth wave dynamically",
|
|
||||||
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
|
||||||
.cutoff(5000).lpa([0.05, 0.25, 0.5].beat(2))
|
|
||||||
.lpenv(-8).lpq(10).out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
### Highpass envelope
|
|
||||||
|
|
||||||
| Method | Alias | Description |
|
|
||||||
|------------|-----------|---------------------------------|
|
|
||||||
| <ic>hpenv</ic> | <ic>hpe</ic> | highpass frequency modulation amount (negative or positive) |
|
|
||||||
| <ic>hpattack</ic> | <ic>hpa</ic> | attack of the highpass filter |
|
|
||||||
| <ic>hpdecay</ic> | <ic>hpd</ic> | decay of the highpass filter |
|
|
||||||
| <ic>hpsustain</ic> | <ic>hps</ic> | sustain of the highpass filter |
|
|
||||||
| <ic>hprelease</ic> | <ic>hpr</ic> | release of the highpass filter |
|
|
||||||
| <ic>hpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Let's use another filter using the same example",
|
|
||||||
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
|
||||||
.hcutoff(1000).hpa([0.05, 0.25, 0.5].beat(2))
|
|
||||||
.hpenv(8).hpq(10).out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
### Bandpass envelope
|
|
||||||
|
|
||||||
| Method | Alias | Description |
|
|
||||||
|------------|-----------|---------------------------------|
|
|
||||||
| <ic>bpenv</ic> | <ic>bpe</ic> | bandpass frequency modulation amount (negative or positive) |
|
|
||||||
| <ic>bpattack</ic> | <ic>bpa</ic> | attack of the bandpass filter |
|
|
||||||
| <ic>bpdecay</ic> | <ic>bpd</ic> | decay of the bandpass filter |
|
|
||||||
| <ic>bpsustain</ic> | <ic>bps</ic> | sustain of the bandpass filter |
|
|
||||||
| <ic>bprelease</ic> | <ic>bpr</ic> | release of the bandpass filter |
|
|
||||||
| <ic>bpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"And the bandpass filter, just for fun",
|
|
||||||
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
|
||||||
.bandf([500,1000,2000].beat(2))
|
|
||||||
.bpa([0.25, 0.125, 0.5].beat(2) * 4)
|
|
||||||
.bpenv(-4).release(2).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
import { type Editor } from "../../main";
|
|
||||||
import { makeExampleFactory } from "../../Documentation";
|
|
||||||
|
|
||||||
export const osc = (application: Editor): string => {
|
|
||||||
// @ts-ignore
|
|
||||||
const makeExample = makeExampleFactory(application);
|
|
||||||
return `
|
|
||||||
# Open Sound Control
|
|
||||||
|
|
||||||
Topos is a sandboxed web application. It cannot speak with your computer directly or only through a secure connexion. You can use the [Open Sound Control](https://en.wikipedia.org/wiki/Open_Sound_Control) protocol to send and receive data from your computer. This protocol is used by many softwares and hardware devices. You can use it to control your favorite DAW, your favorite synthesizer, your favorite robot, or anything really! To use **OSC** with Topos, you will need to download the <ic>ToposServer</ic> by [following this link](https://github.com/Bubobubobubobubo/Topos). You can download everything as a zip file or clone the project if you know what you are doing. Here is a quick guide to get you started:
|
|
||||||
|
|
||||||
- 1) Download <ic>Topos</ic> and navigate to the <ic>ToposServer</ic> folder.
|
|
||||||
- 2) Install the dependencies using <ic>npm install</ic>. Start the server using <ic>npm start</ic>.
|
|
||||||
- 3) Open the <ic>Topos</ic> application in your web browser (server first, then application).
|
|
||||||
|
|
||||||
The <ic>ToposServer</ic> server is used both for **OSC** _input_ and _output_.
|
|
||||||
|
|
||||||
## Input
|
|
||||||
|
|
||||||
Send an **OSC** message to the server from another application or device at the address <ic>localhost:30000</ic>. Topos will store the last 1000 messages in a queue. You can access this queue using the <ic>getOsc()</ic> function.
|
|
||||||
|
|
||||||
### Unfiltered messages
|
|
||||||
|
|
||||||
You can access the last 1000 messages using the <ic>getOsc()</ic> function without any argument. This is raw data, you will need to parse it yourself:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Reading the last OSC messages",
|
|
||||||
`
|
|
||||||
beat(1)::getOsc()
|
|
||||||
// 0 : {data: Array(2), address: '/lala'}
|
|
||||||
// 1 : {data: Array(2), address: '/lala'}
|
|
||||||
// 2 : {data: Array(2), address: '/lala'}`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
### Filtered messages
|
|
||||||
|
|
||||||
The <ic>getOsc()</ic> can receive an address filter as an argument. This will return only the messages that match the filter:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Reading the last OSC messages (filtered)",
|
|
||||||
`
|
|
||||||
beat(1)::getOsc("/lala")
|
|
||||||
// 0 : (2) [89, 'bob']
|
|
||||||
// 1 : (2) [84, 'bob']
|
|
||||||
// 2 : (2) [82, 'bob']
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Output
|
|
||||||
|
|
||||||
Once the server is loaded, you are ready to send an **OSC** message:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Sending a simple OSC message",
|
|
||||||
`
|
|
||||||
beat(1)::sound('cp').speed(2).vel(0.5).osc()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
This is a simple **OSC** message that will inherit all the properties of the sound. You can also send customized OSC messages using the <ic>osc()</ic> function:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Sending a customized OSC message",
|
|
||||||
`
|
|
||||||
// osc(address, port, ...message)
|
|
||||||
osc('/my/osc/address', 5000, 1, 2, 3)
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../main";
|
import { type Editor } from "../main";
|
||||||
import { makeExampleFactory } from "../../Documentation";
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
export const lfos = (application: Editor): string => {
|
export const lfos = (application: Editor): string => {
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
@ -15,45 +15,45 @@ Low Frequency Oscillators (_LFOs_) are an important piece in any digital audio w
|
|||||||
- <ic>usine(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a sinusoïdal oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_.
|
- <ic>usine(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a sinusoïdal oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Modulating the speed of a sample player using a sine LFO",
|
"Modulating the speed of a sample player using a sine LFO",
|
||||||
`beat(.25) && snd('cp').speed(1 + usine(0.25) * 2).out()`,
|
`beat(.25) && snd('cp').speed(1 + usine(0.25) * 2).out()`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
|
||||||
- <ic>triangle(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a triangle oscillation between <ic>-1</ic> and <ic>1</ic>.
|
- <ic>triangle(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a triangle oscillation between <ic>-1</ic> and <ic>1</ic>.
|
||||||
- <ic>utriangle(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a triangle oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_.
|
- <ic>utriangle(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a triangle oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Modulating the speed of a sample player using a triangle LFO",
|
"Modulating the speed of a sample player using a triangle LFO",
|
||||||
`beat(.25) && snd('cp').speed(1 + utriangle(0.25) * 2).out()`,
|
`beat(.25) && snd('cp').speed(1 + utriangle(0.25) * 2).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>saw(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a sawtooth-like oscillation between <ic>-1</ic> and <ic>1</ic>.
|
- <ic>saw(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a sawtooth-like oscillation between <ic>-1</ic> and <ic>1</ic>.
|
||||||
- <ic>usaw(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a sawtooth-like oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_.
|
- <ic>usaw(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a sawtooth-like oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Modulating the speed of a sample player using a saw LFO",
|
"Modulating the speed of a sample player using a saw LFO",
|
||||||
`beat(.25) && snd('cp').speed(1 + usaw(0.25) * 2).out()`,
|
`beat(.25) && snd('cp').speed(1 + usaw(0.25) * 2).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>square(freq: number = 1, times: number = 1, offset: number= 0, duty: number = .5): number</ic>: returns a square wave oscillation between <ic>-1</ic> and <ic>1</ic>. You can also control the duty cycle using the <ic>duty</ic> parameter.
|
- <ic>square(freq: number = 1, times: number = 1, offset: number= 0, duty: number = .5): number</ic>: returns a square wave oscillation between <ic>-1</ic> and <ic>1</ic>. You can also control the duty cycle using the <ic>duty</ic> parameter.
|
||||||
- <ic>usquare(freq: number = 1, times: number = 1, offset: number= 0, duty: number = .5): number</ic>: returns a square wave oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_. You can also control the duty cycle using the <ic>duty</ic> parameter.
|
- <ic>usquare(freq: number = 1, times: number = 1, offset: number= 0, duty: number = .5): number</ic>: returns a square wave oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_. You can also control the duty cycle using the <ic>duty</ic> parameter.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Modulating the speed of a sample player using a square LFO",
|
"Modulating the speed of a sample player using a square LFO",
|
||||||
`beat(.25) && snd('cp').speed(1 + usquare(0.25, 0, 0.25) * 2).out()`,
|
`beat(.25) && snd('cp').speed(1 + usquare(0.25, 0, 0.25) * 2).out()`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
|
||||||
- <ic>noise(times: number = 1)</ic>: returns a random value between -1 and 1.
|
- <ic>noise(times: number = 1)</ic>: returns a random value between -1 and 1.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Modulating the speed of a sample player using noise",
|
"Modulating the speed of a sample player using noise",
|
||||||
`beat(.25) && snd('cp').speed(1 + noise() * 2).out()`,
|
`beat(.25) && snd('cp').speed(1 + noise() * 2).out()`,
|
||||||
true,
|
true
|
||||||
)};
|
)};
|
||||||
|
|
||||||
`;
|
`
|
||||||
};
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
export const long_forms = (app: Editor): string => {
|
export const long_forms = (app: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -14,23 +14,23 @@ Now you know how to play some basic rhythms but in any case, you are stuck in a
|
|||||||
- **Use the nine local scripts as containers** for sections of your composition. When you start playing with **Topos**, it's easy to forget that there are multiple scripts you can play with. Each script can store a different section or part from your composition. Here is a simple example:
|
- **Use the nine local scripts as containers** for sections of your composition. When you start playing with **Topos**, it's easy to forget that there are multiple scripts you can play with. Each script can store a different section or part from your composition. Here is a simple example:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Eight bars per section",
|
"Eight bars per section",
|
||||||
`
|
`
|
||||||
// Playing each script for 8 bars in succession
|
// Playing each script for 8 bars in succession
|
||||||
script([1,2,3,4].bar(8))
|
script([1,2,3,4].bar(8))
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
You can also give a specific duration to each section using <ic>.dur</ic>:
|
You can also give a specific duration to each section using <ic>.dur</ic>:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"N beats per section",
|
"N beats per section",
|
||||||
`
|
`
|
||||||
script([1,2,3,4].dur(8, 2, 16, 4))
|
script([1,2,3,4].dur(8, 2, 16, 4))
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- **Use universes as well**. Transitions between universes are _seamless_, instantaneous. Just switch to different content if you ever hit the limitations of the current _universe_.
|
- **Use universes as well**. Transitions between universes are _seamless_, instantaneous. Just switch to different content if you ever hit the limitations of the current _universe_.
|
||||||
|
|
||||||
@ -40,42 +40,42 @@ script([1,2,3,4].dur(8, 2, 16, 4))
|
|||||||
- <ic>ratio: number = 50</ic>: this argument is ratio expressed in %. It determines how much of the period should be true or false. A ratio of <ic>75</ic> means that 75% of the period will be true. A ratio of <ic>25</ic> means that 25% of the period will be true.
|
- <ic>ratio: number = 50</ic>: this argument is ratio expressed in %. It determines how much of the period should be true or false. A ratio of <ic>75</ic> means that 75% of the period will be true. A ratio of <ic>25</ic> means that 25% of the period will be true.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Two beats of silence, two beats of playing",
|
"Two beats of silence, two beats of playing",
|
||||||
`
|
`
|
||||||
flip(4) :: beat(1) :: snd('kick').out()
|
flip(4) :: beat(1) :: snd('kick').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Clapping on the edge",
|
"Clapping on the edge",
|
||||||
`
|
`
|
||||||
flip(2.5, 10) :: beat(.25) :: snd('cp').out()
|
flip(2.5, 10) :: beat(.25) :: snd('cp').out()
|
||||||
flip(2.5, 75) :: beat(.25) :: snd('click')
|
flip(2.5, 75) :: beat(.25) :: snd('click')
|
||||||
.speed(2).end(0.2).out()
|
.speed(2).end(0.2).out()
|
||||||
flip(2.5) :: beat(.5) :: snd('bd').out()
|
flip(2.5) :: beat(.5) :: snd('bd').out()
|
||||||
beat(.25) :: sound('hat').end(0.1).cutoff(1200).pan(usine(1/4)).out()
|
beat(.25) :: sound('hat').end(0.1).cutoff(1200).pan(usine(1/4)).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Good old true and false",
|
"Good old true and false",
|
||||||
`
|
`
|
||||||
if (flip(4, 75)) {
|
if (flip(4, 75)) {
|
||||||
beat(1) :: snd('kick').out()
|
beat(1) :: snd('kick').out()
|
||||||
} else {
|
} else {
|
||||||
beat(.5) :: snd('snare').out()
|
beat(.5) :: snd('snare').out()
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<ic>flip</ic> is extremely powerful and is used internally for a lot of other Topos functions. You can also use it to think about **longer durations** spanning over multiple bars. Here is a silly composition that is using <ic>flip</ic> to generate a 4 bars long pattern.
|
<ic>flip</ic> is extremely powerful and is used internally for a lot of other Topos functions. You can also use it to think about **longer durations** spanning over multiple bars. Here is a silly composition that is using <ic>flip</ic> to generate a 4 bars long pattern.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Clunky algorithmic rap music",
|
"Clunky algorithmic rap music",
|
||||||
`
|
`
|
||||||
// Rap God VS Lil Wild -- Adel Faure
|
// Rap God VS Lil Wild -- Adel Faure
|
||||||
if (flip(8)) {
|
if (flip(8)) {
|
||||||
// Playing this part for two bars
|
// Playing this part for two bars
|
||||||
@ -93,24 +93,24 @@ if (flip(8)) {
|
|||||||
beat(.5)::snd('diphone').end(0.5).n([1,2,3,4].pick()).out()
|
beat(.5)::snd('diphone').end(0.5).n([1,2,3,4].pick()).out()
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
You can use it everywhere to spice things up, including as a method parameter picker:
|
You can use it everywhere to spice things up, including as a method parameter picker:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"flip is great for parameter variation",
|
"flip is great for parameter variation",
|
||||||
`
|
`
|
||||||
beat(.5)::snd(flip(2) ? 'kick' : 'hat').out()
|
beat(.5)::snd(flip(2) ? 'kick' : 'hat').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>flipbar(n: number = 1)</ic>: this method works just like <ic>flip</ic> but counts in bars instead of beats. It allows you to think about even larger time cycles. You can also pair it with regular <ic>flip</ic> for writing complex and long-spanning algorithmic beats.
|
- <ic>flipbar(n: number = 1)</ic>: this method works just like <ic>flip</ic> but counts in bars instead of beats. It allows you to think about even larger time cycles. You can also pair it with regular <ic>flip</ic> for writing complex and long-spanning algorithmic beats.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Thinking music over bars",
|
"Thinking music over bars",
|
||||||
`
|
`
|
||||||
let roomy = (n) => n.room(1).size(1).cutoff(500 + usaw(1/8) * 5000);
|
let roomy = (n) => n.room(1).size(1).cutoff(500 + usaw(1/8) * 5000);
|
||||||
function a() {
|
function a() {
|
||||||
beat(1) && roomy(sound('kick')).out()
|
beat(1) && roomy(sound('kick')).out()
|
||||||
@ -122,24 +122,24 @@ function b() {
|
|||||||
flipbar(2) && a()
|
flipbar(2) && a()
|
||||||
flipbar(3) && b()
|
flipbar(3) && b()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Alternating over four bars",
|
"Alternating over four bars",
|
||||||
`
|
`
|
||||||
flipbar(2)
|
flipbar(2)
|
||||||
? beat(.5) && snd(['kick', 'hh'].beat(1)).out()
|
? beat(.5) && snd(['kick', 'hh'].beat(1)).out()
|
||||||
: beat(.5) && snd(['east', 'east:2'].beat(1)).out()
|
: beat(.5) && snd(['east', 'east:2'].beat(1)).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)};
|
)};
|
||||||
|
|
||||||
|
|
||||||
- <ic>onbar(bars: number | number[], n: number)</ic>: The second argument, <ic>n</ic>, is used to divide the time in a period of <ic>n</ic> consecutive bars. The first argument should be a bar number or a list of bar numbers to play on. For example, <ic>onbar([1, 4], 5)</ic> will return <ic>true</ic> on bar <ic>1</ic> and <ic>4</ic> but return <ic>false</ic> the rest of the time. You can easily divide time that way.
|
- <ic>onbar(bars: number | number[], n: number)</ic>: The second argument, <ic>n</ic>, is used to divide the time in a period of <ic>n</ic> consecutive bars. The first argument should be a bar number or a list of bar numbers to play on. For example, <ic>onbar([1, 4], 5)</ic> will return <ic>true</ic> on bar <ic>1</ic> and <ic>4</ic> but return <ic>false</ic> the rest of the time. You can easily divide time that way.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using onbar for filler drums",
|
"Using onbar for filler drums",
|
||||||
`
|
`
|
||||||
tempo(150);
|
tempo(150);
|
||||||
// Only play on the third and fourth bar of the cycle.
|
// Only play on the third and fourth bar of the cycle.
|
||||||
onbar([3,4], 4)::beat(.25)::snd('hh').out();
|
onbar([3,4], 4)::beat(.25)::snd('hh').out();
|
||||||
@ -155,8 +155,8 @@ if (onbar([1,2], 4)) {
|
|||||||
rhythm(.5, 1, 7) :: snd('jvbass').n(2).out();
|
rhythm(.5, 1, 7) :: snd('jvbass').n(2).out();
|
||||||
rhythm(.5, 2, 7) :: snd('snare').n(3).out();
|
rhythm(.5, 2, 7) :: snd('snare').n(3).out();
|
||||||
}`,
|
}`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../main";
|
import { type Editor } from "../main";
|
||||||
import { makeExampleFactory, key_shortcut } from "../../Documentation";
|
import { makeExampleFactory, key_shortcut } from "../Documentation";
|
||||||
|
|
||||||
export const midi = (application: Editor): string => {
|
export const midi = (application: Editor): string => {
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
@ -15,29 +15,29 @@ You can use Topos to play MIDI thanks to the [WebMIDI API](https://developer.moz
|
|||||||
Your web browser is capable of sending and receiving MIDI information through the [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API). The support for MIDI on browsers is a bit shaky. Please, take some time to configure and test. To our best knowledge, **Chrome** is currently leading on this feature, followed closely by **Firefox**. The other major web browsers are also starting to support this API. **There are two important functions for configuration:**
|
Your web browser is capable of sending and receiving MIDI information through the [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API). The support for MIDI on browsers is a bit shaky. Please, take some time to configure and test. To our best knowledge, **Chrome** is currently leading on this feature, followed closely by **Firefox**. The other major web browsers are also starting to support this API. **There are two important functions for configuration:**
|
||||||
|
|
||||||
- <ic>midi_outputs()</ic>: prints the list of available MIDI devices on the screen. You will have to open the web console using ${key_shortcut(
|
- <ic>midi_outputs()</ic>: prints the list of available MIDI devices on the screen. You will have to open the web console using ${key_shortcut(
|
||||||
"Ctrl+Shift+I",
|
"Ctrl+Shift+I"
|
||||||
)} or sometimes ${key_shortcut(
|
)} or sometimes ${key_shortcut(
|
||||||
"F12",
|
"F12"
|
||||||
)}. You can also open it from the menu of your web browser. **Note:** close the docs to see it printed.
|
)}. You can also open it from the menu of your web browser. **Note:** close the docs to see it printed.
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Listing MIDI outputs",
|
"Listing MIDI outputs",
|
||||||
`
|
`
|
||||||
midi_outputs()
|
midi_outputs()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>midi_output(output_name: string)</ic>: enter your desired output to connect to it.
|
- <ic>midi_output(output_name: string)</ic>: enter your desired output to connect to it.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Changing MIDI output",
|
"Changing MIDI output",
|
||||||
`
|
`
|
||||||
midi_output("MIDI Rocket-Trumpet")
|
midi_output("MIDI Rocket-Trumpet")
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
That's it! You are now ready to play with MIDI.
|
That's it! You are now ready to play with MIDI.
|
||||||
|
|
||||||
@ -48,69 +48,69 @@ The most basic MIDI event is the note. MIDI notes traditionally take three param
|
|||||||
- <ic>midi(note: number|object)</ic>: send a MIDI Note. This function is quite bizarre. It can be written and used in many different ways. You can pass form one up to three arguments in different forms.
|
- <ic>midi(note: number|object)</ic>: send a MIDI Note. This function is quite bizarre. It can be written and used in many different ways. You can pass form one up to three arguments in different forms.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"MIDI note using one parameter: note",
|
"MIDI note using one parameter: note",
|
||||||
`
|
`
|
||||||
// Configure your MIDI first!
|
// Configure your MIDI first!
|
||||||
// => midi_output("MIDI Bus 1")
|
// => midi_output("MIDI Bus 1")
|
||||||
rhythm(.5, 5, 8) :: midi(50).out()
|
rhythm(.5, 5, 8) :: midi(50).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"MIDI note using three parameters: note, velocity, channel",
|
"MIDI note using three parameters: note, velocity, channel",
|
||||||
`
|
`
|
||||||
// MIDI Note 50, Velocity 50 + LFO, Channel 0
|
// MIDI Note 50, Velocity 50 + LFO, Channel 0
|
||||||
rhythm(.5, 5, 8) :: midi(50, 50 + usine(.5) * 20, 0).out()
|
rhythm(.5, 5, 8) :: midi(50, 50 + usine(.5) * 20, 0).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"MIDI note by passing an object",
|
"MIDI note by passing an object",
|
||||||
`
|
`
|
||||||
// MIDI Note 50, Velocity 50 + LFO, Channel 0
|
// MIDI Note 50, Velocity 50 + LFO, Channel 0
|
||||||
rhythm(.5, 5, 8) :: midi({note: 50, velocity: 50 + usine(.5) * 20, channel: 0}).out()
|
rhythm(.5, 5, 8) :: midi({note: 50, velocity: 50 + usine(.5) * 20, channel: 0}).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
We can now have some fun and starting playing a small piano piece:
|
We can now have some fun and starting playing a small piano piece:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Playing some piano",
|
"Playing some piano",
|
||||||
`
|
`
|
||||||
tempo(80) // Setting a default BPM
|
tempo(80) // Setting a default BPM
|
||||||
beat(.5) && midi(36 + [0,12].beat()).sustain(0.02).out()
|
beat(.5) && midi(36 + [0,12].beat()).sustain(0.02).out()
|
||||||
beat(.25) && midi([64, 76].pick()).sustain(0.05).out()
|
beat(.25) && midi([64, 76].pick()).sustain(0.05).out()
|
||||||
beat(.75) && midi([64, 67, 69].beat()).sustain(0.05).out()
|
beat(.75) && midi([64, 67, 69].beat()).sustain(0.05).out()
|
||||||
beat(.25) && midi([64, 67, 69].beat() + 24).sustain(0.05).out()
|
beat(.25) && midi([64, 67, 69].beat() + 24).sustain(0.05).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Control and Program Changes
|
## Control and Program Changes
|
||||||
|
|
||||||
- <ic>control_change({control: number, value: number, channel: number})</ic>: send a MIDI Control Change. This function takes a single object argument to specify the control message (_e.g._ <ic>control_change({control: 1, value: 127, channel: 1})</ic>).
|
- <ic>control_change({control: number, value: number, channel: number})</ic>: send a MIDI Control Change. This function takes a single object argument to specify the control message (_e.g._ <ic>control_change({control: 1, value: 127, channel: 1})</ic>).
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Imagine that I am tweaking an hardware synthesizer!",
|
"Imagine that I am tweaking an hardware synthesizer!",
|
||||||
`
|
`
|
||||||
control_change({control: [24,25].pick(), value: irand(1,120), channel: 1})
|
control_change({control: [24,25].pick(), value: irand(1,120), channel: 1})
|
||||||
control_change({control: [30,35].pick(), value: irand(1,120) / 2, channel: 1})
|
control_change({control: [30,35].pick(), value: irand(1,120) / 2, channel: 1})
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>program_change(program: number, channel: number)</ic>: send a MIDI Program Change. This function takes two arguments to specify the program and the channel (_e.g._ <ic>program_change(1, 1)</ic>).
|
- <ic>program_change(program: number, channel: number)</ic>: send a MIDI Program Change. This function takes two arguments to specify the program and the channel (_e.g._ <ic>program_change(1, 1)</ic>).
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Crashing old synthesizers: a hobby",
|
"Crashing old synthesizers: a hobby",
|
||||||
`
|
`
|
||||||
program_change([1,2,3,4,5,6,7,8].pick(), 1)
|
program_change([1,2,3,4,5,6,7,8].pick(), 1)
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
## System Exclusive Messages
|
## System Exclusive Messages
|
||||||
@ -119,44 +119,44 @@ program_change([1,2,3,4,5,6,7,8].pick(), 1)
|
|||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Nobody can say that we don't support Sysex messages!",
|
"Nobody can say that we don't support Sysex messages!",
|
||||||
`
|
`
|
||||||
sysex(0x90, 0x40, 0x7f)
|
sysex(0x90, 0x40, 0x7f)
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Clock
|
## Clock
|
||||||
|
|
||||||
- <ic>midi_clock()</ic>: send a MIDI Clock message. This function is used to synchronize Topos with other MIDI devices or DAWs.
|
- <ic>midi_clock()</ic>: send a MIDI Clock message. This function is used to synchronize Topos with other MIDI devices or DAWs.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Tic, tac, tic, tac...",
|
"Tic, tac, tic, tac...",
|
||||||
`
|
`
|
||||||
beat(.25) && midi_clock() // Sending clock to MIDI device from the global buffer
|
beat(.25) && midi_clock() // Sending clock to MIDI device from the global buffer
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Using midi with ziffers
|
## Using midi with ziffers
|
||||||
|
|
||||||
Ziffers offers some shorthands for defining channels within the patterns. See Ziffers for more information.
|
Ziffers offers some shorthands for defining channels within the patterns. See Ziffers for more information.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using midi with ziffers",
|
"Using midi with ziffers",
|
||||||
`
|
`
|
||||||
z1('0 2 e 5 2 q 4 2').midi().port(2).channel(4).out()
|
z1('0 2 e 5 2 q 4 2').midi().port(2).channel(4).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Setting the channel within the pattern",
|
"Setting the channel within the pattern",
|
||||||
`
|
`
|
||||||
z1('(0 2 e 5 2):0 (4 2):1').midi().out()
|
z1('(0 2 e 5 2):0 (4 2):1').midi().out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
@ -14,21 +14,6 @@ Topos is an experimental web based algorithmic sequencer programmed by **BuboBub
|
|||||||
|
|
||||||
Topos is a free and open-source software distributed under [GPL-3.0](https://github.com/Bubobubobubobubo/Topos/blob/main/LICENSE) licence. We welcome all contributions and ideas. You can find the source code on [GitHub](https://github.com/Bubobubobubobubo/topos). You can also join us on [Discord](https://discord.gg/dnUTPbu6bN) to discuss about the project and live coding in general.
|
Topos is a free and open-source software distributed under [GPL-3.0](https://github.com/Bubobubobubobubo/Topos/blob/main/LICENSE) licence. We welcome all contributions and ideas. You can find the source code on [GitHub](https://github.com/Bubobubobubobubo/topos). You can also join us on [Discord](https://discord.gg/dnUTPbu6bN) to discuss about the project and live coding in general.
|
||||||
|
|
||||||
## Support the project
|
|
||||||
|
|
||||||
You can support the project by making a small donation on [Kofi](https://ko-fi.com/Manage/).
|
|
||||||
|
|
||||||
<div style="display: flex; justify-content: center;">
|
|
||||||
<iframe
|
|
||||||
id='kofiframe'
|
|
||||||
src='https://ko-fi.com/raphaelbubo/?hidefeed=true&widget=true&embed=true&preview=true'
|
|
||||||
style='border:none;width:40%;padding:4px;background:#f9f9f9;'
|
|
||||||
height='590'
|
|
||||||
title='raphaelbubo'>
|
|
||||||
</iframe>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
## Credits
|
## Credits
|
||||||
|
|
||||||
- Felix Roos for the [SuperDough](https://www.npmjs.com/package/superdough) audio engine.
|
- Felix Roos for the [SuperDough](https://www.npmjs.com/package/superdough) audio engine.
|
||||||
|
|||||||
@ -7,25 +7,7 @@ export const bonus = (application: Editor): string => {
|
|||||||
return `
|
return `
|
||||||
# Bonus features
|
# Bonus features
|
||||||
|
|
||||||
Some features have been included as a bonus. These features are often about patterning over things that are not directly related to sound: pictures, video, etc.
|
Some features are here "just for fun" or "just because I can". They are not very interesting per se but are still available nonetheless. They mostly gravitate towards manipulating visuals or patterning other multimedia formats.
|
||||||
|
|
||||||
## Editor theme configuration
|
|
||||||
|
|
||||||
The editor theme can be changed using the <ic>theme</ic> and <ic>randomTheme</ic> functions. The following example will use a random color scheme for every beat:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Random theme on each beat",
|
|
||||||
`
|
|
||||||
beat(1)::randomTheme()
|
|
||||||
`, true)}
|
|
||||||
|
|
||||||
You can also pick a theme using the <ic>theme</ic> function with a string as only argument:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Picking a theme",
|
|
||||||
`
|
|
||||||
beat(1)::theme("Batman")
|
|
||||||
`, true)}
|
|
||||||
|
|
||||||
## Hydra Visual Live Coding
|
## Hydra Visual Live Coding
|
||||||
|
|
||||||
@ -33,62 +15,43 @@ beat(1)::theme("Batman")
|
|||||||
<warning>⚠️ This feature can generate flashing images that could trigger photosensitivity or epileptic seizures. ⚠️ </warning>
|
<warning>⚠️ This feature can generate flashing images that could trigger photosensitivity or epileptic seizures. ⚠️ </warning>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
[Hydra](https://hydra.ojack.xyz/?sketch_id=mahalia_1) is a popular live-codable video synthesizer developed by [Olivia Jack](https://ojack.xyz/) and other contributors. It follows an analog synthesizer patching metaphor to encourage live coding complex shaders. Being very easy to use, extremely powerful and also very rewarding to use, Hydra has become a popular choice for adding visuals into a live code performance.
|
[Hydra](https://hydra.ojack.xyz/?sketch_id=mahalia_1) is a popular live-codable video synthesizer developed by [Olivia Jack](https://ojack.xyz/) and other contributors. It follows the metaphor of analog synthesizer patching to allow its user to create complex live visuals from a web browser window. Being very easy to use, extremely powerful and also very rewarding to use, Hydra has become a popular choice for adding visuals into a live code performance. Topos provides a simple way to integrate Hydra into a live coding session and to blend it with regular Topos code.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Hydra integration",
|
"Hydra integration",
|
||||||
`beat(4) :: hydra.osc(3, 0.5, 2).out()`,
|
`beat(4) :: app.hydra.osc(3, 0.5, 2).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
Close the documentation to see the effect: ${key_shortcut(
|
You may feel like it's doing nothing! Press ${key_shortcut(
|
||||||
"Ctrl+D",
|
"Ctrl+D"
|
||||||
)}! **Boom, all shiny!**
|
)} to close the documentation. **Boom, all shiny!**
|
||||||
|
|
||||||
Be careful not to call <ic>hydra</ic> too often as it can impact performances. You can use any rhythmical function like <ic>beat()</ic> function to limit the number of function calls. You can write any Topos code like <ic>[1,2,3].beat()</ic> to bring some life and movement in your Hydra sketches.
|
Be careful not to call <ic>app.hydra</ic> too often as it can impact performances. You can use any rhythmical function like <ic>mod()</ic> function to limit the number of function calls. You can write any Topos code like <ic>[1,2,3].beat()</ic> to bring some life and movement in your Hydra sketches.
|
||||||
|
|
||||||
Stopping **Hydra** is simple:
|
Stopping **Hydra** is simple:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Stopping Hydra",
|
"Stopping Hydra",
|
||||||
`
|
`
|
||||||
beat(4) :: stop_hydra() // this one
|
beat(4) :: stop_hydra() // this one
|
||||||
beat(4) :: hydra.hush() // or this one
|
beat(4) :: app.hydra.hush() // or this one
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
I won't teach you how to play with Hydra. You can find some great resources on the [Hydra website](https://hydra.ojack.xyz/):
|
||||||
### Changing the resolution
|
|
||||||
|
|
||||||
You can change Hydra resolution using this simple method:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Changing Hydra resolution",
|
|
||||||
`hydra.setResolution(1024, 768)`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
### Documentation
|
|
||||||
|
|
||||||
I won't teach Hydra. You can find some great resources directly on the [Hydra website](https://hydra.ojack.xyz/):
|
|
||||||
- [Hydra interactive documentation](https://hydra.ojack.xyz/docs/)
|
- [Hydra interactive documentation](https://hydra.ojack.xyz/docs/)
|
||||||
- [List of Hydra Functions](https://hydra.ojack.xyz/api/)
|
- [List of Hydra Functions](https://hydra.ojack.xyz/api/)
|
||||||
- [Source code on GitHub](https://github.com/hydra-synth/hydra)
|
- [Source code on GitHub](https://github.com/hydra-synth/hydra)
|
||||||
|
|
||||||
### The Hydra namespace
|
|
||||||
|
|
||||||
In comparison with the basic Hydra editor, please note that you have to prefix all Hydra functions with <ic>hydra.</ic> to avoid conflicts with Topos functions. For example, <ic>osc()</ic> becomes <ic>hydra.osc()</ic>.
|
|
||||||
|
|
||||||
${makeExample("Hydra namespace", `hydra.voronoi(20).out()`, true)}
|
|
||||||
|
|
||||||
## GIF player
|
## GIF player
|
||||||
|
|
||||||
Topos embeds a small <ic>.gif</ic> picture player with a small API. GIFs are automatically fading out after the given duration. Look at the following example:
|
Topos embeds a small <ic>.gif</ic> picture player with a small API. GIFs are automatically fading out after the given duration. Look at the following example:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Playing many gifs",
|
"Playing many gifs",
|
||||||
`
|
`
|
||||||
beat(0.25)::gif({
|
beat(0.25)::gif({
|
||||||
url:v('gif')[$(1)%6], // Any URL will do!
|
url:v('gif')[$(1)%6], // Any URL will do!
|
||||||
opacity: r(0.5, 1), // Opacity (0-1)
|
opacity: r(0.5, 1), // Opacity (0-1)
|
||||||
@ -99,8 +62,8 @@ beat(0.25)::gif({
|
|||||||
rotation: ir(1, 360), // Rotation (in degrees)
|
rotation: ir(1, 360), // Rotation (in degrees)
|
||||||
posX: ir(1,1200), // CSS Horizontal Position
|
posX: ir(1,1200), // CSS Horizontal Position
|
||||||
posY: ir(1, 800), // CSS Vertical Position
|
posY: ir(1, 800), // CSS Vertical Position
|
||||||
`,
|
`, true
|
||||||
true,
|
)}
|
||||||
)}
|
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -5,23 +5,11 @@ export const oscilloscope = (application: Editor): string => {
|
|||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
return `# Oscilloscope
|
return `# Oscilloscope
|
||||||
|
|
||||||
You can turn on the oscilloscope to generate interesting visuals or to inspect audio. Use the <ic>scope()</ic> function to turn on/off the oscilloscope and to configure it. The oscilloscope is off by default.
|
You can turn on the oscilloscope to generate interesting visuals or to inspect audio. Use the <ic>scope()</ic> function to turn it on and off. The oscilloscope is off by default.
|
||||||
|
|
||||||
You need to manually feed the scope with the sounds you want to inspect:
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Feeding a sine to the oscilloscope",
|
"Oscilloscope configuration",
|
||||||
`
|
`
|
||||||
beat(1)::sound('sine').freq(200).ad(0, .2).scope().out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
Here is a layout of the scope configuration options:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Oscilloscope configuration",
|
|
||||||
`
|
|
||||||
scope({
|
scope({
|
||||||
enabled: true, // off by default
|
enabled: true, // off by default
|
||||||
color: "#fdba74", // any valid CSS color or "random"
|
color: "#fdba74", // any valid CSS color or "random"
|
||||||
@ -35,12 +23,12 @@ scope({
|
|||||||
refresh: 1 // refresh rate (in pulses)
|
refresh: 1 // refresh rate (in pulses)
|
||||||
})
|
})
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Demo with multiple scope mode",
|
"Demo with multiple scope mode",
|
||||||
`
|
`
|
||||||
rhythm(.5, [4,5].dur(4*3, 4*1), 8)::sound('fhardkick').out()
|
rhythm(.5, [4,5].dur(4*3, 4*1), 8)::sound('fhardkick').out()
|
||||||
beat(0.25)::sound('square').freq([
|
beat(0.25)::sound('square').freq([
|
||||||
[250, 250/2, 250/4].pick(),
|
[250, 250/2, 250/4].pick(),
|
||||||
@ -56,8 +44,8 @@ scope({enabled: true, thickness: 8,
|
|||||||
color: ['purple', 'green', 'random'].beat(),
|
color: ['purple', 'green', 'random'].beat(),
|
||||||
size: 0.5, fftSize: 2048})
|
size: 0.5, fftSize: 2048})
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
Note that these values can be patterned as well! You can transform the oscilloscope into its own light show if you want. The picture is not stable anyway so you won't have much use of it for precision work :)
|
Note that these values can be patterned as well! You can transform the oscilloscope into its own light show if you want. The picture is not stable anyway so you won't have much use of it for precision work :)
|
||||||
|
|
||||||
|
|||||||
@ -1,33 +1,33 @@
|
|||||||
import { type Editor } from "../../main";
|
import { type Editor } from "../main";
|
||||||
import { makeExampleFactory } from "../../Documentation";
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
export const patterns = (application: Editor): string => {
|
export const patterns = (application: Editor): string => {
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
return `
|
return `
|
||||||
# Array patterns
|
# Patterns
|
||||||
|
|
||||||
**Topos** is using arrays as a way to make dynamic patterns of data (rhythms, melodies, etc).
|
**Topos** is using arrays as a way to make dynamic patterns of data (rhythms, melodies, etc).
|
||||||
It means that the following:
|
It means that the following:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Boring kick",
|
"Boring kick",
|
||||||
`
|
`
|
||||||
beat(1)::sound('kick').out()
|
beat(1)::sound('kick').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
can be turned into something more interesting like this easily:
|
can be turned into something more interesting like this easily:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Less boring kick",
|
"Less boring kick",
|
||||||
`
|
`
|
||||||
let c = [1,2].dur(3, 1)
|
let c = [1,2].dur(3, 1)
|
||||||
beat([1, 0.5, 0.25].dur(0.75, 0.25, 1) / c)::sound(['kick', 'fsoftsnare'].beat(0.75))
|
beat([1, 0.5, 0.25].dur(0.75, 0.25, 1) / c)::sound(['kick', 'fsoftsnare'].beat(0.75))
|
||||||
.ad(0, .25).shape(usine(1/2)*0.5).speed([1, 2, 4].beat(0.5)).out()
|
.ad(0, .25).shape(usine(1/2)*0.5).speed([1, 2, 4].beat(0.5)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
**Topos** comes with a lot of array methods to deal with musical patterns of increasing complexity. Some knowledge of patterns and how to use them will help you to break out of simple loops and repeating structures. The most basic JavaScript data structure is the [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). Topos is extending it with custom methods to describe patterns that evolve over time. These methods can often be chained to compose more complex expressions: <ic>[1, 2, 3].repeatOdd(5).palindrome().beat()</ic>.
|
**Topos** comes with a lot of array methods to deal with musical patterns of increasing complexity. Some knowledge of patterns and how to use them will help you to break out of simple loops and repeating structures. The most basic JavaScript data structure is the [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). Topos is extending it with custom methods to describe patterns that evolve over time. These methods can often be chained to compose more complex expressions: <ic>[1, 2, 3].repeatOdd(5).palindrome().beat()</ic>.
|
||||||
@ -37,18 +37,18 @@ beat([1, 0.5, 0.25].dur(0.75, 0.25, 1) / c)::sound(['kick', 'fsoftsnare'].beat(0
|
|||||||
- <ic>beat(division: number)</ic>: this method will return the next value in the list every _n_ pulses. By default, <ic>1</ic> equals to one beat but integer and floating point number values are supported as well. This method is extremely powerful and can be used for many different purposes. Check out the examples.
|
- <ic>beat(division: number)</ic>: this method will return the next value in the list every _n_ pulses. By default, <ic>1</ic> equals to one beat but integer and floating point number values are supported as well. This method is extremely powerful and can be used for many different purposes. Check out the examples.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Light drumming",
|
"Light drumming",
|
||||||
`
|
`
|
||||||
// Every bar, use a different rhythm
|
// Every bar, use a different rhythm
|
||||||
beat([1, 0.75].beat(4)) :: sound('cp').out()
|
beat([1, 0.75].beat(4)) :: sound('cp').out()
|
||||||
beat([0.5, 1].beat(4)) :: sound('kick').out()
|
beat([0.5, 1].beat(4)) :: sound('kick').out()
|
||||||
beat(2)::snd('snare').shape(.5).out()
|
beat(2)::snd('snare').shape(.5).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using beat to create arpeggios",
|
"Using beat to create arpeggios",
|
||||||
`
|
`
|
||||||
// Arpeggio using pulse divisions
|
// Arpeggio using pulse divisions
|
||||||
beat([.5, .25].beat(0.5)) :: sound('sine')
|
beat([.5, .25].beat(0.5)) :: sound('sine')
|
||||||
.lpf(100+usine(1/4)*400).lpad(2, 0, .25)
|
.lpf(100+usine(1/4)*400).lpad(2, 0, .25)
|
||||||
@ -62,25 +62,25 @@ beat([.5, .25].beat(0.5)) :: sound('sine')
|
|||||||
.delayfb(0.5)
|
.delayfb(0.5)
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Cool ambiance",
|
"Cool ambiance",
|
||||||
`
|
`
|
||||||
beat(.5) :: snd(['kick', 'hat'].beat(0.5)).out()
|
beat(.5) :: snd(['kick', 'hat'].beat(0.5)).out()
|
||||||
beat([2,4].beat(2)) :: snd('shaker').delay(.5).delayfb(.75).delayt(0.125).out()
|
beat([2,4].beat(2)) :: snd('shaker').delay(.5).delayfb(.75).delayt(0.125).out()
|
||||||
flip(2)::beat(1)::snd('froomy').out()
|
flip(2)::beat(1)::snd('froomy').out()
|
||||||
flip(4)::beat(2)::snd('pad').n(2).shape(.5)
|
flip(4)::beat(2)::snd('pad').n(2).shape(.5)
|
||||||
.orbit(2).room(0.9).size(0.9).release(0.5).out()
|
.orbit(2).room(0.9).size(0.9).release(0.5).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>bar(value: number = 1)</ic>: returns the next value every bar (if <ic>value = 1</ic>). Using a larger value will return the next value every <ic>n</ic> bars.
|
- <ic>bar(value: number = 1)</ic>: returns the next value every bar (if <ic>value = 1</ic>). Using a larger value will return the next value every <ic>n</ic> bars.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"A simple drumbeat in no time!",
|
"A simple drumbeat in no time!",
|
||||||
`
|
`
|
||||||
beat(1)::sound(['kick', 'hat', 'snare', 'hat'].beat()).out()
|
beat(1)::sound(['kick', 'hat', 'snare', 'hat'].beat()).out()
|
||||||
beat([1/4, 1/2].dur(1.5, 0.5))::sound(['jvbass', 'fikea'].bar())
|
beat([1/4, 1/2].dur(1.5, 0.5))::sound(['jvbass', 'fikea'].bar())
|
||||||
.ad(0, .25).room(0.5).size(2).resonance(0.15).lpf(
|
.ad(0, .25).room(0.5).size(2).resonance(0.15).lpf(
|
||||||
@ -88,12 +88,12 @@ beat([1/4, 1/2].dur(1.5, 0.5))::sound(['jvbass', 'fikea'].bar())
|
|||||||
* [1, 2].bar())
|
* [1, 2].bar())
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using beat and bar in the same example",
|
"Using beat and bar in the same example",
|
||||||
`
|
`
|
||||||
beat(2)::snd('snare').out()
|
beat(2)::snd('snare').out()
|
||||||
beat([1, 0.5].beat()) :: sound(['bass3'].bar())
|
beat([1, 0.5].beat()) :: sound(['bass3'].bar())
|
||||||
.freq(100).n([12, 14].bar())
|
.freq(100).n([12, 14].bar())
|
||||||
@ -101,14 +101,14 @@ beat([1, 0.5].beat()) :: sound(['bass3'].bar())
|
|||||||
.pan(r(0, 1))
|
.pan(r(0, 1))
|
||||||
.speed([1,2,3].beat())
|
.speed([1,2,3].beat())
|
||||||
.out()
|
.out()
|
||||||
`,
|
`
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>dur(...list: numbers[])</ic> : keeps the same value for a duration of <ic>n</ic> beats corresponding to the <ic>nth</ic> number of the list you provide.
|
- <ic>dur(...list: numbers[])</ic> : keeps the same value for a duration of <ic>n</ic> beats corresponding to the <ic>nth</ic> number of the list you provide.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Holding a value for n beats",
|
"Holding a value for n beats",
|
||||||
`
|
`
|
||||||
// The second note is kept for twice as long
|
// The second note is kept for twice as long
|
||||||
beat(0.5)::sound('notes').n([1,2].dur(1, 2))
|
beat(0.5)::sound('notes').n([1,2].dur(1, 2))
|
||||||
.room(0.5).size(8).delay(0.125).delayt(1/8)
|
.room(0.5).size(8).delay(0.125).delayt(1/8)
|
||||||
@ -117,126 +117,72 @@ beat(0.5)::sound('notes').n([1,2].dur(1, 2))
|
|||||||
beat(1)::sound(['kick', 'fsnare'].dur(3, 1))
|
beat(1)::sound(['kick', 'fsnare'].dur(3, 1))
|
||||||
.n([0,3].dur(3, 1)).out()
|
.n([0,3].dur(3, 1)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Manipulating notes and scales
|
## Manipulating notes and scales
|
||||||
|
|
||||||
|
|
||||||
- <ic>pitch()</ic>: convert a list of integers to pitch classes
|
- <ic>pitch()</ic>: convert a list of integers to pitch classes
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Converting a list of integers to pitch classes using key and scale",
|
"Converting a list of integers to pitch classes using key and scale",
|
||||||
`
|
`
|
||||||
beat(0.25) :: snd('sine')
|
beat(0.25) :: snd('sine')
|
||||||
.pitch([0,1,2,3,4,6,7,8].beat(0.125))
|
.pitch([0,1,2,3,4,6,7,8].beat(0.125))
|
||||||
.key(["F4","F3"].beat(2.0))
|
.key(["F4","F3"].beat(2.0))
|
||||||
.scale("minor").ad(0, .25).out()
|
.scale("minor").ad(0, .25).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>semitones(number[], ...args?)</ic>: Create scale from semitone intervals.
|
- <ic>scale(scale: string, base note: number)</ic>: Map each element of the list to the closest note of the slected scale. [0, 2, 3, 5 ].scale("major", 50) returns [50, 52, <ic>54</ic>, 55]. You can use western scale names like (Major, Minor, Minor pentatonic ...) or [zeitler](https://ianring.com/musictheory/scales/traditions/zeitler) scale names. Alternatively you can also use the integers as used by Ian Ring in his [study of scales](https://ianring.com/musictheory/scales/).
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Play pitches from scale created from semitone intervals",
|
"Mapping the note array to the E3 major scale",
|
||||||
`
|
`
|
||||||
beat(1) :: sound('gtr').pitch([0, 4, 3, 2].beat()).key(64)
|
|
||||||
.semitones(1, 1, 3, 1, 1, 2, 3).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
- <ic>cents(number[], ...args?)</ic>: Create scale from cent intervals.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Play pitches from scale created from cent intervals",
|
|
||||||
`
|
|
||||||
rhythm([0.5,0.25].beat(1),14,16) :: sound('pluck')
|
|
||||||
.stretch(r(1,5)).pitch(r(0,6)).key(57)
|
|
||||||
.cents(120,270,540,670,785,950,1215).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
- <ic>ratios(number[], ...args?)</ic>: Create scale from ratios.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Play pitches from scale created from ratios",
|
|
||||||
`
|
|
||||||
rhythm([0.5,0.25].beat(0.25),5,7) :: sound('east:3')
|
|
||||||
.pitch([0,1,2,3,4,5,6,7,8,9,10,11].beat(0.25)).key(67)
|
|
||||||
.ratios(2/11,4/11,6/11,8/11,10/11,11/11).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
- <ic>edo(number, scale?: string|number[])</ic>: Create scale from equal divisions of the octave. Creates chromatic scale by default.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Play pitches from scale created from equal divisions of the octave",
|
|
||||||
`
|
|
||||||
z0("e bd bd <bd bd [bd bd] [bd bd bd bd]>").sound().out()
|
|
||||||
flipbar(1) :: rhythm(.25,14,16) :: sound("ST10:30").stretch(3).gain(0.5)
|
|
||||||
.pitch([0,10,r(20,40),r(100,200),r(-200,200),r(200,300),200,r(3,666)].beat([1.0,0.5,0.25].bar(6)))
|
|
||||||
.octave(r(-6,6))
|
|
||||||
.edo(666,"rocritonic")
|
|
||||||
.out()
|
|
||||||
rhythm(2.0,26,32) :: sound("ST20").n([22,5,24,34,31,5,11,19].pick()).stretch(rI(1,6))
|
|
||||||
.pitch(rI(127,300))
|
|
||||||
.edo(666)
|
|
||||||
.out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
- <ic>scale(scale: string, base note: number)</ic>: Map each element of the list to the closest note of the slected scale. [0, 2, 3, 5 ].scale("major", 50) returns [50, 52, <ic>54</ic>, 55]. You can use western scale names like (Major, Minor, Minor pentatonic ...) or [zeitler](https://ianring.com/musictheory/scales/traditions/zeitler) scale names. Alternatively you can also use the integers as used by Ian Ring in his [study of scales](https://ianring.com/musictheory/scales/).
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Mapping the note array to the E3 major scale",
|
|
||||||
`
|
|
||||||
beat(1) :: snd('gtr')
|
beat(1) :: snd('gtr')
|
||||||
.note([0, 5, 2, 1, 7].scale("Major", 52).beat())
|
.note([0, 5, 2, 1, 7].scale("Major", 52).beat())
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>scaleArp(scale: string, mask: number)</ic>: extrapolate a custom-masked scale from each list elements. [0].scale("major", 3) returns [0,2,4]. <ic>scaleArp</ic> supports the same scales as <ic>scale</ic>.
|
- <ic>scaleArp(scale: string, mask: number)</ic>: extrapolate a custom-masked scale from each list elements. [0].scale("major", 3) returns [0,2,4]. <ic>scaleArp</ic> supports the same scales as <ic>scale</ic>.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Extrapolate a 3-elements Mixolydian scale from 2 notes",
|
"Extrapolate a 3-elements Mixolydian scale from 2 notes",
|
||||||
`
|
`
|
||||||
beat(1) :: snd('gtr')
|
beat(1) :: snd('gtr')
|
||||||
.note([0, 5].scaleArp("mixolydian", 3).beat() + 50)
|
.note([0, 5].scaleArp("mixolydian", 3).beat() + 50)
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Iteration using the mouse
|
## Iteration using the mouse
|
||||||
|
|
||||||
- <ic>mouseX()</ic> / <ic>mouseY()</ic>: divides the screen in <ic>n</ic> zones and returns the value corresponding to the mouse position on screen.</ic>
|
- <ic>mouseX()</ic> / <ic>mouseY()</ic>: divides the screen in <ic>n</ic> zones and returns the value corresponding to the mouse position on screen.</ic>
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Controlling an arpeggio (octave and note) with mouse",
|
"Controlling an arpeggio (octave and note) with mouse",
|
||||||
`
|
`
|
||||||
beat(0.25)::sound('wt_piano')
|
beat(0.25)::sound('wt_piano')
|
||||||
.note([0,2,3,4,5,7,8,9,11,12].scale(
|
.note([0,2,3,4,5,7,8,9,11,12].scale(
|
||||||
'minor', 30 + [0,12,24].mouseY()).mouseX())
|
'minor', 30 + [0,12,24].mouseY()).mouseX())
|
||||||
.room(0.5).size(4).lpad(-2, .2).lpf(500, 0.3)
|
.room(0.5).size(4).lpad(-2, .2).lpf(500, 0.3)
|
||||||
.ad(0, .2).out()
|
.ad(0, .2).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Simple data operations
|
## Simple data operations
|
||||||
|
|
||||||
- <ic>palindrome()</ic>: Concatenates a list with the same list in reverse.
|
- <ic>palindrome()</ic>: Concatenates a list with the same list in reverse.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Palindrome filter sweep",
|
"Palindrome filter sweep",
|
||||||
`
|
`
|
||||||
beat([1,.5,.25].beat()) :: snd('wt_stereo')
|
beat([1,.5,.25].beat()) :: snd('wt_stereo')
|
||||||
.speed([1, 0.5, 0.25])
|
.speed([1, 0.5, 0.25])
|
||||||
.pan(r(0, 1)).freq([100,200,300].beat(0.25))
|
.pan(r(0, 1)).freq([100,200,300].beat(0.25))
|
||||||
@ -245,15 +191,15 @@ beat([1,.5,.25].beat()) :: snd('wt_stereo')
|
|||||||
.lpf([500,1000,2000,4000].palindrome().beat())
|
.lpf([500,1000,2000,4000].palindrome().beat())
|
||||||
.lpad(4, 0, .25).sustain(0.125).out()
|
.lpad(4, 0, .25).sustain(0.125).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>random(index: number)</ic>: pick a random element in the given list.
|
- <ic>random(index: number)</ic>: pick a random element in the given list.
|
||||||
- <ic>rand(index: number)</ic>: shorter alias for the same method.
|
- <ic>rand(index: number)</ic>: shorter alias for the same method.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Sipping some gasoline at the robot bar",
|
"Sipping some gasoline at the robot bar",
|
||||||
`
|
`
|
||||||
// rand, random and pick are doing the same thing!
|
// rand, random and pick are doing the same thing!
|
||||||
beat(1)::snd('fhardkick').shape(0.5)
|
beat(1)::snd('fhardkick').shape(0.5)
|
||||||
.ad(0, .1).lpf(500).db(-12).out()
|
.ad(0, .1).lpf(500).db(-12).out()
|
||||||
@ -264,69 +210,69 @@ beat([.5, 1].rand() / 2) :: snd(
|
|||||||
.lpf([5000,3000,2000].pick())
|
.lpf([5000,3000,2000].pick())
|
||||||
.end(0.5).out()
|
.end(0.5).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>pick()</ic>: pick a random element in the list.
|
- <ic>pick()</ic>: pick a random element in the list.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Picking values in lists",
|
"Picking values in lists",
|
||||||
`
|
`
|
||||||
beat(0.25)::sound(['ftabla', 'fwood'].pick())
|
beat(0.25)::sound(['ftabla', 'fwood'].pick())
|
||||||
.speed([1,2,3,4].pick()).ad(0, .125).n(ir(1,10))
|
.speed([1,2,3,4].pick()).ad(0, .125).n(ir(1,10))
|
||||||
.room(0.5).size(1).out()
|
.room(0.5).size(1).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>degrade(amount: number)</ic>: removes _n_% of the list elements. Lists can be degraded as long as one element remains. The amount of degradation is given as a percentage.
|
- <ic>degrade(amount: number)</ic>: removes _n_% of the list elements. Lists can be degraded as long as one element remains. The amount of degradation is given as a percentage.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Amen break suffering from data loss",
|
"Amen break suffering from data loss",
|
||||||
`
|
`
|
||||||
// Tweak the value to degrade this amen break even more!
|
// Tweak the value to degrade this amen break even more!
|
||||||
beat(.25)::snd('amencutup').n([1,2,3,4,5,6,7,8,9].degrade(20).loop($(1))).out()
|
beat(.25)::snd('amencutup').n([1,2,3,4,5,6,7,8,9].degrade(20).loop($(1))).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>repeat(amount: number)</ic>: repeat every list elements _n_ times.
|
- <ic>repeat(amount: number)</ic>: repeat every list elements _n_ times.
|
||||||
- <ic>repeatEven(amount: number)</ic>: repeat every pair element of the list _n_ times.
|
- <ic>repeatEven(amount: number)</ic>: repeat every pair element of the list _n_ times.
|
||||||
- <ic>repeatOdd(amount: number)</ic>: repeat every odd element of the list _n_ times.
|
- <ic>repeatOdd(amount: number)</ic>: repeat every odd element of the list _n_ times.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Repeating samples a given number of times",
|
"Repeating samples a given number of times",
|
||||||
`
|
`
|
||||||
beat(.25)::sound('amencutup').n([1,2,3,4,5,6,7,8].repeat(4).beat(.25)).out()
|
beat(.25)::sound('amencutup').n([1,2,3,4,5,6,7,8].repeat(4).beat(.25)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>loop(index: number)</ic>: loop takes one argument, the _index_. It allows you to iterate over a list using an iterator such as a counter. This is super useful to control how you are accessing values in a list without relying on a temporal method such as <ic>.beat()</ic> or </ic>.bar()</ic>.
|
- <ic>loop(index: number)</ic>: loop takes one argument, the _index_. It allows you to iterate over a list using an iterator such as a counter. This is super useful to control how you are accessing values in a list without relying on a temporal method such as <ic>.beat()</ic> or </ic>.bar()</ic>.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Don't you know how to count up to 5?",
|
"Don't you know how to count up to 5?",
|
||||||
`
|
`
|
||||||
beat(1) :: sound('numbers').n([1,2,3,4,5].loop($(3, 10, 2))).out()
|
beat(1) :: sound('numbers').n([1,2,3,4,5].loop($(3, 10, 2))).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>shuffle(): this</ic>: shuffles a list! Simple enough!
|
- <ic>shuffle(): this</ic>: shuffles a list! Simple enough!
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Shuffling a list for extra randomness",
|
"Shuffling a list for extra randomness",
|
||||||
`
|
`
|
||||||
beat(1) :: sound('numbers').n([1,2,3,4,5].shuffle().loop($(1)).out()
|
beat(1) :: sound('numbers').n([1,2,3,4,5].shuffle().loop($(1)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>rotate(steps: number)</ic>: rotate a list to the right _n_ times. The last value become the first, rinse and repeat.
|
- <ic>rotate(steps: number)</ic>: rotate a list to the right _n_ times. The last value become the first, rinse and repeat.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"To make things more complex... here you go",
|
"To make things more complex... here you go",
|
||||||
`
|
`
|
||||||
beat(.25) :: snd('sine').fmi([1.99, 2])
|
beat(.25) :: snd('sine').fmi([1.99, 2])
|
||||||
.ad(0, .125).lpf(500+r(1,400))
|
.ad(0, .125).lpf(500+r(1,400))
|
||||||
.lpad(usine()*8, 0, .125)
|
.lpad(usine()*8, 0, .125)
|
||||||
@ -337,21 +283,21 @@ beat(.25) :: snd('sine').fmi([1.99, 2])
|
|||||||
.beat(.25)) // while the index changes
|
.beat(.25)) // while the index changes
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Filtering
|
## Filtering
|
||||||
|
|
||||||
- <ic>unique()</ic>: filter a list to remove repeated values.
|
- <ic>unique()</ic>: filter a list to remove repeated values.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Demonstrative filtering. Final list is [100, 200]",
|
"Demonstrative filtering. Final list is [100, 200]",
|
||||||
`
|
`
|
||||||
// Remove unique and 100 will repeat four times!
|
// Remove unique and 100 will repeat four times!
|
||||||
beat(1)::snd('sine').sustain(0.1).freq([100,100,100,100,200].unique().beat()).out()
|
beat(1)::snd('sine').sustain(0.1).freq([100,100,100,100,200].unique().beat()).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Simple math operations
|
## Simple math operations
|
||||||
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
import { type Editor } from "../../main";
|
|
||||||
import { makeExampleFactory } from "../../Documentation";
|
|
||||||
|
|
||||||
export const generators = (application: Editor): string => {
|
|
||||||
const makeExample = makeExampleFactory(application);
|
|
||||||
return `
|
|
||||||
# Generator functions
|
|
||||||
|
|
||||||
JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator" target="_blank">generators</a> are powerful functions for generating value sequences. They can be used to generate melodies, rhythms or control parameters.
|
|
||||||
|
|
||||||
In Topos generator functions should be called using the <ic>cache(key, function)</ic> function to store the current state of the generator. This function takes two arguments: the name for the cache and the generator instance.
|
|
||||||
|
|
||||||
Once the generator is cached the values will be returned from the named cache even if the generator function is modified. To clear the current cache and to re-evaluate the modified generator use the **Shift+Ctrl+Backspace** shortcut. Alternatively you can cache the modified generator using a different name.
|
|
||||||
|
|
||||||
The resulted values can be played using either <ic>pitch()</ic> or <ic>freq()</ic> or as Ziffers patterns. When playing the values using <ic>pitch()</ic> different scales and chained methods can be used to alter the result, for example <ic>mod(value: number)</ic> to limit the integer range or <ic>scale(name: string)</ic> etc. to change the resulting note.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Simple looping generator function",
|
|
||||||
`
|
|
||||||
function* simple() {
|
|
||||||
let x = 0;
|
|
||||||
while (x < 12) {
|
|
||||||
yield x+x;
|
|
||||||
x+=1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
beat(.25) && sound("triangle").pitch(cache("simple",simple())).scale("minor").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)};
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Infinite frequency generator",
|
|
||||||
`
|
|
||||||
function* poly(x=0) {
|
|
||||||
while (true) {
|
|
||||||
const s = Math.tan(x/10)+Math.sin(x/20);
|
|
||||||
yield 2 * Math.pow(s, 3) - 6 * Math.pow(s, 2) + 5 * s + 200;
|
|
||||||
x++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
beat(.125) && sound("triangle").freq(cache("mathyshit",poly())).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)};
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Truly scale free chaos inspired by Lorentz attractor",
|
|
||||||
`
|
|
||||||
function* strange(x = 0.1, y = 0, z = 0, rho = 28, beta = 8 / 3, zeta = 10) {
|
|
||||||
while (true) {
|
|
||||||
const dx = 10 * (y - x);
|
|
||||||
const dy = x * (rho - z) - y;
|
|
||||||
const dz = x * y - beta * z;
|
|
||||||
|
|
||||||
x += dx * 0.01;
|
|
||||||
y += dy * 0.01;
|
|
||||||
z += dz * 0.01;
|
|
||||||
|
|
||||||
const value = 300 + 30 * (Math.sin(x) + Math.tan(y) + Math.cos(z))
|
|
||||||
yield value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
beat(0.25) :: sound("triangle")
|
|
||||||
.freq(cache("stranger",strange(3,5,2)))
|
|
||||||
.adsr(.15,.1,.1,.1)
|
|
||||||
.log("freq").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)};
|
|
||||||
|
|
||||||
## OEIS integer sequences
|
|
||||||
|
|
||||||
To find some inspiration - or to enter into the void - one can visit <a href="https://oeis.org/" target="_blank">The On-Line Encyclopedia of Integer Sequences (OEIS)</a> to find some interesting integer sequences.
|
|
||||||
|
|
||||||
Many of the sequences are implemented by <a href="https://github.com/acerix/jisg/tree/main/src/oeis" target="_blank">JISG</a> (Javascript Integer Sequence Generators) project. Those sequences can be referenced directly with the identifiers using the cache function.
|
|
||||||
|
|
||||||
One of these implemented generators is the Inventory sequence <a href="https://github.com/acerix/jisg/blob/main/src/oeis/A342585.ts" target="_blank">A342585</a> made famous by <a href="https://www.youtube.com/watch?v=rBU9E-ZOZAI" target="_blank">Neil Sloane</a>.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Inventory sequence",
|
|
||||||
`
|
|
||||||
rhythm(0.5,[8,7,5,6].bar(4),9) :: sound("triangle")
|
|
||||||
.pitch(cache("Inventory",A342585))
|
|
||||||
.mod(11).scale("minor")
|
|
||||||
.adsr(.25,.05,.5,.5)
|
|
||||||
.room(2.0).size(0.5)
|
|
||||||
.gain(1).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)};
|
|
||||||
|
|
||||||
## Using generators with Ziffers
|
|
||||||
|
|
||||||
Alternatively generators can be used with Ziffers to generate longer patterns. In this case the generator function should be passed as an argument to the ziffers function. Ziffers patterns are cached separately so there is no need for using **cache()** function. Ziffers expects values from the generators to be integers or strings in ziffers syntax.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Ziffers patterns using a generator functions",
|
|
||||||
`
|
|
||||||
function* poly(x) {
|
|
||||||
while (true) {
|
|
||||||
yield 64 * Math.pow(x, 6) - 480 * Math.pow(x, 4) + 720 * Math.pow(x, 2);
|
|
||||||
x++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
z0(poly(1)).noteLength(0.5).semitones(2,2,3,2,2,2).sound("sine").out()
|
|
||||||
z1(poly(8)).noteLength(0.25).semitones(2,1,2,1,2,2).sound("sine").out()
|
|
||||||
z2(poly(-3)).noteLength(1.0).semitones(2,2,2,1,3,2).sound("sine").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)};
|
|
||||||
|
|
||||||
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
import { type Editor } from "../../../main";
|
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
|
||||||
|
|
||||||
export const ziffers_algorithmic = (application: Editor): string => {
|
|
||||||
const makeExample = makeExampleFactory(application);
|
|
||||||
return `
|
|
||||||
# Algorithmic operations
|
|
||||||
|
|
||||||
Ziffers provides shorthands for **many** numeric and algorithimic operations such as evaluating random numbers and creating sequences using list operations:
|
|
||||||
|
|
||||||
* **List operations:** Cartesian operation (_e.g._ <ic>(3 2 1)+(2 5)</ic>) using the <ic>+</ic> operator. All the arithmetic operators are supported.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Element-wise operations for melodic generation",
|
|
||||||
`
|
|
||||||
z1("1/8 _ 0 (0 1 3)+(1 2) 0 (2 3 5)-(1 2)").sound('sine')
|
|
||||||
.scale('pentatonic').fmi([0.25,0.5].beat(2)).fmh([2,4].beat(2))
|
|
||||||
.room(0.9).size(0.9).sustain(0.1).delay(0.125)
|
|
||||||
.delayfb(0.25).out();
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"List operations",
|
|
||||||
`
|
|
||||||
z1('q (0 3 1 5)+(2 5) e (0 5 2)*(2 1) (0 5 2)%(2 3)')
|
|
||||||
.sound('sine')
|
|
||||||
.room(.5).size(1.0).adsr(.15,.15,.25,.1)
|
|
||||||
.scale("Bebop major")
|
|
||||||
.out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
* **Random numbers:** <ic>(4,6)</ic> Random number between 4 and 6
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Random numbers, true computer music at last!",
|
|
||||||
`
|
|
||||||
z1("s _ (0,8) 0 0 (0,5) 0 0").sound('sine')
|
|
||||||
.adsr(0, .1, 0, 0).scale('minor')
|
|
||||||
.fmdec(0.25).fmi(2).fmh([0.5, 0.25].beat(2))
|
|
||||||
.room(0.9).size(0.5).sustain(0.1) .delay(0.5)
|
|
||||||
.delay(0.125).delayfb(0.25).out();
|
|
||||||
beat(.5) :: snd(['kick', 'hat'].beat(.5)).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Variables
|
|
||||||
|
|
||||||
* <ic>A=(0 2 3 (1,4))</ic> Assign pre-evaluated list to a variable
|
|
||||||
* <ic>B~(0 2 3 (1,4))</ic> Assign list with operations to a variable
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Assign lists to variables",
|
|
||||||
`
|
|
||||||
z1("s A=(0 (1,4)) B~(2 (3,8)) A B A B A")
|
|
||||||
.scale("modimic")
|
|
||||||
.sound("triangle")
|
|
||||||
.adsr(0.01,0.15,0.25,0)
|
|
||||||
.gain(0.5)
|
|
||||||
.out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Combine variables into lists and do operations",
|
|
||||||
`
|
|
||||||
z1("s A=(0 3) B=(3 8) C=(((A+B)+A)*B) D=(C-B) A A+C D")
|
|
||||||
.sound("sawtooth")
|
|
||||||
.ad(0.05,1.0)
|
|
||||||
.gain(0.5)
|
|
||||||
.out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,296 +0,0 @@
|
|||||||
import { type Editor } from "../../../main";
|
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
|
||||||
|
|
||||||
export const ziffers_basics = (application: Editor): string => {
|
|
||||||
const makeExample = makeExampleFactory(application);
|
|
||||||
return `
|
|
||||||
# Ziffers
|
|
||||||
|
|
||||||
Ziffers is a **musical number based notation** tuned for _live coding_. It is a very powerful and flexible notation for describing musical patterns in very few characters. Number based musical notation has a long history and has been used for centuries as a shorthand technique for music notation. Amiika has written [papers](https://zenodo.org/record/7841945) and other documents describing his system. It is currently implemented for many live coding platforms including [Sardine](https://sardine.raphaelforment.fr) (Raphaël Forment) and [Sonic Pi](https://sonic-pi.net/) (Sam Aaron). Ziffers can be used for:
|
|
||||||
|
|
||||||
- composing melodies using using **classical music notation and concepts**.
|
|
||||||
- exploring **generative / aleatoric / stochastic** melodies and applying them to sounds and synths.
|
|
||||||
- embracing a different mindset and approach to time and **patterning**.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Super Fancy Ziffers example",
|
|
||||||
`
|
|
||||||
z1('1/8 024!3 035 024 0124').sound('wt_stereo')
|
|
||||||
.adsr(0, .4, 0.5, .4).gain(0.1)
|
|
||||||
.lpadsr(4, 0, .2, 0, 0)
|
|
||||||
.cutoff(5000 + usine(1/2) * 2000)
|
|
||||||
.n([1,2,4].beat(4)).out()
|
|
||||||
z2('<1/8 1/16> __ 0 <(^) (^ ^)> (0,8)').sound('wt_stereo')
|
|
||||||
.adsr(0, .5, 0.5, .4).gain(0.2)
|
|
||||||
.lpadsr(4, 0, .2, 0, 0).n(14)
|
|
||||||
.cutoff(200 + usine(1/2) * 4000)
|
|
||||||
.n([1,2,4].beat(4)).o(2).room(0.9).out()
|
|
||||||
let osci = 1500 + usine(1/2) * 2000;
|
|
||||||
z3('can can:2').sound().gain(1).cutoff(osci).out()
|
|
||||||
z4('1/4 kick kick snare kick').sound().gain(1).cutoff(osci).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Notation
|
|
||||||
|
|
||||||
The basic Ziffer notation is entirely written in JavaScript strings (_e.g_ <ic>"0 1 2"</ic>). It consists mostly of numbers and letters. The whitespace character is used as a separator. Instead of note names, Ziffer is using numbers to represent musical pitch and letters to represent musical durations. Alternatively, _floating point numbers_ can also be used to represent durations.
|
|
||||||
|
|
||||||
| Syntax | Symbol | Description |
|
|
||||||
|------------ |--------|------------------------|
|
|
||||||
| **Pitches** | <ic>0-9</ic> <ic>{10 11 21}</ic> | Numbers or escaped numbers in curly brackets |
|
|
||||||
| **Duration** | <ic>0.25</ic>, <ic>0.5</ic> | Floating point numbers can also be used as durations |
|
|
||||||
| **Duration** | <ic>1/4</ic>, <ic>1/16</ic> | Fractions can be used as durations |
|
|
||||||
| **Subdivision** | <ic>[1 [2 3]]</ic> | Durations can be subdivided using square brackets |
|
|
||||||
| **Cycles** | <ic>1 <2 4></ic> | Cycle values within the pattern |
|
|
||||||
| **Octave** | <ic>^ _</ic> | <ic>^</ic> for octave up and <ic>_</ic> for octave down |
|
|
||||||
| **Accidentals** | <ic># b</ic> | Sharp and flats, just like with regular music notation :smile: |
|
|
||||||
| **Rest** | <ic>r</ic> | Rest / silences |
|
|
||||||
| **Repeat** | <ic>!1-9</ic> | Repeat the item 1 to 9 times |
|
|
||||||
| **Chords** | <ic>[1-9]+ / [iv]+ / [AG]+name</ic> | Multiple pitches grouped together, roman numerals or named chords |
|
|
||||||
| **Samples** | <ic>[a-z0-9_]+</ic> | Samples can be used pitched or unpitched |
|
|
||||||
| **Index/Channel** | <ic>[a-z0-9]+:[0-9]*</ic> | Samples or midi channel can be changed using a colon |
|
|
||||||
|
|
||||||
**Note:** Some features are experimental and some are still unsupported. For full / prior syntax see article about <a href="https://zenodo.org/record/7841945" target="_blank">Ziffers</a>.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Pitches from 0 to 9",
|
|
||||||
`
|
|
||||||
z1('0.25 0 1 2 3 4 5 6 7 8 9').sound('wt_stereo')
|
|
||||||
.adsr(0, .1, 0, 0).out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Escaped pitches using curly brackets",
|
|
||||||
`z1('_ _ 0 {9 10 11} 4 {12 13 14}')
|
|
||||||
.sound('wt_05').pan(r(0,1))
|
|
||||||
.cutoff(usaw(1/2) * 4000)
|
|
||||||
.room(0.9).size(0.9).out()`,
|
|
||||||
false,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Durations using fractions and floating point numbers",
|
|
||||||
`
|
|
||||||
z1('1/8 0 2 4 0 2 4 1/4 0 3 5 0.25 _ 0 7 0 7')
|
|
||||||
.sound('square').delay(0.5).delayt(1/8)
|
|
||||||
.adsr(0, .1, 0, 0).delayfb(0.45).out()
|
|
||||||
`,
|
|
||||||
false,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Disco was invented thanks to Ziffers",
|
|
||||||
`
|
|
||||||
z1('e _ _ 0 ^ 0 _ 0 ^ 0').sound('jvbass').out()
|
|
||||||
beat(1)::snd('bd').out(); beat(2)::snd('sd').out()
|
|
||||||
beat(3) :: snd('cp').room(0.5).size(0.5).orbit(2).out()
|
|
||||||
`,
|
|
||||||
false,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Accidentals and rests for nice melodies",
|
|
||||||
`
|
|
||||||
z1('^ 1/8 0 1 b2 3 4 _ 4 b5 4 3 b2 1 0')
|
|
||||||
.scale('major').sound('triangle')
|
|
||||||
.cutoff(500).lpadsr(5, 0, 1/12, 0, 0)
|
|
||||||
.fmi(0.5).fmh(2).delay(0.5).delayt(1/3)
|
|
||||||
.adsr(0, .1, 0, 0).out()
|
|
||||||
`,
|
|
||||||
false,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Repeat items n-times",
|
|
||||||
`
|
|
||||||
z1('1/8 _ _ 0!4 3!4 4!4 3!4')
|
|
||||||
.scale('major').sound('wt_oboe')
|
|
||||||
.shape(0.2).sustain(0.1).out()
|
|
||||||
z2('1/8 _ 0!4 5!4 4!2 7!2')
|
|
||||||
.scale('major').sound('wt_oboe')
|
|
||||||
.shape(0.2).sustain(0.1).out()
|
|
||||||
`,
|
|
||||||
false,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Subdivided durations",
|
|
||||||
`
|
|
||||||
z1('w [0 [5 [3 7]]] h [0 4]')
|
|
||||||
.scale('major').sound('sine')
|
|
||||||
.fmi(usine(.5)).fmh(2).out()
|
|
||||||
`,
|
|
||||||
false,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Rests
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Rest and octaves",
|
|
||||||
`
|
|
||||||
z1('q 0 ^ e0 r _ 0 _ r 4 ^4 4')
|
|
||||||
.sound('sine').scale("godian").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Rests with durations",
|
|
||||||
`
|
|
||||||
z1('q 0 4 e^r 3 e3 0.5^r h4 1/4^r e 5 r 0.125^r 0')
|
|
||||||
.sound('sine').scale("aeryptian").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Chords
|
|
||||||
|
|
||||||
Chords can be build by grouping pitches or using roman numeral notation, or by using named chords.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Chords from pitches",
|
|
||||||
`
|
|
||||||
z1('1.0 024 045 058 046 014')
|
|
||||||
.sound('sine').adsr(0.5, 1, 0, 0)
|
|
||||||
.room(0.5).size(0.9)
|
|
||||||
.scale("minor").out()
|
|
||||||
`,
|
|
||||||
true
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Chords from roman numerals",
|
|
||||||
`
|
|
||||||
z1('2/4 i vi ii v')
|
|
||||||
.sound('triangle').adsr(0.2, 0.3, 0, 0)
|
|
||||||
.room(0.5).size(0.9).scale("major").out()
|
|
||||||
`,
|
|
||||||
true
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Named chords with repeats",
|
|
||||||
`
|
|
||||||
z1('0.25 Bmaj7!2 D7!2 _ Gmaj7!2 Bb7!2 ^ Ebmaj7!2')
|
|
||||||
.sound('square').room(0.5).cutoff(500)
|
|
||||||
.lpadsr(4, 0, .4, 0, 0).size(0.9)
|
|
||||||
.scale("major").out()
|
|
||||||
`,
|
|
||||||
true
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Transposing chords",
|
|
||||||
`
|
|
||||||
z1('q Amin!2').key(["A2", "E2"].beat(4))
|
|
||||||
.sound('sawtooth').cutoff(500)
|
|
||||||
.lpadsr(2, 0, .5, 0, 0, 0).out()`,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Chord transposition with roman numerals",
|
|
||||||
`
|
|
||||||
z1('i i v%-4 v%-2 vi%-5 vi%-3 iv%-2 iv%-1')
|
|
||||||
.sound('triangle').adsr(1/16, 1/5, 0.1, 0)
|
|
||||||
.delay(0.5).delayt([1/8, 1/4].beat(4))
|
|
||||||
.delayfb(0.5).out()
|
|
||||||
beat(4) :: sound('breaks165').stretch(4).out()
|
|
||||||
`,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Chord transposition with named chords",
|
|
||||||
`
|
|
||||||
z1('1/4 Cmin!3 Fmin!3 Fmin%-1 Fmin%-2 Fmin%-1')
|
|
||||||
.sound("sine").bpf(500 + usine(1/4) * 2000)
|
|
||||||
.out()
|
|
||||||
`,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Programmatic inversions",
|
|
||||||
`
|
|
||||||
z1('1/6 i v 1/3 vi iv').invert([1,-1,-2,0].beat(4))
|
|
||||||
.sound("sawtooth").cutoff(1000)
|
|
||||||
.lpadsr(2, 0, .2, 0, 0).out()
|
|
||||||
`,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Arpeggios
|
|
||||||
|
|
||||||
Chords can be arpeggiated using the @-character within the ziffers notation or by using <ic>arpeggio</ic> method.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Arpeggio using the mini-notation",
|
|
||||||
`
|
|
||||||
z1("(i v vi%-3 iv%-2)@(s 0 2 0 1 2 1 0 2)")
|
|
||||||
.sound("sine").out()
|
|
||||||
`,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Arpeggio from named chords with durations",
|
|
||||||
`
|
|
||||||
z1("_ Gm7 ^ C9 D7 Gm7")
|
|
||||||
.arpeggio("e 0 2 q 3 e 1 2")
|
|
||||||
.sound("sine").out()
|
|
||||||
`,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Arpeggio from roman chords with inversions",
|
|
||||||
`
|
|
||||||
z1("i v%-1 vi%-1 iv%-2")
|
|
||||||
.arpeggio(0,2,1,2)
|
|
||||||
.noteLength(0.125)
|
|
||||||
.sound("sine").out()
|
|
||||||
`,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Chaining
|
|
||||||
|
|
||||||
- Basic notation
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Simple method chaining",
|
|
||||||
`
|
|
||||||
z1('0 1 2 3').key('G3')
|
|
||||||
.scale('minor').sound('sine').out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"More complex chaining",
|
|
||||||
`
|
|
||||||
z1('0 1 2 3 4').key('G3').scale('minor').sound('sine').often(n => n.pitch+=3).rarely(s => s.delay(0.5)).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Alternative way for inputting options",
|
|
||||||
`
|
|
||||||
z1('0 3 2 4',{key: 'D3', scale: 'minor pentatonic'}).sound('sine').out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## String prototypes
|
|
||||||
|
|
||||||
You can also use string prototypes as an alternative syntax for creating Ziffers patterns
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"String prototypes",
|
|
||||||
`
|
|
||||||
"q 0 e 5 2 6 2 q 3".z0().sound('sine').out()
|
|
||||||
"q 2 7 8 6".z1().octave(-1).sound('sine').out()
|
|
||||||
"q 2 7 8 6".z2({key: "C2", scale: "aeolian"}).sound('sine').scale("minor").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,157 +0,0 @@
|
|||||||
import { type Editor } from "../../../main";
|
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
|
||||||
|
|
||||||
export const ziffers_rhythm = (application: Editor): string => {
|
|
||||||
const makeExample = makeExampleFactory(application);
|
|
||||||
return `
|
|
||||||
# Rhythm
|
|
||||||
|
|
||||||
Ziffers combines rhythmic and melodic notation into a single pattern language. This means that you can use the same pattern to describe both the rhythm and the melody of a musical phrase similarly to the way it is done in traditional music notation.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Duration chars",
|
|
||||||
`
|
|
||||||
z1('q 0 0 4 4 5 5 h4 q 3 3 2 2 1 1 h0').sound('sine').out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Fraction durations",
|
|
||||||
`
|
|
||||||
z1('1/4 0 0 4 4 5 5 2/4 4 1/4 3 3 2 2 1 1 2/4 0')
|
|
||||||
.sound('sine').out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Decimal durations",
|
|
||||||
`
|
|
||||||
z1('0.25 5 1 2 6 0.125 3 8 0.5 4 1.0 0')
|
|
||||||
.sound('sine').scale("galian").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## List of all duration characters
|
|
||||||
|
|
||||||
Ziffers maps the following duration characters to the corresponding note lengths.
|
|
||||||
|
|
||||||
| Character | Fraction | Duration | Name (US) | Name (UK) |
|
|
||||||
| ----- | ----- | ------- | ----- |
|
|
||||||
| m.. | 14/1 | 14.0 | Double dotted maxima | Double dotted Large
|
|
||||||
| m. | 12/1 | 12.0 | Dotted maxima | Dotted Large |
|
|
||||||
| m | 8/1 | 8.0 | Maxima | Large |
|
|
||||||
| l.. | 7/1 | 7.0 | Double dotted long note | Double dotted longa |
|
|
||||||
| l. | 6/1 | 6.0 | Long dotted note | Longa dotted |
|
|
||||||
| l | 4/1 | 4.0 | Long | Longa |
|
|
||||||
| d.. | 7/2 | 3.5 | Double dotted long note | Double dotted breve |
|
|
||||||
| d. | 3/3 | 3.0 | Dotted whole note | Double breve |
|
|
||||||
| n | 8/3 | 2.6666 | Triplet Long | Triplet longa |
|
|
||||||
| d | 2/1 | 2.0 | Double whole note | Breve |
|
|
||||||
| w.. | 7/4 | 1.75 | Double dotted whole note | Double dotted breve |
|
|
||||||
| w. | 3/2 | 1.5 | Dotted whole note | Dotted breve |
|
|
||||||
| k | 4/3 | 1.3333 | Triplet double whole | Triplet breve |
|
|
||||||
| w | 1/1 | 1.0 | Whole note | Semibreve |
|
|
||||||
| h.. | 7/8 | 0.875 | Double dotted half note | Double dotted minim |
|
|
||||||
| h. | 3/4 | 0.75 | Dotted half note | Dotted minim |
|
|
||||||
| c | 2/3 | 0.6666 | Triplet whole | Triplet semibreve |
|
|
||||||
| h | 1/2 | 0.5 | Half note | Minim |
|
|
||||||
| p | 1/3 | 0.3333 | Triplet half | Triplet minim |
|
|
||||||
| q.. | 7/16 | 0.4375 | Double dotted quarter note | Double dotted crotchet |
|
|
||||||
| q. | 3/8 | 0.375 | Dotted quarter note | Dotted crotchet |
|
|
||||||
| q | 1/4 | 0.25 | Quarter note | Crotchet |
|
|
||||||
| e.. | 7/32 | 0.2187 | Double dotted 8th | Double dotted quaver |
|
|
||||||
| e. | 3/16 | 0.1875 | Dotted 8th | Dotted quaver |
|
|
||||||
| g | 1/6 | 0.1666 | Triplet quarter | Triplet crochet |
|
|
||||||
| e | 1/8 | 0.125 | 8th note | Quaver |
|
|
||||||
| s.. | 7/64 | 0.1093 | Double dotted 16th | Double dotted semiquaver |
|
|
||||||
| a | 1/12 | 0.0833 | Triplet 8th | Triplet quaver |
|
|
||||||
| s. | 3/32 | 0.0937 | Dotted 16th | Dotted semiquaver |
|
|
||||||
| s | 1/16 | 0.0625 | 16th note | Semiquaver |
|
|
||||||
| t.. | 7/128 | 0.0546 | Double dotted 32th | Double dotted demisemiquaver |
|
|
||||||
| t. | 3/64 | 0.0468 | Dotted 32th | Dotted demisemiquaver |
|
|
||||||
| f | 1/24 | 0.0416 | Triplet 16th | Triplet semiquaver |
|
|
||||||
| t | 1/32 | 0.0312 | 32th note | Demisemiquaver |
|
|
||||||
| u.. | 7/256 | 0.0273 | Double dotted 64th | Double dotted hemidemisemiquaver |
|
|
||||||
| u. | 3/128 | 0.0234 | Dotted 64th | Dotted hemidemisemiquaver |
|
|
||||||
| x | 1/48 | 0.0208 | Triplet 32th | Triplet demi-semiquaver |
|
|
||||||
| u | 1/64 | 0.0156 | 64th note | Hemidemisemiquaver |
|
|
||||||
| o.. | 7/512 | 0.0136 | Double dotted 128th note | Double dotted semihemidemisemiquaver |
|
|
||||||
| y | 1/96 | 0.0104 | Triplet 64th | Triplet hemidemisemiquaver |
|
|
||||||
| o. | 3/256 | 0.0117 | Dotted 128th note | Dotted semihemidemisemiquaver |
|
|
||||||
| o | 1/128 | 0.0078 | 128th note | Semihemidemisemiquaver |
|
|
||||||
| j | 1/192 | 0.0052 | Triplet 128th | Triplet semihemidemisemiquaver |
|
|
||||||
| z | 0/1 | 0.0 | No length | No length |
|
|
||||||
|
|
||||||
## Samples
|
|
||||||
|
|
||||||
Samples can be patterned using the sample names or using <c>@</c>-operator for assigning sample to a pitch. Sample index can be changed using the <c>:</c> operator.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Sampled drums",
|
|
||||||
`
|
|
||||||
z1('bd [hh hh]').octave(-2).sound('sine').out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"More complex pattern",
|
|
||||||
`
|
|
||||||
z1('bd [hh <hh <cp cp:2>>]').octave(-2).sound('sine').out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Pitched samples",
|
|
||||||
`
|
|
||||||
z1('0@sax 3@sax 2@sax 6@sax')
|
|
||||||
.octave(-1).sound()
|
|
||||||
.adsr(0.25,0.125,0.125,0.25).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Pitched samples from list operation",
|
|
||||||
`
|
|
||||||
z1('e (0 3 -1 4)+(-1 0 2 1)@sine')
|
|
||||||
.key('G4')
|
|
||||||
.scale('110 220 320 450')
|
|
||||||
.sound().out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Pitched samples with list notation",
|
|
||||||
`
|
|
||||||
z1('e (0 2 6 3 5 -2)@sax (0 2 6 3 5 -2)@arp')
|
|
||||||
.octave(-1).sound()
|
|
||||||
.adsr(0.25,0.125,0.125,0.25).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Sample indices",
|
|
||||||
`
|
|
||||||
z1('e 1:2 4:3 6:2')
|
|
||||||
.octave(-1).sound("east").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Pitched samples with sample indices",
|
|
||||||
`
|
|
||||||
z1('_e 1@east:2 4@bd:3 6@arp:2 9@baa').sound().out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
import { type Editor } from "../../../main";
|
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
|
||||||
|
|
||||||
export const ziffers_scales = (application: Editor): string => {
|
|
||||||
const makeExample = makeExampleFactory(application);
|
|
||||||
return `
|
|
||||||
# Scales
|
|
||||||
|
|
||||||
Ziffers supports all the keys and scales. Keys can be defined by using [scientific pitch notation](https://en.wikipedia.org/wiki/Scientific_pitch_notation), for example <ic>F3</ic>. Western style (1490 scales) can be with scale names named after greek modes and extended by <a href="https://allthescales.org/intro.php" target="_blank">William Zeitler</a>. You will never really run out of scales to play with using Ziffers. Here is a short list of some possible scales that you can play with:
|
|
||||||
|
|
||||||
| Scale name | Intervals |
|
|
||||||
|------------|------------------------|
|
|
||||||
| Lydian | <ic>2221221</ic> |
|
|
||||||
| Mixolydian | <ic>2212212</ic> |
|
|
||||||
| Aeolian | <ic>2122122</ic> |
|
|
||||||
| Locrian | <ic>1221222</ic> |
|
|
||||||
| Ionian | <ic>2212221</ic> |
|
|
||||||
| Dorian | <ic>2122212</ic> |
|
|
||||||
| Phrygian | <ic>1222122</ic> |
|
|
||||||
| Soryllic | <ic>11122122</ic>|
|
|
||||||
| Modimic | <ic>412122</ic> |
|
|
||||||
| Ionalian | <ic>1312122</ic> |
|
|
||||||
| ... | And it goes on for <a href="https://ianring.com/musictheory/scales/traditions/zeitler" target="_blank">**1490** scales (See full list here)</a>. |
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"What the hell is the Modimic scale?",
|
|
||||||
`
|
|
||||||
z1("s (0,8) 0 0 (0,5) 0 0").sound('sine')
|
|
||||||
.scale('modimic').fmi(2).fmh(2).room(0.5)
|
|
||||||
.size(0.5).sustain(0.1) .delay(0.5)
|
|
||||||
.delay(0.125).delayfb(0.25).out();
|
|
||||||
beat(.5) :: snd(['kick', 'hat'].beat(.5)).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
You can also use more traditional <a href="https://ianring.com/musictheory/scales/traditions/western" target="_blank">western names</a>:
|
|
||||||
|
|
||||||
| Scale name | Intervals |
|
|
||||||
|------------|------------------------|
|
|
||||||
| Major | <ic>2212221</ic> |
|
|
||||||
| Minor | <ic>2122122</ic> |
|
|
||||||
| Minor pentatonic | <ic>32232</ic> |
|
|
||||||
| Harmonic minor | <ic>2122131</ic>|
|
|
||||||
| Harmonic major | <ic>2212131</ic>|
|
|
||||||
| Melodic minor | <ic>2122221</ic>|
|
|
||||||
| Melodic major | <ic>2212122</ic>|
|
|
||||||
| Whole | <ic>222222</ic> |
|
|
||||||
| Blues minor | <ic>321132</ic> |
|
|
||||||
| Blues major | <ic>211323</ic> |
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Let's fall back to a classic blues minor scale",
|
|
||||||
`
|
|
||||||
z1("s (0,8) 0 0 (0,5) 0 0").sound('sine')
|
|
||||||
.scale('blues minor').fmi(2).fmh(2).room(0.5)
|
|
||||||
.size(0.5).sustain(0.25).delay(0.25)
|
|
||||||
.delay(0.25).delayfb(0.5).out();
|
|
||||||
beat(1, 1.75) :: snd(['kick', 'hat'].beat(1)).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
Microtonal scales can be defined using <a href="https://www.huygens-fokker.org/scala/scl_format.html" target="_blank">Scala format</a> or by extended notation defined by Sevish <a href="https://sevish.com/scaleworkshop/" target="_blank">Scale workshop</a>, for example:
|
|
||||||
|
|
||||||
- **Young:** 106. 198. 306.2 400.1 502. 604. 697.9 806.1 898.1 1004.1 1102. 1200.
|
|
||||||
- **Wendy carlos:** 17/16 9/8 6/5 5/4 4/3 11/8 3/2 13/8 5/3 7/4 15/8 2/1
|
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Wendy Carlos, here we go!",
|
|
||||||
`
|
|
||||||
z1("s ^ (0,8) 0 0 _ (0,5) 0 0").sound('sine')
|
|
||||||
.scale('17/16 9/8 6/5 5/4 4/3 11/8 3/2 13/8 5/3 7/4 15/8 2/1').fmi(2).fmh(2).room(0.5)
|
|
||||||
.size(0.5).sustain(0.15).delay(0.1)
|
|
||||||
.delay(0.25).delayfb(0.5).out();
|
|
||||||
beat(1, 1.75) :: snd(['kick', 'hat'].beat(1)).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Werckmeister scale in Scala format",
|
|
||||||
`
|
|
||||||
const werckmeister = "107.82 203.91 311.72 401.955 503.91 605.865 701.955 809.775 900. 1007.82 1103.91 1200."
|
|
||||||
|
|
||||||
z0('s (0,3) ^ 0 3 ^ 0 (3,6) 0 _ (3,5) 0 _ 3 ^ 0 (3,5) ^ 0 6 0 _ 3 0')
|
|
||||||
.key('C3')
|
|
||||||
.scale(werckmeister)
|
|
||||||
.sound('sine')
|
|
||||||
.fmi(1 + usine(0.5) * irand(1,10))
|
|
||||||
.cutoff(100 + usine(.5) * 100)
|
|
||||||
.out()
|
|
||||||
|
|
||||||
onbeat(1,1.5,3) :: sound('bd').cutoff(100 + usine(.25) * 1000).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
import { type Editor } from "../../../main";
|
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
|
||||||
|
|
||||||
export const ziffers_syncing = (application: Editor): string => {
|
|
||||||
const makeExample = makeExampleFactory(application);
|
|
||||||
return `
|
|
||||||
# Synchronization
|
|
||||||
|
|
||||||
Ziffers patterns can be synced to any event by using **cue**, **sync**, **wait** and **listen** methods.
|
|
||||||
|
|
||||||
## Sync with cue
|
|
||||||
|
|
||||||
The <ic>cue(name: string)</ic> methods can be used to send cue messages for ziffers patterns. The <ic>wait(name: string)</ic> method is used to wait for the cue message to be received before starting the next cycle.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Sending cue from event and wait",
|
|
||||||
`
|
|
||||||
beat(4.0) :: sound("bd").cue("foo").out()
|
|
||||||
z1("e 0 3 2 1 2 1").wait("foo").sound("sine").out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
The <ic>sync(name: string)</ic> method is used to sync the ziffers pattern to the cue message.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Delayed start using individual cue",
|
|
||||||
`
|
|
||||||
register('christmas', n=>n.room(0.25).size(2).speed([0.5, 0.25, 0.125])
|
|
||||||
.delay(0.5).delayt(1/3).delayfb(0.5).bpf(200+usine(1/3)*500).out())
|
|
||||||
onbar(1) :: cue("bar")
|
|
||||||
onbar(2) :: cue('baz')
|
|
||||||
z1("<0.25 0.125> 0 4 2 -2").sync("bar").sound("ST40:25").christmas()
|
|
||||||
z2("<0.25 0.125> 0 6 4 -4").sync("baz").sound("ST40:25").christmas()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
The <ic>listen(name: string)</ic> method can be used to listen for the cue messages and play one event from the pattern for every cue.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Delayed start using individual cue",
|
|
||||||
`
|
|
||||||
beat(1.0) :: cue("boom")
|
|
||||||
|
|
||||||
z1("bd <hh ho>").listen("boom")
|
|
||||||
.sound().out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
## Sync with beat
|
|
||||||
|
|
||||||
Patterns can also be synced using beat and setting the note length of events to zero using **z** duration character or <ic>noteLength(number)</ic> method.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Syncing with beat",
|
|
||||||
`
|
|
||||||
beat(.5) :: z1("<bd sn:3> hh:5").noteLength(0)
|
|
||||||
.sound().out()
|
|
||||||
|
|
||||||
beat([2.0,0.5,1.5].bar(1)) ::
|
|
||||||
z2("z _ 0 0 <2 1>").sound("bass:5")
|
|
||||||
.dur(0.5).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Automatic sync for ziffers patterns
|
|
||||||
|
|
||||||
Numbered methods **(z0-z16)** are synced automatically to **z0** method if it exsists. Syncing can also be done manually by using either the <ic>wait</ic> method, which will always wait for the current pattern to finish before starting the next cycle, or the <ic>sync</ic> method will only wait for the synced pattern to finish on the first time.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Automatic sync to z0",
|
|
||||||
`
|
|
||||||
z0('w 0 8').sound('peri').out()
|
|
||||||
z1('e 0 4 5 9').sound('bell').out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Syncing patterns to each other
|
|
||||||
|
|
||||||
Patterns can also be synced together using the <ic>sync(name: Function)</ic> method. This will sync the pattern to the start of the referenced pattern. Copy this example and first run z1 and then z2 at random position.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Sync on first run",
|
|
||||||
`
|
|
||||||
z1('w __ 0 5 9 3').sound('bin').out()
|
|
||||||
z2('q __ 4 2 e 6 3 q 6').sync(z1).sound('east').out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Sync with wait
|
|
||||||
|
|
||||||
Syncing can also be done using <ic>wait(name: Function)</ic> method. This will wait for the referenced pattern to finish before starting the next cycle.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Sync with wait",
|
|
||||||
`
|
|
||||||
z1('w 0 5').sound('pluck').release(0.1).sustain(0.25).out()
|
|
||||||
z2('q 6 3').wait(z1).sound('sine').release(0.16).sustain(0.55).out()
|
|
||||||
`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,283 +0,0 @@
|
|||||||
import { type Editor } from "../../../main";
|
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
|
||||||
|
|
||||||
export const ziffers_tonnetz = (application: Editor): string => {
|
|
||||||
const makeExample = makeExampleFactory(application);
|
|
||||||
return `
|
|
||||||
# Tonnetz
|
|
||||||
|
|
||||||
The Riemannian Tonnetz is a geometric representation of tonal relationships for applying mathematical operations to analyze harmonic and melodic relationships in tonal music. Ziffers includes an implementation of live coding tonnetz developed together with <a href="https://github.com/edelveart/TypeScriptTonnetz" target="_blank">Edgar Delgado Vega</a>. Live coding tonnetz implementation **combines 67 transformations** to **new explorative notation** that includes all of the traditional triad transformations (PLR functions), extended PLR* transformations, film music transformations and seventh transformations (PLRQ, PLRQ*, ST).
|
|
||||||
|
|
||||||
Tonnetz can be visualized as an <a href="https://numeric-tonnetz-ziffers-6f7c9299bb4e1292f6891b9aceba16d81409236.gitlab.io/" target="_blank">numeric lattice</a> that represents the twelve pitch classes of the chromatic scale. The numeric visualization is a fork of <a href="https://hal.science/hal-03250334/" target="_blank">Web tonnetz</a> by Corentin Guichaou et al. (2021). The lattice can be arranged into multiple tonal pitch spaces which are all supported in Ziffers implementation.
|
|
||||||
|
|
||||||
In addition, we have included common graphs and cycles in Neo-Riemmanian theory: HexaCycles (<ic>pl</ic>), OctaCycles (<ic>pr</ic>), Enneacycles (seventh chords), Weitzmann Regions (triad chords), Boretz Regions (triad chords) and OctaTowers (tetrachords). You can explore each of these graphs in great generality over different Tonnetz.
|
|
||||||
|
|
||||||
## Explorative notation
|
|
||||||
|
|
||||||
Ziffers implements explorative live coding notation that indexes all of the transformations for triad and seventh chords. For more detailed transformations see Triad and Tetra chapters.
|
|
||||||
|
|
||||||
Transformations are applied by grouping operations into a **parameter string** which applies the **transformations** to the chord. The parameter string is a **sequence** of transformations **separated by whitespace**, for example <ic>plr rl2 p3lr</ic>. The numbers after the characters defines the **index for the operation**, as there can be multiple operations of the same type.
|
|
||||||
|
|
||||||
Indexed transformations <ic>[plrfsntq][1-9]*</ic>:
|
|
||||||
|
|
||||||
* p: Parallel
|
|
||||||
* l: Leading-tone exchange
|
|
||||||
* r: Relative
|
|
||||||
* f: Film transformation - Far-fifth
|
|
||||||
* n: Film transformation - Near-fifth (Nebenverdwandt) or PLRQ* transformation
|
|
||||||
* s: Film transformation - Slide
|
|
||||||
* h: Film transformation - Hexatonic Pole
|
|
||||||
* t: Film transformation - Tritone transposition
|
|
||||||
* q: PLR* transformation or PLRQ* transformation
|
|
||||||
|
|
||||||
### Examples:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Explorative transformations with roman chords",
|
|
||||||
`
|
|
||||||
z1('i i7').tonnetz("p1 p2 plr2")
|
|
||||||
.sound('wt_stereo')
|
|
||||||
.adsr(0, .1, 0, 0)
|
|
||||||
.out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Arpeggiated explorative transformations",
|
|
||||||
`
|
|
||||||
z1("i7")
|
|
||||||
.tonnetz("p l2 r3 rp4l")
|
|
||||||
.arpeggio("e _ 0 1 s ^ 0 2 1 3 h _ 012 s ^ 2 1")
|
|
||||||
.sound("sine")
|
|
||||||
.out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Arpeggios and note lengths with parameters",
|
|
||||||
`
|
|
||||||
z1("024")
|
|
||||||
.tonnetz("p lr rp lrp")
|
|
||||||
.arpeggio(0,2,1,2)
|
|
||||||
.noteLength(1/16,1/8)
|
|
||||||
.sound("sine")
|
|
||||||
.out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Triad transformations
|
|
||||||
|
|
||||||
Triad transformations can be defined explicitly using the <ic>triadTonnetz(transformation: string, tonnetz: number[])</ic> method. This method will only apply specific transformations to triad chords.
|
|
||||||
|
|
||||||
In the table below, we write the transformations types available for triads followed by the **transposition in semitones (+/-)** that we must perform to the **root of the chord**: <ic>0,4,3,7,5,1,8,6</ic>.
|
|
||||||
|
|
||||||
Second, you should know that the numbers next to the names of the transformations represent the **chord types to be exchanged**: <ic>1 = major, 2 = minor, 3 = diminished, 4 = augmented</ic>.
|
|
||||||
|
|
||||||
In fact, the functions <ic>p,l,r</ic> and the so-called [**film music transformations**](https://alpof.wordpress.com/2021/10/09/neo-riemannian-examples-in-music/), could have the numbers <ic>p12, l12, r12, f12 </ic> and so on, since they transform major and minor chords with their respective root transpositions. It must be clarified that the <ic>t6</ic> function is the only one among all that maintains the same type of chord.
|
|
||||||
|
|
||||||
Therefore, you will see that paying attention to the examples will allow you to infer whether you should **raise or lower the root** depending on the **type of chord**.
|
|
||||||
|
|
||||||
| Function | Function type | Root transposition | Example |
|
|
||||||
| :------: | :-------------------------------: | :----------------: | :-----------: |
|
|
||||||
| p | Parallel | 0 | C <-> Cm |
|
|
||||||
| l | Leading-tone | 4 | C <-> Em |
|
|
||||||
| r | Relative | 3 | C <-> Am |
|
|
||||||
| f | Film music: Far-fifth | 7 | C <-> Gm |
|
|
||||||
| n | Film music: Near-fifth | 5 | C <-> Fm |
|
|
||||||
| s | Film music: Slide | 1 | C <-> C#m |
|
|
||||||
| h | Film music: Hexatonic pole | 8 | C <-> G#m |
|
|
||||||
| t6 | Film music: Tritone Transposition | 6 | C <-> F# |
|
|
||||||
| p32 | Parallel | 0 | Cdim <-> Cm |
|
|
||||||
| p41 | Parallel | 0 | Caug <-> C |
|
|
||||||
| lt13 | Leading-tone | 4 | C <-> Edim |
|
|
||||||
| l41 | Leading-tone | 4 | Caug <-> Edim |
|
|
||||||
| l14 | Leading-tone | 4 | C <-> Eaug |
|
|
||||||
| rt23 | Relative | 3 | Cm <-> Adim |
|
|
||||||
| rt42 | Relative | 3 | Caug <-> Am |
|
|
||||||
| q13 | PLR* | 1 | C <-> C#dim |
|
|
||||||
| q42 | PLR* | 1 | Caug <-> C#m |
|
|
||||||
| n42 | PLR* | 5 | Caug <-> Fm |
|
|
||||||
|
|
||||||
* Remark A: We add <ic>t</ic> to <ic>l.13</ic>, <ic>r.23</ic>, <ic>r.42</ic> because we have similar syntax for sevenths transformations <ic>l13</ic>, <ic>r23</ic> and <ic>r42</ic>, although the meaning of the numbers (chord types) is different. See in the next section.
|
|
||||||
* Remark B: For those curious about mathematics, what we have implemented at Ziffers is the group called **PLR\*** [(Cannas, 2018, pp. 93-100)](https://publication-theses.unistra.fr/public/theses_doctorat/2018/CANNAS_Sonia_2018_ED269.pdf).
|
|
||||||
|
|
||||||
### Examples:
|
|
||||||
${makeExample(
|
|
||||||
"Synthetic 'Morton'",
|
|
||||||
`
|
|
||||||
z0('3/4 0 _ q 6 h 4 3 w 2 0 3/4 ^^ 0 _q 6 h 4 3 3/4 2 5/4 0 w r')
|
|
||||||
.scale("minor").sound('sawtooth').key("A")
|
|
||||||
.room(0.9).size(9).phaser(0.25).phaserDepth(0.8)
|
|
||||||
.vib(4).vibmod(0.15).out()
|
|
||||||
|
|
||||||
z1('w 904')
|
|
||||||
.scale("chromatic")
|
|
||||||
.tonnetz('o f l l o f l l o')
|
|
||||||
.sound('sine').adsr(0.1, 1, 1, 1.9).out()
|
|
||||||
|
|
||||||
z2('w 904')
|
|
||||||
.scale("chromatic")
|
|
||||||
.tonnetz('o f l l o f l l o')
|
|
||||||
.arpeggio('s 0 2 1 0 1 2 1 0 2 1 0 1 2 0 1 0')
|
|
||||||
.sound('sine').pan(rand(1, 0)).adsr(0, 0.125, 0.15, 0.25).out()
|
|
||||||
|
|
||||||
z3('e __ 4 s 0 e 1 2 s')
|
|
||||||
.sound('hat').delay(0.5).delayfb(0.35).out()`,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Different Tonnetz
|
|
||||||
|
|
||||||
At Ziffers we have strived to have fun and inspire you by exploring new sounds that Neo-Riemannian functions can offer you by changing only one parameter: The Tonnetz in which your chords move. By default, the Tonnetz has this form: <ic>[3, 4, 5]</ic>. Let's try an example as it will clarify this idea for us.
|
|
||||||
|
|
||||||
The <ic>Cm</ic> chord has the tone classes: <ic>037</ic>. Notice that the distance between the third of the chord and the root of the chord is <ic>3</ic> <ic>(3-0)</ic>. In turn, the distance of the fifth from the third is <ic>4</ic> semitones <ic>(7-3)</ic>. Finally, the distance left to get from the fifth to the root is <ic>5</ic> <ic>(7+5=0)</ic>. These distances are known as **intervalic structure**. In this regard, the array <ic>[x = 3, y = 4, z = 5]</ic> of a Tonnetz tells us the intervallic structure of the chords to which we apply the Neo-Riemannian functions.
|
|
||||||
|
|
||||||
:warning: To have a geometric intuition of the chords that we are going to describe, we suggest you see the <a href="https://numeric-tonnetz-ziffers-6f7c9299bb4e1292f6891b9aceba16d81409236.gitlab.io/" target="_blank">numerical Tonnetz.</a>
|
|
||||||
|
|
||||||
In the next three Tonnetz we consider that we go from a minor chord to a major one by inversion (we change <ic>x</ic> and <ic>y</ic>).
|
|
||||||
|
|
||||||
* For the Tonnetz <ic>[3, 4, 5]</ic> we have minor chords <ic>037</ic> and major chords <ic>047</ic>
|
|
||||||
* For a Tonnetz <ic>[2, 3, 7]</ic> we have the "minor" chords <ic>025</ic> and the "major" chords <ic>035</ic>
|
|
||||||
* For a Tonnetz <ic>[1, 4, 7]</ic> we have the "minor" chords <ic>015</ic> and the "major" chords <ic>045</ic>
|
|
||||||
|
|
||||||
Are those all the Tonnetz? In fact, there are <ic>12</ic> spaces that comply with symmetries by **transposition and inversion**:
|
|
||||||
|
|
||||||
<ic>[3, 4, 5], [1, 1, 10], [1, 2, 9], [1, 3, 8], [1, 4, 7], [1, 5, 6], [ 2, 3, 7], [ 2, 5, 5]</ic>
|
|
||||||
|
|
||||||
<ic>[2, 4, 6], [2, 2, 8], [3, 3, 6], [4, 4, 4]</ic>
|
|
||||||
|
|
||||||
What do augmented chords or seventh chords sound like on a Tonnetz <ic>[1,5,6]</ic>? It is up to you to **explore all the transformations in different spaces**.
|
|
||||||
|
|
||||||
What if I want to place another type of Tonnetz that is not on the list? No problem, everyone is invited to the party.
|
|
||||||
|
|
||||||
* Remark C: If you want to know more about the topology and mathematics behind Tonnetz, you can refer to [Bigo (2013)](https://theses.hal.science/tel-01326827).
|
|
||||||
|
|
||||||
## Tetra transformations
|
|
||||||
|
|
||||||
Did you want to experiment with more functions? At Ziffers we have brought you Neo-Riemannian functions for seventh chords. The possibilities of sound exploration increase considerably, even more so if you **include different Tonnetz**.
|
|
||||||
|
|
||||||
Tetra transformations can be applied to seventh chords using the <ic>tetraTonnetz(transformation: string, tonnetz: number[])</ic> method. This method will apply specific transformations to certain type of chords. If the **chord is not the correct type**, the **transformation will not be applied**.
|
|
||||||
|
|
||||||
:warning: If you are here without having read the **triad chords transformations section**, we highly suggest you skip to it. The ideas and notation shown in this section are nothing more than an extension of what was developed above.
|
|
||||||
|
|
||||||
First, here we will deal with **9 interchangeable chord types** to which we will assign a number:
|
|
||||||
|
|
||||||
<ic>1 = 7, 2 = m7, 3 = hdim7, 4 = maj7, 5 = dim7, 6 = minMaj7, 7 = maj7#5, 8 = 7#5, 9 = 7b5</ic>.
|
|
||||||
|
|
||||||
Second, the **transpositions** that carry out the functions <ic>p = 0, l = 4, r = 3, q = 1, n = 5</ic>, raise or lower the **root of the chord** in semitones in equal measure. However, there are two new types of functions whose transpositions are the following: <ic>rr = 6</ic> and <ic>qq = 2</ic>.
|
|
||||||
|
|
||||||
You are ready, these have been all the requirements. Now a couple of examples will be enough for you to know how these functions operate.
|
|
||||||
|
|
||||||
* The <ic>p14</ic> function **does not move the root (0 semitones)** and changes a dominant 7th chord to a major 7th chord. For example: <ic>C7 <-> Cmaj7</ic>.
|
|
||||||
* The <ic>rr39</ic> function **moves the root 6 semitones** and swaps an hdim7 chord for a 7b5 chord. For example: <ic>Cm7b5 <-> F#7b5</ic>.
|
|
||||||
|
|
||||||
So that you can incorporate this new musical machinery into your game, all the possible transformations according to the type of seventh chord are listed below. You already know what each one will do.
|
|
||||||
|
|
||||||
* Remark D: For those curious about the mathematics behind it, we have implemented a group called **PLRQ** and another group called **PLRQ\*** extended [(Cannas, 2018, pp. 71-92)](https://publication-theses.unistra.fr/public/theses_doctorat/2018/CANNAS_Sonia_2018_ED269.pdf).
|
|
||||||
|
|
||||||
| Chord type | P functions | L functions | R functions | Q functions | N functions |
|
|
||||||
| :--------: | :----------------: | :-----------: | :----------------------------: | :---------: | :---------: |
|
|
||||||
| 7 | p12, p14, p18, p19 | l13, l15, l71 | r12, rr19 | q15, qq51 | n51 |
|
|
||||||
| m7 | p12, p23, p26 | l42 | r12, r23, r42 | q62 | |
|
|
||||||
| hdim7 | p23, p35, p39 | l13 | r23, r35, r53, r63, rr35, rr39 | q43, qq38 | |
|
|
||||||
| maj7 | p14, p47, p64 | l42 | r42 | q43 | |
|
|
||||||
| dim7 | p35 | l15 | r35, r53 | q15, qq51 | n51 |
|
|
||||||
| minMaj7 | p26, p64 | | r63, r76, r86 | q62, q76 | |
|
|
||||||
| maj7#5 | p47, p87 | l71 | r76 | q76 | |
|
|
||||||
| dom7#5 | p18, p87, p98 | l89 | r86, rr98 | qq38, qq98 | |
|
|
||||||
| dom7b5 | p19, p39, p98 | l89 | rr19, rr39, rr98 | qq98 | |
|
|
||||||
|
|
||||||
### Examples
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Transform seventh chord from chromatic scale",
|
|
||||||
`
|
|
||||||
z1("1.0 047{10}")
|
|
||||||
.scale('chromatic')
|
|
||||||
.tetraTonnetz("o p18 q15 l13 n51 p19 q15")
|
|
||||||
.sound("sawtooth")
|
|
||||||
.cutoff(500 + usine(1/8) * 2000)
|
|
||||||
.adsr(.5,0.05,0.25,0.5)
|
|
||||||
.dur(2.0)
|
|
||||||
.out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Cyclic methods
|
|
||||||
|
|
||||||
In addition to the transformations, Ziffers implements cyclic methods that can be used to cycle through the tonnetz space. Cyclic methods turns individual pitch classes to chords using the tonnetz. The cyclic methods are:
|
|
||||||
|
|
||||||
* <ic>hexaCycle(tonnetz: number[], repeats: number = 3)</ic>: Cycles through chords in the hexa cycle
|
|
||||||
* <ic>octaCycle(tonnetz: number[], repeats: number = 4)</ic>: Cycles through chords in the octa cycle
|
|
||||||
* <ic>enneaCycle(tonnetz: number[], repeats: number = 3)</ic>: Cycles through chords in the ennea cycle
|
|
||||||
|
|
||||||
HexaCycles are sequences of major and minor triads generated by the <ic>p</ic> and <ic>l</ic> transformations . Let's take the following example starting with a <ic>C</ic> chord: <ic>C -> Cm -> Ab -> Abm -> E -> Em</ic>. You can start on the chord of your choice.
|
|
||||||
|
|
||||||
OctaCycles are sequences of major and minor triads generated using <ic>p</ic> and <ic>r</ic> transformations. Starting at <ic>C</ic>, we have the following sequence: <ic>C -> Cm -> Eb -> Ebm -> F# -> F#m -> A -> Am</ic>.
|
|
||||||
|
|
||||||
Unlike HexaCycles and OctaCycles, EnneaCycles are four-note chord sequences. Considering the functions implemented for tetrachords in Ziffers, we can interpret these sequences as generated by <ic>p12, p23, and l13</ic> transformations repeatedly: <ic>C7 -> Cm7 -> Cm7b5 -> Ab7 -> Abm7 -> Abm7b5 -> E7 -> Em7 -> Em7b5</ic>.
|
|
||||||
|
|
||||||
### Examples:
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Arpeggio with ennea cycle",
|
|
||||||
`
|
|
||||||
z1("0 2 -1 3")
|
|
||||||
.enneaCycle()
|
|
||||||
.arpeggio(0,2,1)
|
|
||||||
.scale("modimic")
|
|
||||||
.noteLength(0.15,0.05,0.05,0.25)
|
|
||||||
.sound("sine")
|
|
||||||
.adsr(0.1,0.15,0.25,0.1)
|
|
||||||
.out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"Variating arpeggios",
|
|
||||||
`
|
|
||||||
z1("s 0 3 2 1")
|
|
||||||
.octaCycle()
|
|
||||||
.arpeggio([0,[0,2],[1,0],[0,1,2]].beat(0.15))
|
|
||||||
.sound("triangle")
|
|
||||||
.adsr(0.1,0.1,0.13,0.15)
|
|
||||||
.out()`,
|
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
## Cycles with vitamins and repetitions
|
|
||||||
|
|
||||||
Finally, cyclic methods in Ziffers can also be vitaminized with doses of different Tonnetz. However, this opens the way to different behavior with cycles.
|
|
||||||
|
|
||||||
We have the Tonnetz <ic>[2, 3, 7]</ic>, so <ic>hexaCycle([2, 3, 7])</ic>. The generated chords we hear are:
|
|
||||||
|
|
||||||
<ic>035 -> 025 -> 902 -> 9{11}2 -> 69{11} -> 68{11} </ic>
|
|
||||||
|
|
||||||
Apparently, everything operates as we expect: six chords and we return to the first. However, here comes the unexpected and perhaps somewhat obscure question:
|
|
||||||
|
|
||||||
* If we look at the graphs of the [numeric Tonnetz](https://numeric-tonnetz-ziffers-6f7c9299bb4e1292f6891b9aceba16d81409236.gitlab.io/), our hexaCycle over <ic>[2, 3, 7]</ic> which starts with the chord <ic>035</ic> goes through all the intermediate chords generated by <ic>p</ic> and <ic>l</ic> functions until reaching <ic>035</ic> again?
|
|
||||||
|
|
||||||
As you can verify it manually, you will see that this is not the case. Upon reaching the <ic>68{11} </ic> chord, the cycle makes a jump of two chords (<ic>368 358</ic>) towards the <ic>035</ic> chord. This does not happen with the cycles in the Tonnetz <ic>[3, 4, 5]</ic>, since all the intermediate chords are played there.
|
|
||||||
|
|
||||||
To play the chords without jumps in our hexaCycle (although the prefix "hexa" would no longer have a precise meaning), we add a number of repetitions.
|
|
||||||
|
|
||||||
${makeExample(
|
|
||||||
"HexaCycles with vitamins",
|
|
||||||
`
|
|
||||||
z1("0")
|
|
||||||
.scale("chromatic")
|
|
||||||
.hexaCycle([2,3,7],4)
|
|
||||||
.sound("sine").out()
|
|
||||||
`,
|
|
||||||
true
|
|
||||||
)}
|
|
||||||
|
|
||||||
By default hexaCycles and enneaCycles have <ic>3</ic> repetitions, while octaCycles has <ic>4</ic> repetitions. We have specified a **chromatic scale** although this is the **default scale**. Try changing the **repeats and scales** when playing with different Tonnetz.
|
|
||||||
|
|
||||||
* Remark E: These cycles in Tonnetz <ic>[3, 4, 5]</ic> are implemented based on the work of [Douthett & Steinbach (1998, pp. 245-247)](https://www.jstor.org/stable/843877)
|
|
||||||
|
|
||||||
## :construction: Regions and OctaTowers
|
|
||||||
|
|
||||||
TBD: Implement and write about Weitzmann Regions, Boretz Regions, OctaTowers
|
|
||||||
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../main";
|
import { type Editor } from "../main";
|
||||||
import { makeExampleFactory } from "../../Documentation";
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
export const probabilities = (application: Editor): string => {
|
export const probabilities = (application: Editor): string => {
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
@ -13,12 +13,12 @@ There are some simple functions to play with probabilities.
|
|||||||
- <ic>irand(min: number, max:number)</ic>: returns a random integer between <ic>min</ic> and <ic>max</ic>. Shorthands <ic>ir()</ic> or <ic>rI()</ic>.
|
- <ic>irand(min: number, max:number)</ic>: returns a random integer between <ic>min</ic> and <ic>max</ic>. Shorthands <ic>ir()</ic> or <ic>rI()</ic>.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Bleep bloop, what were you expecting?",
|
"Bleep bloop, what were you expecting?",
|
||||||
`
|
`
|
||||||
rhythm(0.125, 10, 16) :: sound('sid').n(4).note(50 + irand(50, 62) % 8).out()
|
rhythm(0.125, 10, 16) :: sound('sid').n(4).note(50 + irand(50, 62) % 8).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
- <ic>prob(p: number)</ic>: return <ic>true</ic> _p_% of time, <ic>false</ic> in other cases.
|
- <ic>prob(p: number)</ic>: return <ic>true</ic> _p_% of time, <ic>false</ic> in other cases.
|
||||||
@ -26,14 +26,14 @@ rhythm(0.125, 10, 16) :: sound('sid').n(4).note(50 + irand(50, 62) % 8).out()
|
|||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"The Teletype experience!",
|
"The Teletype experience!",
|
||||||
`
|
`
|
||||||
prob(50) :: script(1);
|
prob(50) :: script(1);
|
||||||
prob(60) :: script(2);
|
prob(60) :: script(2);
|
||||||
prob(80) :: script(toss() ? script(3) : script(4))
|
prob(80) :: script(toss() ? script(3) : script(4))
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>seed(val: number|string)</ic>: sets the seed of the random number generator. You can use a number or a string. The same seed will always return the same sequence of random numbers.
|
- <ic>seed(val: number|string)</ic>: sets the seed of the random number generator. You can use a number or a string. The same seed will always return the same sequence of random numbers.
|
||||||
|
|
||||||
@ -58,28 +58,28 @@ By default chance operators will be evaluated 48 times within a beat. You can ch
|
|||||||
Examples:
|
Examples:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using chance operators",
|
"Using chance operators",
|
||||||
`
|
`
|
||||||
rarely() :: sound('hh').out(); // Rarely 48 times is still a lot
|
rarely() :: sound('hh').out(); // Rarely 48 times is still a lot
|
||||||
rarely(4) :: sound('bd').out(); // Rarely in 4 beats is bit less
|
rarely(4) :: sound('bd').out(); // Rarely in 4 beats is bit less
|
||||||
rarely(8) :: sound('east').out(); // Rarely in 8 beats is even less
|
rarely(8) :: sound('east').out(); // Rarely in 8 beats is even less
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using chance with other operators",
|
"Using chance with other operators",
|
||||||
`
|
`
|
||||||
frequently() :: beat(1) :: sound('kick').out();
|
frequently() :: beat(1) :: sound('kick').out();
|
||||||
often() :: beat(0.5) :: sound('hh').out();
|
often() :: beat(0.5) :: sound('hh').out();
|
||||||
sometimes() :: onbeat(1,3) :: sound('snare').out();
|
sometimes() :: onbeat(1,3) :: sound('snare').out();
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using chance with chaining",
|
"Using chance with chaining",
|
||||||
`
|
`
|
||||||
beat(0.5) && sound("bd")
|
beat(0.5) && sound("bd")
|
||||||
.freq(100)
|
.freq(100)
|
||||||
.sometimes(s=>s.crush(2.5))
|
.sometimes(s=>s.crush(2.5))
|
||||||
@ -91,7 +91,8 @@ ${makeExample(
|
|||||||
.almostNever(n=>n.freq(400))
|
.almostNever(n=>n.freq(400))
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
`;
|
`
|
||||||
};
|
}
|
||||||
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
|
|
||||||
export const loading_samples = (application: Editor): string => {
|
export const loading_samples = (application: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -12,36 +12,36 @@ Topos is exposing the <ic>samples</ic> function that you can use to load your ow
|
|||||||
Samples are loaded on-the-fly from the web. Topos is a web application living in the browser. It is running in a sandboxed environment. Thus, it cannot have access to the files stored on your local system. Loading samples requires building a _map_ of the audio files, where a name is associated to a specific file:
|
Samples are loaded on-the-fly from the web. Topos is a web application living in the browser. It is running in a sandboxed environment. Thus, it cannot have access to the files stored on your local system. Loading samples requires building a _map_ of the audio files, where a name is associated to a specific file:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Loading samples from a map",
|
"Loading samples from a map",
|
||||||
`samples({
|
`samples({
|
||||||
bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav'],
|
bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav'],
|
||||||
sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
|
sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
|
||||||
hh: ['hh27/000_hh27closedhh.wav','hh/000_hh3closedhh.wav'],
|
hh: ['hh27/000_hh27closedhh.wav','hh/000_hh3closedhh.wav'],
|
||||||
}, 'github:tidalcycles/Dirt-Samples/master/');`,
|
}, 'github:tidalcycles/Dirt-Samples/master/');`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
This example is loading two samples from each folder declared in the original repository (in the <ic>strudel.json</ic> file). You can then play with them using the syntax you are already used to:
|
This example is loading two samples from each folder declared in the original repository (in the <ic>strudel.json</ic> file). You can then play with them using the syntax you are already used to:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Playing with the loaded samples",
|
"Playing with the loaded samples",
|
||||||
`rhythm(.5, 5, 8)::sound('bd').n(ir(1,2)).end(1).out()
|
`rhythm(.5, 5, 8)::sound('bd').n(ir(1,2)).end(1).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
Internally, Topos is loading samples using a different technique where sample maps are directly taken from the previously mentioned <ic>strudel.json</ic> file that lives in each repository:
|
Internally, Topos is loading samples using a different technique where sample maps are directly taken from the previously mentioned <ic>strudel.json</ic> file that lives in each repository:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"This is how Topos is loading its own samples",
|
"This is how Topos is loading its own samples",
|
||||||
`
|
`
|
||||||
// Visit the concerned repos and search for 'strudel.json'
|
// Visit the concerned repos and search for 'strudel.json'
|
||||||
samples("github:tidalcycles/Dirt-Samples/master");
|
samples("github:tidalcycles/Dirt-Samples/master");
|
||||||
samples("github:Bubobubobubobubo/Dough-Samples/main");
|
samples("github:Bubobubobubobubo/Dough-Samples/main");
|
||||||
samples("github:Bubobubobubobubo/Dough-Amiga/main");
|
samples("github:Bubobubobubobubo/Dough-Amiga/main");
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
To learn more about the audio sample loading mechanism, please refer to [this page](https://strudel.tidalcycles.org/learn/samples) written by Felix Roos who has implemented the sample loading mechanism. The API is absolutely identic in Topos!
|
To learn more about the audio sample loading mechanism, please refer to [this page](https://strudel.tidalcycles.org/learn/samples) written by Felix Roos who has implemented the sample loading mechanism. The API is absolutely identic in Topos!
|
||||||
|
|
||||||
@ -50,17 +50,16 @@ To learn more about the audio sample loading mechanism, please refer to [this pa
|
|||||||
You can load samples coming from [Freesound](https://freesound.org/) using the [Shabda](https://shabda.ndre.gr/) API. To do so, study the following example:
|
You can load samples coming from [Freesound](https://freesound.org/) using the [Shabda](https://shabda.ndre.gr/) API. To do so, study the following example:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Loading samples from shabda",
|
"Loading samples from shabda",
|
||||||
`
|
`
|
||||||
// Prepend the sample you want with 'shabda:'
|
// Prepend the sample you want with 'shabda:'
|
||||||
samples("shabda:ocean")
|
samples("shabda:ocean")
|
||||||
|
|
||||||
// Use the sound without 'shabda:'
|
// Use the sound without 'shabda:'
|
||||||
beat(1)::sound('ocean').clip(1).out()
|
beat(1)::sound('ocean').clip(1).out()
|
||||||
`,
|
`, true
|
||||||
true,
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
You can also use the <ic>.n</ic> attribute like usual to load a different sample.
|
You can also use the <ic>.n</ic> attribute like usual to load a different sample.
|
||||||
`;
|
`
|
||||||
};
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
|
|
||||||
export const sample_banks = (application: Editor): string => {
|
export const sample_banks = (application: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -9,5 +9,5 @@ export const sample_banks = (application: Editor): string => {
|
|||||||
There is a <ic>bank</ic> attribute that can help you to sort audio samples from large collections.
|
There is a <ic>bank</ic> attribute that can help you to sort audio samples from large collections.
|
||||||
|
|
||||||
**AJKPercusyn**, **AkaiLinn**, **AkaiMPC60**, **AkaiXR10**, **AlesisHR16**, **AlesisSR16**, **BossDR110**, **BossDR220**, **BossDR55**, **BossDR550**, **BossDR660**, **CasioRZ1**, **CasioSK1**, **CasioVL1**, **DoepferMS404**, **EmuDrumulator**, **EmuModular**, **EmuSP12**, **KorgDDM110**, **KorgKPR77**, **KorgKR55**, **KorgKRZ**, **KorgM1**, **KorgMinipops**, **KorgPoly800**, **KorgT3**, **Linn9000**, **LinnDrum**, **LinnLM1**, **LinnLM2**, **MFB512**, **MPC1000**, **MoogConcertMateMG1**, **OberheimDMX**, **RhodesPolaris**, **RhythmAce**, **RolandCompurhythm1000**, **RolandCompurhythm78**, **RolandCompurhythm8000**, **RolandD110**, **RolandD70**, **RolandDDR30**, **RolandJD990**, **RolandMC202**, **RolandMC303**, **RolandMT32**, **RolandR8**, **RolandS50**, **RolandSH09**, **RolandSystem100**, **RolandTR505**, **RolandTR606**, **RolandTR626**, **RolandTR707**, **RolandTR727**, **RolandTR808**, **RolandTR909**, **SakataDPM48**, **SequentialCircuitsDrumtracks**, **SequentialCircuitsTom**, **SergeModular**, **SimmonsSDS400**, **SimmonsSDS5**, **SoundmastersR88**, **UnivoxMicroRhythmer12**, **ViscoSpaceDrum**, **XdrumLM8953**, **YamahaRM50**, **YamahaRX21**, **YamahaRX5**, **YamahaRY30**, **YamahaTG33**.
|
**AJKPercusyn**, **AkaiLinn**, **AkaiMPC60**, **AkaiXR10**, **AlesisHR16**, **AlesisSR16**, **BossDR110**, **BossDR220**, **BossDR55**, **BossDR550**, **BossDR660**, **CasioRZ1**, **CasioSK1**, **CasioVL1**, **DoepferMS404**, **EmuDrumulator**, **EmuModular**, **EmuSP12**, **KorgDDM110**, **KorgKPR77**, **KorgKR55**, **KorgKRZ**, **KorgM1**, **KorgMinipops**, **KorgPoly800**, **KorgT3**, **Linn9000**, **LinnDrum**, **LinnLM1**, **LinnLM2**, **MFB512**, **MPC1000**, **MoogConcertMateMG1**, **OberheimDMX**, **RhodesPolaris**, **RhythmAce**, **RolandCompurhythm1000**, **RolandCompurhythm78**, **RolandCompurhythm8000**, **RolandD110**, **RolandD70**, **RolandDDR30**, **RolandJD990**, **RolandMC202**, **RolandMC303**, **RolandMT32**, **RolandR8**, **RolandS50**, **RolandSH09**, **RolandSystem100**, **RolandTR505**, **RolandTR606**, **RolandTR626**, **RolandTR707**, **RolandTR727**, **RolandTR808**, **RolandTR909**, **SakataDPM48**, **SequentialCircuitsDrumtracks**, **SequentialCircuitsTom**, **SergeModular**, **SimmonsSDS400**, **SimmonsSDS5**, **SoundmastersR88**, **UnivoxMicroRhythmer12**, **ViscoSpaceDrum**, **XdrumLM8953**, **YamahaRM50**, **YamahaRX21**, **YamahaRX5**, **YamahaRY30**, **YamahaTG33**.
|
||||||
`;
|
`
|
||||||
};
|
}
|
||||||
@ -1,10 +1,7 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
|
|
||||||
export const samples_to_markdown = (
|
export const samples_to_markdown = (application: Editor, tag_filter?: string) => {
|
||||||
application: Editor,
|
|
||||||
tag_filter?: string,
|
|
||||||
) => {
|
|
||||||
let samples = application.api._all_samples();
|
let samples = application.api._all_samples();
|
||||||
let markdownList = "";
|
let markdownList = "";
|
||||||
let keys = Object.keys(samples);
|
let keys = Object.keys(samples);
|
||||||
@ -32,7 +29,7 @@ export const samples_to_markdown = (
|
|||||||
|
|
||||||
markdownList += `
|
markdownList += `
|
||||||
<button
|
<button
|
||||||
class="hover:bg-foreground inline px-4 py-2 bg-black text-brightwhite hover:text-background text-xl"
|
class="hover:bg-neutral-500 inline px-4 py-2 bg-neutral-700 text-orange-300 text-xl"
|
||||||
onclick="app.api._playDocExampleOnce(app.api.codeExamples['${codeId}'])"
|
onclick="app.api._playDocExampleOnce(app.api.codeExamples['${codeId}'])"
|
||||||
>
|
>
|
||||||
${keys[i]}
|
${keys[i]}
|
||||||
@ -47,11 +44,13 @@ export const injectAllSamples = (application: Editor): string => {
|
|||||||
return generatedPage;
|
return generatedPage;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export const injectDrumMachineSamples = (application: Editor): string => {
|
export const injectDrumMachineSamples = (application: Editor): string => {
|
||||||
let generatedPage = samples_to_markdown(application, "Machines");
|
let generatedPage = samples_to_markdown(application, "Machines");
|
||||||
return generatedPage;
|
return generatedPage;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export const sample_list = (application: Editor): string => {
|
export const sample_list = (application: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
@ -64,18 +63,14 @@ On this page, you will find an exhaustive list of all the samples currently load
|
|||||||
|
|
||||||
A very large collection of wavetables for wavetable synthesis. This collection has been released by Kristoffer Ekstrand: [AKWF Waveforms](https://www.adventurekid.se/akrt/waveforms/adventure-kid-waveforms/). Every sound sample that starts with <ic>wt_</ic> will be looped. Look at this demo:
|
A very large collection of wavetables for wavetable synthesis. This collection has been released by Kristoffer Ekstrand: [AKWF Waveforms](https://www.adventurekid.se/akrt/waveforms/adventure-kid-waveforms/). Every sound sample that starts with <ic>wt_</ic> will be looped. Look at this demo:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample("Wavetable synthesis made easy :)", `
|
||||||
"Wavetable synthesis made easy :)",
|
|
||||||
`
|
|
||||||
beat(0.5)::sound('wt_stereo').n([0, 1].pick()).ad(0, .25).out()
|
beat(0.5)::sound('wt_stereo').n([0, 1].pick()).ad(0, .25).out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
Pick one folder and spend some time exploring it. There is a lot of different waveforms.
|
Pick one folder and spend some time exploring it. There is a lot of different waveforms.
|
||||||
|
|
||||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||||
${samples_to_markdown(application, "Waveforms")}
|
${samples_to_markdown(application, "Waveforms")}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -84,17 +79,14 @@ ${samples_to_markdown(application, "Waveforms")}
|
|||||||
A set of 72 classic drum machines created by **Geikha**: [Geikha Drum Machines](https://github.com/geikha/tidal-drum-machines). To use them efficiently, it is best to use the <ic>.bank()</ic> parameter like so:
|
A set of 72 classic drum machines created by **Geikha**: [Geikha Drum Machines](https://github.com/geikha/tidal-drum-machines). To use them efficiently, it is best to use the <ic>.bank()</ic> parameter like so:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using a classic drum machine",
|
"Using a classic drum machine", `
|
||||||
`
|
|
||||||
beat(0.5)::sound(['bd', 'cp'].pick()).bank("AkaiLinn").out()
|
beat(0.5)::sound(['bd', 'cp'].pick()).bank("AkaiLinn").out()
|
||||||
`,
|
`, true)}
|
||||||
true,
|
|
||||||
)}
|
|
||||||
|
|
||||||
Here is the complete list of available machines:
|
Here is the complete list of available machines:
|
||||||
|
|
||||||
|
|
||||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||||
${samples_to_markdown(application, "Machines")}
|
${samples_to_markdown(application, "Machines")}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -102,7 +94,7 @@ ${samples_to_markdown(application, "Machines")}
|
|||||||
|
|
||||||
The default sample pack used by Ryan Kirkbride's [FoxDot](https://github.com/Qirky/FoxDot). It is a nice curated sample pack that covers all the basic sounds you could want.
|
The default sample pack used by Ryan Kirkbride's [FoxDot](https://github.com/Qirky/FoxDot). It is a nice curated sample pack that covers all the basic sounds you could want.
|
||||||
|
|
||||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||||
${samples_to_markdown(application, "FoxDot")}
|
${samples_to_markdown(application, "FoxDot")}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -110,7 +102,7 @@ ${samples_to_markdown(application, "FoxDot")}
|
|||||||
|
|
||||||
This set of audio samples is taken from [this wonderful collection](https://archive.org/details/AmigaSoundtrackerSamplePacksst-xx) of **Ultimate Tracker Amiga samples**. They were initially made by Karsten Obarski. These files were processed: pitched down one octave, gain down 6db. The audio has been processed with [SoX](https://github.com/chirlu/sox). The script used to do so is also included in this repository.
|
This set of audio samples is taken from [this wonderful collection](https://archive.org/details/AmigaSoundtrackerSamplePacksst-xx) of **Ultimate Tracker Amiga samples**. They were initially made by Karsten Obarski. These files were processed: pitched down one octave, gain down 6db. The audio has been processed with [SoX](https://github.com/chirlu/sox). The script used to do so is also included in this repository.
|
||||||
|
|
||||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||||
${samples_to_markdown(application, "Amiga")}
|
${samples_to_markdown(application, "Amiga")}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -119,16 +111,14 @@ ${samples_to_markdown(application, "Amiga")}
|
|||||||
A collection of many different amen breaks. Use <ic>.stretch()</ic> to play with these:
|
A collection of many different amen breaks. Use <ic>.stretch()</ic> to play with these:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Stretching an amen break",
|
"Stretching an amen break", `
|
||||||
`
|
|
||||||
beat(4)::sound('amen1').stretch(4).out()
|
beat(4)::sound('amen1').stretch(4).out()
|
||||||
`,
|
`, true,
|
||||||
true,
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
The stretch should be adapted based on the length of each amen break.
|
The stretch should be adapted based on the length of each amen break.
|
||||||
|
|
||||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||||
${samples_to_markdown(application, "Amen")}
|
${samples_to_markdown(application, "Amen")}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -137,24 +127,8 @@ ${samples_to_markdown(application, "Amen")}
|
|||||||
Many live coders are expecting to find the Tidal sample library wherever they go, so here it is :)
|
Many live coders are expecting to find the Tidal sample library wherever they go, so here it is :)
|
||||||
|
|
||||||
|
|
||||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||||
${samples_to_markdown(application, "Tidal")}
|
${samples_to_markdown(application, "Tidal")}
|
||||||
</div>
|
</div>
|
||||||
|
`
|
||||||
## Juliette's voice
|
}
|
||||||
|
|
||||||
This sample pack is only one folder full of french phonems! It sounds super nice.
|
|
||||||
|
|
||||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
|
||||||
${samples_to_markdown(application, "Juliette")}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Your samples
|
|
||||||
|
|
||||||
These samples are the one you have loaded for the duration of the session using the <ic>Import Samples</ic> button in the configuration menu.
|
|
||||||
|
|
||||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
|
||||||
${samples_to_markdown(application, "user")}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
export const synths = (application: Editor): string => {
|
export const synths = (application: Editor): string => {
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
@ -13,41 +13,42 @@ Topos comes by default with a forever-increasing number of synthesis capabilitie
|
|||||||
The <ic>sound</ic> function can take the name of a synthesizer or waveform as first argument. This has for effect to turn the sampler we all know and love into a synthesizer. <ic>sine</ic>, <ic>sawtooth</ic>,<ic>triangle</ic>, <ic>square</ic> are the names used to select classic oscillator waveforms. Note that you can also make use of filters and envelopes to shape the sound to your liking.
|
The <ic>sound</ic> function can take the name of a synthesizer or waveform as first argument. This has for effect to turn the sampler we all know and love into a synthesizer. <ic>sine</ic>, <ic>sawtooth</ic>,<ic>triangle</ic>, <ic>square</ic> are the names used to select classic oscillator waveforms. Note that you can also make use of filters and envelopes to shape the sound to your liking.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Listening to the different waveforms from the sweetest to the harshest",
|
"Listening to the different waveforms from the sweetest to the harshest",
|
||||||
`
|
`
|
||||||
beat(.5) && snd(['sine', 'triangle', 'sawtooth', 'square'].beat()).freq(100).out()
|
beat(.5) && snd(['sine', 'triangle', 'sawtooth', 'square'].beat()).freq(100).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
Note that you can also use noise if you do not want to use a periodic oscillator:
|
Note that you can also use noise if you do not want to use a periodic oscillator:
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Listening to the different types of noise",
|
"Listening to the different types of noise",
|
||||||
`
|
`
|
||||||
beat(.5) && snd(['brown', 'pink', 'white'].beat()).adsr(0,.1,0,0).out()
|
beat(.5) && snd(['brown', 'pink', 'white'].beat()).adsr(0,.1,0,0).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
Two functions are primarily used to control the frequency of the synthesizer:
|
Two functions are primarily used to control the frequency of the synthesizer:
|
||||||
- <ic>freq(hz: number)</ic>: sets the frequency of the oscillator.
|
- <ic>freq(hz: number)</ic>: sets the frequency of the oscillator.
|
||||||
- <ic>note(note: number|string)</ic>: sets the MIDI note of the oscillator (MIDI note converted to hertz).
|
- <ic>note(note: number|string)</ic>: sets the MIDI note of the oscillator (MIDI note converted to hertz).
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Selecting a pitch",
|
"Selecting a pitch",
|
||||||
`
|
`
|
||||||
beat(.5) && snd('triangle').freq([100,200,400].beat(2)).out()
|
beat(.5) && snd('triangle').freq([100,200,400].beat(2)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Selecting a note",
|
"Selecting a note",
|
||||||
`
|
`
|
||||||
beat(.5) && snd('triangle').note([60,"F4"].pick()).out()
|
beat(.5) && snd('triangle').note([60,"F4"].pick()).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
Chords can also played using different parameters:
|
Chords can also played using different parameters:
|
||||||
@ -55,40 +56,72 @@ Chords can also played using different parameters:
|
|||||||
- <ic>chord(string||number[]|...number)</ic>: parses and sets notes for the chord
|
- <ic>chord(string||number[]|...number)</ic>: parses and sets notes for the chord
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Playing a named chord",
|
"Playing a named chord",
|
||||||
`
|
`
|
||||||
beat(1) && snd('triangle').chord(["C","Em7","Fmaj7","Emin"].beat(2)).adsr(0,.2).out()
|
beat(1) && snd('triangle').chord(["C","Em7","Fmaj7","Emin"].beat(2)).adsr(0,.2).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Playing a chord from a list of notes and doing inversions",
|
"Playing a chord from a list of notes and doing inversions",
|
||||||
`
|
`
|
||||||
beat(.5) && snd('triangle').chord(60,64,67,72).invert([1,-3,4,-5].pick()).adsr(0,.2).out()
|
beat(.5) && snd('triangle').chord(60,64,67,72).invert([1,-3,4,-5].pick()).adsr(0,.2).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
# Controlling amplitude
|
## Vibrato
|
||||||
|
|
||||||
|
You can also add some amount of vibrato to the sound using the <ic>vib</ic> and <ic>vibmod</ic> methods. These can turn any oscillator into something more lively and/or into a sound effect when used with a high amount of modulation.
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Different vibrato settings",
|
||||||
|
`
|
||||||
|
tempo(140);
|
||||||
|
beat(1) :: sound('triangle')
|
||||||
|
.freq(400).release(0.2)
|
||||||
|
.vib([1/2, 1, 2, 4].beat())
|
||||||
|
.vibmod([1,2,4,8].beat(2))
|
||||||
|
.out()`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
## Noise
|
||||||
|
|
||||||
|
A certain amount of brown noise can be added by using the <ic>.noise</ic> key:
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Different vibrato settings",
|
||||||
|
`
|
||||||
|
tempo(140);
|
||||||
|
beat(1) :: sound('triangle')
|
||||||
|
.freq(400).release(0.2)
|
||||||
|
.noise([0.2,0.4,0.5].bar())
|
||||||
|
.vib([1/2, 1, 2, 4].beat())
|
||||||
|
.vibmod([1,2,4,8].beat(2))
|
||||||
|
.out()`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
## Controlling the amplitude
|
||||||
|
|
||||||
Controlling the amplitude and duration of the sound can be done using various techniques. The most important thing to learn is probably how set the amplitude (volume) of your synthesizer:
|
Controlling the amplitude and duration of the sound can be done using various techniques. The most important thing to learn is probably how set the amplitude (volume) of your synthesizer:
|
||||||
- <ic>gain(gain: number)</ic>: sets the gain of the oscillator.
|
- <ic>gain(gain: number)</ic>: sets the gain of the oscillator.
|
||||||
- <ic>velocity(velocity: number)</ic>: sets the velocity of the oscillator (velocity is a multiple of gain).
|
- <ic>velocity(velocity: number)</ic>: sets the velocity of the oscillator (velocity is a multiple of gain).
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Setting the gain",
|
"Setting the gain",
|
||||||
`beat(0.25) :: sound('sawtooth').gain([0.0, 1/8, 1/4, 1/2, 1].beat(0.5)).out()`,
|
`beat(0.25) :: sound('sawtooth').gain([0.0, 1/8, 1/4, 1/2, 1].beat(0.5)).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Setting the velocity",
|
"Setting the velocity",
|
||||||
`beat(0.25) :: sound('sawtooth').velocity([0.0, 1/8, 1/4, 1/2, 1].beat(0.5)).out()`,
|
`beat(0.25) :: sound('sawtooth').velocity([0.0, 1/8, 1/4, 1/2, 1].beat(0.5)).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Envelopes
|
|
||||||
|
|
||||||
<div class="mt-4 mb-4 lg:grid lg:grid-cols-4 lg:gap-4">
|
<div class="mt-4 mb-4 lg:grid lg:grid-cols-4 lg:gap-4">
|
||||||
<img class="col-span-1 lg:ml-12 bg-gray-100 rounded-lg px-2 py-2", src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/ADSR_Envelope_Graph.svg/1280px-ADSR_Envelope_Graph.svg.png" width="400" />
|
<img class="col-span-1 lg:ml-12 bg-gray-100 rounded-lg px-2 py-2", src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/ADSR_Envelope_Graph.svg/1280px-ADSR_Envelope_Graph.svg.png" width="400" />
|
||||||
@ -101,83 +134,143 @@ ${makeExample(
|
|||||||
- <ic>release(release: number)</ic> / <ic>rel(rel: number)</ic>: sets the release time of the envelope.
|
- <ic>release(release: number)</ic> / <ic>rel(rel: number)</ic>: sets the release time of the envelope.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using decay and sustain to set the ADSR envelope",
|
"Using decay and sustain to set the ADSR envelope",
|
||||||
`
|
`
|
||||||
beat(0.5) :: sound('wt_piano')
|
beat(0.5) :: sound('wt_piano')
|
||||||
.cutoff(1000 + usine() * 4000)
|
.cutoff(1000 + usine() * 4000)
|
||||||
.freq(100).decay(.2)
|
.freq(100).decay(.2)
|
||||||
.sustain([0.1,0.5].beat(4))
|
.sustain([0.1,0.5].beat(4))
|
||||||
.out()`,
|
.out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
This ADSR envelope design is important to know because it is used for other aspects of the synthesis engine such as the filters that we are now going to talk about. But wait, I've kept the best for the end. The <ic>adsr()</ic> combines all the parameters together. It is a shortcut for setting the ADSR envelope:
|
This ADSR envelope design is important to know because it is used for other aspects of the synthesis engine such as the filters that we are now going to talk about. But wait, I've kept the best for the end. The <ic>adsr()</ic> combines all the parameters together. It is a shortcut for setting the ADSR envelope:
|
||||||
|
|
||||||
- <ic>adsr(attack: number, decay: number, sustain: number, release: number)</ic>: sets the ADSR envelope.
|
- <ic>adsr(attack: number, decay: number, sustain: number, release: number)</ic>: sets the ADSR envelope.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Replacing the previous example with the adsr() method",
|
"Replacing the previous example with the adsr() method",
|
||||||
`
|
`
|
||||||
beat(0.5) :: sound('wt_piano')
|
beat(0.5) :: sound('wt_piano')
|
||||||
.cutoff(1000 + usine() * 4000)
|
.cutoff(1000 + usine() * 4000)
|
||||||
.freq(100)
|
.freq(100)
|
||||||
.adsr(0, .2, [0.1,0.5].beat(4), 0)
|
.adsr(0, .2, [0.1,0.5].beat(4), 0)
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>ad(attack: number, decay: number)</ic>: sets the attack and decay phases, setting sustain and release to <ic>0</ic>.
|
- <ic>ad(attack: number, decay: number)</ic>: sets the attack and decay phases, setting sustain and release to <ic>0</ic>.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Two segment envelope",
|
"Two segment envelope",
|
||||||
`
|
`
|
||||||
beat(0.5) :: sound('wt_piano')
|
beat(0.5) :: sound('wt_piano')
|
||||||
.cutoff(1000 + usine() * 4000)
|
.cutoff(1000 + usine() * 4000)
|
||||||
.freq(100)
|
.freq(100)
|
||||||
.ad(0, .2)
|
.ad(0, .2)
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Substractive synthesis using filters
|
## Substractive synthesis using filters
|
||||||
|
|
||||||
The most basic synthesis technique used since the 1970s is called substractive synthesis. This technique is based on the use of rich sound sources (oscillators) as a base to build rich and moving timbres. Because rich sources contain a lot of different harmonics, you might want to filter some of them to obtain the timbre you are looking for. To do so, Topos comes with a set of basic filters that can be used to shape the sound exactly to your liking. There are three filter types by defaut, with more to be added in the future:
|
The most basic synthesis technique used since the 1970s is called substractive synthesis. This technique is based on the use of rich sound sources (oscillators) as a base to build rich and moving timbres. Because rich sources contain a lot of different harmonics, you might want to filter some of them to obtain the timbre you are looking for. To do so, Topos comes with a set of basic filters that can be used to shape the sound exactly to your liking. There are three filter types by defaut, with more to be added in the future:
|
||||||
|
|
||||||
See the Filters page for details on lowpass, highpass and bandpass filters. I also encourage you to study these simple examples to get more familiar with the construction of basic substractive synthesizers:
|
- **lowpass filter**: filters the high frequencies, keeping the low frequencies.
|
||||||
|
- **highpass filter**: filtering the low frequencies, keeping the high frequencies.
|
||||||
|
- **bandpass filter**: filters the low and high frequencies around a frequency band, keeping what's in the middle.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Filtering the high frequencies of an oscillator",
|
"Filtering the high frequencies of an oscillator",
|
||||||
`beat(.5) :: sound('sawtooth').cutoff(50 + usine(1/8) * 2000).out()`,
|
`beat(.5) :: sound('sawtooth').cutoff(50 + usine(1/8) * 2000).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
These filters all come with their own set of parameters. Note that we are describing the parameters of the three different filter types here. Choose the right parameters depending on the filter type you are using:
|
||||||
|
|
||||||
|
|
||||||
|
### Lowpass filter
|
||||||
|
|
||||||
|
| Method | Alias | Description |
|
||||||
|
|------------|-----------|---------------------------------|
|
||||||
|
| <ic>cutoff</ic> | <ic>lpf</ic> | cutoff frequency of the lowpass filter |
|
||||||
|
| <ic>resonance</ic> | <ic>lpq</ic> | resonance of the lowpass filter (0-1) |
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Simple synthesizer voice with filter",
|
"Filtering a bass",
|
||||||
`
|
`beat(.5) :: sound('jvbass').lpf([250,1000,8000].beat()).out()`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
### Highpass filter
|
||||||
|
|
||||||
|
| Method | Alias | Description |
|
||||||
|
|------------|-----------|---------------------------------|
|
||||||
|
| <ic>hcutoff</ic> | <ic>hpf</ic> | cutoff frequency of the highpass filter |
|
||||||
|
| <ic>hresonance</ic> | <ic>hpq</ic> | resonance of the highpass filter (0-1) |
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Filtering a noise source",
|
||||||
|
`beat(.5) :: sound('gtr').hpf([250,1000, 2000, 3000, 4000].beat()).end(0.5).out()`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
### Bandpass filter
|
||||||
|
|
||||||
|
| Method | Alias | Description |
|
||||||
|
|------------|-----------|---------------------------------|
|
||||||
|
| <ic>bandf</ic> | <ic>bpf</ic> | cutoff frequency of the bandpass filter |
|
||||||
|
| <ic>bandq</ic> | <ic>bpq</ic> | resonance of the bandpass filter (0-1) |
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Sweeping the filter on the same guitar sample",
|
||||||
|
`beat(.5) :: sound('gtr').bandf(100 + usine(1/8) * 4000).end(0.5).out()`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
Alternatively, <ic>lpf</ic>, <ic>hpf</ic> and <ic>bpf</ic> can take a second argument, the **resonance**.
|
||||||
|
|
||||||
|
## Filter order (type)
|
||||||
|
|
||||||
|
You can also use the <ic>ftype</ic> method to change the filter type (order). There are two types by default, <ic>12db</ic> for a gentle slope or <ic>24db</ic> for a really steep filtering slope. The <ic>24db</ic> type is particularly useful for substractive synthesis if you are trying to emulate some of the Moog or Prophet sounds:
|
||||||
|
|
||||||
|
- <ic>ftype(type: string)</ic>: sets the filter type (order), either <ic>12db</ic> or <ic>24db</ic>.
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Filtering a bass",
|
||||||
|
`beat(.5) :: sound('jvbass').ftype(['12db', '24db'].beat(4)).lpf([250,1000,8000].beat()).out()`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
I also encourage you to study these simple examples to get more familiar with the construction of basic substractive synthesizers:
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Simple synthesizer voice with filter",
|
||||||
|
`
|
||||||
beat(.5) && snd('sawtooth')
|
beat(.5) && snd('sawtooth')
|
||||||
.cutoff([2000,500].pick() + usine(.5) * 4000)
|
.cutoff([2000,500].pick() + usine(.5) * 4000)
|
||||||
.resonance(0.2).freq([100,150].pick())
|
.resonance(0.2).freq([100,150].pick())
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Blessed by the square wave",
|
"Blessed by the square wave",
|
||||||
`
|
`
|
||||||
beat(4) :: [100,101].forEach((freq) => sound('square').freq(freq).sustain(0.1).out())
|
beat(4) :: [100,101].forEach((freq) => sound('square').freq(freq).sustain(0.1).out())
|
||||||
beat(.5) :: [100,101].forEach((freq) => sound('square').freq(freq*2).sustain(0.01).out())
|
beat(.5) :: [100,101].forEach((freq) => sound('square').freq(freq*2).sustain(0.01).out())
|
||||||
beat([.5, .75, 2].beat()) :: [100,101].forEach((freq) => sound('square')
|
beat([.5, .75, 2].beat()) :: [100,101].forEach((freq) => sound('square')
|
||||||
.freq(freq*4 + usquare(2) * 200).sustain(0.125).out())
|
.freq(freq*4 + usquare(2) * 200).sustain(0.125).out())
|
||||||
beat(.25) :: sound('square').freq(100*[1,2,4,8].beat()).sustain(0.1).out()`,
|
beat(.25) :: sound('square').freq(100*[1,2,4,8].beat()).sustain(0.1).out()`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Ghost carillon (move your mouse!)",
|
"Ghost carillon (move your mouse!)",
|
||||||
`
|
`
|
||||||
beat(1/8)::sound('sine')
|
beat(1/8)::sound('sine')
|
||||||
.velocity(rand(0.0, 1.0))
|
.velocity(rand(0.0, 1.0))
|
||||||
.delay(0.75).delayt(.5)
|
.delay(0.75).delayt(.5)
|
||||||
@ -186,33 +279,83 @@ beat(1/8)::sound('sine')
|
|||||||
.freq(mouseX())
|
.freq(mouseX())
|
||||||
.gain(0.25)
|
.gain(0.25)
|
||||||
.out()`,
|
.out()`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Noise
|
## Filter envelopes
|
||||||
|
|
||||||
|
The examples we have studied so far are static. They filter the sound around a fixed cutoff frequency. To make the sound more interesting, you can use the ADSR filter envelopes to shape the filter cutoff frequency over time. You will always find amplitude and filter envelopes on most commercial synthesizers. This is done using the following methods:
|
||||||
|
|
||||||
|
### Lowpass envelope
|
||||||
|
|
||||||
|
| Method | Alias | Description |
|
||||||
|
|------------|-----------|---------------------------------|
|
||||||
|
| <ic>lpenv</ic> | <ic>lpe</ic> | lowpass frequency modulation amount (negative or positive) |
|
||||||
|
| <ic>lpattack</ic> | <ic>lpa</ic> | attack of the lowpass filter |
|
||||||
|
| <ic>lpdecay</ic> | <ic>lpd</ic> | decay of the lowpass filter |
|
||||||
|
| <ic>lpsustain</ic> | <ic>lps</ic> | sustain of the lowpass filter |
|
||||||
|
| <ic>lprelease</ic> | <ic>lpr</ic> | release of the lowpass filter |
|
||||||
|
| <ic>lpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
||||||
|
|
||||||
A certain amount of brown noise can be added by using the <ic>.noise</ic> key:
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Different vibrato settings",
|
"Filtering a sawtooth wave dynamically",
|
||||||
`
|
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
||||||
tempo(140);
|
.cutoff(5000).lpa([0.05, 0.25, 0.5].beat(2))
|
||||||
beat(1) :: sound('triangle')
|
.lpenv(-8).lpq(10).out()`,
|
||||||
.freq(400).release(0.2)
|
true
|
||||||
.noise([0.2,0.4,0.5].bar())
|
)}
|
||||||
.vib([1/2, 1, 2, 4].beat())
|
|
||||||
.vibmod([1,2,4,8].beat(2))
|
### Highpass envelope
|
||||||
.out()`,
|
|
||||||
true,
|
| Method | Alias | Description |
|
||||||
)}
|
|------------|-----------|---------------------------------|
|
||||||
|
| <ic>hpenv</ic> | <ic>hpe</ic> | highpass frequency modulation amount (negative or positive) |
|
||||||
|
| <ic>hpattack</ic> | <ic>hpa</ic> | attack of the highpass filter |
|
||||||
|
| <ic>hpdecay</ic> | <ic>hpd</ic> | decay of the highpass filter |
|
||||||
|
| <ic>hpsustain</ic> | <ic>hps</ic> | sustain of the highpass filter |
|
||||||
|
| <ic>hprelease</ic> | <ic>hpr</ic> | release of the highpass filter |
|
||||||
|
| <ic>hpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
||||||
|
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Let's use another filter using the same example",
|
||||||
|
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
||||||
|
.hcutoff(1000).hpa([0.05, 0.25, 0.5].beat(2))
|
||||||
|
.hpenv(8).hpq(10).out()`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
### Bandpass envelope
|
||||||
|
|
||||||
|
| Method | Alias | Description |
|
||||||
|
|------------|-----------|---------------------------------|
|
||||||
|
| <ic>bpenv</ic> | <ic>bpe</ic> | bandpass frequency modulation amount (negative or positive) |
|
||||||
|
| <ic>bpattack</ic> | <ic>bpa</ic> | attack of the bandpass filter |
|
||||||
|
| <ic>bpdecay</ic> | <ic>bpd</ic> | decay of the bandpass filter |
|
||||||
|
| <ic>bpsustain</ic> | <ic>bps</ic> | sustain of the bandpass filter |
|
||||||
|
| <ic>bprelease</ic> | <ic>bpr</ic> | release of the bandpass filter |
|
||||||
|
| <ic>bpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
||||||
|
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"And the bandpass filter, just for fun",
|
||||||
|
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
||||||
|
.bandf([500,1000,2000].beat(2))
|
||||||
|
.bpa([0.25, 0.125, 0.5].beat(2) * 4)
|
||||||
|
.bpenv(-4).release(2).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
## Wavetable synthesis
|
## Wavetable synthesis
|
||||||
|
|
||||||
Topos can also do wavetable synthesis. Wavetable synthesis allows you to use any sound file as a source to build an oscillator. By default, Topos comes with more than 1000 waveforms thanks to the awesome [AKWF](https://www.adventurekid.se/akrt/waveforms/adventure-kid-waveforms/) pack made by Kristoffer Ekstrand. Any sample name that contains <ic>wt_</ic> as a prefix will be interpreted by the sampler as a wavetable and thus as an oscillator. See for yourself:
|
Topos can also do wavetable synthesis. Wavetable synthesis allows you to use any sound file as a source to build an oscillator. By default, Topos comes with more than 1000 waveforms thanks to the awesome [AKWF](https://www.adventurekid.se/akrt/waveforms/adventure-kid-waveforms/) pack made by Kristoffer Ekstrand. Any sample name that contains <ic>wt_</ic> as a prefix will be interpreted by the sampler as a wavetable and thus as an oscillator. See for yourself:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Acidity test",
|
"Acidity test",
|
||||||
`
|
`
|
||||||
beat(.25) :: sound('wt_symetric:8').note([50,55,57,60].beat(.25) - [12,0]
|
beat(.25) :: sound('wt_symetric:8').note([50,55,57,60].beat(.25) - [12,0]
|
||||||
.pick()).ftype('12db').adsr(0.05/4, 1/16, 0.25/4, 0)
|
.pick()).ftype('12db').adsr(0.05/4, 1/16, 0.25/4, 0)
|
||||||
.cutoff(1500 + usine(1/8) * 5000).lpadsr(16, 0.2, 0.2, 0.125/2, 0)
|
.cutoff(1500 + usine(1/8) * 5000).lpadsr(16, 0.2, 0.2, 0.125/2, 0)
|
||||||
@ -220,15 +363,15 @@ beat(.25) :: sound('wt_symetric:8').note([50,55,57,60].beat(.25) - [12,0]
|
|||||||
beat(1) :: sound('kick').n(4).out()
|
beat(1) :: sound('kick').n(4).out()
|
||||||
beat(2) :: sound('snare').out()
|
beat(2) :: sound('snare').out()
|
||||||
beat(.5) :: sound('hh').out()`,
|
beat(.5) :: sound('hh').out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
Let's explore the galaxy of possible waveforms. It can be hard to explore them all, there is a **lot** of them:
|
Let's explore the galaxy of possible waveforms. It can be hard to explore them all, there is a **lot** of them:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Let's explore some wavetables",
|
"Let's explore some wavetables",
|
||||||
`
|
`
|
||||||
// Exploring a vast galaxy of waveforms
|
// Exploring a vast galaxy of waveforms
|
||||||
let collection = [
|
let collection = [
|
||||||
'wt_sinharm', 'wt_linear', 'wt_bw_sawrounded',
|
'wt_sinharm', 'wt_linear', 'wt_bw_sawrounded',
|
||||||
@ -238,8 +381,8 @@ beat(2) :: v('selec', irand(1, 100))
|
|||||||
beat(2) :: v('swave', collection.pick())
|
beat(2) :: v('swave', collection.pick())
|
||||||
beat(0.5) :: sound(v('swave')).n(v('selec')).out()
|
beat(0.5) :: sound(v('swave')).n(v('selec')).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
You can work with them just like with any other waveform. Having so many of them makes them also very useful for generating sound effects, percussive, sounds, etc...
|
You can work with them just like with any other waveform. Having so many of them makes them also very useful for generating sound effects, percussive, sounds, etc...
|
||||||
|
|
||||||
@ -254,8 +397,8 @@ Another really useful technique to know about is FM synthesis, FM standing for _
|
|||||||
There is also an additional parameter, <ic>fm</ic> that combines <ic>fmi</ic> and <ic>fmh</ic> using strings: <ic>fm('2:4')</ic>. Think of it as a static shortcut for getting some timbres more quickly.
|
There is also an additional parameter, <ic>fm</ic> that combines <ic>fmi</ic> and <ic>fmh</ic> using strings: <ic>fm('2:4')</ic>. Think of it as a static shortcut for getting some timbres more quickly.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"80s nostalgia",
|
"80s nostalgia",
|
||||||
`
|
`
|
||||||
beat([.5, 1].beat(8)) && snd('triangle').adsr(0.02, 0.5, 0.5, 0.25)
|
beat([.5, 1].beat(8)) && snd('triangle').adsr(0.02, 0.5, 0.5, 0.25)
|
||||||
.fmi(2).fmh(1.5).note([60,55, 60, 63].beat() - 12)
|
.fmi(2).fmh(1.5).note([60,55, 60, 63].beat() - 12)
|
||||||
.pan(noise()).out()
|
.pan(noise()).out()
|
||||||
@ -264,23 +407,23 @@ beat(.25) && snd('triangle').adsr(0.02, 0.1, 0.1, 0.1)
|
|||||||
.pan(noise()).note([60,55, 60, 63].beat() + [0, 7].pick()).out()
|
.pan(noise()).note([60,55, 60, 63].beat() + [0, 7].pick()).out()
|
||||||
beat(2) :: sound('cp').room(1).sz(1).out()
|
beat(2) :: sound('cp').room(1).sz(1).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Giving some love to ugly inharmonic sounds",
|
"Giving some love to ugly inharmonic sounds",
|
||||||
`
|
`
|
||||||
beat([.5, .25].bar()) :: sound('sine').fm('2.2183:3.18293').sustain(0.05).out()
|
beat([.5, .25].bar()) :: sound('sine').fm('2.2183:3.18293').sustain(0.05).out()
|
||||||
beat([4].bar()) :: sound('sine').fm('5.2183:4.5').sustain(0.05).out()
|
beat([4].bar()) :: sound('sine').fm('5.2183:4.5').sustain(0.05).out()
|
||||||
beat(.5) :: sound('sine')
|
beat(.5) :: sound('sine')
|
||||||
.fmh([1, 1.75].beat())
|
.fmh([1, 1.75].beat())
|
||||||
.fmi($(1) % 30).orbit(2).room(0.5).out()`,
|
.fmi($(1) % 30).orbit(2).room(0.5).out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Peace and serenity through FM synthesis",
|
"Peace and serenity through FM synthesis",
|
||||||
`
|
`
|
||||||
beat(0.25) :: sound('sine')
|
beat(0.25) :: sound('sine')
|
||||||
.note([60, 67, 70, 72, 77].beat() - [0,12].bar())
|
.note([60, 67, 70, 72, 77].beat() - [0,12].bar())
|
||||||
.attack(0.2).release(0.5).gain(0.25)
|
.attack(0.2).release(0.5).gain(0.25)
|
||||||
@ -289,8 +432,8 @@ beat(0.25) :: sound('sine')
|
|||||||
.cutoff(1500).delay(0.5).delayt(0.125)
|
.cutoff(1500).delay(0.5).delayt(0.125)
|
||||||
.delayfb(0.8).fmh(Math.floor(usine(.5) * 4))
|
.delayfb(0.8).fmh(Math.floor(usine(.5) * 4))
|
||||||
.out()`,
|
.out()`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
**Note:** you can also set the _modulation index_ and the _harmonic ratio_ with the <ic>fm</ic> argument. You will have to feed both as a string: <ic>fm('2:4')</ic>. If you only feed one number, only the _modulation index_ will be updated.
|
**Note:** you can also set the _modulation index_ and the _harmonic ratio_ with the <ic>fm</ic> argument. You will have to feed both as a string: <ic>fm('2:4')</ic>. If you only feed one number, only the _modulation index_ will be updated.
|
||||||
|
|
||||||
@ -301,8 +444,8 @@ There is also a more advanced set of parameters you can use to control the envel
|
|||||||
- <ic>fmrelease</ic> / <ic>fmrel</ic>: release time of the modulator envelope.
|
- <ic>fmrelease</ic> / <ic>fmrel</ic>: release time of the modulator envelope.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"FM Synthesis with envelope control",
|
"FM Synthesis with envelope control",
|
||||||
`
|
`
|
||||||
beat(.5) :: sound('sine')
|
beat(.5) :: sound('sine')
|
||||||
.note([50,53,55,57].beat(.5) - 12)
|
.note([50,53,55,57].beat(.5) - 12)
|
||||||
.fmi(0.5 + usine(.25) * 1.5)
|
.fmi(0.5 + usine(.25) * 1.5)
|
||||||
@ -310,8 +453,8 @@ beat(.5) :: sound('sine')
|
|||||||
.fmwave('triangle')
|
.fmwave('triangle')
|
||||||
.fmsus(0).fmdec(0.2).out()
|
.fmsus(0).fmdec(0.2).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## ZzFX
|
## ZzFX
|
||||||
|
|
||||||
@ -320,15 +463,15 @@ beat(.5) :: sound('sine')
|
|||||||
ZZfX can be triggered by picking a default ZZfX waveform in the following list: <ic>z_sine</ic>, <ic>z_triangle</ic>, <ic>z_sawtooth</ic>, <ic>z_tan</ic>, <ic>z_noise</ic>.
|
ZZfX can be triggered by picking a default ZZfX waveform in the following list: <ic>z_sine</ic>, <ic>z_triangle</ic>, <ic>z_sawtooth</ic>, <ic>z_tan</ic>, <ic>z_noise</ic>.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Picking a waveform",
|
"Picking a waveform",
|
||||||
`
|
`
|
||||||
beat(.5) :: sound(['z_sine', 'z_triangle', 'z_sawtooth', 'z_tan', 'z_noise'].beat()).out()
|
beat(.5) :: sound(['z_sine', 'z_triangle', 'z_sawtooth', 'z_tan', 'z_noise'].beat()).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Minimalist chiptune",
|
"Minimalist chiptune",
|
||||||
`
|
`
|
||||||
beat(.5) :: sound('z_triangle')
|
beat(.5) :: sound('z_triangle')
|
||||||
.note([60, 67, 72, 63, 65, 70].beat(.5))
|
.note([60, 67, 72, 63, 65, 70].beat(.5))
|
||||||
.zrand(0).curve([1,2,3,4].beat(1))
|
.zrand(0).curve([1,2,3,4].beat(1))
|
||||||
@ -338,8 +481,8 @@ beat(.5) :: sound('z_triangle')
|
|||||||
.room(0.5).size(0.9)
|
.room(0.5).size(0.9)
|
||||||
.pitchJumpTime(0.01).out()
|
.pitchJumpTime(0.01).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
It comes with a set of parameters that can be used to tweak the sound. Don't underestimate this synth! It is very powerful for generating anything ranging from chaotic noise sources to lush pads:
|
It comes with a set of parameters that can be used to tweak the sound. Don't underestimate this synth! It is very powerful for generating anything ranging from chaotic noise sources to lush pads:
|
||||||
|
|
||||||
@ -365,8 +508,8 @@ It comes with a set of parameters that can be used to tweak the sound. Don't und
|
|||||||
|<ic>duration</ic>|| Total sound duration (overrides envelope) |
|
|<ic>duration</ic>|| Total sound duration (overrides envelope) |
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Chaotic Noise source",
|
"Chaotic Noise source",
|
||||||
`
|
`
|
||||||
beat(.25) :: sound('z_tan')
|
beat(.25) :: sound('z_tan')
|
||||||
.note(40).noise(rand(0.0, 1.0))
|
.note(40).noise(rand(0.0, 1.0))
|
||||||
.pitchJump(84).pitchJumpTime(rand(0.0, 1.0))
|
.pitchJump(84).pitchJumpTime(rand(0.0, 1.0))
|
||||||
@ -376,21 +519,21 @@ beat(.25) :: sound('z_tan')
|
|||||||
.sustain(0).decay([0.2, 0.1].pick())
|
.sustain(0).decay([0.2, 0.1].pick())
|
||||||
.out()
|
.out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"What is happening to me?",
|
"What is happening to me?",
|
||||||
`
|
`
|
||||||
beat(1) :: snd('zzfx').zzfx([
|
beat(1) :: snd('zzfx').zzfx([
|
||||||
[4.77,,25,,.15,.2,3,.21,,2.4,,,,,,,.23,.35],
|
[4.77,,25,,.15,.2,3,.21,,2.4,,,,,,,.23,.35],
|
||||||
[1.12,,97,.11,.16,.01,4,.77,,,30,.17,,,-1.9,,.01,.67,.2]
|
[1.12,,97,.11,.16,.01,4,.77,,,30,.17,,,-1.9,,.01,.67,.2]
|
||||||
].beat()).out()
|
].beat()).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Les voitures dans le futur",
|
"Les voitures dans le futur",
|
||||||
`
|
`
|
||||||
beat(1) :: sound(['z_triangle', 'z_sine'].pick())
|
beat(1) :: sound(['z_triangle', 'z_sine'].pick())
|
||||||
.note([60,63,72,75].pick()).tremolo(16)
|
.note([60,63,72,75].pick()).tremolo(16)
|
||||||
.zmod([0, 1/2, 1/8].div(2).pick())
|
.zmod([0, 1/2, 1/8].div(2).pick())
|
||||||
@ -398,18 +541,18 @@ beat(1) :: sound(['z_triangle', 'z_sine'].pick())
|
|||||||
.room(0.9).size(0.9)
|
.room(0.9).size(0.9)
|
||||||
.delayt(0.75).delayfb(0.5).out()
|
.delayt(0.75).delayfb(0.5).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
Note that you can also design sounds [on this website](https://killedbyapixel.github.io/ZzFX/) and copy the generated code in Topos. To do so, please use the <ic>zzfx</ic> method with the generated array:
|
Note that you can also design sounds [on this website](https://killedbyapixel.github.io/ZzFX/) and copy the generated code in Topos. To do so, please use the <ic>zzfx</ic> method with the generated array:
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Designing a sound on the ZzFX website",
|
"Designing a sound on the ZzFX website",
|
||||||
`
|
`
|
||||||
|
|
||||||
beat(2) :: sound('zzfx').zzfx([3.62,,452,.16,.1,.21,,2.5,,,403,.05,.29,,,,.17,.34,.22,.68]).out()
|
beat(2) :: sound('zzfx').zzfx([3.62,,452,.16,.1,.21,,2.5,,,403,.05,.29,,,,.17,.34,.22,.68]).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
# Speech synthesis
|
# Speech synthesis
|
||||||
|
|
||||||
@ -424,35 +567,35 @@ Topos can also speak using the [Web Speech API](https://developer.mozilla.org/en
|
|||||||
- <ic>volume(number)</ic>: speaking volume, from <ic>0.0</ic> to <ic>1.0</ic>.
|
- <ic>volume(number)</ic>: speaking volume, from <ic>0.0</ic> to <ic>1.0</ic>.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Hello world!",
|
"Hello world!",
|
||||||
`
|
`
|
||||||
beat(4) :: speak("Hello world!")
|
beat(4) :: speak("Hello world!")
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Let's hear people talking about Topos",
|
"Let's hear people talking about Topos",
|
||||||
`
|
`
|
||||||
beat(2) :: speak("Topos!","fr",irand(0,5))
|
beat(2) :: speak("Topos!","fr",irand(0,5))
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
You can also use speech by chaining methods to a string:
|
You can also use speech by chaining methods to a string:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Foobaba is the real deal",
|
"Foobaba is the real deal",
|
||||||
`
|
`
|
||||||
onbeat(4) :: "Foobaba".voice(irand(0,10)).speak()
|
onbeat(4) :: "Foobaba".voice(irand(0,10)).speak()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Building string and chaining",
|
"Building string and chaining",
|
||||||
`
|
`
|
||||||
const subject = ["coder","user","loser"].pick()
|
const subject = ["coder","user","loser"].pick()
|
||||||
const verb = ["is", "was", "isnt"].pick()
|
const verb = ["is", "was", "isnt"].pick()
|
||||||
const object = ["happy","sad","tired"].pick()
|
const object = ["happy","sad","tired"].pick()
|
||||||
@ -460,12 +603,12 @@ ${makeExample(
|
|||||||
|
|
||||||
beat(6) :: sentence.pitch(0).rate(0).voice([0,2].pick()).speak()
|
beat(6) :: sentence.pitch(0).rate(0).voice([0,2].pick()).speak()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Live coded poetry with array and string chaining",
|
"Live coded poetry with array and string chaining",
|
||||||
`
|
`
|
||||||
tempo(70)
|
tempo(70)
|
||||||
|
|
||||||
const croissant = [
|
const croissant = [
|
||||||
@ -480,7 +623,7 @@ ${makeExample(
|
|||||||
.rate(rand(.4,.6))
|
.rate(rand(.4,.6))
|
||||||
.speak();
|
.speak();
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
|
|
||||||
export const cyclical_time = (app: Editor): string => {
|
export const cyclical_time = (app: Editor): string => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -16,17 +16,17 @@ Time as a cycle. A cycle can be quite long (a few bars) or very short (a few pul
|
|||||||
- <ic>offset</ic>: offset (in beats) to apply. An offset of <ic>0.5</ic> will return true against the beat.
|
- <ic>offset</ic>: offset (in beats) to apply. An offset of <ic>0.5</ic> will return true against the beat.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using different mod values",
|
"Using different mod values",
|
||||||
`
|
`
|
||||||
// This code is alternating between different mod values
|
// This code is alternating between different mod values
|
||||||
beat([1,1/2,1/4,1/8].beat(2)) :: sound('hat').n(0).out()
|
beat([1,1/2,1/4,1/8].beat(2)) :: sound('hat').n(0).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Some sort of ringtone",
|
"Some sort of ringtone",
|
||||||
`
|
`
|
||||||
// Blip generator :)
|
// Blip generator :)
|
||||||
let blip = (freq) => {
|
let blip = (freq) => {
|
||||||
return sound('wt_piano')
|
return sound('wt_piano')
|
||||||
@ -41,16 +41,16 @@ beat(1/3) :: blip(400).pan(r(0,1)).out();
|
|||||||
flip(3) :: beat(1/6) :: blip(800).pan(r(0,1)).out();
|
flip(3) :: beat(1/6) :: blip(800).pan(r(0,1)).out();
|
||||||
beat([1,0.75].beat(2)) :: blip([50, 100].beat(2)).pan(r(0,1)).out();
|
beat([1,0.75].beat(2)) :: blip([50, 100].beat(2)).pan(r(0,1)).out();
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Beat can match multiple values",
|
"Beat can match multiple values",
|
||||||
`
|
`
|
||||||
beat([.5, 1.25])::sound('hat').out()
|
beat([.5, 1.25])::sound('hat').out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>pulse(n: number | number[] = 1, offset: number = 1)</ic>: return true every _n_ pulses. A pulse is the tiniest possible rhythmic value.
|
- <ic>pulse(n: number | number[] = 1, offset: number = 1)</ic>: return true every _n_ pulses. A pulse is the tiniest possible rhythmic value.
|
||||||
- <ic>number</ic>: if <ic>number = 1</ic>, the function will return <ic>true</ic> every pulse. Lists can be used too.
|
- <ic>number</ic>: if <ic>number = 1</ic>, the function will return <ic>true</ic> every pulse. Lists can be used too.
|
||||||
@ -58,21 +58,21 @@ beat([.5, 1.25])::sound('hat').out()
|
|||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Intriguing rhythms",
|
"Intriguing rhythms",
|
||||||
`
|
`
|
||||||
pulse([24, 16])::sound('hat').ad(0, .02).out()
|
pulse([24, 16])::sound('hat').ad(0, .02).out()
|
||||||
pulse([48, [36,24].dur(4, 1)])::sound('fhardkick').ad(0, .1).out()
|
pulse([48, [36,24].dur(4, 1)])::sound('fhardkick').ad(0, .1).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"pulse is the OG rhythmic function in Topos",
|
"pulse is the OG rhythmic function in Topos",
|
||||||
`
|
`
|
||||||
pulse([48, 24, 16].beat(4)) :: sound('linnhats').out()
|
pulse([48, 24, 16].beat(4)) :: sound('linnhats').out()
|
||||||
beat(1)::snd(['bd', '808oh'].beat(1)).out()
|
beat(1)::snd(['bd', '808oh'].beat(1)).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
- <ic>bar(n: number | number[] = 1, offset: number = 1)</ic>: return true every _n_ bars.
|
- <ic>bar(n: number | number[] = 1, offset: number = 1)</ic>: return true every _n_ bars.
|
||||||
@ -80,37 +80,37 @@ beat(1)::snd(['bd', '808oh'].beat(1)).out()
|
|||||||
- <ic>offset</ic>: offset (in bars) to apply.
|
- <ic>offset</ic>: offset (in bars) to apply.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Four beats per bar: proof",
|
"Four beats per bar: proof",
|
||||||
`
|
`
|
||||||
bar(1)::sound('kick').out()
|
bar(1)::sound('kick').out()
|
||||||
beat(1)::sound('hat').speed(2).out()
|
beat(1)::sound('hat').speed(2).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Offsetting beat and bar",
|
"Offsetting beat and bar",
|
||||||
`
|
`
|
||||||
bar(1)::sound('kick').out()
|
bar(1)::sound('kick').out()
|
||||||
beat(1)::sound('hat').speed(2).out()
|
beat(1)::sound('hat').speed(2).out()
|
||||||
beat(1, 0.5)::sound('hat').speed(4).out()
|
beat(1, 0.5)::sound('hat').speed(4).out()
|
||||||
bar(1, 0.5)::sound('sn').out()
|
bar(1, 0.5)::sound('sn').out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>onbeat(...n: number[])</ic>: The <ic>onbeat</ic> function allows you to lock on to a specific beat from the clock to execute code. It can accept multiple arguments. It's usage is very straightforward and not hard to understand. You can pass either integers or floating point numbers. By default, topos is using a <ic>4/4</ic> bar meaning that you can target any of these beats (or in-between) with this function.
|
- <ic>onbeat(...n: number[])</ic>: The <ic>onbeat</ic> function allows you to lock on to a specific beat from the clock to execute code. It can accept multiple arguments. It's usage is very straightforward and not hard to understand. You can pass either integers or floating point numbers. By default, topos is using a <ic>4/4</ic> bar meaning that you can target any of these beats (or in-between) with this function.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Some simple yet detailed rhythms",
|
"Some simple yet detailed rhythms",
|
||||||
`
|
`
|
||||||
onbeat(1,2,3,4)::snd('kick').out() // Bassdrum on each beat
|
onbeat(1,2,3,4)::snd('kick').out() // Bassdrum on each beat
|
||||||
onbeat(2,4)::snd('snare').n([8,4].beat(4)).out() // Snare on acccentuated beats
|
onbeat(2,4)::snd('snare').n([8,4].beat(4)).out() // Snare on acccentuated beats
|
||||||
onbeat(1.5,2.5,3.5, 3.75)::snd('hat').gain(r(0.9,1.1)).out() // Cool high-hats
|
onbeat(1.5,2.5,3.5, 3.75)::snd('hat').gain(r(0.9,1.1)).out() // Cool high-hats
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## XOX Style sequencers
|
## XOX Style sequencers
|
||||||
|
|
||||||
@ -119,32 +119,32 @@ onbeat(1.5,2.5,3.5, 3.75)::snd('hat').gain(r(0.9,1.1)).out() // Cool high-hats
|
|||||||
- <ic>duration: number</ic>: an optional duration (in beats) like <ic>1</ic> or </ic>4</ic>. It can be patterned.
|
- <ic>duration: number</ic>: an optional duration (in beats) like <ic>1</ic> or </ic>4</ic>. It can be patterned.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Sequence built using a classic XOX sequencer style",
|
"Sequence built using a classic XOX sequencer style",
|
||||||
`
|
`
|
||||||
seq('xoxo')::sound('fhardkick').out()
|
seq('xoxo')::sound('fhardkick').out()
|
||||||
seq('ooxo')::sound('fsoftsnare').out()
|
seq('ooxo')::sound('fsoftsnare').out()
|
||||||
seq('xoxo', 0.25)::sound('fhh').out()
|
seq('xoxo', 0.25)::sound('fhh').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Another sequence using more complex parameters",
|
"Another sequence using more complex parameters",
|
||||||
`
|
`
|
||||||
seq('xoxooxxoo', [0.5, 0.25].dur(2, 1))::sound('fhardkick').out()
|
seq('xoxooxxoo', [0.5, 0.25].dur(2, 1))::sound('fhardkick').out()
|
||||||
seq('ooxo', [1, 2].bar())::sound('fsoftsnare').speed(0.5).out()
|
seq('ooxo', [1, 2].bar())::sound('fsoftsnare').speed(0.5).out()
|
||||||
seq(['xoxoxoxx', 'xxoo'].bar())::sound('fhh').out()
|
seq(['xoxoxoxx', 'xxoo'].bar())::sound('fhh').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>fullseq(expr: string, duration: number = 0.5): boolean</ic> : a variant. Will return <ic>true</ic> or <ic>false</ic> for a whole period, depending on the symbol. Useful for long structure patterns.
|
- <ic>fullseq(expr: string, duration: number = 0.5): boolean</ic> : a variant. Will return <ic>true</ic> or <ic>false</ic> for a whole period, depending on the symbol. Useful for long structure patterns.
|
||||||
- <ic>expr: string</ic>: any string composed of <ic>x</ic> or <ic>o</ic> like so: <ic>"xooxoxxoxoo"</ic>.
|
- <ic>expr: string</ic>: any string composed of <ic>x</ic> or <ic>o</ic> like so: <ic>"xooxoxxoxoo"</ic>.
|
||||||
- <ic>duration: number</ic>: an optional duration (in beats) like <ic>1</ic> or </ic>4</ic>. It can be patterned.
|
- <ic>duration: number</ic>: an optional duration (in beats) like <ic>1</ic> or </ic>4</ic>. It can be patterned.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Long structured patterns",
|
"Long structured patterns",
|
||||||
`
|
`
|
||||||
function simplePat() {
|
function simplePat() {
|
||||||
log('Simple pattern playing!')
|
log('Simple pattern playing!')
|
||||||
seq('xoxooxxoo', [0.5, 0.25].dur(2, 1))::sound('fhardkick').out()
|
seq('xoxooxxoo', [0.5, 0.25].dur(2, 1))::sound('fhardkick').out()
|
||||||
@ -159,8 +159,8 @@ function complexPat() {
|
|||||||
}
|
}
|
||||||
fullseq('xooxooxx', 4) ? simplePat() : complexPat()
|
fullseq('xooxooxx', 4) ? simplePat() : complexPat()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -171,8 +171,8 @@ We included a bunch of popular rhythm generators in Topos such as the euclidian
|
|||||||
|
|
||||||
- <ic>rhythm(divisor: number, pulses: number, length: number, rotate: number): boolean</ic>: generates <ic>true</ic> or <ic>false</ic> values from an euclidian rhythm sequence. This is another version of <ic>euclid</ic> that does not take an iterator.
|
- <ic>rhythm(divisor: number, pulses: number, length: number, rotate: number): boolean</ic>: generates <ic>true</ic> or <ic>false</ic> values from an euclidian rhythm sequence. This is another version of <ic>euclid</ic> that does not take an iterator.
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"rhythm is a beginner friendly rhythmic function!",
|
"rhythm is a beginner friendly rhythmic function!",
|
||||||
`
|
`
|
||||||
rhythm(.5, 4, 8)::sound('sine')
|
rhythm(.5, 4, 8)::sound('sine')
|
||||||
.fmi(2)
|
.fmi(2)
|
||||||
.room(0.5).size(8)
|
.room(0.5).size(8)
|
||||||
@ -181,38 +181,38 @@ rhythm(.5, 7, 8)::sound('sine')
|
|||||||
.freq(125).ad(0, .2).out()
|
.freq(125).ad(0, .2).out()
|
||||||
rhythm(.5, 3, 8)::sound('sine').freq(500).ad(0, .5).out()
|
rhythm(.5, 3, 8)::sound('sine').freq(500).ad(0, .5).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
- <ic>oneuclid(pulses: number, length: number, rotate: number): boolean</ic>: generates <ic>true</ic> or <ic>false</ic> values from an euclidian rhythm sequence. This is another version of <ic>euclid</ic> that does not take an iterator.
|
- <ic>oneuclid(pulses: number, length: number, rotate: number): boolean</ic>: generates <ic>true</ic> or <ic>false</ic> values from an euclidian rhythm sequence. This is another version of <ic>euclid</ic> that does not take an iterator.
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using oneuclid to create a rhythm without iterators",
|
"Using oneuclid to create a rhythm without iterators",
|
||||||
`
|
`
|
||||||
// Change speed using bpm
|
// Change speed using bpm
|
||||||
bpm(250)
|
bpm(250)
|
||||||
oneuclid(5, 9) :: snd('kick').out()
|
oneuclid(5, 9) :: snd('kick').out()
|
||||||
oneuclid(7,16) :: snd('east').end(0.5).n(irand(3,5)).out()
|
oneuclid(7,16) :: snd('east').end(0.5).n(irand(3,5)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>bin(iterator: number, n: number): boolean</ic>: a binary rhythm generator. It transforms the given number into its binary representation (_e.g_ <ic>34</ic> becomes <ic>100010</ic>). It then returns a boolean value based on the iterator in order to generate a rhythm.
|
- <ic>bin(iterator: number, n: number): boolean</ic>: a binary rhythm generator. It transforms the given number into its binary representation (_e.g_ <ic>34</ic> becomes <ic>100010</ic>). It then returns a boolean value based on the iterator in order to generate a rhythm.
|
||||||
- <ic>binrhythm(divisor: number, n: number): boolean: boolean</ic>: iterator-less version of the binary rhythm generator.
|
- <ic>binrhythm(divisor: number, n: number): boolean: boolean</ic>: iterator-less version of the binary rhythm generator.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Change the integers for a surprise rhythm!",
|
"Change the integers for a surprise rhythm!",
|
||||||
`
|
`
|
||||||
bpm(135);
|
bpm(135);
|
||||||
beat(.5) && bin($(1), 12) && snd('kick').n([4,9].beat(1.5)).out()
|
beat(.5) && bin($(1), 12) && snd('kick').n([4,9].beat(1.5)).out()
|
||||||
beat(.5) && bin($(2), 34) && snd('snare').n([3,5].beat(1)).out()
|
beat(.5) && bin($(2), 34) && snd('snare').n([3,5].beat(1)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"binrhythm for fast cool binary rhythms!",
|
"binrhythm for fast cool binary rhythms!",
|
||||||
`
|
`
|
||||||
let a = 0;
|
let a = 0;
|
||||||
a = beat(4) ? irand(1,20) : a;
|
a = beat(4) ? irand(1,20) : a;
|
||||||
binrhythm(.5, 6) && snd(['kick', 'snare'].beat(0.5)).n(11).out()
|
binrhythm(.5, 6) && snd(['kick', 'snare'].beat(0.5)).n(11).out()
|
||||||
@ -221,34 +221,34 @@ binrhythm([.5, .25].beat(1), 30) && snd('wt_granular').n(a)
|
|||||||
.adsr(0, r(.1, .4), 0, 0).freq([50, 60, 72].beat(4))
|
.adsr(0, r(.1, .4), 0, 0).freq([50, 60, 72].beat(4))
|
||||||
.room(1).size(1).out()
|
.room(1).size(1).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Submarine jungle music",
|
"Submarine jungle music",
|
||||||
`
|
`
|
||||||
bpm(145);
|
bpm(145);
|
||||||
beat(.5) && bin($(1), 911) && snd('ST69').n([2,3,4].beat())
|
beat(.5) && bin($(1), 911) && snd('ST69').n([2,3,4].beat())
|
||||||
.delay(0.125).delayt(0.25).end(0.25).speed(1/3)
|
.delay(0.125).delayt(0.25).end(0.25).speed(1/3)
|
||||||
.room(1).size(1).out()
|
.room(1).size(1).out()
|
||||||
beat(.5) && sound('amencutup').n(irand(2,7)).shape(0.3).out()
|
beat(.5) && sound('amencutup').n(irand(2,7)).shape(0.3).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
If you don't find it spicy enough, you can add some more probabilities to your rhythms by taking advantage of the probability functions. See the functions documentation page to learn more about them.
|
If you don't find it spicy enough, you can add some more probabilities to your rhythms by taking advantage of the probability functions. See the functions documentation page to learn more about them.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Probablistic drums in one line!",
|
"Probablistic drums in one line!",
|
||||||
`
|
`
|
||||||
prob(60)::beat(.5) && euclid($(1), 5, 8) && snd('kick').out()
|
prob(60)::beat(.5) && euclid($(1), 5, 8) && snd('kick').out()
|
||||||
prob(60)::beat(.5) && euclid($(2), 3, 8) && snd('mash')
|
prob(60)::beat(.5) && euclid($(2), 3, 8) && snd('mash')
|
||||||
.n([1,2,3].beat(1))
|
.n([1,2,3].beat(1))
|
||||||
.pan(usine(1/4)).out()
|
.pan(usine(1/4)).out()
|
||||||
prob(80)::beat(.5) && sound(['hh', 'hat'].pick()).out()
|
prob(80)::beat(.5) && sound(['hh', 'hat'].pick()).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
import pulses from "./pulses.svg";
|
import pulses from "./pulses.svg";
|
||||||
|
|
||||||
export const linear_time = (app: Editor): string => {
|
export const linear_time = (app: Editor): string => {
|
||||||
@ -22,12 +22,12 @@ export const linear_time = (app: Editor): string => {
|
|||||||
There is a tiny widget at the bottom right of the screen showing you the current BPM and the status of the transport. You can turn it on or off in the settings menu.
|
There is a tiny widget at the bottom right of the screen showing you the current BPM and the status of the transport. You can turn it on or off in the settings menu.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Printing the transport",
|
"Printing the transport",
|
||||||
`
|
`
|
||||||
log(\`\$\{cbar()}\, \$\{cbeat()\}, \$\{cpulse()\}\`)
|
log(\`\$\{cbar()}\, \$\{cbeat()\}, \$\{cpulse()\}\`)
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
### BPM and PPQN
|
### BPM and PPQN
|
||||||
|
|
||||||
@ -64,8 +64,8 @@ These values are **extremely useful** to craft more complex syntax or to write m
|
|||||||
You can use time primitives as conditionals. The following example will play a pattern A for 2 bars and a pattern B for 2 bars:
|
You can use time primitives as conditionals. The following example will play a pattern A for 2 bars and a pattern B for 2 bars:
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Manual mode: using time primitives!",
|
"Manual mode: using time primitives!",
|
||||||
`
|
`
|
||||||
// Manual time condition
|
// Manual time condition
|
||||||
if((cbar() % 4) > 1) {
|
if((cbar() % 4) > 1) {
|
||||||
beat(2) && sound('kick').out()
|
beat(2) && sound('kick').out()
|
||||||
@ -83,8 +83,8 @@ if((cbar() % 4) > 1) {
|
|||||||
// This is always playing no matter what happens
|
// This is always playing no matter what happens
|
||||||
beat([.5, .5, 1, .25].beat(0.5)) :: sound('shaker').out()
|
beat([.5, .5, 1, .25].beat(0.5)) :: sound('shaker').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Time Warping
|
## Time Warping
|
||||||
|
|
||||||
@ -94,8 +94,8 @@ Time generally flows from the past to the future. However, you can manipulate it
|
|||||||
|
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Time is now super elastic!",
|
"Time is now super elastic!",
|
||||||
`
|
`
|
||||||
// Obscure Shenanigans - Bubobubobubo
|
// Obscure Shenanigans - Bubobubobubo
|
||||||
beat([1/4,1/8,1/16].beat(8)):: sound('sine')
|
beat([1/4,1/8,1/16].beat(8)):: sound('sine')
|
||||||
.freq([100,50].beat(16) + 50 * ($(1)%10))
|
.freq([100,50].beat(16) + 50 * ($(1)%10))
|
||||||
@ -108,14 +108,14 @@ flip(3) :: beat([.25,.5].beat(.5)) :: sound('dr')
|
|||||||
// Jumping back and forth in time
|
// Jumping back and forth in time
|
||||||
beat(.25) :: warp([12, 48, 24, 1, 120, 30].pick())
|
beat(.25) :: warp([12, 48, 24, 1, 120, 30].pick())
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>beat_warp(beat: number)</ic>: this function jumps to the _n_ beat of the clock. The first beat is <ic>1</ic>.
|
- <ic>beat_warp(beat: number)</ic>: this function jumps to the _n_ beat of the clock. The first beat is <ic>1</ic>.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Jumping back and forth with beats",
|
"Jumping back and forth with beats",
|
||||||
`
|
`
|
||||||
// Resonance bliss - Bubobubobubo
|
// Resonance bliss - Bubobubobubo
|
||||||
beat(.25)::snd('arpy')
|
beat(.25)::snd('arpy')
|
||||||
.note(30 + [0,3,7,10].beat())
|
.note(30 + [0,3,7,10].beat())
|
||||||
@ -130,40 +130,40 @@ beat(.5) :: snd('arpy').note(
|
|||||||
// Comment me to stop warping!
|
// Comment me to stop warping!
|
||||||
beat(1) :: beat_warp([2,4,5,10,11].pick())
|
beat(1) :: beat_warp([2,4,5,10,11].pick())
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
## Transport-based rhythm generators
|
## Transport-based rhythm generators
|
||||||
|
|
||||||
- <ic>onbeat(...n: number[])</ic>: The <ic>onbeat</ic> function allows you to lock on to a specific beat from the clock to execute code. It can accept multiple arguments. It's usage is very straightforward and not hard to understand. You can pass either integers or floating point numbers. By default, topos is using a <ic>4/4</ic> bar meaning that you can target any of these beats (or in-between) with this function.
|
- <ic>onbeat(...n: number[])</ic>: The <ic>onbeat</ic> function allows you to lock on to a specific beat from the clock to execute code. It can accept multiple arguments. It's usage is very straightforward and not hard to understand. You can pass either integers or floating point numbers. By default, topos is using a <ic>4/4</ic> bar meaning that you can target any of these beats (or in-between) with this function.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Some simple yet detailed rhythms",
|
"Some simple yet detailed rhythms",
|
||||||
`
|
`
|
||||||
onbeat(1,2,3,4)::snd('kick').out() // Bassdrum on each beat
|
onbeat(1,2,3,4)::snd('kick').out() // Bassdrum on each beat
|
||||||
onbeat(2,4)::snd('snare').n([8,4].beat(4)).out() // Snare on acccentuated beats
|
onbeat(2,4)::snd('snare').n([8,4].beat(4)).out() // Snare on acccentuated beats
|
||||||
onbeat(1.5,2.5,3.5, 3.75)::snd('hat').gain(r(0.9,1.1)).out() // Cool high-hats
|
onbeat(1.5,2.5,3.5, 3.75)::snd('hat').gain(r(0.9,1.1)).out() // Cool high-hats
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Let's do something more complex",
|
"Let's do something more complex",
|
||||||
`
|
`
|
||||||
onbeat(0.5, 2, 3, 3.75)::snd('kick').n(2).out()
|
onbeat(0.5, 2, 3, 3.75)::snd('kick').n(2).out()
|
||||||
onbeat(2, [1.5, 3, 4].pick(), 4)::snd('snare').n(8).out()
|
onbeat(2, [1.5, 3, 4].pick(), 4)::snd('snare').n(8).out()
|
||||||
beat([.25, 1/8].beat(1.5))::snd('hat').n(2)
|
beat([.25, 1/8].beat(1.5))::snd('hat').n(2)
|
||||||
.gain(rand(0.4, 0.7)).end(0.05)
|
.gain(rand(0.4, 0.7)).end(0.05)
|
||||||
.pan(usine()).out()
|
.pan(usine()).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
- <ic>oncount(beats: number[], meter: number)</ic>: This function is similar to <ic>onbeat</ic> but it allows you to specify a custom number of beats as the last argument.
|
- <ic>oncount(beats: number[], meter: number)</ic>: This function is similar to <ic>onbeat</ic> but it allows you to specify a custom number of beats as the last argument.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using oncount to create more variation in the rhythm",
|
"Using oncount to create more variation in the rhythm",
|
||||||
`
|
`
|
||||||
z1('1/16 (0 2 3 4)+(0 2 4 6)').scale('pentatonic').sound('sawtooth')
|
z1('1/16 (0 2 3 4)+(0 2 4 6)').scale('pentatonic').sound('sawtooth')
|
||||||
.cutoff([400,500,1000,2000].beat(1))
|
.cutoff([400,500,1000,2000].beat(1))
|
||||||
.lpadsr(2, 0, .2, 0, 0)
|
.lpadsr(2, 0, .2, 0, 0)
|
||||||
@ -171,20 +171,20 @@ z1('1/16 (0 2 3 4)+(0 2 4 6)').scale('pentatonic').sound('sawtooth')
|
|||||||
onbeat(1,1.5,2,3,4) :: sound('bd').gain(2.0).out()
|
onbeat(1,1.5,2,3,4) :: sound('bd').gain(2.0).out()
|
||||||
oncount([1,3,5.5,7,7.5,8],8) :: sound('hh').gain(irand(1.0,4.0)).out()
|
oncount([1,3,5.5,7,7.5,8],8) :: sound('hh').gain(irand(1.0,4.0)).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using oncount to create rhythms with a custom meter",
|
"Using oncount to create rhythms with a custom meter",
|
||||||
`
|
`
|
||||||
bpm(200)
|
bpm(200)
|
||||||
oncount([1, 5, 9, 13],16) :: sound('808bd').n(4).shape(0.5).gain(1.0).out()
|
oncount([1, 5, 9, 13],16) :: sound('808bd').n(4).shape(0.5).gain(1.0).out()
|
||||||
oncount([5, 6, 13],16) :: sound('shaker').room(0.25).gain(0.9).out()
|
oncount([5, 6, 13],16) :: sound('shaker').room(0.25).gain(0.9).out()
|
||||||
oncount([2, 3, 3.5, 6, 7, 10, 15],16) :: sound('hh').n(8).gain(0.8).out()
|
oncount([2, 3, 3.5, 6, 7, 10, 15],16) :: sound('hh').n(8).gain(0.8).out()
|
||||||
oncount([1, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16],16) :: sound('hh').out()
|
oncount([1, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16],16) :: sound('hh').out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
@ -1,5 +1,5 @@
|
|||||||
import { makeExampleFactory } from "../../../Documentation";
|
import { makeExampleFactory } from "../../Documentation";
|
||||||
import { type Editor } from "../../../main";
|
import { type Editor } from "../../main";
|
||||||
import times from "./times.svg";
|
import times from "./times.svg";
|
||||||
|
|
||||||
export const time = (application: Editor): string => {
|
export const time = (application: Editor): string => {
|
||||||
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
@ -1,5 +1,5 @@
|
|||||||
import { type Editor } from "../../main";
|
import { type Editor } from "../main";
|
||||||
import { makeExampleFactory } from "../../Documentation";
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
export const variables = (application: Editor): string => {
|
export const variables = (application: Editor): string => {
|
||||||
const makeExample = makeExampleFactory(application);
|
const makeExample = makeExampleFactory(application);
|
||||||
@ -18,21 +18,21 @@ By default, each script is independant from each other. Scripts live in their ow
|
|||||||
**Note:** since this example is running in the documentation, we cannot take advantage of the multiple scripts paradigm. Try to send a variable from the global file to the local file n°6.
|
**Note:** since this example is running in the documentation, we cannot take advantage of the multiple scripts paradigm. Try to send a variable from the global file to the local file n°6.
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Setting a global variable",
|
"Setting a global variable",
|
||||||
`
|
`
|
||||||
v('my_cool_variable', 2)
|
v('my_cool_variable', 2)
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Getting that variable back and printing!",
|
"Getting that variable back and printing!",
|
||||||
`
|
`
|
||||||
// Note that we just use one argument
|
// Note that we just use one argument
|
||||||
log(v('my_cool_variable'))
|
log(v('my_cool_variable'))
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
## Counter and iterators
|
## Counter and iterators
|
||||||
@ -51,32 +51,32 @@ You will often need to use iterators and/or counters to index over data structur
|
|||||||
**Note:** Counters also come with a secret syntax. They can be called with the **$** symbol!
|
**Note:** Counters also come with a secret syntax. They can be called with the **$** symbol!
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Iterating over a list of samples using a counter",
|
"Iterating over a list of samples using a counter",
|
||||||
`
|
`
|
||||||
rhythm(.25, 6, 8) :: sound('dr').n($(1)).end(.25).out()
|
rhythm(.25, 6, 8) :: sound('dr').n($(1)).end(.25).out()
|
||||||
`,
|
`,
|
||||||
true,
|
true
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Using a more complex counter",
|
"Using a more complex counter",
|
||||||
`
|
`
|
||||||
// Limit is 20, step is 5
|
// Limit is 20, step is 5
|
||||||
rhythm(.25, 6, 8) :: sound('dr').n($(1, 20, 5)).end(.25).out()
|
rhythm(.25, 6, 8) :: sound('dr').n($(1, 20, 5)).end(.25).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
${makeExample(
|
${makeExample(
|
||||||
"Calling the drunk mechanism",
|
"Calling the drunk mechanism",
|
||||||
`
|
`
|
||||||
// Limit is 20, step is 5
|
// Limit is 20, step is 5
|
||||||
rhythm(.25, 6, 8) :: sound('dr').n(drunk()).end(.25).out()
|
rhythm(.25, 6, 8) :: sound('dr').n(drunk()).end(.25).out()
|
||||||
`,
|
`,
|
||||||
false,
|
false
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
`
|
||||||
};
|
}
|
||||||
550
src/documentation/ziffers.ts
Normal file
550
src/documentation/ziffers.ts
Normal file
@ -0,0 +1,550 @@
|
|||||||
|
import { type Editor } from "../main";
|
||||||
|
import { makeExampleFactory } from "../Documentation";
|
||||||
|
|
||||||
|
export const ziffers = (application: Editor): string => {
|
||||||
|
const makeExample = makeExampleFactory(application);
|
||||||
|
return `
|
||||||
|
# Ziffers
|
||||||
|
|
||||||
|
Ziffers is a **musical number based notation** tuned for _live coding_. It is a very powerful and flexible notation for describing musical patterns in very few characters. Number based musical notation has a long history and has been used for centuries as a shorthand technique for music notation. Amiika has written [papers](https://zenodo.org/record/7841945) and other documents describing his system. It is currently implemented for many live coding platforms including [Sardine](https://sardine.raphaelforment.fr) (Raphaël Forment) and [Sonic Pi](https://sonic-pi.net/) (Sam Aaron). Ziffers can be used for:
|
||||||
|
|
||||||
|
- composing melodies using using **classical music notation and concepts**.
|
||||||
|
- exploring **generative / aleatoric / stochastic** melodies and applying them to sounds and synths.
|
||||||
|
- embracing a different mindset and approach to time and **patterning**.
|
||||||
|
|
||||||
|
${makeExample("Super Fancy Ziffers example", `
|
||||||
|
z1('1/8 024!3 035 024 0124').sound('wt_stereo')
|
||||||
|
.adsr(0, .4, 0.5, .4).gain(0.1)
|
||||||
|
.lpadsr(4, 0, .2, 0, 0)
|
||||||
|
.cutoff(5000 + usine(1/2) * 2000)
|
||||||
|
.n([1,2,4].beat(4)).out()
|
||||||
|
z2('<1/8 1/16> __ 0 <(^) (^ ^)> (0,8)').sound('wt_stereo')
|
||||||
|
.adsr(0, .5, 0.5, .4).gain(0.2)
|
||||||
|
.lpadsr(4, 0, .2, 0, 0).n(14)
|
||||||
|
.cutoff(200 + usine(1/2) * 4000)
|
||||||
|
.n([1,2,4].beat(4)).o(2).room(0.9).out()
|
||||||
|
let osci = 1500 + usine(1/2) * 2000;
|
||||||
|
z3('can can:2').sound().gain(1).cutoff(osci).out()
|
||||||
|
z4('1/4 kick kick snare kick').sound().gain(1).cutoff(osci).out()
|
||||||
|
`, true)}
|
||||||
|
|
||||||
|
## Notation
|
||||||
|
|
||||||
|
The basic Ziffer notation is entirely written in JavaScript strings (_e.g_ <ic>"0 1 2"</ic>). It consists mostly of numbers and letters. The whitespace character is used as a separator. Instead of note names, Ziffer is using numbers to represent musical pitch and letters to represent musical durations. Alternatively, _floating point numbers_ can also be used to represent durations.
|
||||||
|
|
||||||
|
| Syntax | Symbol | Description |
|
||||||
|
|------------ |--------|------------------------|
|
||||||
|
| **Pitches** | <ic>0-9</ic> <ic>{10 11 21}</ic> | Numbers or escaped numbers in curly brackets |
|
||||||
|
| **Duration** | <ic>0.25</ic>, <ic>0.5</ic> | Floating point numbers can also be used as durations |
|
||||||
|
| **Duration** | <ic>1/4</ic>, <ic>1/16</ic> | Fractions can be used as durations |
|
||||||
|
| **Subdivision** | <ic>[1 [2 3]]</ic> | Durations can be subdivided using square brackets |
|
||||||
|
| **Octave** | <ic>^ _</ic> | <ic>^</ic> for octave up and <ic>_</ic> for octave down |
|
||||||
|
| **Accidentals** | <ic># b</ic> | Sharp and flats, just like with regular music notation :smile: |
|
||||||
|
| **Rest** | <ic>r</ic> | Rest / silences |
|
||||||
|
| **Repeat** | <ic>!1-9</ic> | Repeat the item 1 to 9 times |
|
||||||
|
| **Chords** | <ic>[1-9]+ / [iv]+ / [AG]+name</ic> | Multiple pitches grouped together, roman numerals or named chords |
|
||||||
|
| **Samples** | <ic>[a-z0-9_]+</ic> | Samples can be used pitched or unpitched |
|
||||||
|
| **Index/Channel** | <ic>[a-z0-9]+:[0-9]*</ic> | Samples or midi channel can be changed using a colon |
|
||||||
|
|
||||||
|
**Note:** Some features are experimental and some are still unsupported. For full / prior syntax see article about <a href="https://zenodo.org/record/7841945" target="_blank">Ziffers</a>.
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Pitches from 0 to 9",
|
||||||
|
`
|
||||||
|
z1('0.25 0 1 2 3 4 5 6 7 8 9').sound('wt_stereo')
|
||||||
|
.adsr(0, .1, 0, 0).out()`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Escaped pitches using curly brackets",
|
||||||
|
`z1('_ _ 0 {9 10 11} 4 {12 13 14}')
|
||||||
|
.sound('wt_05').pan(r(0,1))
|
||||||
|
.cutoff(usaw(1/2) * 4000)
|
||||||
|
.room(0.9).size(0.9).out()`,
|
||||||
|
false
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Durations using fractions and floating point numbers",
|
||||||
|
`
|
||||||
|
z1('1/8 0 2 4 0 2 4 1/4 0 3 5 0.25 _ 0 7 0 7')
|
||||||
|
.sound('square').delay(0.5).delayt(1/8)
|
||||||
|
.adsr(0, .1, 0, 0).delayfb(0.45).out()
|
||||||
|
`,
|
||||||
|
false
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Disco was invented thanks to Ziffers",
|
||||||
|
`
|
||||||
|
z1('e _ _ 0 ^ 0 _ 0 ^ 0').sound('jvbass').out()
|
||||||
|
beat(1)::snd('bd').out(); beat(2)::snd('sd').out()
|
||||||
|
beat(3) :: snd('cp').room(0.5).size(0.5).orbit(2).out()
|
||||||
|
`,
|
||||||
|
false
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Accidentals and rests for nice melodies",
|
||||||
|
`
|
||||||
|
z1('^ 1/8 0 1 b2 3 4 _ 4 b5 4 3 b2 1 0')
|
||||||
|
.scale('major').sound('triangle')
|
||||||
|
.cutoff(500).lpadsr(5, 0, 1/12, 0, 0)
|
||||||
|
.fmi(0.5).fmh(2).delay(0.5).delayt(1/3)
|
||||||
|
.adsr(0, .1, 0, 0).out()
|
||||||
|
`,
|
||||||
|
false
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Repeat items n-times",
|
||||||
|
`
|
||||||
|
z1('1/8 _ _ 0!4 3!4 4!4 3!4')
|
||||||
|
.scale('major').sound('wt_oboe')
|
||||||
|
.shape(0.2).sustain(0.1).out()
|
||||||
|
z2('1/8 _ 0!4 5!4 4!2 7!2')
|
||||||
|
.scale('major').sound('wt_oboe')
|
||||||
|
.shape(0.2).sustain(0.1).out()
|
||||||
|
`,
|
||||||
|
false
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Subdivided durations",
|
||||||
|
`
|
||||||
|
z1('w [0 [5 [3 7]]] h [0 4]')
|
||||||
|
.scale('major').sound('sine')
|
||||||
|
.fmi(usine(.5)).fmh(2).out()
|
||||||
|
`,
|
||||||
|
false
|
||||||
|
)}
|
||||||
|
|
||||||
|
## Chords
|
||||||
|
|
||||||
|
Chords can be build by grouping pitches or using roman numeral notation, or by using named chords.
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Chords from pitches",
|
||||||
|
`
|
||||||
|
z1('1.0 024 045 058 046 014')
|
||||||
|
.sound('sine').adsr(0.5, 1, 0, 0)
|
||||||
|
.room(0.5).size(0.9)
|
||||||
|
.scale("minor").out()
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Chords from roman numerals",
|
||||||
|
`
|
||||||
|
z1('2/4 i vi ii v')
|
||||||
|
.sound('triangle').adsr(0.2, 0.3, 0, 0)
|
||||||
|
.room(0.5).size(0.9).scale("major").out()
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Named chords with repeats",
|
||||||
|
`
|
||||||
|
z1('0.25 Bmaj7!2 D7!2 _ Gmaj7!2 Bb7!2 ^ Ebmaj7!2')
|
||||||
|
.sound('square').room(0.5).cutoff(500)
|
||||||
|
.lpadsr(4, 0, .4, 0, 0).size(0.9)
|
||||||
|
.scale("major").out()
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Transposing chords",
|
||||||
|
`
|
||||||
|
z1('q Amin!2').key(["A2", "E2"].beat(4))
|
||||||
|
.sound('sawtooth').cutoff(500)
|
||||||
|
.lpadsr(2, 0, .5, 0, 0, 0).out()`
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Chord transposition with roman numerals",
|
||||||
|
`
|
||||||
|
z1('i i v%-4 v%-2 vi%-5 vi%-3 iv%-2 iv%-1')
|
||||||
|
.sound('triangle').adsr(1/16, 1/5, 0.1, 0)
|
||||||
|
.delay(0.5).delayt([1/8, 1/4].beat(4))
|
||||||
|
.delayfb(0.5).out()
|
||||||
|
beat(4) :: sound('breaks165').stretch(4).out()
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Chord transposition with named chords",
|
||||||
|
`
|
||||||
|
z1('1/4 Cmin!3 Fmin!3 Fmin%-1 Fmin%-2 Fmin%-1')
|
||||||
|
.sound("sine").bpf(500 + usine(1/4) * 2000)
|
||||||
|
.out()
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Programmatic inversions",
|
||||||
|
`
|
||||||
|
z1('1/6 i v 1/3 vi iv').invert([1,-1,-2,0].beat(4))
|
||||||
|
.sound("sawtooth").cutoff(1000)
|
||||||
|
.lpadsr(2, 0, .2, 0, 0).out()
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
|
||||||
|
## Algorithmic operations
|
||||||
|
|
||||||
|
Ziffers provides shorthands for **many** numeric and algorithimic operations such as evaluating random numbers and creating sequences using list operations:
|
||||||
|
|
||||||
|
* **List operations:** Cartesian operation (_e.g._ <ic>(3 2 1)+(2 5)</ic>) using the <ic>+</ic> operator. All the arithmetic operators are supported.
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Element-wise operations for melodic generation",
|
||||||
|
`
|
||||||
|
z1("1/8 _ 0 (0 1 3)+(1 2) 0 (2 3 5)-(1 2)").sound('sine')
|
||||||
|
.scale('pentatonic').fmi([0.25,0.5].beat(2)).fmh([2,4].beat(2))
|
||||||
|
.room(0.9).size(0.9).sustain(0.1).delay(0.5).delay(0.125)
|
||||||
|
.delayfb(0.25).out();
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
* **Random numbers:** <ic>(4,6)</ic> Random number between 4 and 6
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Random numbers, true computer music at last!",
|
||||||
|
`
|
||||||
|
z1("s _ (0,8) 0 0 (0,5) 0 0").sound('sine')
|
||||||
|
.adsr(0, .1, 0, 0).scale('minor')
|
||||||
|
.fmdec(0.25).fmi(2).fmh([0.5, 0.25].beat(2))
|
||||||
|
.room(0.9).size(0.5).sustain(0.1) .delay(0.5)
|
||||||
|
.delay(0.125).delayfb(0.25).out();
|
||||||
|
beat(.5) :: snd(['kick', 'hat'].beat(.5)).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
## Keys and scales
|
||||||
|
|
||||||
|
Ziffers supports all the keys and scales. Keys can be defined by using [scientific pitch notation](https://en.wikipedia.org/wiki/Scientific_pitch_notation), for example <ic>F3</ic>. Western style (1490 scales) can be with scale names named after greek modes and extended by [William Zeitler](https://ianring.com/musictheory/scales/traditions/zeitler). You will never really run out of scales to play with using Ziffers. Here is a short list of some possible scales that you can play with:
|
||||||
|
|
||||||
|
| Scale name | Intervals |
|
||||||
|
|------------|------------------------|
|
||||||
|
| Lydian | <ic>2221221</ic> |
|
||||||
|
| Mixolydian | <ic>2212212</ic> |
|
||||||
|
| Aeolian | <ic>2122122</ic> |
|
||||||
|
| Locrian | <ic>1221222</ic> |
|
||||||
|
| Ionian | <ic>2212221</ic> |
|
||||||
|
| Dorian | <ic>2122212</ic> |
|
||||||
|
| Phrygian | <ic>1222122</ic> |
|
||||||
|
| Soryllic | <ic>11122122</ic>|
|
||||||
|
| Modimic | <ic>412122</ic> |
|
||||||
|
| Ionalian | <ic>1312122</ic> |
|
||||||
|
| ... | And it goes on for **1490** scales |
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"What the hell is the Modimic scale?",
|
||||||
|
`
|
||||||
|
z1("s (0,8) 0 0 (0,5) 0 0").sound('sine')
|
||||||
|
.scale('modimic').fmi(2).fmh(2).room(0.5)
|
||||||
|
.size(0.5).sustain(0.1) .delay(0.5)
|
||||||
|
.delay(0.125).delayfb(0.25).out();
|
||||||
|
beat(.5) :: snd(['kick', 'hat'].beat(.5)).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ic></ic>
|
||||||
|
|
||||||
|
You can also use more traditional <a href="https://ianring.com/musictheory/scales/traditions/western" target="_blank">western names</a>:
|
||||||
|
|
||||||
|
|
||||||
|
| Scale name | Intervals |
|
||||||
|
|------------|------------------------|
|
||||||
|
| Major | <ic>2212221</ic> |
|
||||||
|
| Minor | <ic>2122122</ic> |
|
||||||
|
| Minor pentatonic | <ic>32232</ic> |
|
||||||
|
| Harmonic minor | <ic>2122131</ic>|
|
||||||
|
| Harmonic major | <ic>2212131</ic>|
|
||||||
|
| Melodic minor | <ic>2122221</ic>|
|
||||||
|
| Melodic major | <ic>2212122</ic>|
|
||||||
|
| Whole | <ic>222222</ic> |
|
||||||
|
| Blues minor | <ic>321132</ic> |
|
||||||
|
| Blues major | <ic>211323</ic> |
|
||||||
|
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Let's fall back to a classic blues minor scale",
|
||||||
|
`
|
||||||
|
z1("s (0,8) 0 0 (0,5) 0 0").sound('sine')
|
||||||
|
.scale('blues minor').fmi(2).fmh(2).room(0.5)
|
||||||
|
.size(0.5).sustain(0.25).delay(0.25)
|
||||||
|
.delay(0.25).delayfb(0.5).out();
|
||||||
|
beat(1, 1.75) :: snd(['kick', 'hat'].beat(1)).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
Microtonal scales can be defined using <a href="https://www.huygens-fokker.org/scala/scl_format.html" target="_blank">Scala format</a> or by extended notation defined by Sevish <a href="https://sevish.com/scaleworkshop/" target="_blank">Scale workshop</a>, for example:
|
||||||
|
|
||||||
|
- **Young:** 106. 198. 306.2 400.1 502. 604. 697.9 806.1 898.1 1004.1 1102. 1200.
|
||||||
|
- **Wendy carlos:** 17/16 9/8 6/5 5/4 4/3 11/8 3/2 13/8 5/3 7/4 15/8 2/1
|
||||||
|
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Wendy Carlos, here we go!",
|
||||||
|
`
|
||||||
|
z1("s ^ (0,8) 0 0 _ (0,5) 0 0").sound('sine')
|
||||||
|
.scale('17/16 9/8 6/5 5/4 4/3 11/8 3/2 13/8 5/3 7/4 15/8 2/1').fmi(2).fmh(2).room(0.5)
|
||||||
|
.size(0.5).sustain(0.15).delay(0.1)
|
||||||
|
.delay(0.25).delayfb(0.5).out();
|
||||||
|
beat(1, 1.75) :: snd(['kick', 'hat'].beat(1)).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
## Synchronization
|
||||||
|
|
||||||
|
Ziffers numbered methods **(z0-z16)** can be used to parse and play patterns. Each method is individually cached and can be used to play multiple patterns simultaneously. By default, each Ziffers expression can have a different duration. This system is thus necessary to make everything fit together in a loop-based environment like Topos.
|
||||||
|
|
||||||
|
Numbered methods are synced automatically to **z0** method if it exsists. Syncing can also be done manually by using either the <ic>wait</ic> method, which will always wait for the current pattern to finish before starting the next cycle, or the <ic>sync</ic> method will only wait for the synced pattern to finish on the first time.
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Automatic sync to z0",
|
||||||
|
`
|
||||||
|
z0('w 0 8').sound('peri').out()
|
||||||
|
z1('e 0 4 5 9').sound('bell').out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Sync with wait",
|
||||||
|
`
|
||||||
|
z1('w 0 5').sound('pluck').release(0.1).sustain(0.25).out()
|
||||||
|
z2('q 6 3').wait(z1).sound('sine').release(0.16).sustain(0.55).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Sync on first run",
|
||||||
|
`
|
||||||
|
z1('w __ 0 5 9 3').sound('bin').out()
|
||||||
|
z2('q __ 4 2 e 6 3 q 6').sync(z1).sound('east').out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
- Basic notation
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Simple method chaining",
|
||||||
|
`
|
||||||
|
z1('0 1 2 3').key('G3')
|
||||||
|
.scale('minor').sound('sine').out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"More complex chaining",
|
||||||
|
`
|
||||||
|
z1('0 1 2 3 4').key('G3').scale('minor').sound('sine').often(n => n.pitch+=3).rarely(s => s.delay(0.5)).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Simple options",
|
||||||
|
`
|
||||||
|
z1('0 3 2 4',{key: 'D3', scale: 'minor pentatonic'}).sound('sine').out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Duration chars",
|
||||||
|
`
|
||||||
|
z1('q 0 0 4 4 5 5 h4 q 3 3 2 2 1 1 h0').sound('sine').out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Fraction durations",
|
||||||
|
`
|
||||||
|
z1('1/4 0 0 4 4 5 5 2/4 4 1/4 3 3 2 2 1 1 2/4 0')
|
||||||
|
.sound('sine').out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Decimal durations",
|
||||||
|
`
|
||||||
|
z1('0.25 5 1 2 6 0.125 3 8 0.5 4 1.0 0')
|
||||||
|
.sound('sine').scale("galian").out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Rest and octaves",
|
||||||
|
`
|
||||||
|
z1('q 0 ^ e0 r _ 0 _ r 4 ^4 4')
|
||||||
|
.sound('sine').scale("godian").out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Rests with durations",
|
||||||
|
`
|
||||||
|
z1('q 0 4 e^r 3 e3 0.5^r h4 1/4^r e 5 r 0.125^r 0')
|
||||||
|
.sound('sine').scale("aeryptian").out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
- Scales
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Microtonal scales",
|
||||||
|
`
|
||||||
|
z1('q 0 3 {10 14} e 8 4 {5 10 12 14 7 0}').sound('sine')
|
||||||
|
.fmi([1,2,4,8].pick())
|
||||||
|
.scale("17/16 9/8 6/5 5/4 4/3 11/8 3/2 13/8 5/3 7/4 15/8 2/1")
|
||||||
|
.out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Scala scale from variable",
|
||||||
|
`
|
||||||
|
const werckmeister = "107.82 203.91 311.72 401.955 503.91 605.865 701.955 809.775 900. 1007.82 1103.91 1200."
|
||||||
|
|
||||||
|
z0('s (0,3) ^ 0 3 ^ 0 (3,6) 0 _ (3,5) 0 _ 3 ^ 0 (3,5) ^ 0 6 0 _ 3 0')
|
||||||
|
.key('C3')
|
||||||
|
.scale(werckmeister)
|
||||||
|
.sound('sine')
|
||||||
|
.fmi(1 + usine(0.5) * irand(1,10))
|
||||||
|
.cutoff(100 + usine(.5) * 100)
|
||||||
|
.out()
|
||||||
|
|
||||||
|
onbeat(1,1.5,3) :: sound('bd').cutoff(100 + usine(.25) * 1000).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
- Algorithmic operations
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Random numbers",
|
||||||
|
`
|
||||||
|
z1('q 0 (2,4) 4 (5,9)').sound('sine')
|
||||||
|
.scale("Bebop minor")
|
||||||
|
.out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"List operations",
|
||||||
|
`
|
||||||
|
z1('q (0 3 1 5)+(2 5) e (0 5 2)*(2 3) (0 5 2)>>(2 3) (0 5 2)%(2 3)').sound('sine')
|
||||||
|
.scale("Bebop major")
|
||||||
|
.out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
## Samples
|
||||||
|
|
||||||
|
Samples can be patterned using the sample names or using <c>@</c>-operator for assigning sample to a pitch. Sample index can be changed using the <c>:</c> operator.
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Sampled drums",
|
||||||
|
`
|
||||||
|
z1('bd [hh hh]').octave(-2).sound('sine').out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"More complex pattern",
|
||||||
|
`
|
||||||
|
z1('bd [hh <hh <cp cp:2>>]').octave(-2).sound('sine').out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Pitched samples",
|
||||||
|
`
|
||||||
|
z1('0@sax 3@sax 2@sax 6@sax')
|
||||||
|
.octave(-1).sound()
|
||||||
|
.adsr(0.25,0.125,0.125,0.25).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Pitched samples from list operation",
|
||||||
|
`
|
||||||
|
z1('e (0 3 -1 4)+(-1 0 2 1)@sine')
|
||||||
|
.key('G4')
|
||||||
|
.scale('110 220 320 450')
|
||||||
|
.sound().out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Pitched samples with list notation",
|
||||||
|
`
|
||||||
|
z1('e (0 2 6 3 5 -2)@sax (0 2 6 3 5 -2)@arp')
|
||||||
|
.octave(-1).sound()
|
||||||
|
.adsr(0.25,0.125,0.125,0.25).out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Sample indices",
|
||||||
|
`
|
||||||
|
z1('e 1:2 4:3 6:2')
|
||||||
|
.octave(-1).sound("east").out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"Pitched samples with sample indices",
|
||||||
|
`
|
||||||
|
z1('_e 1@east:2 4@bd:3 6@arp:2 9@baa').sound().out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## String prototypes
|
||||||
|
|
||||||
|
You can also use string prototypes as an alternative syntax for creating Ziffers patterns
|
||||||
|
|
||||||
|
${makeExample(
|
||||||
|
"String prototypes",
|
||||||
|
`
|
||||||
|
"q 0 e 5 2 6 2 q 3".z0().sound('sine').out()
|
||||||
|
"q 2 7 8 6".z1().octave(-1).sound('sine').out()
|
||||||
|
"q 2 7 8 6".z2({key: "C2", scale: "aeolian"}).sound('sine').scale("minor").out()
|
||||||
|
`,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
|
||||||
|
`;
|
||||||
|
};
|
||||||
@ -141,7 +141,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
|||||||
}
|
}
|
||||||
return Array.from(
|
return Array.from(
|
||||||
{ length: times },
|
{ length: times },
|
||||||
() => Math.floor(api.randomGen() * (max - min + 1)) + min,
|
() => Math.floor(api.randomGen() * (max - min + 1)) + min
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -164,7 +164,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
|||||||
const chunk_size = divisor; // Get the first argument (chunk size)
|
const chunk_size = divisor; // Get the first argument (chunk size)
|
||||||
const timepos = api.app.clock.pulses_since_origin;
|
const timepos = api.app.clock.pulses_since_origin;
|
||||||
const slice_count = Math.floor(
|
const slice_count = Math.floor(
|
||||||
timepos / Math.floor(chunk_size * api.ppqn()),
|
timepos / Math.floor(chunk_size * api.ppqn())
|
||||||
);
|
);
|
||||||
return this[slice_count % this.length];
|
return this[slice_count % this.length];
|
||||||
};
|
};
|
||||||
@ -174,12 +174,12 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
|||||||
const timepos = api.app.clock.pulses_since_origin;
|
const timepos = api.app.clock.pulses_since_origin;
|
||||||
const ppqn = api.ppqn();
|
const ppqn = api.ppqn();
|
||||||
const adjustedDurations: number[] = this.map(
|
const adjustedDurations: number[] = this.map(
|
||||||
(_, index) => durations[index % durations.length],
|
(_, index) => durations[index % durations.length]
|
||||||
);
|
);
|
||||||
const totalDurationInPulses = adjustedDurations.reduce(
|
const totalDurationInPulses = adjustedDurations.reduce(
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
(acc, duration) => acc + duration * ppqn,
|
(acc, duration) => acc + duration * ppqn,
|
||||||
0,
|
0
|
||||||
);
|
);
|
||||||
const loopPosition = timepos % totalDurationInPulses;
|
const loopPosition = timepos % totalDurationInPulses;
|
||||||
let cumulativeDuration = 0;
|
let cumulativeDuration = 0;
|
||||||
@ -402,7 +402,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
|||||||
|
|
||||||
Array.prototype.scale = function (
|
Array.prototype.scale = function (
|
||||||
scale: string = "major",
|
scale: string = "major",
|
||||||
base_note: number = 0,
|
base_note: number = 0
|
||||||
) {
|
) {
|
||||||
/**
|
/**
|
||||||
* @param scale - the scale name
|
* @param scale - the scale name
|
||||||
@ -426,7 +426,7 @@ Array.prototype.scale = function (
|
|||||||
|
|
||||||
Array.prototype.scaleArp = function (
|
Array.prototype.scaleArp = function (
|
||||||
scaleName: string = "major",
|
scaleName: string = "major",
|
||||||
boundary: number = 0,
|
boundary: number = 0
|
||||||
) {
|
) {
|
||||||
/*
|
/*
|
||||||
* @param scaleName - the scale name
|
* @param scaleName - the scale name
|
||||||
|
|||||||
@ -2,111 +2,112 @@ import { type UserAPI } from "../API";
|
|||||||
import { MidiEvent } from "../classes/MidiEvent";
|
import { MidiEvent } from "../classes/MidiEvent";
|
||||||
import { Player } from "../classes/ZPlayer";
|
import { Player } from "../classes/ZPlayer";
|
||||||
import { SoundEvent } from "../classes/SoundEvent";
|
import { SoundEvent } from "../classes/SoundEvent";
|
||||||
import { SkipEvent } from "../classes/SkipEvent";
|
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface Number {
|
interface Number {
|
||||||
z(): Player;
|
z(): Player;
|
||||||
z0(): Player;
|
z0(): Player;
|
||||||
z1(): Player;
|
z1(): Player;
|
||||||
z2(): Player;
|
z2(): Player;
|
||||||
z3(): Player;
|
z3(): Player;
|
||||||
z4(): Player;
|
z4(): Player;
|
||||||
z5(): Player;
|
z5(): Player;
|
||||||
z6(): Player;
|
z6(): Player;
|
||||||
z7(): Player;
|
z7(): Player;
|
||||||
z8(): Player;
|
z8(): Player;
|
||||||
z9(): Player;
|
z9(): Player;
|
||||||
z10(): Player;
|
z10(): Player;
|
||||||
z11(): Player;
|
z11(): Player;
|
||||||
z12(): Player;
|
z12(): Player;
|
||||||
z13(): Player;
|
z13(): Player;
|
||||||
z14(): Player;
|
z14(): Player;
|
||||||
z15(): Player;
|
z15(): Player;
|
||||||
z16(): Player;
|
z16(): Player;
|
||||||
midi(): MidiEvent;
|
midi(): MidiEvent;
|
||||||
sound(name: string): SoundEvent | SkipEvent;
|
sound(name: string): SoundEvent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const makeNumberExtensions = (api: UserAPI) => {
|
export const makeNumberExtensions = (api: UserAPI) => {
|
||||||
Number.prototype.z0 = function (options: { [key: string]: any } = {}) {
|
|
||||||
return api.z0(this.valueOf().toString().split("").join(" "), options);
|
|
||||||
};
|
|
||||||
|
|
||||||
Number.prototype.z1 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z0 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z1(this.valueOf().toString().split("").join(" "), options);
|
return api.z0(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z2 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z1 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z2(this.valueOf().toString().split("").join(" "), options);
|
return api.z1(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z3 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z2 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z3(this.valueOf().toString().split("").join(" "), options);
|
return api.z2(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z4 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z3 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z4(this.valueOf().toString().split("").join(" "), options);
|
return api.z3(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z5 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z4 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z5(this.valueOf().toString().split("").join(" "), options);
|
return api.z4(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z6 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z5 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z6(this.valueOf().toString().split("").join(" "), options);
|
return api.z5(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z7 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z6 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z7(this.valueOf().toString().split("").join(" "), options);
|
return api.z6(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z8 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z7 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z8(this.valueOf().toString().split("").join(" "), options);
|
return api.z7(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z9 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z8 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z9(this.valueOf().toString().split("").join(" "), options);
|
return api.z8(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z10 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z9 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z10(this.valueOf().toString().split("").join(" "), options);
|
return api.z9(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z11 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z10 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z11(this.valueOf().toString().split("").join(" "), options);
|
return api.z10(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z12 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z11 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z12(this.valueOf().toString().split("").join(" "), options);
|
return api.z11(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z13 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z12 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z13(this.valueOf().toString().split("").join(" "), options);
|
return api.z12(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z14 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z13 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z14(this.valueOf().toString().split("").join(" "), options);
|
return api.z13(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z15 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z14 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z15(this.valueOf().toString().split("").join(" "), options);
|
return api.z14(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.z16 = function (options: { [key: string]: any } = {}) {
|
Number.prototype.z15 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z16(this.valueOf().toString().split("").join(" "), options);
|
return api.z15(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.midi = function (...kwargs: any[]) {
|
Number.prototype.z16 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.midi(this.valueOf(), ...kwargs);
|
return api.z16(this.valueOf().toString().split("").join(" "), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
Number.prototype.sound = function (name: string): SoundEvent | SkipEvent {
|
Number.prototype.midi = function (...kwargs: any[]) {
|
||||||
if (Number.isInteger(this.valueOf())) {
|
return api.midi(this.valueOf(), ...kwargs);
|
||||||
return (api.sound(name) as SoundEvent).note(this.valueOf());
|
|
||||||
} else {
|
|
||||||
return (api.sound(name) as SoundEvent).freq(this.valueOf());
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
Number.prototype.sound = function (name: string) {
|
||||||
|
if(Number.isInteger(this.valueOf())) {
|
||||||
|
return (api.sound(name) as SoundEvent).note(this.valueOf());
|
||||||
|
} else {
|
||||||
|
return (api.sound(name) as SoundEvent).freq(this.valueOf());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -5,227 +5,226 @@ export {};
|
|||||||
|
|
||||||
// Extend String prototype
|
// Extend String prototype
|
||||||
declare global {
|
declare global {
|
||||||
interface String {
|
interface String {
|
||||||
speak(): void;
|
speak(): void;
|
||||||
rate(speed: number): string;
|
rate(speed: number): string;
|
||||||
pitch(pitch: number): string;
|
pitch(pitch: number): string;
|
||||||
volume(volume: number): string;
|
volume(volume: number): string;
|
||||||
voice(voice: number): string;
|
voice(voice: number): string;
|
||||||
lang(language: string): string;
|
lang(language: string): string;
|
||||||
options(): SpeechOptions;
|
options(): SpeechOptions;
|
||||||
z(): Player;
|
z(): Player;
|
||||||
z0(): Player;
|
z0(): Player;
|
||||||
z1(): Player;
|
z1(): Player;
|
||||||
z2(): Player;
|
z2(): Player;
|
||||||
z3(): Player;
|
z3(): Player;
|
||||||
z4(): Player;
|
z4(): Player;
|
||||||
z5(): Player;
|
z5(): Player;
|
||||||
z6(): Player;
|
z6(): Player;
|
||||||
z7(): Player;
|
z7(): Player;
|
||||||
z8(): Player;
|
z8(): Player;
|
||||||
z9(): Player;
|
z9(): Player;
|
||||||
z10(): Player;
|
z10(): Player;
|
||||||
z11(): Player;
|
z11(): Player;
|
||||||
z12(): Player;
|
z12(): Player;
|
||||||
z13(): Player;
|
z13(): Player;
|
||||||
z14(): Player;
|
z14(): Player;
|
||||||
z15(): Player;
|
z15(): Player;
|
||||||
z16(): Player;
|
z16(): Player;
|
||||||
note(): number;
|
note(): number;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const isJsonString = (str: string): boolean => {
|
const isJsonString = (str: string):boolean => {
|
||||||
return str[0] === "{" && str[str.length - 1] === "}";
|
return str[0] === '{' && str[str.length - 1] === '}'
|
||||||
};
|
}
|
||||||
|
|
||||||
const stringObject = (str: string, params: object) => {
|
const stringObject = (str: string, params: object) => {
|
||||||
if (isJsonString(str)) {
|
if(isJsonString(str)) {
|
||||||
const obj = JSON.parse(str);
|
const obj = JSON.parse(str);
|
||||||
return JSON.stringify({ ...obj, ...params });
|
return JSON.stringify({...obj, ...params});
|
||||||
} else {
|
} else {
|
||||||
return JSON.stringify({ ...params, text: str });
|
return JSON.stringify({...params, text: str});
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
export const makeStringExtensions = (api: UserAPI) => {
|
export const makeStringExtensions = (api: UserAPI) => {
|
||||||
String.prototype.speak = function () {
|
String.prototype.speak = function () {
|
||||||
const options = JSON.parse(this.valueOf());
|
const options = JSON.parse(this.valueOf());
|
||||||
new Speaker({ ...options, text: options.text })
|
new Speaker({ ...options, text: options.text }).speak().then(() => {
|
||||||
.speak()
|
// Done
|
||||||
.then(() => {
|
}).catch((e) => {
|
||||||
// Done
|
console.log("Error speaking:", e);
|
||||||
})
|
});
|
||||||
.catch((e) => {
|
};
|
||||||
console.log("Error speaking:", e);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
String.prototype.rate = function (speed: number) {
|
String.prototype.rate = function (speed: number) {
|
||||||
return stringObject(this.valueOf(), { rate: speed });
|
return stringObject(this.valueOf(), {rate: speed});
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.pitch = function (pitch: number) {
|
String.prototype.pitch = function (pitch: number) {
|
||||||
return stringObject(this.valueOf(), { pitch: pitch });
|
return stringObject(this.valueOf(), {pitch: pitch});
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.lang = function (language: string) {
|
String.prototype.lang = function (language: string) {
|
||||||
return stringObject(this.valueOf(), { lang: language });
|
return stringObject(this.valueOf(),{lang: language});
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.volume = function (volume: number) {
|
String.prototype.volume = function (volume: number) {
|
||||||
return stringObject(this.valueOf(), { volume: volume });
|
return stringObject(this.valueOf(), {volume: volume});
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.voice = function (voice: number) {
|
String.prototype.voice = function (voice: number) {
|
||||||
return stringObject(this.valueOf(), { voice: voice });
|
return stringObject(this.valueOf(), {voice: voice});
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z = function (options: { [key: string]: any } = {}) {
|
String.prototype.z = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z(this.valueOf(), options);
|
return api.z(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
String.prototype.z0 = function (options: {[key: string]: any} = {}) {
|
||||||
|
return api.z0(this.valueOf(), options);
|
||||||
|
};
|
||||||
|
|
||||||
String.prototype.z0 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z1 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z0(this.valueOf(), options);
|
return api.z1(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z1 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z2 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z1(this.valueOf(), options);
|
return api.z2(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z2 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z3 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z2(this.valueOf(), options);
|
return api.z3(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z3 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z4 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z3(this.valueOf(), options);
|
return api.z4(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z4 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z5 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z4(this.valueOf(), options);
|
return api.z5(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z5 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z6 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z5(this.valueOf(), options);
|
return api.z6(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z6 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z7 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z6(this.valueOf(), options);
|
return api.z7(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z7 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z8 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z7(this.valueOf(), options);
|
return api.z8(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z8 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z9 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z8(this.valueOf(), options);
|
return api.z9(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z9 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z10 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z9(this.valueOf(), options);
|
return api.z10(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z10 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z11 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z10(this.valueOf(), options);
|
return api.z11(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z11 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z12 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z11(this.valueOf(), options);
|
return api.z12(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z12 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z13 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z12(this.valueOf(), options);
|
return api.z13(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z13 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z14 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z13(this.valueOf(), options);
|
return api.z14(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z14 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z15 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z14(this.valueOf(), options);
|
return api.z15(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z15 = function (options: { [key: string]: any } = {}) {
|
String.prototype.z16 = function (options: {[key: string]: any} = {}) {
|
||||||
return api.z15(this.valueOf(), options);
|
return api.z16(this.valueOf(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
String.prototype.z16 = function (options: { [key: string]: any } = {}) {
|
String.prototype.note = function () {
|
||||||
return api.z16(this.valueOf(), options);
|
try {
|
||||||
};
|
return parseInt(this.valueOf());
|
||||||
|
} catch (e) {
|
||||||
String.prototype.note = function () {
|
return noteNameToMidi(this.valueOf());
|
||||||
try {
|
}
|
||||||
return parseInt(this.valueOf());
|
};
|
||||||
} catch (e) {
|
}
|
||||||
return noteNameToMidi(this.valueOf());
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
type SpeechOptions = {
|
type SpeechOptions = {
|
||||||
text?: string;
|
text?: string;
|
||||||
rate?: number;
|
rate?: number;
|
||||||
pitch?: number;
|
pitch?: number;
|
||||||
volume?: number;
|
volume?: number;
|
||||||
voice?: number;
|
voice?: number;
|
||||||
lang?: string;
|
lang?: string;
|
||||||
};
|
}
|
||||||
|
|
||||||
let speakerTimeout: number;
|
let speakerTimeout: number;
|
||||||
|
|
||||||
export class Speaker {
|
export class Speaker {
|
||||||
constructor(public options: SpeechOptions) {}
|
constructor(
|
||||||
|
public options: SpeechOptions
|
||||||
|
) {}
|
||||||
|
|
||||||
|
speak = () => {
|
||||||
|
return new Promise<void>((resolve, reject) => {
|
||||||
|
if (this.options.text) {
|
||||||
|
const synth = window.speechSynthesis;
|
||||||
|
if(synth.speaking) synth.cancel();
|
||||||
|
|
||||||
speak = () => {
|
const utterance = new SpeechSynthesisUtterance(this.options.text);
|
||||||
return new Promise<void>((resolve, reject) => {
|
utterance.rate = this.options.rate || 1;
|
||||||
if (this.options.text) {
|
utterance.pitch = this.options.pitch || 1;
|
||||||
const synth = window.speechSynthesis;
|
utterance.volume = this.options.volume || 1;
|
||||||
if (synth.speaking) synth.cancel();
|
if (this.options.voice) {
|
||||||
|
utterance.voice = synth.getVoices()[this.options.voice];
|
||||||
|
}
|
||||||
|
if(this.options.lang) {
|
||||||
|
// Check if language has country code
|
||||||
|
if (this.options.lang.length === 2) {
|
||||||
|
utterance.lang = `${this.options.lang}-${this.options.lang.toUpperCase()}`
|
||||||
|
} else if (this.options.lang.length === 5) {
|
||||||
|
utterance.lang = this.options.lang;
|
||||||
|
} else {
|
||||||
|
// Fallback to en us
|
||||||
|
utterance.lang = 'en-US';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const utterance = new SpeechSynthesisUtterance(this.options.text);
|
utterance.onend = () => {
|
||||||
utterance.rate = this.options.rate || 1;
|
resolve();
|
||||||
utterance.pitch = this.options.pitch || 1;
|
};
|
||||||
utterance.volume = this.options.volume || 1;
|
|
||||||
if (this.options.voice) {
|
utterance.onerror = (error) => {
|
||||||
utterance.voice = synth.getVoices()[this.options.voice];
|
reject(error);
|
||||||
}
|
};
|
||||||
if (this.options.lang) {
|
|
||||||
// Check if language has country code
|
|
||||||
if (this.options.lang.length === 2) {
|
|
||||||
utterance.lang = `${
|
|
||||||
this.options.lang
|
|
||||||
}-${this.options.lang.toUpperCase()}`;
|
|
||||||
} else if (this.options.lang.length === 5) {
|
|
||||||
utterance.lang = this.options.lang;
|
|
||||||
} else {
|
|
||||||
// Fallback to en us
|
|
||||||
utterance.lang = "en-US";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
utterance.onend = () => {
|
if(synth.speaking) {
|
||||||
resolve();
|
// Cancel again?
|
||||||
};
|
synth.cancel();
|
||||||
|
// Set timeout
|
||||||
|
if(speakerTimeout) clearTimeout(speakerTimeout);
|
||||||
|
// @ts-ignore
|
||||||
|
speakerTimeout = setTimeout(() => {
|
||||||
|
synth.speak(utterance);
|
||||||
|
}, 200);
|
||||||
|
} else {
|
||||||
|
synth.speak(utterance);
|
||||||
|
}
|
||||||
|
|
||||||
utterance.onerror = (error) => {
|
|
||||||
reject(error);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (synth.speaking) {
|
|
||||||
// Cancel again?
|
|
||||||
synth.cancel();
|
|
||||||
// Set timeout
|
|
||||||
if (speakerTimeout) clearTimeout(speakerTimeout);
|
|
||||||
// @ts-ignore
|
|
||||||
speakerTimeout = setTimeout(() => {
|
|
||||||
synth.speak(utterance);
|
|
||||||
}, 200);
|
|
||||||
} else {
|
} else {
|
||||||
synth.speak(utterance);
|
reject("No text provided");
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
reject("No text provided");
|
});
|
||||||
}
|
}
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|||||||
183
src/main.ts
183
src/main.ts
@ -1,11 +1,8 @@
|
|||||||
import { OscilloscopeConfig, runOscilloscope } from "./Visuals/Oscilloscope";
|
import { OscilloscopeConfig, runOscilloscope, scriptBlinkers } from "./AudioVisualisation";
|
||||||
import { EditorState, Compartment } from "@codemirror/state";
|
import { EditorState, Compartment } from "@codemirror/state";
|
||||||
import { scriptBlinkers } from "./Visuals/Blinkers";
|
|
||||||
import { javascript } from "@codemirror/lang-javascript";
|
import { javascript } from "@codemirror/lang-javascript";
|
||||||
import { markdown } from "@codemirror/lang-markdown";
|
import { markdown } from "@codemirror/lang-markdown";
|
||||||
import { Extension } from "@codemirror/state";
|
import { Extension } from "@codemirror/state";
|
||||||
import { outputSocket } from "./IO/OSC";
|
|
||||||
import { getCodeMirrorTheme } from "./EditorSetup";
|
|
||||||
import {
|
import {
|
||||||
initializeSelectedUniverse,
|
initializeSelectedUniverse,
|
||||||
AppSettings,
|
AppSettings,
|
||||||
@ -33,7 +30,6 @@ import { installWindowBehaviors } from "./WindowBehavior";
|
|||||||
import { makeNumberExtensions } from "./extensions/NumberExtensions";
|
import { makeNumberExtensions } from "./extensions/NumberExtensions";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import { registerSW } from "virtual:pwa-register";
|
import { registerSW } from "virtual:pwa-register";
|
||||||
import colors from "./colors.json";
|
|
||||||
|
|
||||||
if ("serviceWorker" in navigator) {
|
if ("serviceWorker" in navigator) {
|
||||||
registerSW();
|
registerSW();
|
||||||
@ -50,10 +46,8 @@ export class Editor {
|
|||||||
|
|
||||||
// Editor logic
|
// Editor logic
|
||||||
editor_mode: "global" | "local" | "init" | "notes" = "global";
|
editor_mode: "global" | "local" | "init" | "notes" = "global";
|
||||||
hidden_interface: boolean = false;
|
|
||||||
fontSize!: Compartment;
|
fontSize!: Compartment;
|
||||||
withLineNumbers!: Compartment;
|
withLineNumbers!: Compartment;
|
||||||
themeCompartment!: Compartment;
|
|
||||||
vimModeCompartment!: Compartment;
|
vimModeCompartment!: Compartment;
|
||||||
hoveringCompartment!: Compartment;
|
hoveringCompartment!: Compartment;
|
||||||
completionsCompartment!: Compartment;
|
completionsCompartment!: Compartment;
|
||||||
@ -71,7 +65,6 @@ export class Editor {
|
|||||||
public _mouseX: number = 0;
|
public _mouseX: number = 0;
|
||||||
public _mouseY: number = 0;
|
public _mouseY: number = 0;
|
||||||
show_error: boolean = false;
|
show_error: boolean = false;
|
||||||
currentThemeName: string = "Everblush";
|
|
||||||
buttonElements: Record<string, HTMLButtonElement[]> = {};
|
buttonElements: Record<string, HTMLButtonElement[]> = {};
|
||||||
interface: ElementMap = {};
|
interface: ElementMap = {};
|
||||||
blinkTimeouts: Record<number, number> = {};
|
blinkTimeouts: Record<number, number> = {};
|
||||||
@ -98,27 +91,11 @@ export class Editor {
|
|||||||
manualPlay: boolean = false;
|
manualPlay: boolean = false;
|
||||||
isPlaying: boolean = false;
|
isPlaying: boolean = false;
|
||||||
|
|
||||||
// OSC
|
|
||||||
outputSocket: WebSocket = outputSocket;
|
|
||||||
|
|
||||||
// Hydra
|
// Hydra
|
||||||
public hydra_backend: any;
|
public hydra_backend: any;
|
||||||
public hydra: any;
|
public hydra: any;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
/**
|
|
||||||
* This is the entry point of the application. The Editor instance is created when the page is loaded.
|
|
||||||
* It is responsible for:
|
|
||||||
* - Initializing the user interface
|
|
||||||
* - Loading the universe from local storage
|
|
||||||
* - Initializing the audio context and the clock
|
|
||||||
* - Building the user API
|
|
||||||
* - Building the documentation
|
|
||||||
* - Installing event listeners
|
|
||||||
* - Building the CodeMirror editor
|
|
||||||
* - Evaluating the init file
|
|
||||||
*/
|
|
||||||
|
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
// Build user interface
|
// Build user interface
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
@ -209,23 +186,9 @@ export class Editor {
|
|||||||
|
|
||||||
// Loading universe from URL (if needed)
|
// Loading universe from URL (if needed)
|
||||||
loadUniverserFromUrl(this);
|
loadUniverserFromUrl(this);
|
||||||
|
|
||||||
// Set the color scheme for the application
|
|
||||||
let available_themes = Object.keys(colors);
|
|
||||||
if (this.settings.theme in available_themes) {
|
|
||||||
this.readTheme(this.settings.theme);
|
|
||||||
} else {
|
|
||||||
this.settings.theme = "Everblush";
|
|
||||||
this.readTheme(this.settings.theme);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private getBuffer(type: string): any {
|
private getBuffer(type: string): any {
|
||||||
/**
|
|
||||||
* Retrieves the buffer based on the specified type.
|
|
||||||
* @param type - The type of buffer to retrieve.
|
|
||||||
* @returns The buffer object.
|
|
||||||
*/
|
|
||||||
const universe = this.universes[this.selected_universe.toString()];
|
const universe = this.universes[this.selected_universe.toString()];
|
||||||
return type === "locals"
|
return type === "locals"
|
||||||
? universe[type][this.local_index]
|
? universe[type][this.local_index]
|
||||||
@ -253,27 +216,24 @@ export class Editor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
updateKnownUniversesView = () => {
|
updateKnownUniversesView = () => {
|
||||||
/**
|
|
||||||
* Updates the known universes view.
|
|
||||||
* This function generates and populates a list of known universes based on the data stored in the 'universes' property.
|
|
||||||
* It retrieves the necessary HTML elements and template, creates the list, and attaches event listeners to the generated items.
|
|
||||||
* If any required elements or templates are missing, warning messages are logged and the function returns early.
|
|
||||||
*/
|
|
||||||
let itemTemplate = document.getElementById(
|
let itemTemplate = document.getElementById(
|
||||||
"ui-known-universe-item-template",
|
"ui-known-universe-item-template"
|
||||||
) as HTMLTemplateElement;
|
) as HTMLTemplateElement;
|
||||||
if (!itemTemplate) {
|
if (!itemTemplate) {
|
||||||
|
console.warn("Missing template #ui-known-universe-item-template");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let existing_universes = document.getElementById("existing-universes");
|
let existing_universes = document.getElementById("existing-universes");
|
||||||
if (!existing_universes) {
|
if (!existing_universes) {
|
||||||
|
console.warn("Missing element #existing-universes");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let list = document.createElement("ul");
|
let list = document.createElement("ul");
|
||||||
list.className =
|
list.className =
|
||||||
"lg:h-80 lg:text-normal text-normal h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-brightwhite bg-background lg:mb-4 border rounded-lg";
|
"lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800";
|
||||||
|
|
||||||
list.append(
|
list.append(
|
||||||
...Object.keys(this.universes).map((it) => {
|
...Object.keys(this.universes).map((it) => {
|
||||||
let item = itemTemplate.content.cloneNode(true) as DocumentFragment;
|
let item = itemTemplate.content.cloneNode(true) as DocumentFragment;
|
||||||
@ -285,10 +245,10 @@ export class Editor {
|
|||||||
item
|
item
|
||||||
.querySelector(".delete-universe")
|
.querySelector(".delete-universe")
|
||||||
?.addEventListener("click", () =>
|
?.addEventListener("click", () =>
|
||||||
api._deleteUniverseFromInterface(it),
|
api._deleteUniverseFromInterface(it)
|
||||||
);
|
);
|
||||||
return item;
|
return item;
|
||||||
}),
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
existing_universes.innerHTML = "";
|
existing_universes.innerHTML = "";
|
||||||
@ -296,18 +256,12 @@ export class Editor {
|
|||||||
};
|
};
|
||||||
|
|
||||||
changeToLocalBuffer(i: number) {
|
changeToLocalBuffer(i: number) {
|
||||||
/**
|
// Updating the CSS accordingly
|
||||||
* Changes the local buffer based on the provided index.
|
|
||||||
* Updates the CSS accordingly by adding a specific class to the selected tab and removing it from other tabs.
|
|
||||||
* Updates the local index and updates the editor view.
|
|
||||||
*
|
|
||||||
* @param i The index of the tab to change the local buffer to.
|
|
||||||
*/
|
|
||||||
const tabs = document.querySelectorAll('[id^="tab-"]');
|
const tabs = document.querySelectorAll('[id^="tab-"]');
|
||||||
const tab = tabs[i] as HTMLElement;
|
const tab = tabs[i] as HTMLElement;
|
||||||
tab.classList.add("bg-foreground");
|
tab.classList.add("bg-orange-300");
|
||||||
for (let j = 0; j < tabs.length; j++) {
|
for (let j = 0; j < tabs.length; j++) {
|
||||||
if (j != i) tabs[j].classList.remove("bg-foreground");
|
if (j != i) tabs[j].classList.remove("bg-orange-300");
|
||||||
}
|
}
|
||||||
let tab_id = tab.id.split("-")[1];
|
let tab_id = tab.id.split("-")[1];
|
||||||
this.local_index = parseInt(tab_id);
|
this.local_index = parseInt(tab_id);
|
||||||
@ -315,11 +269,6 @@ export class Editor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
changeModeFromInterface(mode: "global" | "local" | "init" | "notes") {
|
changeModeFromInterface(mode: "global" | "local" | "init" | "notes") {
|
||||||
/**
|
|
||||||
* Changes the mode of the interface.
|
|
||||||
*
|
|
||||||
* @param mode - The mode to change to. Can be one of "global", "local", "init", or "notes".
|
|
||||||
*/
|
|
||||||
const interface_buttons: HTMLElement[] = [
|
const interface_buttons: HTMLElement[] = [
|
||||||
this.interface.local_button,
|
this.interface.local_button,
|
||||||
this.interface.global_button,
|
this.interface.global_button,
|
||||||
@ -330,15 +279,15 @@ export class Editor {
|
|||||||
let changeColor = (button: HTMLElement) => {
|
let changeColor = (button: HTMLElement) => {
|
||||||
interface_buttons.forEach((button) => {
|
interface_buttons.forEach((button) => {
|
||||||
let svg = button.children[0] as HTMLElement;
|
let svg = button.children[0] as HTMLElement;
|
||||||
if (svg.classList.contains("text-foreground_selection")) {
|
if (svg.classList.contains("text-orange-300")) {
|
||||||
svg.classList.remove("text-foreground_selection");
|
svg.classList.remove("text-orange-300");
|
||||||
button.classList.remove("text-foreground_selection");
|
button.classList.remove("text-orange-300");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
button.children[0].classList.remove("text-white");
|
button.children[0].classList.remove("text-white");
|
||||||
button.children[0].classList.add("text-foreground_selection");
|
button.children[0].classList.add("text-orange-300");
|
||||||
button.classList.add("text-foreground_selection");
|
button.classList.add("text-orange-300");
|
||||||
button.classList.add("fill-foreground_selection");
|
button.classList.add("fill-orange-300");
|
||||||
};
|
};
|
||||||
|
|
||||||
switch (mode) {
|
switch (mode) {
|
||||||
@ -380,7 +329,7 @@ export class Editor {
|
|||||||
|
|
||||||
this.view.dispatch({
|
this.view.dispatch({
|
||||||
effects: this.chosenLanguage.reconfigure(
|
effects: this.chosenLanguage.reconfigure(
|
||||||
this.editor_mode == "notes" ? [markdown()] : [javascript()],
|
this.editor_mode == "notes" ? [markdown()] : [javascript()]
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -389,14 +338,8 @@ export class Editor {
|
|||||||
|
|
||||||
setButtonHighlighting(
|
setButtonHighlighting(
|
||||||
button: "play" | "pause" | "stop" | "clear",
|
button: "play" | "pause" | "stop" | "clear",
|
||||||
highlight: boolean,
|
highlight: boolean
|
||||||
) {
|
) {
|
||||||
/**
|
|
||||||
* Sets the highlighting for a specific button.
|
|
||||||
*
|
|
||||||
* @param button - The button to highlight ("play", "pause", "stop", or "clear").
|
|
||||||
* @param highlight - A boolean indicating whether to highlight the button or not.
|
|
||||||
*/
|
|
||||||
document.getElementById("play-label")!.textContent =
|
document.getElementById("play-label")!.textContent =
|
||||||
button !== "pause" ? "Pause" : "Play";
|
button !== "pause" ? "Pause" : "Play";
|
||||||
if (button !== "pause") {
|
if (button !== "pause") {
|
||||||
@ -443,7 +386,7 @@ export class Editor {
|
|||||||
// All other buttons must lose the highlighting
|
// All other buttons must lose the highlighting
|
||||||
document
|
document
|
||||||
.querySelectorAll(
|
.querySelectorAll(
|
||||||
possible_selectors.filter((_, index) => index != selector).join(","),
|
possible_selectors.filter((_, index) => index != selector).join(",")
|
||||||
)
|
)
|
||||||
.forEach((button) => {
|
.forEach((button) => {
|
||||||
button.children[0].classList.remove("animate-pulse");
|
button.children[0].classList.remove("animate-pulse");
|
||||||
@ -453,7 +396,7 @@ export class Editor {
|
|||||||
|
|
||||||
unfocusPlayButtons() {
|
unfocusPlayButtons() {
|
||||||
document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
|
document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
|
||||||
button.children[0].classList.remove("fill-foreground_selection");
|
button.children[0].classList.remove("fill-orange-300");
|
||||||
button.children[0].classList.remove("animate-pulse");
|
button.children[0].classList.remove("animate-pulse");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -481,36 +424,36 @@ export class Editor {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Flashes the background of the view and its gutters.
|
||||||
|
* @param {string} color - The color to set.
|
||||||
|
* @param {number} duration - Duration in milliseconds to maintain the color.
|
||||||
|
*/
|
||||||
flashBackground(color: string, duration: number): void {
|
flashBackground(color: string, duration: number): void {
|
||||||
/**
|
|
||||||
* Flashes the background of the view and its gutters.
|
|
||||||
* @param {string} color - The color to set.
|
|
||||||
* @param {number} duration - Duration in milliseconds to maintain the color.
|
|
||||||
*/
|
|
||||||
const domElement = this.view.dom;
|
const domElement = this.view.dom;
|
||||||
const gutters = domElement.getElementsByClassName(
|
const gutters = domElement.getElementsByClassName(
|
||||||
"cm-gutter",
|
"cm-gutter"
|
||||||
) as HTMLCollectionOf<HTMLElement>;
|
) as HTMLCollectionOf<HTMLElement>;
|
||||||
|
|
||||||
domElement.classList.add("fluid-bg-transition");
|
domElement.classList.add("fluid-bg-transition");
|
||||||
Array.from(gutters).forEach((gutter) =>
|
Array.from(gutters).forEach((gutter) =>
|
||||||
gutter.classList.add("fluid-bg-transition"),
|
gutter.classList.add("fluid-bg-transition")
|
||||||
);
|
);
|
||||||
|
|
||||||
domElement.style.backgroundColor = color;
|
domElement.style.backgroundColor = color;
|
||||||
Array.from(gutters).forEach(
|
Array.from(gutters).forEach(
|
||||||
(gutter) => (gutter.style.backgroundColor = color),
|
(gutter) => (gutter.style.backgroundColor = color)
|
||||||
);
|
);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
domElement.style.backgroundColor = "";
|
domElement.style.backgroundColor = "";
|
||||||
Array.from(gutters).forEach(
|
Array.from(gutters).forEach(
|
||||||
(gutter) => (gutter.style.backgroundColor = ""),
|
(gutter) => (gutter.style.backgroundColor = "")
|
||||||
);
|
);
|
||||||
|
|
||||||
domElement.classList.remove("fluid-bg-transition");
|
domElement.classList.remove("fluid-bg-transition");
|
||||||
Array.from(gutters).forEach((gutter) =>
|
Array.from(gutters).forEach((gutter) =>
|
||||||
gutter.classList.remove("fluid-bg-transition"),
|
gutter.classList.remove("fluid-bg-transition")
|
||||||
);
|
);
|
||||||
}, duration);
|
}, duration);
|
||||||
}
|
}
|
||||||
@ -518,7 +461,7 @@ export class Editor {
|
|||||||
private initializeElements(): void {
|
private initializeElements(): void {
|
||||||
for (const [key, value] of Object.entries(singleElements)) {
|
for (const [key, value] of Object.entries(singleElements)) {
|
||||||
this.interface[key] = document.getElementById(
|
this.interface[key] = document.getElementById(
|
||||||
value,
|
value
|
||||||
) as ElementMap[keyof ElementMap];
|
) as ElementMap[keyof ElementMap];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -526,18 +469,12 @@ export class Editor {
|
|||||||
private initializeButtonGroups(): void {
|
private initializeButtonGroups(): void {
|
||||||
for (const [key, ids] of Object.entries(buttonGroups)) {
|
for (const [key, ids] of Object.entries(buttonGroups)) {
|
||||||
this.buttonElements[key] = ids.map(
|
this.buttonElements[key] = ids.map(
|
||||||
(id) => document.getElementById(id) as HTMLButtonElement,
|
(id) => document.getElementById(id) as HTMLButtonElement
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private loadHydraSynthAsync(): void {
|
private loadHydraSynthAsync(): void {
|
||||||
/**
|
|
||||||
* Loads the Hydra Synth asynchronously by creating a script element
|
|
||||||
* and appending it to the document head. * Once the script is
|
|
||||||
* loaded successfully, it initializes the Hydra Synth. If there
|
|
||||||
* is an error loading the script, it logs an error message.
|
|
||||||
*/
|
|
||||||
var script = document.createElement("script");
|
var script = document.createElement("script");
|
||||||
script.src = "https://unpkg.com/hydra-synth";
|
script.src = "https://unpkg.com/hydra-synth";
|
||||||
script.async = true;
|
script.async = true;
|
||||||
@ -545,16 +482,13 @@ export class Editor {
|
|||||||
console.log("Hydra loaded successfully");
|
console.log("Hydra loaded successfully");
|
||||||
this.initializeHydra();
|
this.initializeHydra();
|
||||||
};
|
};
|
||||||
script.onerror = function () {
|
script.onerror = function() {
|
||||||
console.error("Error loading Hydra script");
|
console.error("Error loading Hydra script");
|
||||||
};
|
};
|
||||||
document.head.appendChild(script);
|
document.head.appendChild(script);
|
||||||
}
|
}
|
||||||
|
|
||||||
private initializeHydra(): void {
|
private initializeHydra(): void {
|
||||||
/**
|
|
||||||
* Initializes the Hydra backend and sets up the Hydra synth.
|
|
||||||
*/
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
this.hydra_backend = new Hydra({
|
this.hydra_backend = new Hydra({
|
||||||
canvas: this.interface.hydra_canvas as HTMLCanvasElement,
|
canvas: this.interface.hydra_canvas as HTMLCanvasElement,
|
||||||
@ -562,65 +496,22 @@ export class Editor {
|
|||||||
enableStreamCapture: false,
|
enableStreamCapture: false,
|
||||||
});
|
});
|
||||||
this.hydra = this.hydra_backend.synth;
|
this.hydra = this.hydra_backend.synth;
|
||||||
(globalThis as any).hydra = this.hydra;
|
|
||||||
this.hydra.setResolution(1024, 768);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private setCanvas(canvas: HTMLCanvasElement): void {
|
private setCanvas(canvas: HTMLCanvasElement): void {
|
||||||
/**
|
|
||||||
* Sets the canvas element and configures its size and context.
|
|
||||||
*
|
|
||||||
* @param canvas - The HTMLCanvasElement to set.
|
|
||||||
*/
|
|
||||||
if (!canvas) return;
|
if (!canvas) return;
|
||||||
const ctx = canvas.getContext("2d");
|
const ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
const dpr = window.devicePixelRatio || 1;
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
|
||||||
// Assuming the canvas takes up the whole window
|
// Assuming the canvas takes up the whole window
|
||||||
canvas.width = window.innerWidth * dpr;
|
canvas.width = window.innerWidth * dpr;
|
||||||
canvas.height = window.innerHeight * dpr;
|
canvas.height = window.innerHeight * dpr;
|
||||||
|
|
||||||
if (ctx) {
|
if (ctx) {
|
||||||
ctx.scale(dpr, dpr);
|
ctx.scale(dpr, dpr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private updateInterfaceTheme(selected_theme: {[key: string]: string}): void {
|
|
||||||
function hexToRgb(hex: string): {r: number, g: number, b: number} | null {
|
|
||||||
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
||||||
return result ? {
|
|
||||||
r: parseInt(result[1], 16),
|
|
||||||
g: parseInt(result[2], 16),
|
|
||||||
b: parseInt(result[3], 16)
|
|
||||||
} : null;
|
|
||||||
};
|
|
||||||
for (const [key, value] of Object.entries(selected_theme)) {
|
|
||||||
let color = hexToRgb(value);
|
|
||||||
if (color) {
|
|
||||||
let colorString = `${color.r} ${color.g} ${color.b}`
|
|
||||||
document.documentElement.style.setProperty("--" + key, colorString);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getColorScheme(theme_name: string): {[key: string]: string} {
|
|
||||||
// Check if the theme exists in colors.json
|
|
||||||
let themes: Record<string, { [key: string]: any }> = colors;
|
|
||||||
return themes[theme_name];
|
|
||||||
}
|
|
||||||
|
|
||||||
readTheme(theme_name: string): void {
|
|
||||||
// Check if the theme exists in colors.json
|
|
||||||
let themes: Record<string, { [key: string]: any }> = colors;
|
|
||||||
let selected_theme = themes[theme_name];
|
|
||||||
if (selected_theme) {
|
|
||||||
this.currentThemeName = theme_name;
|
|
||||||
this.updateInterfaceTheme(selected_theme);
|
|
||||||
let codeMirrorTheme = getCodeMirrorTheme(selected_theme);
|
|
||||||
// Reconfigure the view with the new theme
|
|
||||||
this.view.dispatch({
|
|
||||||
effects: this.themeCompartment.reconfigure(codeMirrorTheme),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let app = new Editor();
|
let app = new Editor();
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
|
|
||||||
::before,
|
::before,
|
||||||
::after {
|
::after {
|
||||||
--tw-content: "";
|
--tw-content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -42,23 +42,9 @@ html {
|
|||||||
-moz-tab-size: 4;
|
-moz-tab-size: 4;
|
||||||
/* 3 */
|
/* 3 */
|
||||||
-o-tab-size: 4;
|
-o-tab-size: 4;
|
||||||
tab-size: 4;
|
tab-size: 4;
|
||||||
/* 3 */
|
/* 3 */
|
||||||
font-family:
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
ui-sans-serif,
|
|
||||||
system-ui,
|
|
||||||
-apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
"Segoe UI",
|
|
||||||
Roboto,
|
|
||||||
"Helvetica Neue",
|
|
||||||
Arial,
|
|
||||||
"Noto Sans",
|
|
||||||
sans-serif,
|
|
||||||
"Apple Color Emoji",
|
|
||||||
"Segoe UI Emoji",
|
|
||||||
"Segoe UI Symbol",
|
|
||||||
"Noto Color Emoji";
|
|
||||||
/* 4 */
|
/* 4 */
|
||||||
font-feature-settings: normal;
|
font-feature-settings: normal;
|
||||||
/* 5 */
|
/* 5 */
|
||||||
@ -99,7 +85,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
|
|||||||
|
|
||||||
abbr:where([title]) {
|
abbr:where([title]) {
|
||||||
-webkit-text-decoration: underline dotted;
|
-webkit-text-decoration: underline dotted;
|
||||||
text-decoration: underline dotted;
|
text-decoration: underline dotted;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -143,8 +129,7 @@ code,
|
|||||||
kbd,
|
kbd,
|
||||||
samp,
|
samp,
|
||||||
pre {
|
pre {
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
"Liberation Mono", "Courier New", monospace;
|
|
||||||
/* 1 */
|
/* 1 */
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
@ -239,9 +224,9 @@ select {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[type="button"],
|
[type='button'],
|
||||||
[type="reset"],
|
[type='reset'],
|
||||||
[type="submit"] {
|
[type='submit'] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@ -288,7 +273,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
|
|||||||
2. Correct the outline style in Safari.
|
2. Correct the outline style in Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="search"] {
|
[type='search'] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
@ -381,8 +366,7 @@ textarea {
|
|||||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
2. Set the default placeholder color to the user's configured gray 400 color.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
input::-moz-placeholder,
|
input::-moz-placeholder, textarea::-moz-placeholder {
|
||||||
textarea::-moz-placeholder {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
@ -450,9 +434,7 @@ video {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*, ::before, ::after {
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
--tw-border-spacing-x: 0;
|
--tw-border-spacing-x: 0;
|
||||||
--tw-border-spacing-y: 0;
|
--tw-border-spacing-y: 0;
|
||||||
--tw-translate-x: 0;
|
--tw-translate-x: 0;
|
||||||
@ -556,7 +538,7 @@ video {
|
|||||||
display: block;
|
display: block;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
background: #f0f0f0;
|
background: #F0F0F0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs,
|
.hljs,
|
||||||
@ -601,11 +583,11 @@ video {
|
|||||||
.hljs-link,
|
.hljs-link,
|
||||||
.hljs-selector-attr,
|
.hljs-selector-attr,
|
||||||
.hljs-selector-pseudo {
|
.hljs-selector-pseudo {
|
||||||
color: #bc6060;
|
color: #BC6060;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-literal {
|
.hljs-literal {
|
||||||
color: #78a960;
|
color: #78A960;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-built_in,
|
.hljs-built_in,
|
||||||
@ -904,8 +886,8 @@ video {
|
|||||||
|
|
||||||
.appearance-none {
|
.appearance-none {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-row {
|
.flex-row {
|
||||||
@ -1351,10 +1333,8 @@ video {
|
|||||||
|
|
||||||
.shadow {
|
.shadow {
|
||||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||||
0 1px 2px -1px var(--tw-shadow-color);
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
||||||
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.outline {
|
.outline {
|
||||||
@ -1370,14 +1350,11 @@ video {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.filter {
|
.filter {
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
|
|
||||||
var(--tw-sepia) var(--tw-drop-shadow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.transition-colors {
|
.transition-colors {
|
||||||
transition-property: color, background-color, border-color,
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||||
text-decoration-color, fill, stroke;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition-duration: 150ms;
|
transition-duration: 150ms;
|
||||||
}
|
}
|
||||||
@ -1422,21 +1399,15 @@ video {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.focus\:ring-2:focus {
|
.focus\:ring-2:focus {
|
||||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||||
var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||||
calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
|
|
||||||
var(--tw-shadow, 0 0 #0000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:ring-4:focus {
|
.focus\:ring-4:focus {
|
||||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||||
var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||||
calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
|
|
||||||
var(--tw-shadow, 0 0 #0000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:ring-blue-500:focus {
|
.focus\:ring-blue-500:focus {
|
||||||
@ -1460,7 +1431,7 @@ video {
|
|||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
50% {
|
50% {
|
||||||
opacity: 0.5;
|
opacity: .5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
2660
src/style.css
2660
src/style.css
File diff suppressed because it is too large
Load Diff
@ -1,29 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
@layer base {
|
|
||||||
:root {
|
|
||||||
--black: 40 42 54;
|
|
||||||
--red: 68 71 90;
|
|
||||||
--green: 248 248 242;
|
|
||||||
--yellow: 98 114 164;
|
|
||||||
--blue: 139 233 253;
|
|
||||||
--magenta: 80 250 123;
|
|
||||||
--cyan: 255 184 108;
|
|
||||||
--white: 255 121 198;
|
|
||||||
--brightblack: 189 147 249;
|
|
||||||
--brightred: 255 85 85;
|
|
||||||
--brightgreen: 241 250 140;
|
|
||||||
--brightyellow: 139 233 253;
|
|
||||||
--brightblue: 80 250 123;
|
|
||||||
--brightmagenta: 255 184 108;
|
|
||||||
--brightcyan: 255 121 198;
|
|
||||||
--brightwhite: 189 147 249;
|
|
||||||
--background: 40 42 54;
|
|
||||||
--selection_foreground: 68 71 90;
|
|
||||||
--cursor: 139 233 253;
|
|
||||||
--foreground: 248 248 242;
|
|
||||||
--selection_background: 189 147 249;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
221
src/themes/toposTheme.ts
Normal file
221
src/themes/toposTheme.ts
Normal file
@ -0,0 +1,221 @@
|
|||||||
|
import { EditorView } from "@codemirror/view";
|
||||||
|
import { Extension } from "@codemirror/state";
|
||||||
|
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
|
||||||
|
import { tags as t } from "@lezer/highlight";
|
||||||
|
|
||||||
|
const base00 = "#262626",
|
||||||
|
base01 = "#3B4252",
|
||||||
|
base02 = "#BBBBBB",
|
||||||
|
base03 = "#4C566A",
|
||||||
|
base04 = "#D8DEE9",
|
||||||
|
base05 = "#E5E9F0",
|
||||||
|
base07 = "#8FBCBB",
|
||||||
|
base_red = "#BF616A",
|
||||||
|
base_deeporange = "#D08770",
|
||||||
|
base_pink = "#B48EAD",
|
||||||
|
base_cyan = "#FBCF8B",
|
||||||
|
base_yellow = "#88C0D0",
|
||||||
|
base_orange = "#D08770",
|
||||||
|
base_indigo = "#5E81AC",
|
||||||
|
base_purple = "#B48EAD",
|
||||||
|
base_green = "#A3BE8C",
|
||||||
|
base_lightgreen = "#A3BE8C";
|
||||||
|
|
||||||
|
const invalid = base_red,
|
||||||
|
darkBackground = "#262626",
|
||||||
|
highlightBackground = "#252525",
|
||||||
|
// background = base00,
|
||||||
|
tooltipBackground = base01,
|
||||||
|
cursor = base04;
|
||||||
|
|
||||||
|
/// The editor theme styles for Material Dark.
|
||||||
|
export const toposDarkTheme = EditorView.theme(
|
||||||
|
{
|
||||||
|
"&": {
|
||||||
|
color: base05,
|
||||||
|
// backgroundColor: background,
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
fontSize: "24px",
|
||||||
|
fontFamily: "IBM Plex Mono",
|
||||||
|
},
|
||||||
|
".cm-content": {
|
||||||
|
caretColor: cursor,
|
||||||
|
fontFamily: "IBM Plex Mono",
|
||||||
|
},
|
||||||
|
".cm-cursor, .cm-dropCursor": {
|
||||||
|
borderLeftColor: cursor,
|
||||||
|
},
|
||||||
|
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||||
|
{
|
||||||
|
backgroundColor: base00,
|
||||||
|
border: `0.5px solid ${base00}`,
|
||||||
|
},
|
||||||
|
".cm-panels": {
|
||||||
|
backgroundColor: darkBackground,
|
||||||
|
color: base05,
|
||||||
|
},
|
||||||
|
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
||||||
|
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
||||||
|
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
||||||
|
".cm-searchMatch": {
|
||||||
|
outline: `1px solid ${base_cyan}`,
|
||||||
|
},
|
||||||
|
".cm-searchMatch.cm-searchMatch-selected": {
|
||||||
|
backgroundColor: highlightBackground,
|
||||||
|
},
|
||||||
|
".cm-activeLine": {
|
||||||
|
// backgroundColor: highlightBackground
|
||||||
|
backgroundColor: "rgb(76,76,106, 0.1)",
|
||||||
|
},
|
||||||
|
".cm-selectionMatch": {
|
||||||
|
backgroundColor: base04,
|
||||||
|
outline: `1px solid ${base_red}`,
|
||||||
|
},
|
||||||
|
|
||||||
|
"&.cm-focused .cm-matchingBracket": {
|
||||||
|
color: base02,
|
||||||
|
// outline: `1px solid ${base02}`,
|
||||||
|
},
|
||||||
|
|
||||||
|
"&.cm-focused .cm-nonmatchingBracket": {
|
||||||
|
color: base_red,
|
||||||
|
},
|
||||||
|
|
||||||
|
".cm-gutters": {
|
||||||
|
//backgroundColor: base00,
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
color: base02,
|
||||||
|
},
|
||||||
|
|
||||||
|
".cm-activeLineGutter": {
|
||||||
|
backgroundColor: highlightBackground,
|
||||||
|
color: base02,
|
||||||
|
},
|
||||||
|
|
||||||
|
".cm-foldPlaceholder": {
|
||||||
|
border: "none",
|
||||||
|
color: `${base07}`,
|
||||||
|
},
|
||||||
|
|
||||||
|
".cm-tooltip": {
|
||||||
|
border: "none",
|
||||||
|
backgroundColor: tooltipBackground,
|
||||||
|
},
|
||||||
|
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||||
|
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||||
|
borderTopColor: tooltipBackground,
|
||||||
|
borderBottomColor: tooltipBackground,
|
||||||
|
},
|
||||||
|
".cm-tooltip-autocomplete": {
|
||||||
|
"& > ul > li[aria-selected]": {
|
||||||
|
backgroundColor: highlightBackground,
|
||||||
|
color: base03,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ dark: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
/// The highlighting style for code in the Material Dark theme.
|
||||||
|
export const toposDarkHighlightStyle = HighlightStyle.define([
|
||||||
|
{ tag: t.keyword, color: base_purple },
|
||||||
|
{
|
||||||
|
tag: [t.name, t.deleted, t.character, t.macroName],
|
||||||
|
color: base_cyan,
|
||||||
|
},
|
||||||
|
{ tag: [t.propertyName], color: base_yellow },
|
||||||
|
{ tag: [t.variableName], color: base05 },
|
||||||
|
{ tag: [t.function(t.variableName)], color: base_cyan },
|
||||||
|
{ tag: [t.labelName], color: base_purple },
|
||||||
|
{
|
||||||
|
tag: [t.color, t.constant(t.name), t.standard(t.name)],
|
||||||
|
color: base_yellow,
|
||||||
|
},
|
||||||
|
{ tag: [t.definition(t.name), t.separator], color: base_pink },
|
||||||
|
{ tag: [t.brace], color: base_purple },
|
||||||
|
{
|
||||||
|
tag: [t.annotation],
|
||||||
|
color: invalid,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
|
||||||
|
color: base_orange,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.typeName, t.className],
|
||||||
|
color: base_orange,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.operator, t.operatorKeyword],
|
||||||
|
color: base_indigo,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.tagName],
|
||||||
|
color: base_deeporange,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.squareBracket],
|
||||||
|
color: base_red,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.angleBracket],
|
||||||
|
color: base02,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.attributeName],
|
||||||
|
color: base05,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.regexp],
|
||||||
|
color: invalid,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.quote],
|
||||||
|
color: base_green,
|
||||||
|
},
|
||||||
|
{ tag: [t.string], color: base_lightgreen },
|
||||||
|
{
|
||||||
|
tag: t.link,
|
||||||
|
color: base_cyan,
|
||||||
|
textDecoration: "underline",
|
||||||
|
textUnderlinePosition: "under",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.url, t.escape, t.special(t.string)],
|
||||||
|
color: base_yellow,
|
||||||
|
},
|
||||||
|
{ tag: [t.meta], color: base03 },
|
||||||
|
{ tag: [t.comment], color: base02, fontStyle: "italic" },
|
||||||
|
{ tag: t.monospace, color: base05 },
|
||||||
|
{ tag: t.strong, fontWeight: "bold", color: base_red },
|
||||||
|
{ tag: t.emphasis, fontStyle: "italic", color: base_lightgreen },
|
||||||
|
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||||
|
{ tag: t.heading, fontWeight: "bold", color: base_yellow },
|
||||||
|
{ tag: t.heading1, fontWeight: "bold", color: base_yellow },
|
||||||
|
{
|
||||||
|
tag: [t.heading2, t.heading3, t.heading4],
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: base_yellow,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.heading5, t.heading6],
|
||||||
|
color: base_yellow,
|
||||||
|
},
|
||||||
|
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: base_cyan },
|
||||||
|
{
|
||||||
|
tag: [t.processingInstruction, t.inserted],
|
||||||
|
color: base_red,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: [t.contentSeparator],
|
||||||
|
color: base_cyan,
|
||||||
|
},
|
||||||
|
{ tag: t.invalid, color: base02, borderBottom: `1px dotted ${base_red}` },
|
||||||
|
]);
|
||||||
|
|
||||||
|
/// Extension to enable the Material Dark theme (both the editor theme and
|
||||||
|
/// the highlight style).
|
||||||
|
export const toposTheme: Extension = [
|
||||||
|
toposDarkTheme,
|
||||||
|
syntaxHighlighting(toposDarkHighlightStyle),
|
||||||
|
];
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,33 +1,21 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
|
safelist: [
|
||||||
|
{
|
||||||
|
pattern: /hljs+/,
|
||||||
|
},
|
||||||
|
],
|
||||||
theme: {
|
theme: {
|
||||||
colors: {
|
extend: {},
|
||||||
black: "rgb(var(--black) / <alpha-value>)",
|
hljs: {
|
||||||
red: "rgb(var(--red) / <alpha-value>)",
|
theme: "nord",
|
||||||
green: "rgb(var(--green) / <alpha-value>)",
|
custom: {
|
||||||
yellow: "rgb(var(--yellow) / <alpha-value>)",
|
general: {
|
||||||
blue: "rgb(var(--blue) / <alpha-value>)",
|
comment: "#FEFEFE",
|
||||||
magenta: "rgb(var(--magenta) / <alpha-value>)",
|
},
|
||||||
cyan: "rgb(var(--cyan) / <alpha-value>)",
|
},
|
||||||
white: "rgb(var(--white) / <alpha-value>)",
|
},
|
||||||
brightblack: "rgb(var(--brightblack) / <alpha-value>)",
|
},
|
||||||
brightred: "rgb(var(--brightred) / <alpha-value>)",
|
plugins: [require("tailwind-highlightjs")],
|
||||||
brightgreen: "rgb(var(--brightgreen) / <alpha-value>)",
|
|
||||||
brightyellow: "rgb(var(--brightyellow) / <alpha-value>)",
|
|
||||||
brightblue: "rgb(var(--brightblue) / <alpha-value>)",
|
|
||||||
brightmagenta: "rgb(var(--brightmagenta) / <alpha-value>)",
|
|
||||||
brightcyan: "rgb(var(--brightcyan) / <alpha-value>)",
|
|
||||||
brightwhite: "rgb(var(--brightwhite) / <alpha-value>)",
|
|
||||||
background: "rgb(var(--background) / <alpha-value>)",
|
|
||||||
selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
|
|
||||||
cursor: "rgb(var(--cursor) / <alpha-value>)",
|
|
||||||
foreground: "rgb(var(--foreground) / <alpha-value>)",
|
|
||||||
selection_background: "rgb(var(--selection_background) / <alpha-value>)",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
extend: {},
|
|
||||||
safelist: [{
|
|
||||||
pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
|
|
||||||
}],
|
|
||||||
};
|
};
|
||||||
|
|||||||
BIN
topos_frog.png
BIN
topos_frog.png
Binary file not shown.
|
Before Width: | Height: | Size: 427 KiB |
@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
/* Linting */
|
/* Linting */
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
"useDefineForClassFields": true,
|
"useDefineForClassFields": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
|
|||||||
@ -10,10 +10,11 @@ const vitePWAconfiguration = {
|
|||||||
|
|
||||||
workbox: {
|
workbox: {
|
||||||
sourcemap: false,
|
sourcemap: false,
|
||||||
cleanupOutdatedCaches: false,
|
cleanupOutdatedCaches: true,
|
||||||
globPatterns: [
|
globPatterns: [
|
||||||
"**/*.{js,js.gz,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
|
"**/*.{js,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
|
||||||
],
|
],
|
||||||
|
// Thanks Froos :)
|
||||||
runtimeCaching: [
|
runtimeCaching: [
|
||||||
{
|
{
|
||||||
urlPattern: ({ url }) =>
|
urlPattern: ({ url }) =>
|
||||||
|
|||||||
174
yarn.lock
174
yarn.lock
@ -1362,90 +1362,6 @@
|
|||||||
estree-walker "^1.0.1"
|
estree-walker "^1.0.1"
|
||||||
picomatch "^2.2.2"
|
picomatch "^2.2.2"
|
||||||
|
|
||||||
"@serialport/binding-mock@10.2.2":
|
|
||||||
version "10.2.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/binding-mock/-/binding-mock-10.2.2.tgz#d322a8116a97806addda13c62f50e73d16125874"
|
|
||||||
integrity sha512-HAFzGhk9OuFMpuor7aT5G1ChPgn5qSsklTFOTUX72Rl6p0xwcSVsRtG/xaGp6bxpN7fI9D/S8THLBWbBgS6ldw==
|
|
||||||
dependencies:
|
|
||||||
"@serialport/bindings-interface" "^1.2.1"
|
|
||||||
debug "^4.3.3"
|
|
||||||
|
|
||||||
"@serialport/bindings-cpp@10.8.0":
|
|
||||||
version "10.8.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/bindings-cpp/-/bindings-cpp-10.8.0.tgz#79507b57022ac264e963e7fbf3647a3821569a20"
|
|
||||||
integrity sha512-OMQNJz5kJblbmZN5UgJXLwi2XNtVLxSKmq5VyWuXQVsUIJD4l9UGHnLPqM5LD9u3HPZgDI5w7iYN7gxkQNZJUw==
|
|
||||||
dependencies:
|
|
||||||
"@serialport/bindings-interface" "1.2.2"
|
|
||||||
"@serialport/parser-readline" "^10.2.1"
|
|
||||||
debug "^4.3.2"
|
|
||||||
node-addon-api "^5.0.0"
|
|
||||||
node-gyp-build "^4.3.0"
|
|
||||||
|
|
||||||
"@serialport/bindings-interface@1.2.2", "@serialport/bindings-interface@^1.2.1":
|
|
||||||
version "1.2.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/bindings-interface/-/bindings-interface-1.2.2.tgz#c4ae9c1c85e26b02293f62f37435478d90baa460"
|
|
||||||
integrity sha512-CJaUd5bLvtM9c5dmO9rPBHPXTa9R2UwpkJ0wdh9JCYcbrPWsKz+ErvR0hBLeo7NPeiFdjFO4sonRljiw4d2XiA==
|
|
||||||
|
|
||||||
"@serialport/parser-byte-length@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-byte-length/-/parser-byte-length-10.5.0.tgz#f3d4c1c7923222df2f3d3c7c8aaaa207fe373b49"
|
|
||||||
integrity sha512-eHhr4lHKboq1OagyaXAqkemQ1XyoqbLQC8XJbvccm95o476TmEdW5d7AElwZV28kWprPW68ZXdGF2VXCkJgS2w==
|
|
||||||
|
|
||||||
"@serialport/parser-cctalk@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-cctalk/-/parser-cctalk-10.5.0.tgz#0ee88db0768a361b7cfb9a394b74e480c38e1992"
|
|
||||||
integrity sha512-Iwsdr03xmCKAiibLSr7b3w6ZUTBNiS+PwbDQXdKU/clutXjuoex83XvsOtYVcNZmwJlVNhAUbkG+FJzWwIa4DA==
|
|
||||||
|
|
||||||
"@serialport/parser-delimiter@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-delimiter/-/parser-delimiter-10.5.0.tgz#b0d93100cdfd0619d020a427d652495073f3b828"
|
|
||||||
integrity sha512-/uR/yT3jmrcwnl2FJU/2ySvwgo5+XpksDUR4NF/nwTS5i3CcuKS+FKi/tLzy1k8F+rCx5JzpiK+koqPqOUWArA==
|
|
||||||
|
|
||||||
"@serialport/parser-inter-byte-timeout@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-inter-byte-timeout/-/parser-inter-byte-timeout-10.5.0.tgz#8665ee5e6138f794ac055e83ef2d1c3653a577c0"
|
|
||||||
integrity sha512-WPvVlSx98HmmUF9jjK6y9mMp3Wnv6JQA0cUxLeZBgS74TibOuYG3fuUxUWGJALgAXotOYMxfXSezJ/vSnQrkhQ==
|
|
||||||
|
|
||||||
"@serialport/parser-packet-length@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-packet-length/-/parser-packet-length-10.5.0.tgz#4c4d733bdff8cc4749f2bd750e42e66f8f478def"
|
|
||||||
integrity sha512-jkpC/8w4/gUBRa2Teyn7URv1D7T//0lGj27/4u9AojpDVXsR6dtdcTG7b7dNirXDlOrSLvvN7aS5/GNaRlEByw==
|
|
||||||
|
|
||||||
"@serialport/parser-readline@10.5.0", "@serialport/parser-readline@^10.2.1":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-readline/-/parser-readline-10.5.0.tgz#df23365ae7f45679b1735deae26f72ba42802862"
|
|
||||||
integrity sha512-0aXJknodcl94W9zSjvU+sLdXiyEG2rqjQmvBWZCr8wJZjWEtv3RgrnYiWq4i2OTOyC8C/oPK8ZjpBjQptRsoJQ==
|
|
||||||
dependencies:
|
|
||||||
"@serialport/parser-delimiter" "10.5.0"
|
|
||||||
|
|
||||||
"@serialport/parser-ready@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-ready/-/parser-ready-10.5.0.tgz#1d9029f57b1abd664cb468e21bfccf7b44c6e8ea"
|
|
||||||
integrity sha512-QIf65LTvUoxqWWHBpgYOL+soldLIIyD1bwuWelukem2yDZVWwEjR288cLQ558BgYxH4U+jLAQahhqoyN1I7BaA==
|
|
||||||
|
|
||||||
"@serialport/parser-regex@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-regex/-/parser-regex-10.5.0.tgz#f98eab6e3d9bc99086269e9acf39a82db36d245f"
|
|
||||||
integrity sha512-9jnr9+PCxRoLjtGs7uxwsFqvho+rxuJlW6ZWSB7oqfzshEZWXtTJgJRgac/RuLft4hRlrmRz5XU40i3uoL4HKw==
|
|
||||||
|
|
||||||
"@serialport/parser-slip-encoder@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-slip-encoder/-/parser-slip-encoder-10.5.0.tgz#cb79ac0fda1fc87f049690ff7b498c787da67991"
|
|
||||||
integrity sha512-wP8m+uXQdkWSa//3n+VvfjLthlabwd9NiG6kegf0fYweLWio8j4pJRL7t9eTh2Lbc7zdxuO0r8ducFzO0m8CQw==
|
|
||||||
|
|
||||||
"@serialport/parser-spacepacket@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/parser-spacepacket/-/parser-spacepacket-10.5.0.tgz#2fc077c0ec16a9532c511ad5f2ab12d588796bc7"
|
|
||||||
integrity sha512-BEZ/HAEMwOd8xfuJSeI/823IR/jtnThovh7ils90rXD4DPL1ZmrP4abAIEktwe42RobZjIPfA4PaVfyO0Fjfhg==
|
|
||||||
|
|
||||||
"@serialport/stream@10.5.0":
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/@serialport/stream/-/stream-10.5.0.tgz#cda8fb3e8d03094b0962a3d14b73adfcd591be58"
|
|
||||||
integrity sha512-gbcUdvq9Kyv2HsnywS7QjnEB28g+6OGB5Z8TLP7X+UPpoMIWoUsoQIq5Kt0ZTgMoWn3JGM2lqwTsSHF+1qhniA==
|
|
||||||
dependencies:
|
|
||||||
"@serialport/bindings-interface" "1.2.2"
|
|
||||||
debug "^4.3.2"
|
|
||||||
|
|
||||||
"@strudel.cycles/core@0.8.2":
|
"@strudel.cycles/core@0.8.2":
|
||||||
version "0.8.2"
|
version "0.8.2"
|
||||||
resolved "https://registry.yarnpkg.com/@strudel.cycles/core/-/core-0.8.2.tgz#62e957a3636b39938d1c4ecc3fd766d02fc523bb"
|
resolved "https://registry.yarnpkg.com/@strudel.cycles/core/-/core-0.8.2.tgz#62e957a3636b39938d1c4ecc3fd766d02fc523bb"
|
||||||
@ -1969,7 +1885,7 @@ cssesc@^3.0.0:
|
|||||||
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
|
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
|
||||||
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
|
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
|
||||||
|
|
||||||
debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
|
debug@^4.1.0, debug@^4.1.1, debug@^4.3.3, debug@^4.3.4:
|
||||||
version "4.3.4"
|
version "4.3.4"
|
||||||
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
|
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
|
||||||
integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
|
integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
|
||||||
@ -2476,11 +2392,6 @@ highlight.js@^11.5.0:
|
|||||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
|
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
|
||||||
integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
|
integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
|
||||||
|
|
||||||
highlight.js@^11.9.0:
|
|
||||||
version "11.9.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
|
|
||||||
integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
|
|
||||||
|
|
||||||
html-encoder-decoder@^1.3.9:
|
html-encoder-decoder@^1.3.9:
|
||||||
version "1.3.9"
|
version "1.3.9"
|
||||||
resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.9.tgz#d5ec7d249cd525709f7640ae9340f482cc86e94a"
|
resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.9.tgz#d5ec7d249cd525709f7640ae9340f482cc86e94a"
|
||||||
@ -2807,11 +2718,6 @@ lodash@^4.17.20:
|
|||||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||||
|
|
||||||
long@4.0.0:
|
|
||||||
version "4.0.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
|
|
||||||
integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
|
|
||||||
|
|
||||||
lru-cache@^10.0.1:
|
lru-cache@^10.0.1:
|
||||||
version "10.0.1"
|
version "10.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.0.1.tgz#0a3be479df549cca0e5d693ac402ff19537a6b7a"
|
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.0.1.tgz#0a3be479df549cca0e5d693ac402ff19537a6b7a"
|
||||||
@ -2908,11 +2814,6 @@ nanostores@^0.8.1:
|
|||||||
resolved "https://registry.yarnpkg.com/nanostores/-/nanostores-0.8.1.tgz#963577028ac10eeb50bec376535f4762ab5af9be"
|
resolved "https://registry.yarnpkg.com/nanostores/-/nanostores-0.8.1.tgz#963577028ac10eeb50bec376535f4762ab5af9be"
|
||||||
integrity sha512-1ZCfQtII2XeFDrtqXL2cdQ/diGrLxzRB3YMyQjn8m7GSGQrJfGST2iuqMpWnS/ZlifhtjgR/SX0Jy6Uij6lRLA==
|
integrity sha512-1ZCfQtII2XeFDrtqXL2cdQ/diGrLxzRB3YMyQjn8m7GSGQrJfGST2iuqMpWnS/ZlifhtjgR/SX0Jy6Uij6lRLA==
|
||||||
|
|
||||||
node-addon-api@^5.0.0:
|
|
||||||
version "5.1.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-5.1.0.tgz#49da1ca055e109a23d537e9de43c09cca21eb762"
|
|
||||||
integrity sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==
|
|
||||||
|
|
||||||
node-fetch@^2.6.1:
|
node-fetch@^2.6.1:
|
||||||
version "2.6.13"
|
version "2.6.13"
|
||||||
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.13.tgz#a20acbbec73c2e09f9007de5cda17104122e0010"
|
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.13.tgz#a20acbbec73c2e09f9007de5cda17104122e0010"
|
||||||
@ -2920,11 +2821,6 @@ node-fetch@^2.6.1:
|
|||||||
dependencies:
|
dependencies:
|
||||||
whatwg-url "^5.0.0"
|
whatwg-url "^5.0.0"
|
||||||
|
|
||||||
node-gyp-build@^4.3.0:
|
|
||||||
version "4.7.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.7.0.tgz#749f0033590b2a89ac8edb5e0775f95f5ae86d15"
|
|
||||||
integrity sha512-PbZERfeFdrHQOOXiAKOY0VPbykZy90ndPKk0d+CFDegTKmWp1VgOTz2xACVbr1BjCWxrQp68CXtvNsveFhqDJg==
|
|
||||||
|
|
||||||
node-releases@^2.0.13:
|
node-releases@^2.0.13:
|
||||||
version "2.0.13"
|
version "2.0.13"
|
||||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
|
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
|
||||||
@ -2977,18 +2873,6 @@ once@^1.3.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
wrappy "1"
|
wrappy "1"
|
||||||
|
|
||||||
osc@^2.4.4:
|
|
||||||
version "2.4.4"
|
|
||||||
resolved "https://registry.yarnpkg.com/osc/-/osc-2.4.4.tgz#52b2e914253b04a792d28ee892b0fa1ca8bdc1a2"
|
|
||||||
integrity sha512-YJr2bUCQMc9BIaq1LXgqYpt5Ii7wNy2n0e0BkQiCSziMNrrsYHhH5OlExNBgCrQsum60EgXZ32lFsvR4aUf+ew==
|
|
||||||
dependencies:
|
|
||||||
long "4.0.0"
|
|
||||||
slip "1.0.2"
|
|
||||||
wolfy87-eventemitter "5.2.9"
|
|
||||||
ws "8.13.0"
|
|
||||||
optionalDependencies:
|
|
||||||
serialport "10.5.0"
|
|
||||||
|
|
||||||
path-is-absolute@^1.0.0:
|
path-is-absolute@^1.0.0:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
|
resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
|
||||||
@ -3265,26 +3149,6 @@ serialize-javascript@^4.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
randombytes "^2.1.0"
|
randombytes "^2.1.0"
|
||||||
|
|
||||||
serialport@10.5.0:
|
|
||||||
version "10.5.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/serialport/-/serialport-10.5.0.tgz#b85f614def6e8914e5865c798b0555330903a0f8"
|
|
||||||
integrity sha512-7OYLDsu5i6bbv3lU81pGy076xe0JwpK6b49G6RjNvGibstUqQkI+I3/X491yBGtf4gaqUdOgoU1/5KZ/XxL4dw==
|
|
||||||
dependencies:
|
|
||||||
"@serialport/binding-mock" "10.2.2"
|
|
||||||
"@serialport/bindings-cpp" "10.8.0"
|
|
||||||
"@serialport/parser-byte-length" "10.5.0"
|
|
||||||
"@serialport/parser-cctalk" "10.5.0"
|
|
||||||
"@serialport/parser-delimiter" "10.5.0"
|
|
||||||
"@serialport/parser-inter-byte-timeout" "10.5.0"
|
|
||||||
"@serialport/parser-packet-length" "10.5.0"
|
|
||||||
"@serialport/parser-readline" "10.5.0"
|
|
||||||
"@serialport/parser-ready" "10.5.0"
|
|
||||||
"@serialport/parser-regex" "10.5.0"
|
|
||||||
"@serialport/parser-slip-encoder" "10.5.0"
|
|
||||||
"@serialport/parser-spacepacket" "10.5.0"
|
|
||||||
"@serialport/stream" "10.5.0"
|
|
||||||
debug "^4.3.3"
|
|
||||||
|
|
||||||
set-function-length@^1.1.1:
|
set-function-length@^1.1.1:
|
||||||
version "1.1.1"
|
version "1.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
|
resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
|
||||||
@ -3329,11 +3193,6 @@ side-channel@^1.0.4:
|
|||||||
get-intrinsic "^1.0.2"
|
get-intrinsic "^1.0.2"
|
||||||
object-inspect "^1.9.0"
|
object-inspect "^1.9.0"
|
||||||
|
|
||||||
slip@1.0.2:
|
|
||||||
version "1.0.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/slip/-/slip-1.0.2.tgz#ba45a923034d6cf41b1a27aebe7128282c8d551f"
|
|
||||||
integrity sha512-XrcHe3NAcyD3wO+O4I13RcS4/3AF+S9RvGNj9JhJeS02HyImwD2E3QWLrmn9hBfL+fB6yapagwxRkeyYzhk98g==
|
|
||||||
|
|
||||||
source-map-js@^1.0.2:
|
source-map-js@^1.0.2:
|
||||||
version "1.0.2"
|
version "1.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
|
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
|
||||||
@ -3460,10 +3319,10 @@ sucrase@^3.32.0:
|
|||||||
pirates "^4.0.1"
|
pirates "^4.0.1"
|
||||||
ts-interface-checker "^0.1.9"
|
ts-interface-checker "^0.1.9"
|
||||||
|
|
||||||
superdough@^0.9.12:
|
superdough@^0.9.11:
|
||||||
version "0.9.12"
|
version "0.9.11"
|
||||||
resolved "https://registry.yarnpkg.com/superdough/-/superdough-0.9.12.tgz#455f8860bc13cffbe1d8f391919e8f1dba1ff0b5"
|
resolved "https://registry.yarnpkg.com/superdough/-/superdough-0.9.11.tgz#3a3842a47d6340477f77d39077303f05e15274dd"
|
||||||
integrity sha512-rsdCoYk5rLYster4tE5mSGjotf/TNP3gPpsuK4hxTZNxL92TkdEcbPFLnJfky5oMQJtpRY1XqAXUx3htLbHEZA==
|
integrity sha512-s0SNSg/EJHwp2sUnE2A7pTZ0G2luiSEq9NVKJvodjJw11Tn0fOp9XcnegNXINYz3U6mAsUYRoeaj4NmuTL13fA==
|
||||||
dependencies:
|
dependencies:
|
||||||
nanostores "^0.8.1"
|
nanostores "^0.8.1"
|
||||||
|
|
||||||
@ -3850,11 +3709,6 @@ which-typed-array@^1.1.11, which-typed-array@^1.1.13:
|
|||||||
gopd "^1.0.1"
|
gopd "^1.0.1"
|
||||||
has-tostringtag "^1.0.0"
|
has-tostringtag "^1.0.0"
|
||||||
|
|
||||||
wolfy87-eventemitter@5.2.9:
|
|
||||||
version "5.2.9"
|
|
||||||
resolved "https://registry.yarnpkg.com/wolfy87-eventemitter/-/wolfy87-eventemitter-5.2.9.tgz#e879f770b30fbb6512a8afbb330c388591099c2a"
|
|
||||||
integrity sha512-P+6vtWyuDw+MB01X7UeF8TaHBvbCovf4HPEMF/SV7BdDc1SMTiBy13SRD71lQh4ExFTG1d/WNzDGDCyOKSMblw==
|
|
||||||
|
|
||||||
workbox-background-sync@7.0.0:
|
workbox-background-sync@7.0.0:
|
||||||
version "7.0.0"
|
version "7.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-7.0.0.tgz#2b84b96ca35fec976e3bd2794b70e4acec46b3a5"
|
resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-7.0.0.tgz#2b84b96ca35fec976e3bd2794b70e4acec46b3a5"
|
||||||
@ -4018,11 +3872,6 @@ wrappy@1:
|
|||||||
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
|
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
|
||||||
integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
|
integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
|
||||||
|
|
||||||
ws@8.13.0:
|
|
||||||
version "8.13.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
|
|
||||||
integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
|
|
||||||
|
|
||||||
yallist@^3.0.2:
|
yallist@^3.0.2:
|
||||||
version "3.1.1"
|
version "3.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
|
resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
|
||||||
@ -4033,15 +3882,10 @@ yaml@^2.1.1:
|
|||||||
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
|
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
|
||||||
integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
|
integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
|
||||||
|
|
||||||
zifferjs@^0.0.55:
|
zifferjs@^0.0.39:
|
||||||
version "0.0.55"
|
version "0.0.39"
|
||||||
resolved "https://registry.yarnpkg.com/zifferjs/-/zifferjs-0.0.55.tgz#ff7d08c9afde6cb78649f585b5a2c97ee4c97f22"
|
resolved "https://registry.yarnpkg.com/zifferjs/-/zifferjs-0.0.39.tgz#a3916ca1b38d493edea14bf4f29948f2f6f1572e"
|
||||||
integrity sha512-QO/xWN3RugMbusIYxB7H1aHSm1w8OD1leEseJcDwxBx9VxTBWZF9SrxGbNdRowFAIfFg9b4hpOYmMSQYqi87EA==
|
integrity sha512-WMSJ9SPGA/OP/9Z936anUUOM66qzuwPZaE99Qix+Q7jr4fFuoZ/Xw76m2/1C2UVk85sauAecnSfjcK3zo6nA3Q==
|
||||||
|
|
||||||
zyklus@^0.1.4:
|
|
||||||
version "0.1.4"
|
|
||||||
resolved "https://registry.yarnpkg.com/zyklus/-/zyklus-0.1.4.tgz#229b2966fd1126ef72c6004697269118762bdcd5"
|
|
||||||
integrity sha512-hbv2cyy4nOI7P8nL8b3ki1jswoLzkUzewPgCLDdDfABryDkV5iO8DAbU25OgO5ShRZHLjXJIylwv5PJQPl3Mpw==
|
|
||||||
|
|
||||||
zzfx@^1.2.0:
|
zzfx@^1.2.0:
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
|
|||||||
Reference in New Issue
Block a user