Compare commits
1 Commits
dependabot
...
globalvars
| Author | SHA1 | Date | |
|---|---|---|---|
| 83b6226a25 |
12
ToposServer/package-lock.json
generated
12
ToposServer/package-lock.json
generated
@ -1,16 +1,16 @@
|
||||
{
|
||||
"name": "topos-server",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "topos-server",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.0",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
"osc": "^2.4.4",
|
||||
"ws": "^8.17.1"
|
||||
"ws": "^8.14.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@serialport/binding-mock": {
|
||||
@ -309,9 +309,9 @@
|
||||
"integrity": "sha512-P+6vtWyuDw+MB01X7UeF8TaHBvbCovf4HPEMF/SV7BdDc1SMTiBy13SRD71lQh4ExFTG1d/WNzDGDCyOKSMblw=="
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.17.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
|
||||
"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
|
||||
"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"
|
||||
},
|
||||
|
||||
@ -10,6 +10,6 @@
|
||||
"license": "GPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
"osc": "^2.4.4",
|
||||
"ws": "^8.17.1"
|
||||
"ws": "^8.14.2"
|
||||
}
|
||||
}
|
||||
|
||||
17
index.html
17
index.html
@ -31,18 +31,6 @@
|
||||
transition: background-color 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
.hydracanvas {
|
||||
position: fixed; /* ignore margins */
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%; /* fill screen */
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
overflow-y: hidden;
|
||||
z-index: -5; /* place behind everything else */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fullscreencanvas {
|
||||
position: fixed; /* ignore margins */
|
||||
top: 0px;
|
||||
@ -174,7 +162,6 @@
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_introduction" class="doc_header">Welcome </p>
|
||||
<p rel="noopener noreferrer" id="docs_atelier" class="doc_header">Atelier (FR)</p>
|
||||
<p rel="noopener noreferrer" id="docs_interface" class="doc_header">Interface</p>
|
||||
<p rel="noopener noreferrer" id="docs_interaction" class="doc_header">Interaction</p>
|
||||
<p rel="noopener noreferrer" id="docs_shortcuts" class="doc_header">Keyboard</p>
|
||||
@ -368,12 +355,10 @@
|
||||
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Completions</label>
|
||||
</div>
|
||||
<!--
|
||||
<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">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Load Demo Song</label>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -575,9 +560,9 @@
|
||||
<!-- Here comes the editor itself -->
|
||||
<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="feedback" class="fullscreencanvas"></canvas>
|
||||
<canvas id="drawings" class="fullscreencanvas"></canvas>
|
||||
<canvas id="hydra-bg" class="hydracanvas"></canvas>
|
||||
</div>
|
||||
<p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
||||
</div>
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
"tone": "^14.8.49",
|
||||
"unique-names-generator": "^4.7.1",
|
||||
"vite-plugin-markdown": "^2.1.0",
|
||||
"zifferjs": "^0.0.62",
|
||||
"zifferjs": "^0.0.55",
|
||||
"zyklus": "^0.1.4",
|
||||
"zzfx": "^1.2.0"
|
||||
}
|
||||
|
||||
615
src/API.ts
615
src/API.ts
@ -1,3 +1,4 @@
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { sendToServer, type OSCMessage, oscMessages } from "./IO/OSC";
|
||||
import { getAllScaleNotes, nearScales, seededRandom } from "zifferjs";
|
||||
import colorschemes from "./colors.json";
|
||||
@ -13,7 +14,7 @@ import { SoundEvent } from "./classes/SoundEvent";
|
||||
import { MidiEvent, MidiParams } from "./classes/MidiEvent";
|
||||
import { LRUCache } from "lru-cache";
|
||||
import { InputOptions, Player } from "./classes/ZPlayer";
|
||||
import { isGenerator, isGeneratorFunction, maybeToNumber } from "./Utils/Generic";
|
||||
import { isGenerator, isGeneratorFunction } from "./Utils/Generic";
|
||||
import {
|
||||
loadUniverse,
|
||||
openUniverseModal,
|
||||
@ -34,7 +35,6 @@ import { blinkScript } from "./Visuals/Blinkers";
|
||||
import { SkipEvent } from "./classes/SkipEvent";
|
||||
import { AbstractEvent, EventOperation } from "./classes/AbstractEvents";
|
||||
import drums from "./tidal-drum-machines.json";
|
||||
import { ShapeObject, createConicGradient, createLinearGradient, createRadialGradient, drawBackground, drawBall, drawBalloid, drawDonut, drawEquilateral, drawImage, drawPie, drawSmiley, drawStar, drawStroke, drawText, drawTriangular } from "./Visuals/CanvasVisuals";
|
||||
|
||||
interface ControlChange {
|
||||
channel: number;
|
||||
@ -73,6 +73,38 @@ export async function loadSamples() {
|
||||
]);
|
||||
}
|
||||
|
||||
export type ShapeObject = {
|
||||
x: number,
|
||||
y: number,
|
||||
x1: number,
|
||||
y1: number,
|
||||
x2: number,
|
||||
y2: number,
|
||||
radius: number,
|
||||
width: number,
|
||||
height: number,
|
||||
fillStyle: string,
|
||||
secondary: string,
|
||||
strokeStyle: string,
|
||||
rotation: number,
|
||||
points: number,
|
||||
outerRadius: number,
|
||||
eyeSize: number,
|
||||
happiness: number,
|
||||
slices: number,
|
||||
gap: number,
|
||||
font: string,
|
||||
fontSize: number,
|
||||
text: string,
|
||||
filter: string,
|
||||
url: string,
|
||||
curve: number,
|
||||
curves: number,
|
||||
stroke: string,
|
||||
eaten: number,
|
||||
hole: number,
|
||||
}
|
||||
|
||||
export class UserAPI {
|
||||
/**
|
||||
* The UserAPI class is the interface between the user's code and the backend. It provides
|
||||
@ -96,7 +128,6 @@ export class UserAPI {
|
||||
public scale_aid: string | number | undefined = undefined;
|
||||
public hydra: any;
|
||||
public onceEvaluator: boolean = true;
|
||||
public forceEvaluator: boolean = false;
|
||||
|
||||
load: samples;
|
||||
public global: { [key: string]: any };
|
||||
@ -104,11 +135,8 @@ export class UserAPI {
|
||||
constructor(public app: Editor) {
|
||||
this.MidiConnection = new MidiConnection(this, app.settings);
|
||||
this.global = {};
|
||||
this.g = this.global;
|
||||
}
|
||||
|
||||
public g: any;
|
||||
|
||||
_loadUniverseFromInterface = (universe: string) => {
|
||||
this.app.selected_universe = universe.trim();
|
||||
this.app.settings.selected_universe = universe.trim();
|
||||
@ -214,7 +242,7 @@ export class UserAPI {
|
||||
clearTimeout(this.errorTimeoutID);
|
||||
clearTimeout(this.printTimeoutID);
|
||||
this.app.interface.error_line.innerHTML = errorMessage;
|
||||
this.app.interface.error_line.style.color = "red";
|
||||
this.app.interface.error_line.style.color = "color-red-800";
|
||||
this.app.interface.error_line.classList.remove("hidden");
|
||||
// @ts-ignore
|
||||
this.errorTimeoutID = setTimeout(
|
||||
@ -223,12 +251,12 @@ export class UserAPI {
|
||||
);
|
||||
};
|
||||
|
||||
_logMessage = (message: any, error: boolean = false): void => {
|
||||
_logMessage = (message: any): void => {
|
||||
console.log(message);
|
||||
clearTimeout(this.printTimeoutID);
|
||||
clearTimeout(this.errorTimeoutID);
|
||||
this.app.interface.error_line.innerHTML = message as string;
|
||||
this.app.interface.error_line.style.color = error ? "red" : "white";
|
||||
this.app.interface.error_line.style.color = "red";
|
||||
this.app.interface.error_line.classList.remove("hidden");
|
||||
// @ts-ignore
|
||||
this.printTimeoutID = setTimeout(
|
||||
@ -421,7 +449,7 @@ export class UserAPI {
|
||||
*
|
||||
* @returns A list of available MIDI outputs
|
||||
*/
|
||||
this._logMessage(this.MidiConnection.listMidiOutputs(), false);
|
||||
this._logMessage(this.MidiConnection.listMidiOutputs());
|
||||
};
|
||||
|
||||
public midi_output = (outputName: string): void => {
|
||||
@ -507,7 +535,6 @@ export class UserAPI {
|
||||
*/
|
||||
this.MidiConnection.sendMidiControlChange(control, value, channel);
|
||||
};
|
||||
public cc = this.control_change;
|
||||
|
||||
public midi_panic = (): void => {
|
||||
/**
|
||||
@ -619,7 +646,7 @@ export class UserAPI {
|
||||
return note ? note.note : 60;
|
||||
};
|
||||
|
||||
public ccIn = (control: number, channel?: number): number => {
|
||||
public last_cc = (control: number, channel?: number): number => {
|
||||
/**
|
||||
* @returns Returns last received cc
|
||||
*/
|
||||
@ -731,6 +758,15 @@ export class UserAPI {
|
||||
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.
|
||||
@ -746,35 +782,35 @@ export class UserAPI {
|
||||
if (cachedValue !== 0 && !cachedValue) {
|
||||
const generator = value as unknown as Generator<any>
|
||||
this.patternCache.set(key, generator);
|
||||
return maybeToNumber(generator.next().value);
|
||||
return this.maybeToNumber(generator.next().value);
|
||||
}
|
||||
return maybeToNumber(cachedValue);
|
||||
return this.maybeToNumber(cachedValue);
|
||||
} else {
|
||||
const generator = value as unknown as Generator<any>
|
||||
this.patternCache.set(key, generator);
|
||||
return maybeToNumber(generator.next().value);
|
||||
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 maybeToNumber(cachedValue);
|
||||
return this.maybeToNumber(cachedValue);
|
||||
} else {
|
||||
const generator = value();
|
||||
this.patternCache.set(key, generator);
|
||||
return maybeToNumber(generator.next().value);
|
||||
return this.maybeToNumber(generator.next().value);
|
||||
}
|
||||
} else {
|
||||
const generator = value();
|
||||
this.patternCache.set(key, generator);
|
||||
return maybeToNumber(generator.next().value);
|
||||
return this.maybeToNumber(generator.next().value);
|
||||
}
|
||||
} else {
|
||||
this.patternCache.set(key, value);
|
||||
return maybeToNumber(value);
|
||||
return this.maybeToNumber(value);
|
||||
}
|
||||
} else {
|
||||
return maybeToNumber(this.patternCache.get(key));
|
||||
return this.maybeToNumber(this.patternCache.get(key));
|
||||
}
|
||||
}
|
||||
|
||||
@ -800,21 +836,13 @@ export class UserAPI {
|
||||
|
||||
if (typeof input === "string" &&
|
||||
player.input !== input &&
|
||||
(player.atTheBeginning() || this.forceEvaluator)) {
|
||||
player.atTheBeginning()) {
|
||||
replace = true;
|
||||
}
|
||||
}
|
||||
|
||||
if ((typeof input !== "string" || validSyntax) && (!player || replace)) {
|
||||
if (typeof input === "string" && player && this.forceEvaluator) {
|
||||
// If pattern change is forced in the middle of the cycle
|
||||
if (!player.updatePattern(input, options)) {
|
||||
this.logOnce(`Invalid syntax: ${input}`);
|
||||
};
|
||||
this.forceEvaluator = false;
|
||||
} else {
|
||||
// If pattern is not in cache or is to be replaced
|
||||
const newPlayer = player ? new Player(input, options, this.app, zid, player.nextEndTime()) : new Player(input, options, this.app, zid);
|
||||
const newPlayer = new Player(input, options, this.app, zid);
|
||||
if (newPlayer.isValid()) {
|
||||
player = newPlayer
|
||||
this.patternCache.set(key, player);
|
||||
@ -822,7 +850,6 @@ export class UserAPI {
|
||||
this.invalidPatterns[input] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (player) {
|
||||
|
||||
@ -1431,6 +1458,10 @@ export class UserAPI {
|
||||
return this.beat(nums.dur(...nums));
|
||||
};
|
||||
|
||||
// =============================================================
|
||||
// Modulo based time filters
|
||||
// =============================================================
|
||||
|
||||
// =============================================================
|
||||
// Other core temporal functions
|
||||
// =============================================================
|
||||
@ -1453,7 +1484,7 @@ export class UserAPI {
|
||||
};
|
||||
|
||||
public flipbar = (chunk: number = 1): boolean => {
|
||||
let realFlip = chunk;
|
||||
let realFlip = chunk * 2;
|
||||
const time_pos = this.app.clock.time_position.bar;
|
||||
const current_chunk = Math.floor(time_pos / realFlip);
|
||||
return current_chunk % 2 === 0;
|
||||
@ -1600,21 +1631,6 @@ export class UserAPI {
|
||||
this.beat(div) && this._euclidean_cycle(pulses, length, rotate).beat(div)
|
||||
);
|
||||
};
|
||||
ry = this.rhythm;
|
||||
|
||||
|
||||
public nrhythm = (
|
||||
div: number,
|
||||
pulses: number,
|
||||
length: number,
|
||||
rotate: number = 0,
|
||||
): boolean => {
|
||||
let rhythm = this._euclidean_cycle(pulses, length, rotate).map(n => !n)
|
||||
return (
|
||||
this.beat(div) && rhythm.beat(div)
|
||||
);
|
||||
};
|
||||
nry = this.nrhythm;
|
||||
|
||||
_euclidean_cycle(
|
||||
pulses: number,
|
||||
@ -1664,12 +1680,13 @@ export class UserAPI {
|
||||
let tobin: boolean[] = convert.split("").map((x: string) => x === "1");
|
||||
return this.beat(div) && tobin.beat(div);
|
||||
};
|
||||
bry = this.binrhythm;
|
||||
|
||||
// =============================================================
|
||||
// Low Frequency Oscillators
|
||||
// =============================================================
|
||||
|
||||
public range = (v: number, a: number, b: number): number => v * (b - a) + a;
|
||||
|
||||
public line = (start: number, end: number, step: number = 1): number[] => {
|
||||
/**
|
||||
* Returns an array of values between start and end, with a given step.
|
||||
@ -1690,7 +1707,7 @@ export class UserAPI {
|
||||
for (let value = start; value <= end; value += step) {
|
||||
result.push(value);
|
||||
}
|
||||
} else if ((end > start && step < 0) || (end < start && step > 0)) {
|
||||
} else if((end > start && step < 0) || (end < start && step > 0)) {
|
||||
for (let value = start; value >= end; value -= step) {
|
||||
result.push(parseFloat(value.toFixed(countPlaces(step))));
|
||||
}
|
||||
@ -1701,45 +1718,58 @@ export class UserAPI {
|
||||
return result;
|
||||
};
|
||||
|
||||
public sine = (freq: number = 1, phase: number = 0): number => {
|
||||
public sine = (
|
||||
freq: number = 1,
|
||||
times: number = 1,
|
||||
offset: number = 0,
|
||||
): number => {
|
||||
/**
|
||||
* Returns a sine wave between -1 and 1.
|
||||
*
|
||||
* @param freq - The frequency of the sine wave
|
||||
* @param phase - The phase of the sine wave
|
||||
* @param offset - The offset of the sine wave
|
||||
* @returns A sine wave between -1 and 1
|
||||
*/
|
||||
return Math.sin(2 * Math.PI * freq * (this.app.clock.ctx.currentTime - phase));
|
||||
return (
|
||||
(Math.sin(this.app.clock.ctx.currentTime * Math.PI * 2 * freq) + offset) *
|
||||
times
|
||||
);
|
||||
};
|
||||
|
||||
public usine = (freq: number = 1, phase: number = 0): number => {
|
||||
public usine = (
|
||||
freq: number = 1,
|
||||
times: number = 1,
|
||||
offset: number = 0,
|
||||
): number => {
|
||||
/**
|
||||
* Returns a sine wave between 0 and 1.
|
||||
*
|
||||
* @param freq - The frequency of the sine wave
|
||||
* @param phase - The phase of the sine wave
|
||||
* @param offset - The offset of the sine wave
|
||||
* @returns A sine wave between 0 and 1
|
||||
* @see sine
|
||||
*/
|
||||
return ((this.sine(freq, phase) + 1) / 2);
|
||||
return ((this.sine(freq, times, offset) + 1) / 2) * times;
|
||||
};
|
||||
|
||||
saw = (freq: number = 1, phase: number = 0): number => {
|
||||
saw = (freq: number = 1, times: number = 1, offset: number = 0): number => {
|
||||
/**
|
||||
* Returns a saw wave between -1 and 1.
|
||||
*
|
||||
* @param freq - The frequency of the saw wave
|
||||
* @param phase - The phase of the saw wave
|
||||
* @param offset - The offset of the saw wave
|
||||
* @returns A saw wave between -1 and 1
|
||||
* @see triangle
|
||||
* @see square
|
||||
* @see sine
|
||||
* @see noise
|
||||
*/
|
||||
return (((this.app.clock.ctx.currentTime * freq + phase) % 1) * 2 - 1);
|
||||
return (
|
||||
(((this.app.clock.ctx.currentTime * freq) % 1) * 2 - 1 + offset) * times
|
||||
);
|
||||
};
|
||||
|
||||
usaw = (freq: number = 1, phase: number = 0): number => {
|
||||
usaw = (freq: number = 1, times: number = 1, offset: number = 0): number => {
|
||||
/**
|
||||
* Returns a saw wave between 0 and 1.
|
||||
*
|
||||
@ -1748,10 +1778,14 @@ export class UserAPI {
|
||||
* @returns A saw wave between 0 and 1
|
||||
* @see saw
|
||||
*/
|
||||
return ((this.saw(freq, phase) + 1) / 2);
|
||||
return ((this.saw(freq, times, offset) + 1) / 2) * times;
|
||||
};
|
||||
|
||||
triangle = (freq: number = 1, phase: number = 0): number => {
|
||||
triangle = (
|
||||
freq: number = 1,
|
||||
times: number = 1,
|
||||
offset: number = 0,
|
||||
): number => {
|
||||
/**
|
||||
* Returns a triangle wave between -1 and 1.
|
||||
*
|
||||
@ -1761,10 +1795,14 @@ export class UserAPI {
|
||||
* @see sine
|
||||
* @see noise
|
||||
*/
|
||||
return (Math.abs(this.saw(freq, phase)) * 2 - 1);
|
||||
return (Math.abs(this.saw(freq, times, offset)) * 2 - 1) * times;
|
||||
};
|
||||
|
||||
utriangle = (freq: number = 1, phase: number = 0): number => {
|
||||
utriangle = (
|
||||
freq: number = 1,
|
||||
times: number = 1,
|
||||
offset: number = 0,
|
||||
): number => {
|
||||
/**
|
||||
* Returns a triangle wave between 0 and 1.
|
||||
*
|
||||
@ -1773,11 +1811,13 @@ export class UserAPI {
|
||||
* @returns A triangle wave between 0 and 1
|
||||
* @see triangle
|
||||
*/
|
||||
return ((this.triangle(freq, phase) + 1) / 2);
|
||||
return ((this.triangle(freq, times, offset) + 1) / 2) * times;
|
||||
};
|
||||
|
||||
square = (
|
||||
freq: number = 1,
|
||||
times: number = 1,
|
||||
offset: number = 0,
|
||||
duty: number = 0.5,
|
||||
): number => {
|
||||
/**
|
||||
@ -1790,11 +1830,16 @@ export class UserAPI {
|
||||
* @see noise
|
||||
*/
|
||||
const period = 1 / freq;
|
||||
const t = (Date.now() / 1000) % period;
|
||||
return (t / period < duty ? 1 : -1);
|
||||
const t = (Date.now() / 1000 + offset) % period;
|
||||
return (t / period < duty ? 1 : -1) * times;
|
||||
};
|
||||
|
||||
usquare = (freq: number = 1, duty: number = 0.5): number => {
|
||||
usquare = (
|
||||
freq: number = 1,
|
||||
times: number = 1,
|
||||
offset: number = 0,
|
||||
duty: number = 0.5,
|
||||
): number => {
|
||||
/**
|
||||
* Returns a square wave between 0 and 1.
|
||||
*
|
||||
@ -1803,10 +1848,10 @@ export class UserAPI {
|
||||
* @returns A square wave between 0 and 1
|
||||
* @see square
|
||||
*/
|
||||
return ((this.square(freq, duty) + 1) / 2);
|
||||
return ((this.square(freq, times, offset, duty) + 1) / 2) * times;
|
||||
};
|
||||
|
||||
noise = (): number => {
|
||||
noise = (times: number = 1): number => {
|
||||
/**
|
||||
* Returns a random value between -1 and 1.
|
||||
*
|
||||
@ -1817,17 +1862,7 @@ export class UserAPI {
|
||||
* @see sine
|
||||
* @see noise
|
||||
*/
|
||||
return (this.randomGen() * 2 - 1);
|
||||
};
|
||||
|
||||
unoise = (): number => {
|
||||
/**
|
||||
* Returns a random value between 0 and 1.
|
||||
*
|
||||
* @returns A random value between 0 and 1
|
||||
* @see noise
|
||||
*/
|
||||
return ((this.noise() + 1) / 2);
|
||||
return (this.randomGen() * 2 - 1) * times;
|
||||
};
|
||||
|
||||
// =============================================================
|
||||
@ -1943,17 +1978,9 @@ export class UserAPI {
|
||||
|
||||
log = (message: any) => {
|
||||
console.log(message);
|
||||
this._logMessage(message, false);
|
||||
this._logMessage(message);
|
||||
};
|
||||
|
||||
logOnce = (message: any) => {
|
||||
if (this.onceEvaluator) {
|
||||
console.log(message);
|
||||
this._logMessage(message, false);
|
||||
this.onceEvaluator = false;
|
||||
}
|
||||
}
|
||||
|
||||
scale = getScaleNotes;
|
||||
|
||||
nearScales = nearScales;
|
||||
@ -1965,27 +1992,51 @@ export class UserAPI {
|
||||
// would be 1.0, which is the current rate (very speedy).
|
||||
};
|
||||
|
||||
// =============================================================
|
||||
// Legacy functions
|
||||
// =============================================================
|
||||
|
||||
public divseq = (...args: any): any => {
|
||||
const chunk_size = args[0]; // Get the first argument (chunk size)
|
||||
const elements = args.slice(1); // Get the rest of the arguments as an array
|
||||
const timepos = this.app.clock.pulses_since_origin;
|
||||
const slice_count = Math.floor(
|
||||
timepos / Math.floor(chunk_size * this.ppqn()),
|
||||
);
|
||||
return elements[slice_count % elements.length];
|
||||
};
|
||||
|
||||
public seqbeat = <T>(...array: T[]): T => {
|
||||
/**
|
||||
* Returns an element from an array based on the current beat.
|
||||
*
|
||||
* @param array - The array of values to pick from
|
||||
*/
|
||||
return array[this.app.clock.time_position.beat % array.length];
|
||||
};
|
||||
|
||||
public seqbar = <T>(...array: T[]): T => {
|
||||
/**
|
||||
* Returns an element from an array based on the current bar.
|
||||
*
|
||||
* @param array - The array of values to pick from
|
||||
*/
|
||||
return array[(this.app.clock.time_position.bar + 1) % array.length];
|
||||
};
|
||||
|
||||
// =============================================================
|
||||
// High Order Functions
|
||||
// =============================================================
|
||||
|
||||
register = (name: string, operation: EventOperation<AbstractEvent>): true => {
|
||||
register = (name: string, operation: EventOperation<AbstractEvent>): void => {
|
||||
AbstractEvent.prototype[name] = function(
|
||||
this: AbstractEvent,
|
||||
...args: any[]
|
||||
) {
|
||||
return operation(this, ...args);
|
||||
};
|
||||
return true;
|
||||
};
|
||||
|
||||
all = (operation: EventOperation<AbstractEvent>): true => {
|
||||
AbstractEvent.prototype.chainAll = function(...args: any[]) {
|
||||
return operation(this, ...args);
|
||||
};
|
||||
return true;
|
||||
}
|
||||
|
||||
public shuffle = <T>(array: T[]): T[] => {
|
||||
/**
|
||||
* Returns a shuffled version of an array.
|
||||
@ -2069,6 +2120,27 @@ export class UserAPI {
|
||||
};
|
||||
};
|
||||
|
||||
// =============================================================
|
||||
// Ralt144mi section
|
||||
// =============================================================
|
||||
|
||||
raltfont = (mainFont: string, commentFont: string): void => {
|
||||
this.app.view.dispatch({
|
||||
effects: this.app.fontSize.reconfigure(
|
||||
EditorView.theme({
|
||||
"&": { fontFamily: mainFont },
|
||||
".cm-gutters": { fontFamily: mainFont },
|
||||
".cm-content": {
|
||||
fontFamily: mainFont,
|
||||
},
|
||||
".cm-comment": {
|
||||
fontFamily: commentFont,
|
||||
},
|
||||
}),
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
// =============================================================
|
||||
// Resolution
|
||||
// =============================================================
|
||||
@ -2198,12 +2270,16 @@ export class UserAPI {
|
||||
* Set background color of the canvas.
|
||||
* @param color - The color to set. String or 3 numbers representing RGB values.
|
||||
*/
|
||||
drawBackground(this.app.interface.drawings as HTMLCanvasElement, color, ...gb);
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
if (typeof color === "number") color = `rgb(${color},${gb[0]},${gb[1]})`;
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
return true;
|
||||
}
|
||||
bg = this.background;
|
||||
|
||||
public linearGradient = (x1: number, y1: number, x2: number, y2: number, ...stops: (number | string)[]): CanvasGradient => {
|
||||
public linearGradient = (x1: number, y1: number, x2: number, y2: number, ...stops: (number | string)[]) => {
|
||||
/**
|
||||
* Set linear gradient on the canvas.
|
||||
* @param x1 - The x-coordinate of the start point
|
||||
@ -2212,7 +2288,16 @@ export class UserAPI {
|
||||
* @param y2 - The y-coordinate of the end point
|
||||
* @param stops - The stops to set. Pairs of numbers representing the position and color of the stop.
|
||||
*/
|
||||
return createLinearGradient(this.app.interface.drawings as HTMLCanvasElement, x1, y1, x2, y2, ...stops);
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
|
||||
// Parse pairs of values from stops
|
||||
for (let i = 0; i < stops.length; i += 2) {
|
||||
let color = stops[i + 1];
|
||||
if (typeof color === "number") color = `rgb(${color},${stops[i + 2]},${stops[i + 3]})`;
|
||||
gradient.addColorStop((stops[i] as number), color);
|
||||
}
|
||||
return gradient;
|
||||
}
|
||||
|
||||
public radialGradient = (x1: number, y1: number, r1: number, x2: number, y2: number, r2: number, ...stops: (number | string)[]) => {
|
||||
@ -2226,7 +2311,15 @@ export class UserAPI {
|
||||
* @param r2 - The radius of the end circle
|
||||
* @param stops - The stops to set. Pairs of numbers representing the position and color of the stop.
|
||||
*/
|
||||
return createRadialGradient(this.app.interface.drawings as HTMLCanvasElement, x1, y1, r1, x2, y2, r2, ...stops);
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
const gradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
|
||||
for (let i = 0; i < stops.length; i += 2) {
|
||||
let color = stops[i + 1];
|
||||
if (typeof color === "number") color = `rgb(${color},${stops[i + 2]},${stops[i + 3]})`;
|
||||
gradient.addColorStop((stops[i] as number), color);
|
||||
}
|
||||
return gradient;
|
||||
}
|
||||
|
||||
public conicGradient = (x: number, y: number, angle: number, ...stops: (number | string)[]) => {
|
||||
@ -2237,7 +2330,15 @@ export class UserAPI {
|
||||
* @param angle - The angle of the gradient, in radians
|
||||
* @param stops - The stops to set. Pairs of numbers representing the position and color of the stop.
|
||||
*/
|
||||
return createConicGradient(this.app.interface.drawings as HTMLCanvasElement, x, y, angle, ...stops);
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
const gradient = ctx.createConicGradient(x, y, angle);
|
||||
for (let i = 0; i < stops.length; i += 2) {
|
||||
let color = stops[i + 1];
|
||||
if (typeof color === "number") color = `rgb(${color},${stops[i + 2]},${stops[i + 3]})`;
|
||||
gradient.addColorStop((stops[i] as number), color);
|
||||
}
|
||||
return gradient;
|
||||
}
|
||||
|
||||
public draw = (func: Function): boolean => {
|
||||
@ -2272,7 +2373,63 @@ export class UserAPI {
|
||||
radius = curves.radius || this.hc() / 2;
|
||||
curves = curves.curves || 6;
|
||||
}
|
||||
drawBalloid(this.app.interface.drawings as HTMLCanvasElement, curves, radius, curve, fillStyle, secondary, x, y);
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
|
||||
// Draw the shape using quadratic Bézier curves
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = fillStyle;
|
||||
|
||||
if (curves === 0) {
|
||||
// Draw a circle if curves = 0
|
||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else if (curves === 1) {
|
||||
// Draw a single curve (ellipse) if curves = 1
|
||||
ctx.ellipse(x, y, radius * 0.8, (radius * curve) * 0.7, 0, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else if (curves === 2) {
|
||||
// Draw a shape with two symmetric curves starting from the top and meeting at the bottom
|
||||
ctx.moveTo(x, y - radius);
|
||||
|
||||
// First curve
|
||||
ctx.quadraticCurveTo(x + radius * curve, y, x, y + radius);
|
||||
|
||||
// Second symmetric curve
|
||||
ctx.quadraticCurveTo(x - radius * curve, y, x, y - radius);
|
||||
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else {
|
||||
// Draw the curved shape with the specified number of curves
|
||||
ctx.moveTo(x, y - radius);
|
||||
let points = [];
|
||||
for (let i = 0; i < curves; i++) {
|
||||
const startAngle = (i / curves) * 2 * Math.PI;
|
||||
const endAngle = startAngle + (2 * Math.PI) / curves;
|
||||
|
||||
const controlX = x + radius * curve * Math.cos(startAngle + Math.PI / curves);
|
||||
const controlY = y + radius * curve * Math.sin(startAngle + Math.PI / curves);
|
||||
points.push([x + radius * Math.cos(startAngle), y + radius * Math.sin(startAngle)]);
|
||||
ctx.moveTo(x + radius * Math.cos(startAngle), y + radius * Math.sin(startAngle));
|
||||
ctx.quadraticCurveTo(controlX, controlY, x + radius * Math.cos(endAngle), y + radius * Math.sin(endAngle));
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = secondary;
|
||||
// Form the shape from points with straight lines and fill it
|
||||
ctx.moveTo(points[0][0], points[0][1]);
|
||||
for (let point of points) ctx.lineTo(point[0], point[1]);
|
||||
// Close and fill
|
||||
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -2291,7 +2448,18 @@ export class UserAPI {
|
||||
radius = radius.radius || this.hc() / 3;
|
||||
}
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawEquilateral(canvas, radius, fillStyle, rotation, x, y);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, -radius);
|
||||
ctx.lineTo(radius, radius);
|
||||
ctx.lineTo(-radius, radius);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -2312,7 +2480,18 @@ export class UserAPI {
|
||||
width = width.width || this.hc() / 3;
|
||||
}
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawTriangular(canvas, width, height, fillStyle, rotation, x, y);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, -height);
|
||||
ctx.lineTo(width, height);
|
||||
ctx.lineTo(-width, height);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
pointy = this.triangular;
|
||||
@ -2330,7 +2509,12 @@ export class UserAPI {
|
||||
radius = radius.radius || this.hc() / 3;
|
||||
}
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawBall(canvas, radius, fillStyle, x, y);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
return true;
|
||||
}
|
||||
circle = this.ball;
|
||||
@ -2359,8 +2543,62 @@ export class UserAPI {
|
||||
stroke = slices.stroke || "black";
|
||||
slices = slices.slices || 3;
|
||||
}
|
||||
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawDonut(canvas, slices, eaten, radius, hole, fillStyle, secondary, stroke, rotation, x, y);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
|
||||
if (slices < 2) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = slices < 1 ? secondary : fillStyle;
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, hole, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = secondary;
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
|
||||
// Draw slices as arcs
|
||||
const totalSlices = slices;
|
||||
const sliceAngle = (2 * Math.PI) / totalSlices;
|
||||
for (let i = 0; i < totalSlices; i++) {
|
||||
const startAngle = i * sliceAngle;
|
||||
const endAngle = (i + 1) * sliceAngle;
|
||||
|
||||
// Calculate the position of the outer arc
|
||||
const outerStartX = hole * Math.cos(startAngle);
|
||||
const outerStartY = hole * Math.sin(startAngle);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(outerStartX, outerStartY);
|
||||
ctx.arc(0, 0, radius, startAngle, endAngle);
|
||||
ctx.arc(0, 0, hole, endAngle, startAngle, true);
|
||||
ctx.closePath();
|
||||
|
||||
// Fill and stroke the slices with the specified fill style
|
||||
if (i < slices - eaten) {
|
||||
// Regular slices are white
|
||||
ctx.fillStyle = fillStyle;
|
||||
} else {
|
||||
// Missing slices are black
|
||||
ctx.fillStyle = secondary;
|
||||
}
|
||||
ctx.lineWidth = 2;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = stroke;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -2387,8 +2625,50 @@ export class UserAPI {
|
||||
eaten = slices.eaten || 0;
|
||||
slices = slices.slices || 3;
|
||||
}
|
||||
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawPie(canvas, slices, eaten, radius, fillStyle, secondary, stroke, rotation, x, y);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
|
||||
if (slices < 2) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = slices < 1 ? secondary : fillStyle;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
|
||||
// Draw slices as arcs
|
||||
const totalSlices = slices;
|
||||
const sliceAngle = (2 * Math.PI) / totalSlices;
|
||||
for (let i = 0; i < totalSlices; i++) {
|
||||
const startAngle = i * sliceAngle;
|
||||
const endAngle = (i + 1) * sliceAngle;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, radius, startAngle, endAngle);
|
||||
ctx.lineTo(0, 0); // Connect to center
|
||||
ctx.closePath();
|
||||
|
||||
// Fill and stroke the slices with the specified fill style
|
||||
if (i < slices - eaten) {
|
||||
// Regular slices are white
|
||||
ctx.fillStyle = fillStyle;
|
||||
} else {
|
||||
// Missing slices are black
|
||||
ctx.fillStyle = secondary;
|
||||
}
|
||||
ctx.lineWidth = 2;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = stroke;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -2413,7 +2693,24 @@ export class UserAPI {
|
||||
points = points.points || 5;
|
||||
}
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawStar(canvas, points, radius, fillStyle, rotation, outerRadius, x, y);
|
||||
if (points < 1) return this.ball(radius, fillStyle, x, y);
|
||||
if (points == 1) return this.equilateral(radius, fillStyle, 0, x, y);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, -radius);
|
||||
for (let i = 0; i < points; i++) {
|
||||
ctx.rotate(Math.PI / points);
|
||||
ctx.lineTo(0, -(radius * outerRadius));
|
||||
ctx.rotate(Math.PI / points);
|
||||
ctx.lineTo(0, -radius);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -2436,7 +2733,17 @@ export class UserAPI {
|
||||
width = width.width || 1;
|
||||
}
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawStroke(canvas, width, strokeStyle, rotation, x1, y1, x2, y2);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x1, y1);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(x2 - x1, y2 - y1);
|
||||
ctx.lineWidth = width;
|
||||
ctx.strokeStyle = strokeStyle;
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -2457,7 +2764,13 @@ export class UserAPI {
|
||||
width = width.width || this.wc() / 4;
|
||||
}
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawStroke(canvas, width, fillStyle, rotation, x, y, width, height);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -2480,7 +2793,59 @@ export class UserAPI {
|
||||
happiness = happiness.happiness || 0;
|
||||
}
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawSmiley(canvas, happiness, radius, eyeSize, fillStyle, rotation, x, y);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
// Map the rotation value to an angle within the range of -PI to PI
|
||||
const rotationAngle = rotation / 100 * Math.PI;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate(rotationAngle);
|
||||
|
||||
// Draw face
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.lineWidth = radius / 20;
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.stroke();
|
||||
|
||||
// Draw eyes
|
||||
const eyeY = -radius / 5;
|
||||
const eyeXOffset = radius / 2.5;
|
||||
const eyeRadiusX = radius / 8;
|
||||
const eyeRadiusY = eyeSize * radius / 10;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(-eyeXOffset, eyeY, eyeRadiusX, eyeRadiusY, 0, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(eyeXOffset, eyeY, eyeRadiusX, eyeRadiusY, 0, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fill();
|
||||
|
||||
// Draw mouth with happiness number -1.0 to 1.0. 0.0 Should be a straight line.
|
||||
const mouthY = radius / 2;
|
||||
const mouthLength = radius * 0.9;
|
||||
const smileFactor = 0.25; // Adjust for the smile curvature
|
||||
|
||||
let controlPointX = 0;
|
||||
let controlPointY = 0;
|
||||
|
||||
if (happiness >= 0) {
|
||||
controlPointY = mouthY + happiness * smileFactor * radius / 2;
|
||||
} else {
|
||||
controlPointY = mouthY + happiness * smileFactor * radius / 2;
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-mouthLength / 2, mouthY);
|
||||
ctx.quadraticCurveTo(controlPointX, controlPointY, mouthLength / 2, mouthY);
|
||||
ctx.lineWidth = 10;
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -2505,7 +2870,15 @@ export class UserAPI {
|
||||
text = text.text || "";
|
||||
}
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawText(canvas, text, fontSize, rotation, font, x, y, fillStyle, filter);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.filter = filter;
|
||||
ctx.font = `${fontSize}px ${font}`;
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fillText(text, 0, 0);
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -2529,12 +2902,21 @@ export class UserAPI {
|
||||
url = url.url || "";
|
||||
}
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
drawImage(canvas, url, width, height, rotation, x, y, filter);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.filter = filter;
|
||||
const image = new Image();
|
||||
image.src = url;
|
||||
ctx.drawImage(image, -width / 2, -height / 2, width, height);
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
|
||||
randomChar = (length: number = 1, min: number = 0, max: number = 65536): string => {
|
||||
return Array.from(
|
||||
|
||||
{ length }, () => String.fromCodePoint(Math.floor(Math.random() * (max - min) + min))
|
||||
).join('');
|
||||
}
|
||||
@ -2560,6 +2942,9 @@ export class UserAPI {
|
||||
return this.randomChar(n, 0x1f910, 0x1f92f);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// =============================================================
|
||||
// OSC Functions
|
||||
// =============================================================
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { type Editor } from "./main";
|
||||
// Basics
|
||||
import { introduction } from "./documentation/basics/welcome";
|
||||
import { atelier } from "./documentation/basics/atelier";
|
||||
import { loading_samples } from "./documentation/learning/samples/loading_samples";
|
||||
import { amplitude } from "./documentation/learning/audio_engine/amplitude";
|
||||
import { effects } from "./documentation/learning/audio_engine/effects";
|
||||
@ -78,7 +77,6 @@ export const makeExampleFactory = (application: Editor): Function => {
|
||||
|
||||
export const documentation_pages = [
|
||||
"introduction",
|
||||
"atelier",
|
||||
"sampler",
|
||||
"amplitude",
|
||||
"audio_basics",
|
||||
@ -128,7 +126,6 @@ export const documentation_factory = (application: Editor) => {
|
||||
|
||||
return {
|
||||
introduction: introduction(application),
|
||||
atelier: atelier(application),
|
||||
interface: software_interface(application),
|
||||
interaction: interaction(application),
|
||||
code: code(application),
|
||||
@ -226,7 +223,7 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
|
||||
}), ...bindings],
|
||||
});
|
||||
|
||||
if (Object.keys(app.docs).length === 0) {
|
||||
if(Object.keys(app.docs).length === 0) {
|
||||
app.docs = documentation_factory(app);
|
||||
}
|
||||
|
||||
@ -236,7 +233,7 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
|
||||
);
|
||||
callback(converted_markdown)
|
||||
}
|
||||
_update_and_assign((e: string) => {
|
||||
_update_and_assign((e: string)=> {
|
||||
let display_content = e === undefined ? loading_message : e;
|
||||
document.getElementById("documentation-content")!.innerHTML = display_content;
|
||||
})
|
||||
|
||||
@ -35,7 +35,7 @@ import { inlineHoveringTips } from "./documentation/inlineHelp";
|
||||
import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
|
||||
import { javascriptLanguage } from "@codemirror/lang-javascript";
|
||||
|
||||
export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension => {
|
||||
export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => {
|
||||
// @ts-ignore
|
||||
const black = theme["black"],
|
||||
red = theme["red"],
|
||||
@ -64,9 +64,10 @@ export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension
|
||||
cursor = theme["cursor"],
|
||||
foreground = theme["foreground"],
|
||||
selection_background = theme["selection_background"];
|
||||
const toposTheme = EditorView.theme({
|
||||
const toposTheme = EditorView.theme( {
|
||||
"&": {
|
||||
color: background,
|
||||
// backgroundColor: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
@ -75,9 +76,6 @@ export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-line": {
|
||||
color: `${brightwhite}`,
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
@ -100,14 +98,14 @@ export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension
|
||||
backgroundColor: red,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
backgroundColor: `rgba(${(parseInt(selection_background.slice(1, 3), 16))}, ${(parseInt(selection_background.slice(3, 5), 16))}, ${(parseInt(selection_background.slice(5, 7), 16))}, 0.25)`,
|
||||
backgroundColor: `rgba(${(parseInt(selection_background.slice(1,3), 16))}, ${(parseInt(selection_background.slice(3,5), 16))}, ${(parseInt(selection_background.slice(5,7), 16))}, 0.25)`,
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: `rgba(${(parseInt(selection_background.slice(1, 3), 16))}, ${(parseInt(selection_background.slice(3, 5), 16))}, ${(parseInt(selection_background.slice(5, 7), 16))}, 0.25)`,
|
||||
backgroundColor: `rgba(${(parseInt(selection_background.slice(1,3), 16))}, ${(parseInt(selection_background.slice(3,5), 16))}, ${(parseInt(selection_background.slice(5,7), 16))}, 0.25)`,
|
||||
outline: `1px solid ${brightwhite}`,
|
||||
},
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: `rgba(${(parseInt(selection_background.slice(1, 3), 16))}, ${(parseInt(selection_background.slice(3, 5), 16))}, ${(parseInt(selection_background.slice(5, 7), 16))}, 0.25)`,
|
||||
color: `rgba(${(parseInt(selection_background.slice(1,3), 16))}, ${(parseInt(selection_background.slice(3,5), 16))}, ${(parseInt(selection_background.slice(5,7), 16))}, 0.25)`,
|
||||
},
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: yellow,
|
||||
@ -125,7 +123,7 @@ export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${brightwhite}`,
|
||||
color: `${blue}`,
|
||||
},
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
@ -139,7 +137,7 @@ export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: background,
|
||||
color: brightwhite,
|
||||
color: background,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -194,7 +192,7 @@ export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: red,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green },
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green},
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: green,
|
||||
@ -203,57 +201,39 @@ export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension
|
||||
tag: [t.contentSeparator],
|
||||
color: green,
|
||||
},
|
||||
{
|
||||
tag: [t.content],
|
||||
color: brightwhite
|
||||
},
|
||||
{
|
||||
tag: t.invalid,
|
||||
color: red,
|
||||
borderBottom: `1px dotted ${red}`
|
||||
},
|
||||
{
|
||||
tag: t.null,
|
||||
color: brightwhite,
|
||||
}
|
||||
{ tag: t.invalid, color: red, borderBottom: `1px dotted ${red}` },
|
||||
]);
|
||||
return [toposTheme, syntaxHighlighting(toposHighlightStyle),
|
||||
]
|
||||
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 switchToDebugTheme = (app: Editor) => {
|
||||
app.view.dispatch({
|
||||
effects: app.themeCompartment.reconfigure(debug),
|
||||
});
|
||||
}
|
||||
// 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({
|
||||
|
||||
@ -81,7 +81,6 @@ export const tryEvaluate = async (
|
||||
);
|
||||
addFunctionToCache(candidateCode, newFunction);
|
||||
} else {
|
||||
application.api.logOnce("Compilation error!");
|
||||
await evaluate(application, code, timeout);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// import { tutorial_universe } from "./universes/tutorial";
|
||||
import { gzipSync, decompressSync, strFromU8 } from "fflate";
|
||||
// import { examples } from "./examples/excerpts";
|
||||
import { examples } from "./examples/excerpts";
|
||||
import { type Editor } from "./main";
|
||||
import { uniqueNamesGenerator, colors, animals } from "unique-names-generator";
|
||||
import { tryEvaluate } from "./Evaluator";
|
||||
@ -63,7 +63,7 @@ export interface Settings {
|
||||
selected_universe: string;
|
||||
line_numbers: boolean;
|
||||
time_position: boolean;
|
||||
// load_demo_songs: boolean;
|
||||
load_demo_songs: boolean;
|
||||
tips: boolean;
|
||||
completions: boolean;
|
||||
send_clock: boolean;
|
||||
@ -150,7 +150,7 @@ export class AppSettings {
|
||||
public midi_clock_input: string | undefined = undefined;
|
||||
public default_midi_input: string | undefined = undefined;
|
||||
public midi_clock_ppqn: number = 24;
|
||||
// public load_demo_songs: boolean = true;
|
||||
public load_demo_songs: boolean = true;
|
||||
|
||||
constructor() {
|
||||
const settingsFromStorage = JSON.parse(
|
||||
@ -174,7 +174,7 @@ export class AppSettings {
|
||||
this.midi_clock_input = settingsFromStorage.midi_clock_input;
|
||||
this.midi_clock_ppqn = settingsFromStorage.midi_clock_ppqn || 24;
|
||||
this.default_midi_input = settingsFromStorage.default_midi_input;
|
||||
// this.load_demo_songs = settingsFromStorage.load_demo_songs;
|
||||
this.load_demo_songs = settingsFromStorage.load_demo_songs;
|
||||
} else {
|
||||
this.universes = template_universes;
|
||||
}
|
||||
@ -204,7 +204,7 @@ export class AppSettings {
|
||||
midi_clock_input: this.midi_clock_input,
|
||||
midi_clock_ppqn: this.midi_clock_ppqn,
|
||||
default_midi_input: this.default_midi_input,
|
||||
// load_demo_songs: this.load_demo_songs,
|
||||
load_demo_songs: this.load_demo_songs,
|
||||
};
|
||||
}
|
||||
|
||||
@ -232,7 +232,7 @@ export class AppSettings {
|
||||
this.midi_clock_input = settings.midi_clock_input;
|
||||
this.midi_clock_ppqn = settings.midi_clock_ppqn;
|
||||
this.default_midi_input = settings.default_midi_input;
|
||||
// this.load_demo_songs = settings.load_demo_songs;
|
||||
this.load_demo_songs = settings.load_demo_songs;
|
||||
localStorage.setItem("topos", JSON.stringify(this.data));
|
||||
}
|
||||
}
|
||||
@ -245,13 +245,13 @@ export const initializeSelectedUniverse = (app: Editor): void => {
|
||||
* @param app - The main application
|
||||
* @returns void
|
||||
*/
|
||||
// if (app.settings.load_demo_songs) {
|
||||
// let random_example = examples[Math.floor(Math.random() * examples.length)];
|
||||
// app.selected_universe = "Demo";
|
||||
// app.universes[app.selected_universe] = structuredClone(template_universe);
|
||||
// app.universes[app.selected_universe].global.committed = random_example;
|
||||
// app.universes[app.selected_universe].global.candidate = random_example;
|
||||
// } else {
|
||||
if (app.settings.load_demo_songs) {
|
||||
let random_example = examples[Math.floor(Math.random() * examples.length)];
|
||||
app.selected_universe = "Demo";
|
||||
app.universes[app.selected_universe] = structuredClone(template_universe);
|
||||
app.universes[app.selected_universe].global.committed = random_example;
|
||||
app.universes[app.selected_universe].global.candidate = random_example;
|
||||
} else {
|
||||
try {
|
||||
app.selected_universe = app.settings.selected_universe;
|
||||
if (app.universes[app.selected_universe] === undefined)
|
||||
@ -262,6 +262,7 @@ export const initializeSelectedUniverse = (app: Editor): void => {
|
||||
app.selected_universe = app.settings.selected_universe;
|
||||
app.universes[app.selected_universe] = structuredClone(template_universe);
|
||||
}
|
||||
}
|
||||
(
|
||||
app.interface.universe_viewer as HTMLInputElement
|
||||
).placeholder! = `${app.selected_universe}`;
|
||||
|
||||
@ -28,7 +28,7 @@ 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) {
|
||||
reader.onload = function (event: Event) {
|
||||
// @ts-ignore
|
||||
resolve(event.target.result);
|
||||
};
|
||||
@ -65,7 +65,7 @@ const processFilesForIDB = async (files: FileList) => {
|
||||
};
|
||||
|
||||
|
||||
export const registerSamplesFromDB = (config: samplesDBConfig, onComplete = () => { }) => {
|
||||
export const registerSamplesFromDB = (config: samplesDBConfig, onComplete = () => {}) => {
|
||||
openDB(config, (objectStore: IDBObjectStore) => {
|
||||
let query = objectStore.getAll();
|
||||
query.onsuccess = (event: Event) => {
|
||||
@ -123,10 +123,10 @@ export const openDB = (config: samplesDBConfig, onOpened: Function) => {
|
||||
objectStore.createIndex(c, c, { unique: false });
|
||||
});
|
||||
};
|
||||
dbOpen.onerror = function(err: Event) {
|
||||
dbOpen.onerror = function (err: Event) {
|
||||
console.log('Error opening DB: ', (err.target as IDBOpenDBRequest).error);
|
||||
}
|
||||
dbOpen.onsuccess = function(_event: Event) {
|
||||
dbOpen.onsuccess = function (_event: Event) {
|
||||
const db = dbOpen.result;
|
||||
db.onversionchange = function() {
|
||||
db.close();
|
||||
|
||||
@ -44,8 +44,8 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
app.settings.midi_channels_scripts;
|
||||
(app.interface.midi_clock_ppqn as HTMLInputElement).value =
|
||||
app.settings.midi_clock_ppqn.toString();
|
||||
// (app.interface.load_demo_songs as HTMLInputElement).checked =
|
||||
// app.settings.load_demo_songs;
|
||||
(app.interface.load_demo_songs as HTMLInputElement).checked =
|
||||
app.settings.load_demo_songs;
|
||||
|
||||
const tabs = document.querySelectorAll('[id^="tab-"]');
|
||||
// Iterate over the tabs with an index
|
||||
@ -373,8 +373,8 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
midiChannelsScripts.checked = app.settings.midi_channels_scripts;
|
||||
const midiClockPpqn = app.interface.midi_clock_ppqn as HTMLInputElement;
|
||||
midiClockPpqn.value = app.settings.midi_clock_ppqn.toString();
|
||||
// const loadDemoSongs = app.interface.load_demo_songs as HTMLInputElement;
|
||||
// loadDemoSongs.checked = app.settings.load_demo_songs;
|
||||
const loadDemoSongs = app.interface.load_demo_songs as HTMLInputElement;
|
||||
loadDemoSongs.checked = app.settings.load_demo_songs;
|
||||
const vimModeCheckbox = app.interface.vim_mode_checkbox as HTMLInputElement;
|
||||
vimModeCheckbox.checked = app.settings.vimMode;
|
||||
|
||||
@ -502,12 +502,12 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
app.settings.midi_clock_ppqn = value;
|
||||
});
|
||||
|
||||
// app.interface.load_demo_songs.addEventListener("change", () => {
|
||||
// let checked = (app.interface.load_demo_songs as HTMLInputElement).checked
|
||||
// ? true
|
||||
// : false;
|
||||
// app.settings.load_demo_songs = checked;
|
||||
// });
|
||||
app.interface.load_demo_songs.addEventListener("change", () => {
|
||||
let checked = (app.interface.load_demo_songs as HTMLInputElement).checked
|
||||
? true
|
||||
: false;
|
||||
app.settings.load_demo_songs = checked;
|
||||
});
|
||||
|
||||
app.interface.universe_creator.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
@ -106,7 +106,6 @@ export const registerOnKeyDown = (app: Editor) => {
|
||||
event.preventDefault();
|
||||
app.currentFile().candidate = app.view.state.doc.toString();
|
||||
app.api.onceEvaluator = true;
|
||||
app.api.forceEvaluator = true;
|
||||
tryEvaluate(app, app.currentFile());
|
||||
app.flashBackground("#404040", 200);
|
||||
}
|
||||
@ -116,7 +115,7 @@ export const registerOnKeyDown = (app: Editor) => {
|
||||
event.preventDefault();
|
||||
app.api.clearPatternCache();
|
||||
app.currentFile().candidate = app.view.state.doc.toString();
|
||||
app.api.forceEvaluator = true;
|
||||
app.api.onceEvaluator = true;
|
||||
tryEvaluate(app, app.currentFile());
|
||||
app.flashBackground("#404040", 200);
|
||||
}
|
||||
|
||||
@ -95,15 +95,6 @@ export function filterObject(
|
||||
);
|
||||
}
|
||||
|
||||
export const maybeToNumber = (something: any): number | any => {
|
||||
// If something is BigInt
|
||||
if (typeof something === "bigint") {
|
||||
return Number(something);
|
||||
} else {
|
||||
return something;
|
||||
}
|
||||
}
|
||||
|
||||
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]';
|
||||
|
||||
@ -1,593 +0,0 @@
|
||||
export type ShapeObject = {
|
||||
x: number;
|
||||
y: number;
|
||||
x1: number;
|
||||
y1: number;
|
||||
x2: number;
|
||||
y2: number;
|
||||
radius: number;
|
||||
width: number;
|
||||
height: number;
|
||||
fillStyle: string;
|
||||
secondary: string;
|
||||
strokeStyle: string;
|
||||
rotation: number;
|
||||
points: number;
|
||||
outerRadius: number;
|
||||
eyeSize: number;
|
||||
happiness: number;
|
||||
slices: number;
|
||||
gap: number;
|
||||
font: string;
|
||||
fontSize: number;
|
||||
text: string;
|
||||
filter: string;
|
||||
url: string;
|
||||
curve: number;
|
||||
curves: number;
|
||||
stroke: string;
|
||||
eaten: number;
|
||||
hole: number;
|
||||
};
|
||||
|
||||
export const drawBackground = (
|
||||
canvas: HTMLCanvasElement,
|
||||
color: string | number,
|
||||
...gb: number[]
|
||||
): void => {
|
||||
/**
|
||||
* Set background color of the canvas.
|
||||
* @param color - The color to set. String or 3 numbers representing RGB values.
|
||||
*/
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
if (typeof color === "number") color = `rgb(${color},${gb[0]},${gb[1]})`;
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
};
|
||||
|
||||
export const createLinearGradient = (
|
||||
canvas: HTMLCanvasElement,
|
||||
x1: number,
|
||||
y1: number,
|
||||
x2: number,
|
||||
y2: number,
|
||||
...stops: (number | string)[]
|
||||
): CanvasGradient => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
|
||||
// Parse pairs of values from stops
|
||||
for (let i = 0; i < stops.length; i += 2) {
|
||||
let color = stops[i + 1];
|
||||
if (typeof color === "number")
|
||||
color = `rgb(${color},${stops[i + 2]},${stops[i + 3]})`;
|
||||
gradient.addColorStop(stops[i] as number, color);
|
||||
}
|
||||
return gradient;
|
||||
};
|
||||
|
||||
export const createRadialGradient = (
|
||||
canvas: HTMLCanvasElement,
|
||||
x1: number,
|
||||
y1: number,
|
||||
r1: number,
|
||||
x2: number,
|
||||
y2: number,
|
||||
r2: number,
|
||||
...stops: (number | string)[]
|
||||
) => {
|
||||
/**
|
||||
* Set radial gradient on the canvas.
|
||||
* @param x1 - The x-coordinate of the start circle
|
||||
* @param y1 - The y-coordinate of the start circle
|
||||
* @param r1 - The radius of the start circle
|
||||
* @param x2 - The x-coordinate of the end circle
|
||||
* @param y2 - The y-coordinate of the end circle
|
||||
* @param r2 - The radius of the end circle
|
||||
* @param stops - The stops to set. Pairs of numbers representing the position and color of the stop.
|
||||
*/
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
const gradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
|
||||
for (let i = 0; i < stops.length; i += 2) {
|
||||
let color = stops[i + 1];
|
||||
if (typeof color === "number")
|
||||
color = `rgb(${color},${stops[i + 2]},${stops[i + 3]})`;
|
||||
gradient.addColorStop(stops[i] as number, color);
|
||||
}
|
||||
return gradient;
|
||||
};
|
||||
|
||||
export const createConicGradient = (
|
||||
canvas: HTMLCanvasElement,
|
||||
x: number,
|
||||
y: number,
|
||||
angle: number,
|
||||
...stops: (number | string)[]
|
||||
) => {
|
||||
/**
|
||||
* Set conic gradient on the canvas.
|
||||
* @param x - The x-coordinate of the center of the gradient
|
||||
* @param y - The y-coordinate of the center of the gradient
|
||||
* @param angle - The angle of the gradient, in radians
|
||||
* @param stops - The stops to set. Pairs of numbers representing the position and color of the stop.
|
||||
*/
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
const gradient = ctx.createConicGradient(x, y, angle);
|
||||
for (let i = 0; i < stops.length; i += 2) {
|
||||
let color = stops[i + 1];
|
||||
if (typeof color === "number")
|
||||
color = `rgb(${color},${stops[i + 2]},${stops[i + 3]})`;
|
||||
gradient.addColorStop(stops[i] as number, color);
|
||||
}
|
||||
return gradient;
|
||||
};
|
||||
|
||||
export const drawGradientImage = (
|
||||
canvas: HTMLCanvasElement,
|
||||
time: number = 666
|
||||
) => {
|
||||
/* TODO: This works but is really resource heavy. Should do method for requestAnimationFrame? */
|
||||
const context = canvas.getContext("2d")!;
|
||||
const { width, height } = context.canvas;
|
||||
const imageData = context.getImageData(0, 0, width, height);
|
||||
|
||||
for (let p = 0; p < imageData.data.length; p += 4) {
|
||||
const i = p / 4;
|
||||
const x = i % width;
|
||||
const y = (i / width) >>> 0;
|
||||
|
||||
const red = 64 + (128 * x) / width + 64 * Math.sin(time / 1000);
|
||||
const green = 64 + (128 * y) / height + 64 * Math.cos(time / 1000);
|
||||
const blue = 128;
|
||||
|
||||
imageData.data[p + 0] = red;
|
||||
imageData.data[p + 1] = green;
|
||||
imageData.data[p + 2] = blue;
|
||||
imageData.data[p + 3] = 255;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
return true;
|
||||
};
|
||||
|
||||
export const drawBalloid = (
|
||||
canvas: HTMLCanvasElement,
|
||||
curves: number,
|
||||
radius: number,
|
||||
curve: number,
|
||||
fillStyle: string,
|
||||
secondary: string,
|
||||
x: number,
|
||||
y: number
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
|
||||
// Draw the shape using quadratic Bézier curves
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = fillStyle;
|
||||
|
||||
if (curves === 0) {
|
||||
// Draw a circle if curves = 0
|
||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else if (curves === 1) {
|
||||
// Draw a single curve (ellipse) if curves = 1
|
||||
ctx.ellipse(x, y, radius * 0.8, radius * curve * 0.7, 0, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else if (curves === 2) {
|
||||
// Draw a shape with two symmetric curves starting from the top and meeting at the bottom
|
||||
ctx.moveTo(x, y - radius);
|
||||
|
||||
// First curve
|
||||
ctx.quadraticCurveTo(x + radius * curve, y, x, y + radius);
|
||||
|
||||
// Second symmetric curve
|
||||
ctx.quadraticCurveTo(x - radius * curve, y, x, y - radius);
|
||||
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else {
|
||||
// Draw the curved shape with the specified number of curves
|
||||
ctx.moveTo(x, y - radius);
|
||||
let points = [];
|
||||
for (let i = 0; i < curves; i++) {
|
||||
const startAngle = (i / curves) * 2 * Math.PI;
|
||||
const endAngle = startAngle + (2 * Math.PI) / curves;
|
||||
|
||||
const controlX =
|
||||
x + radius * curve * Math.cos(startAngle + Math.PI / curves);
|
||||
const controlY =
|
||||
y + radius * curve * Math.sin(startAngle + Math.PI / curves);
|
||||
points.push([
|
||||
x + radius * Math.cos(startAngle),
|
||||
y + radius * Math.sin(startAngle),
|
||||
]);
|
||||
ctx.moveTo(
|
||||
x + radius * Math.cos(startAngle),
|
||||
y + radius * Math.sin(startAngle)
|
||||
);
|
||||
ctx.quadraticCurveTo(
|
||||
controlX,
|
||||
controlY,
|
||||
x + radius * Math.cos(endAngle),
|
||||
y + radius * Math.sin(endAngle)
|
||||
);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = secondary;
|
||||
// Form the shape from points with straight lines and fill it
|
||||
ctx.moveTo(points[0][0], points[0][1]);
|
||||
for (let point of points) ctx.lineTo(point[0], point[1]);
|
||||
// Close and fill
|
||||
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
export const drawEquilateral = (
|
||||
canvas: HTMLCanvasElement,
|
||||
radius: number,
|
||||
fillStyle: string,
|
||||
rotation: number,
|
||||
x: number,
|
||||
y: number
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, -radius);
|
||||
ctx.lineTo(radius, radius);
|
||||
ctx.lineTo(-radius, radius);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
export const drawTriangular = (
|
||||
canvas: HTMLCanvasElement,
|
||||
width: number,
|
||||
height: number,
|
||||
fillStyle: string,
|
||||
rotation: number,
|
||||
x: number,
|
||||
y: number
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, -height);
|
||||
ctx.lineTo(width, height);
|
||||
ctx.lineTo(-width, height);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
export const drawBall = (
|
||||
canvas: HTMLCanvasElement,
|
||||
radius: number,
|
||||
fillStyle: string,
|
||||
x: number,
|
||||
y: number
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
};
|
||||
|
||||
export const drawDonut = (
|
||||
canvas: HTMLCanvasElement,
|
||||
slices: number,
|
||||
eaten: number,
|
||||
radius: number,
|
||||
hole: number,
|
||||
fillStyle: string,
|
||||
secondary: string,
|
||||
stroke: string,
|
||||
rotation: number,
|
||||
x: number,
|
||||
y: number
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
|
||||
if (slices < 2) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = slices < 1 ? secondary : fillStyle;
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, hole, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = secondary;
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Draw slices as arcs
|
||||
const totalSlices = slices;
|
||||
const sliceAngle = (2 * Math.PI) / totalSlices;
|
||||
for (let i = 0; i < totalSlices; i++) {
|
||||
const startAngle = i * sliceAngle;
|
||||
const endAngle = (i + 1) * sliceAngle;
|
||||
|
||||
// Calculate the position of the outer arc
|
||||
const outerStartX = hole * Math.cos(startAngle);
|
||||
const outerStartY = hole * Math.sin(startAngle);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(outerStartX, outerStartY);
|
||||
ctx.arc(0, 0, radius, startAngle, endAngle);
|
||||
ctx.arc(0, 0, hole, endAngle, startAngle, true);
|
||||
ctx.closePath();
|
||||
|
||||
// Fill and stroke the slices with the specified fill style
|
||||
if (i < slices - eaten) {
|
||||
// Regular slices are white
|
||||
ctx.fillStyle = fillStyle;
|
||||
} else {
|
||||
// Missing slices are black
|
||||
ctx.fillStyle = secondary;
|
||||
}
|
||||
ctx.lineWidth = 2;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = stroke;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
export const drawPie = (
|
||||
canvas: HTMLCanvasElement,
|
||||
slices: number,
|
||||
eaten: number,
|
||||
radius: number,
|
||||
fillStyle: string,
|
||||
secondary: string,
|
||||
stroke: string,
|
||||
rotation: number,
|
||||
x: number,
|
||||
y: number
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
|
||||
if (slices < 2) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = slices < 1 ? secondary : fillStyle;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Draw slices as arcs
|
||||
const totalSlices = slices;
|
||||
const sliceAngle = (2 * Math.PI) / totalSlices;
|
||||
for (let i = 0; i < totalSlices; i++) {
|
||||
const startAngle = i * sliceAngle;
|
||||
const endAngle = (i + 1) * sliceAngle;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, radius, startAngle, endAngle);
|
||||
ctx.lineTo(0, 0); // Connect to center
|
||||
ctx.closePath();
|
||||
|
||||
// Fill and stroke the slices with the specified fill style
|
||||
if (i < slices - eaten) {
|
||||
// Regular slices are white
|
||||
ctx.fillStyle = fillStyle;
|
||||
} else {
|
||||
// Missing slices are black
|
||||
ctx.fillStyle = secondary;
|
||||
}
|
||||
ctx.lineWidth = 2;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = stroke;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
export const drawStar = (
|
||||
canvas: HTMLCanvasElement,
|
||||
points: number,
|
||||
radius: number,
|
||||
fillStyle: string,
|
||||
rotation: number,
|
||||
outerRadius: number,
|
||||
x: number,
|
||||
y: number
|
||||
): void => {
|
||||
if (points < 1) return drawBall(canvas, radius, fillStyle, x, y);
|
||||
if (points == 1) return drawEquilateral(canvas, radius, fillStyle, 0, x, y);
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, -radius);
|
||||
for (let i = 0; i < points; i++) {
|
||||
ctx.rotate(Math.PI / points);
|
||||
ctx.lineTo(0, -(radius * outerRadius));
|
||||
ctx.rotate(Math.PI / points);
|
||||
ctx.lineTo(0, -radius);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
export const drawStroke = (
|
||||
canvas: HTMLCanvasElement,
|
||||
width: number,
|
||||
strokeStyle: string,
|
||||
rotation: number = 0,
|
||||
x1: number,
|
||||
y1: number,
|
||||
x2: number,
|
||||
y2: number
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x1, y1);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(x2 - x1, y2 - y1);
|
||||
ctx.lineWidth = width;
|
||||
ctx.strokeStyle = strokeStyle;
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
export const drawBox = (
|
||||
canvas: HTMLCanvasElement,
|
||||
width: number,
|
||||
height: number,
|
||||
fillStyle: string,
|
||||
rotation: number,
|
||||
x: number,
|
||||
y: number
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
export const drawSmiley = (
|
||||
canvas: HTMLCanvasElement,
|
||||
happiness: number,
|
||||
radius: number,
|
||||
eyeSize: number,
|
||||
fillStyle: string,
|
||||
rotation: number,
|
||||
x: number,
|
||||
y: number
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
// Map the rotation value to an angle within the range of -PI to PI
|
||||
const rotationAngle = (rotation / 100) * Math.PI;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate(rotationAngle);
|
||||
|
||||
// Draw face
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.lineWidth = radius / 20;
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.stroke();
|
||||
|
||||
// Draw eyes
|
||||
const eyeY = -radius / 5;
|
||||
const eyeXOffset = radius / 2.5;
|
||||
const eyeRadiusX = radius / 8;
|
||||
const eyeRadiusY = (eyeSize * radius) / 10;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(-eyeXOffset, eyeY, eyeRadiusX, eyeRadiusY, 0, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(eyeXOffset, eyeY, eyeRadiusX, eyeRadiusY, 0, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fill();
|
||||
|
||||
// Draw mouth with happiness number -1.0 to 1.0. 0.0 Should be a straight line.
|
||||
const mouthY = radius / 2;
|
||||
const mouthLength = radius * 0.9;
|
||||
const smileFactor = 0.25; // Adjust for the smile curvature
|
||||
|
||||
let controlPointX = 0;
|
||||
let controlPointY = 0;
|
||||
|
||||
if (happiness >= 0) {
|
||||
controlPointY = mouthY + (happiness * smileFactor * radius) / 2;
|
||||
} else {
|
||||
controlPointY = mouthY + (happiness * smileFactor * radius) / 2;
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-mouthLength / 2, mouthY);
|
||||
ctx.quadraticCurveTo(controlPointX, controlPointY, mouthLength / 2, mouthY);
|
||||
ctx.lineWidth = 10;
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
export const drawText = (
|
||||
canvas: HTMLCanvasElement,
|
||||
text: string,
|
||||
fontSize: number,
|
||||
rotation: number,
|
||||
font: string,
|
||||
x: number,
|
||||
y: number,
|
||||
fillStyle: string,
|
||||
filter: string
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.filter = filter;
|
||||
ctx.font = `${fontSize}px ${font}`;
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fillText(text, 0, 0);
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
export const drawImage = (
|
||||
canvas: HTMLCanvasElement,
|
||||
url: string,
|
||||
width: number,
|
||||
height: number,
|
||||
rotation: number,
|
||||
x: number,
|
||||
y: number,
|
||||
filter: string = "none"
|
||||
): void => {
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotation * Math.PI) / 180);
|
||||
ctx.filter = filter;
|
||||
const image = new Image();
|
||||
image.src = url;
|
||||
ctx.drawImage(image, -width / 2, -height / 2, width, height);
|
||||
ctx.restore();
|
||||
};
|
||||
@ -521,13 +521,4 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
this.app.api.cue(functionName);
|
||||
return this;
|
||||
}
|
||||
|
||||
runChain = (): this => {
|
||||
// chainAll is defined using all() in the API
|
||||
if("chainAll" in this && typeof this.chainAll === "function") {
|
||||
this.values = this.chainAll().values;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -115,7 +115,7 @@ export class MidiEvent extends AudibleEvent {
|
||||
return this;
|
||||
};
|
||||
|
||||
out = (outChannel?: number|number[]): void => {
|
||||
out = (): void => {
|
||||
function play(event: MidiEvent, params: MidiParams): void {
|
||||
const channel = params.channel ? params.channel : 0;
|
||||
const velocity = params.velocity ? params.velocity : 100;
|
||||
@ -141,9 +141,6 @@ export class MidiEvent extends AudibleEvent {
|
||||
);
|
||||
}
|
||||
|
||||
this.runChain();
|
||||
if(outChannel) this.channel(outChannel);
|
||||
|
||||
const events = objectWithArraysToArrayOfObjects(this.values, [
|
||||
"parsedScale",
|
||||
]) as MidiParams[];
|
||||
|
||||
@ -41,19 +41,6 @@ export class SoundEvent extends AudibleEvent {
|
||||
zrand: ["zrand", "zr"],
|
||||
curve: ["curve"],
|
||||
bank: ["bank"],
|
||||
drumMachine: function(self: SoundEvent, a: number) {
|
||||
let machines = ["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"];
|
||||
self.updateValue("bank", machines[a % machines.length]);
|
||||
return self;
|
||||
},
|
||||
slide: ["slide", "sld"],
|
||||
deltaSlide: ["deltaSlide", "dslide"],
|
||||
pitchJump: ["pitchJump", "pj"],
|
||||
@ -62,7 +49,6 @@ export class SoundEvent extends AudibleEvent {
|
||||
znoise: ["znoise"],
|
||||
address: ["address", "add"],
|
||||
port: ["port"],
|
||||
density: ["density"],
|
||||
noise: ["noise"],
|
||||
zmod: ["zmod"],
|
||||
zcrush: ["zcrush"],
|
||||
@ -84,7 +70,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
phaserDepth: ["phaserDepth", "phasdepth"],
|
||||
phaserSweep: ["phaserSweep", "phassweep"],
|
||||
phaserCenter: ["phaserCenter", "phascenter"],
|
||||
fmadsr: function(
|
||||
fmadsr: function (
|
||||
self: SoundEvent,
|
||||
a: number,
|
||||
d: number,
|
||||
@ -97,7 +83,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
self.updateValue("fmrelease", r);
|
||||
return self;
|
||||
},
|
||||
fmad: function(self: SoundEvent, a: number, d: number) {
|
||||
fmad: function (self: SoundEvent, a: number, d: number) {
|
||||
self.updateValue("fmattack", a);
|
||||
self.updateValue("fmdecay", d);
|
||||
return self;
|
||||
@ -108,7 +94,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
decay: ["decay", "dec"],
|
||||
sustain: ["sustain", "sus"],
|
||||
release: ["release", "rel"],
|
||||
adsr: function(
|
||||
adsr: function (
|
||||
self: SoundEvent,
|
||||
a: number,
|
||||
d: number,
|
||||
@ -121,18 +107,18 @@ export class SoundEvent extends AudibleEvent {
|
||||
self.updateValue("release", r);
|
||||
return self;
|
||||
},
|
||||
ad: function(self: SoundEvent, a: number, d: number) {
|
||||
ad: function (self: SoundEvent, a: number, d: number) {
|
||||
self.updateValue("attack", a);
|
||||
self.updateValue("decay", d);
|
||||
self.updateValue("sustain", 0.0);
|
||||
self.updateValue("release", 0.0);
|
||||
return self;
|
||||
},
|
||||
scope: function(self: SoundEvent) {
|
||||
scope: function (self: SoundEvent) {
|
||||
self.updateValue("analyze", true);
|
||||
return self;
|
||||
},
|
||||
debug: function(self: SoundEvent, callback?: Function) {
|
||||
debug: function (self: SoundEvent, callback?: Function) {
|
||||
self.updateValue("debug", true);
|
||||
if (callback) {
|
||||
self.updateValue("debugFunction", callback);
|
||||
@ -144,33 +130,27 @@ export class SoundEvent extends AudibleEvent {
|
||||
lpdecay: ["lpdecay", "lpd"],
|
||||
lpsustain: ["lpsustain", "lps"],
|
||||
lprelease: ["lprelease", "lpr"],
|
||||
cutoff: function(self: SoundEvent, value: number, resonance?: number) {
|
||||
cutoff: function (self: SoundEvent, value: number, resonance?: number) {
|
||||
self.updateValue("cutoff", value);
|
||||
if (resonance) {
|
||||
self.updateValue("resonance", resonance);
|
||||
}
|
||||
return self;
|
||||
},
|
||||
lpf: function(self: SoundEvent, value: number, resonance?: number) {
|
||||
lpf: function (self: SoundEvent, value: number, resonance?: number) {
|
||||
self.updateValue("cutoff", value);
|
||||
if (resonance) {
|
||||
self.updateValue("resonance", resonance);
|
||||
}
|
||||
return self;
|
||||
},
|
||||
resonance: function(self: SoundEvent, value: number) {
|
||||
resonance: function (self: SoundEvent, value: number) {
|
||||
if (value >= 0 && value <= 1) {
|
||||
self.updateValue("resonance", 50 * value);
|
||||
}
|
||||
return self;
|
||||
},
|
||||
lpq: function(self: SoundEvent, value: number) {
|
||||
if (value >= 0 && value <= 1) {
|
||||
self.updateValue("resonance", 50 * value);
|
||||
}
|
||||
return self;
|
||||
},
|
||||
lpadsr: function(
|
||||
lpadsr: function (
|
||||
self: SoundEvent,
|
||||
depth: number,
|
||||
a: number,
|
||||
@ -185,7 +165,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
self.updateValue("lprelease", r);
|
||||
return self;
|
||||
},
|
||||
lpad: function(self: SoundEvent, depth: number, a: number, d: number) {
|
||||
lpad: function (self: SoundEvent, depth: number, a: number, d: number) {
|
||||
self.updateValue("lpenv", depth);
|
||||
self.updateValue("lpattack", a);
|
||||
self.updateValue("lpdecay", d);
|
||||
@ -198,25 +178,25 @@ export class SoundEvent extends AudibleEvent {
|
||||
hpdecay: ["hpdecay", "hpd"],
|
||||
hpsustain: ["hpsustain", "hpsus"],
|
||||
hprelease: ["hprelease", "hpr"],
|
||||
hcutoff: function(self: SoundEvent, value: number, resonance?: number) {
|
||||
hcutoff: function (self: SoundEvent, value: number, resonance?: number) {
|
||||
self.updateValue("hcutoff", value);
|
||||
if (resonance) {
|
||||
self.updateValue("hresonance", resonance);
|
||||
}
|
||||
return self;
|
||||
},
|
||||
hpf: function(self: SoundEvent, value: number, resonance?: number) {
|
||||
hpf: function (self: SoundEvent, value: number, resonance?: number) {
|
||||
self.updateValue("hcutoff", value);
|
||||
if (resonance) {
|
||||
self.updateValue("hresonance", resonance * 50);
|
||||
self.updateValue("hresonance", resonance);
|
||||
}
|
||||
return self;
|
||||
},
|
||||
hpq: function(self: SoundEvent, value: number) {
|
||||
self.updateValue("hresonance", value * 50);
|
||||
hpq: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("hresonance", value);
|
||||
return self;
|
||||
},
|
||||
hpadsr: function(
|
||||
hpadsr: function (
|
||||
self: SoundEvent,
|
||||
depth: number,
|
||||
a: number,
|
||||
@ -231,7 +211,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
self.updateValue("hprelease", r);
|
||||
return self;
|
||||
},
|
||||
hpad: function(self: SoundEvent, depth: number, a: number, d: number) {
|
||||
hpad: function (self: SoundEvent, depth: number, a: number, d: number) {
|
||||
self.updateValue("hpenv", depth);
|
||||
self.updateValue("hpattack", a);
|
||||
self.updateValue("hpdecay", d);
|
||||
@ -244,25 +224,22 @@ export class SoundEvent extends AudibleEvent {
|
||||
bpdecay: ["bpdecay", "bpd"],
|
||||
bpsustain: ["bpsustain", "bps"],
|
||||
bprelease: ["bprelease", "bpr"],
|
||||
bandf: function(self: SoundEvent, value: number, resonance?: number) {
|
||||
bandf: function (self: SoundEvent, value: number, resonance?: number) {
|
||||
self.updateValue("bandf", value);
|
||||
if (resonance) {
|
||||
self.updateValue("bandq", resonance);
|
||||
}
|
||||
return self;
|
||||
},
|
||||
bpf: function(self: SoundEvent, value: number, resonance?: number) {
|
||||
bpf: function (self: SoundEvent, value: number, resonance?: number) {
|
||||
self.updateValue("bandf", value);
|
||||
if (resonance) {
|
||||
self.updateValue("bandq", resonance * 50);
|
||||
self.updateValue("bandq", resonance);
|
||||
}
|
||||
return self;
|
||||
},
|
||||
bpq: function(self: SoundEvent, value: number) {
|
||||
self.updateValue("bandq", value * 50);
|
||||
return self;
|
||||
},
|
||||
bpadsr: function(
|
||||
bandq: ["bandq", "bpq"],
|
||||
bpadsr: function (
|
||||
self: SoundEvent,
|
||||
depth: number,
|
||||
a: number,
|
||||
@ -277,7 +254,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
self.updateValue("bprelease", r);
|
||||
return self;
|
||||
},
|
||||
bpad: function(self: SoundEvent, depth: number, a: number, d: number) {
|
||||
bpad: function (self: SoundEvent, depth: number, a: number, d: number) {
|
||||
self.updateValue("bpenv", depth);
|
||||
self.updateValue("bpattack", a);
|
||||
self.updateValue("bpdecay", d);
|
||||
@ -287,7 +264,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
},
|
||||
vib: ["vib"],
|
||||
vibmod: ["vibmod"],
|
||||
fm: function(self: SoundEvent, value: number | string) {
|
||||
fm: function (self: SoundEvent, value: number | string) {
|
||||
if (typeof value === "number") {
|
||||
self.values["fmi"] = value;
|
||||
} else {
|
||||
@ -303,11 +280,11 @@ export class SoundEvent extends AudibleEvent {
|
||||
begin: ["begin"],
|
||||
end: ["end"],
|
||||
gain: ["gain"],
|
||||
dbgain: function(self: SoundEvent, value: number) {
|
||||
dbgain: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("gain", Math.min(Math.pow(10, value / 20), 10));
|
||||
return self;
|
||||
},
|
||||
db: function(self: SoundEvent, value: number) {
|
||||
db: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("gain", Math.min(Math.pow(10, value / 20), 10));
|
||||
return self;
|
||||
},
|
||||
@ -330,32 +307,32 @@ export class SoundEvent extends AudibleEvent {
|
||||
roomlp: ["roomlp", "rlp"],
|
||||
roomdim: ["roomdim", "rdim"],
|
||||
sound: ["s", "sound"],
|
||||
size: function(self: SoundEvent, value: number) {
|
||||
size: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("roomsize", value);
|
||||
return self;
|
||||
},
|
||||
sz: function(self: SoundEvent, value: number) {
|
||||
sz: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("roomsize", value);
|
||||
return self;
|
||||
},
|
||||
comp: ["comp", "compressor", "cmp"],
|
||||
ratio: function(self: SoundEvent, value: number) {
|
||||
comp: ["comp","compressor", "cmp"],
|
||||
ratio: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("compressorRatio", value);
|
||||
return self;
|
||||
},
|
||||
knee: function(self: SoundEvent, value: number) {
|
||||
knee: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("compressorKnee", value);
|
||||
return self;
|
||||
},
|
||||
compAttack: function(self: SoundEvent, value: number) {
|
||||
compAttack: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("compressorAttack", value);
|
||||
return self;
|
||||
},
|
||||
compRelease: function(self: SoundEvent, value: number) {
|
||||
compRelease: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("compressorRelease", value);
|
||||
return self;
|
||||
},
|
||||
stretch: function(self: SoundEvent, beat: number) {
|
||||
stretch: function (self: SoundEvent, beat: number) {
|
||||
self.updateValue("unit", "c");
|
||||
self.updateValue("speed", 1 / beat);
|
||||
self.updateValue("cut", beat);
|
||||
@ -427,7 +404,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
(soundEvent.key || "C4"),
|
||||
(soundEvent.originalPitch || soundEvent.pitch || 0),
|
||||
(soundEvent.parsedScale || soundEvent.scale || "MAJOR"),
|
||||
(soundEvent.paramOctave || 0) + (soundEvent.addedOctave || 0)
|
||||
(soundEvent.paramOctave || 0)+(soundEvent.addedOctave || 0)
|
||||
);
|
||||
soundEvent.note = resolvedPitchClass.note;
|
||||
soundEvent.freq = midiToFreq(resolvedPitchClass.note);
|
||||
@ -446,7 +423,6 @@ export class SoundEvent extends AudibleEvent {
|
||||
};
|
||||
|
||||
out = (orbit?: number | number[]): void => {
|
||||
this.runChain();
|
||||
if (orbit) this.values["orbit"] = orbit;
|
||||
const events = objectWithArraysToArrayOfObjects(this.values, [
|
||||
"parsedScale",
|
||||
|
||||
@ -7,7 +7,6 @@ import { MidiEvent, MidiParams } from "./MidiEvent";
|
||||
import { RestEvent } from "./RestEvent";
|
||||
import { arrayOfObjectsToObjectWithArrays, isGenerator } from "../Utils/Generic";
|
||||
import { TonnetzSpaces } from "zifferjs/src/tonnetz";
|
||||
import { safeMod } from "zifferjs/src/utils";
|
||||
|
||||
export type InputOptions = { [key: string]: string | number };
|
||||
|
||||
@ -32,7 +31,6 @@ export class Player extends AbstractEvent {
|
||||
options: InputOptions,
|
||||
public app: Editor,
|
||||
zid: string = "",
|
||||
waitTime: number = 0,
|
||||
) {
|
||||
super(app);
|
||||
this.options = options;
|
||||
@ -48,24 +46,9 @@ export class Player extends AbstractEvent {
|
||||
} else {
|
||||
throw new Error("Invalid input");
|
||||
}
|
||||
if(waitTime) this.waitTime = waitTime;
|
||||
this.zid = zid;
|
||||
}
|
||||
|
||||
updatePattern(input: string, options: InputOptions): boolean {
|
||||
const oldIndex = this.ziffers.index;
|
||||
const newPattern = new Ziffers(input, options);
|
||||
if(newPattern.values.length > 0) {
|
||||
this.ziffers = newPattern;
|
||||
this.ziffers.update();
|
||||
this.ziffers.index = oldIndex;
|
||||
this.input = input;
|
||||
this.options = options;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
isValid() {
|
||||
return this.ziffers.values.length > 0;
|
||||
}
|
||||
@ -338,92 +321,18 @@ export class Player extends AbstractEvent {
|
||||
return this;
|
||||
}
|
||||
|
||||
octaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 4, components: number = 1) {
|
||||
if (this.atTheBeginning()) this.ziffers.octaCycle(tonnetz, repeats, components);
|
||||
octaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 4) {
|
||||
if (this.atTheBeginning()) this.ziffers.octaCycle(tonnetz, repeats);
|
||||
return this;
|
||||
}
|
||||
|
||||
hexaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3, components: number = 1) {
|
||||
if (this.atTheBeginning()) this.ziffers.hexaCycle(tonnetz, repeats, components);
|
||||
hexaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3) {
|
||||
if (this.atTheBeginning()) this.ziffers.hexaCycle(tonnetz, repeats);
|
||||
return this;
|
||||
}
|
||||
|
||||
enneaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3, components: number = 1) {
|
||||
if (this.atTheBeginning()) this.ziffers.enneaCycle(tonnetz, repeats, components);
|
||||
return this;
|
||||
}
|
||||
|
||||
cubeDance(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3) {
|
||||
if (this.atTheBeginning()) this.ziffers.cubeDance(tonnetz, repeats);
|
||||
return this;
|
||||
}
|
||||
|
||||
powerTowers(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3) {
|
||||
if (this.atTheBeginning()) this.ziffers.powerTowers(tonnetz, repeats);
|
||||
return this;
|
||||
}
|
||||
powerTower = this.powerTowers;
|
||||
|
||||
octaTower(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3, components: number = 1) {
|
||||
if (this.atTheBeginning()) this.ziffers.octaTower(tonnetz, repeats, components);
|
||||
return this;
|
||||
}
|
||||
octaTowers = this.octaTower;
|
||||
|
||||
boretzRegions(tonnetz: TonnetzSpaces = [3, 4, 5]) {
|
||||
if (this.atTheBeginning()) this.ziffers.boretzRegions(tonnetz);
|
||||
return this;
|
||||
}
|
||||
boretz = this.boretzRegions;
|
||||
|
||||
weitzmannRegions(tonnetz: TonnetzSpaces = [3, 4, 5]) {
|
||||
if (this.atTheBeginning()) this.ziffers.weitzmannRegions(tonnetz);
|
||||
return this;
|
||||
}
|
||||
weitzmann = this.weitzmannRegions;
|
||||
|
||||
shuffle() {
|
||||
if (this.atTheBeginning()) this.ziffers.shuffle();
|
||||
return this;
|
||||
}
|
||||
|
||||
deal(amount: number = this.ziffers.values.length) {
|
||||
if (this.atTheBeginning()) this.ziffers.deal(amount);
|
||||
return this;
|
||||
}
|
||||
|
||||
from(value: number) {
|
||||
if (this.atTheBeginning()) this.ziffers.from(value);
|
||||
return this;
|
||||
}
|
||||
|
||||
to(value: number) {
|
||||
if (this.atTheBeginning()) this.ziffers.to(value);
|
||||
return this;
|
||||
}
|
||||
|
||||
between(value: number, value2: number) {
|
||||
if (this.atTheBeginning()) this.ziffers.between(value, value2+1);
|
||||
return this;
|
||||
}
|
||||
|
||||
at(value: number, ...rest: number[]) {
|
||||
if (this.atTheBeginning()) this.ziffers.at(value, ...rest);
|
||||
return this;
|
||||
}
|
||||
|
||||
keep() {
|
||||
this.ziffers.setRedo(0);
|
||||
return this;
|
||||
}
|
||||
|
||||
repeat(amount: number) {
|
||||
this.ziffers.setRedo(amount < 0 ? 0 : amount);
|
||||
return this;
|
||||
}
|
||||
|
||||
every(amount: number) {
|
||||
if (this.atTheBeginning()) this.ziffers.every(amount);
|
||||
enneaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3) {
|
||||
if (this.atTheBeginning()) this.ziffers.enneaCycle(tonnetz, repeats);
|
||||
return this;
|
||||
}
|
||||
|
||||
@ -457,13 +366,6 @@ export class Player extends AbstractEvent {
|
||||
return this;
|
||||
}
|
||||
|
||||
rotate(amount: number = 1) {
|
||||
if (this.atTheBeginning()) {
|
||||
this.ziffers.rotate(amount+safeMod(this.ziffers.cycleIndex,this.ziffers.evaluated.length));
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
listen(value: string) {
|
||||
if(typeof value === "string") {
|
||||
const cueTime = this.app.api.cueTimes[value];
|
||||
|
||||
@ -1,50 +1,4 @@
|
||||
{
|
||||
"theotteryears": {
|
||||
"black": "#000000",
|
||||
"color1": "#e52222",
|
||||
"green": "#5ef763",
|
||||
"yellow": "#fc951e",
|
||||
"blue": "#c48dff",
|
||||
"magenta": "#fa2573",
|
||||
"cyan": "#67d9f0",
|
||||
"white": "#f2f2f2",
|
||||
"brightblack": "#555555",
|
||||
"brightred": "#ff5555",
|
||||
"brightgreen": "#55ff55",
|
||||
"brightyellow": "#ffff55",
|
||||
"brightblue": "#5555ff",
|
||||
"brightmagenta": "#ff55ff",
|
||||
"brightcyan": "#55ffff",
|
||||
"brightwhite": "#ffffff",
|
||||
"background": "#000000",
|
||||
"selection_foreground": "#000000",
|
||||
"cursor": "#bbbbbb",
|
||||
"foreground": "#bbbbbb",
|
||||
"selection_background": "#bbbbbb"
|
||||
},
|
||||
"theotteryears 2": {
|
||||
"black": "#000000",
|
||||
"color1": "#8AA2A9",
|
||||
"green": "#7FDEFF",
|
||||
"yellow": "#F3DFBF",
|
||||
"blue": "#EB8A90",
|
||||
"magenta": "#E8871E",
|
||||
"cyan": "#E8871E",
|
||||
"white": "#E8871E",
|
||||
"brightblack": "#FF3864",
|
||||
"brightred": "#FF3864",
|
||||
"brightgreen": "#FF3864",
|
||||
"brightyellow": "#FF3864",
|
||||
"brightblue": "#71baf2",
|
||||
"brightmagenta": "#FF3864",
|
||||
"brightcyan": "#FF3864",
|
||||
"brightwhite": "#ffffff",
|
||||
"background": "#000000",
|
||||
"selection_foreground": "#000000",
|
||||
"cursor": "#bdc3c2",
|
||||
"foreground": "#bdc3c2",
|
||||
"selection_background": "#FF3864"
|
||||
},
|
||||
"Tomorrow Night Burns": {
|
||||
"black": "#252525",
|
||||
"color1": "#832e31",
|
||||
|
||||
Binary file not shown.
@ -1,193 +0,0 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
|
||||
export const atelier = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
return `
|
||||
# Atelier (06 mars 2024)
|
||||
|
||||
Bonjour tout le monde ! Nous sommes :
|
||||
|
||||
- [Rémi Georges](https://remigeorges.fr) : musicien, réalisateur en informatique musicale.
|
||||
- [Agathe Herrou](https://www.youtube.com/@th4music) : musicienne, chercheuse.
|
||||
- [Raphaël Forment](https://raphaelforment.fr) : musicien, doctorant.
|
||||
|
||||
Nous pratiquons le [live coding](https://livecoding.fr). Nous utilisons notre ordinateur comme un instrument de musique, nous programmons de la musique devant notre public. Nous pouvons faire plein de choses comme :
|
||||
|
||||
- créer des instruments de musique, des synthétiseurs, des boîtes à rythme.
|
||||
- jouer des échantillons, charger des images, des vidéos, créer des animations.
|
||||
- contrôler d'autres instruments, jouer avec d'autres musiciens.
|
||||
|
||||
Topos est un instrument de musique. On peut l'utiliser depuis n'importe quel ordinateur, sans avoir à installer quoi que ce soit. Nous l'avons fabriqué pour que tout le monde puisse jouer facilement de la musique.
|
||||
|
||||
|
||||
## Découverte
|
||||
|
||||
<br>
|
||||
|
||||
${makeExample(
|
||||
"Percussions", `
|
||||
tempo(120) // Changer le tempo
|
||||
beat(1)::sound('kick').out()
|
||||
beat(2)::sound('snare').out()
|
||||
beat(.5)::sound('hh').out()
|
||||
`, true,)}
|
||||
|
||||
<br>
|
||||
|
||||
- Qu'est-ce qu'il se passe si je change un nombre ?
|
||||
- Qu'est-ce qu'il se passe si je change un nom ?
|
||||
- Essayez par exemple <ic>"sid"</ic> ou <ic>"trump"</ic>.
|
||||
- Qu'est-ce qu'il se passe si j'enlève <ic>.out()</ic> ?
|
||||
- Est-il possible de jouer un rythme très rapide ou très lent ?
|
||||
|
||||
|
||||
### Ajout d'une basse
|
||||
|
||||
<br>
|
||||
|
||||
${makeExample(
|
||||
"Une basse", `
|
||||
// Aucun changement dans le code
|
||||
beat(1)::sound('kick').out()
|
||||
beat(2)::sound('snare').out()
|
||||
beat(.5)::sound('hh').out()
|
||||
|
||||
// Une nouvelle partie
|
||||
beat([0.25,0.5].beat(1))::sound("pluck")
|
||||
.note([40,45].beat(2)).out()
|
||||
`, true,)}
|
||||
|
||||
<br>
|
||||
|
||||
- Qu'est-ce que le son <ic>"pluck"</ic> ?
|
||||
|
||||
- Que signifie <ic>.note([40,45].beat(2))</ic> ?
|
||||
|
||||
- Que se passe-t-il si je change la valeur dans <ic>.beat(2)</ic> ?
|
||||
|
||||
- Que se passe-t-il lorsque j'ajoute de nouveaux nombres dans <ic>[40, 45]</ic> ?
|
||||
|
||||
### Ajout d'une mélodie
|
||||
|
||||
<br>
|
||||
|
||||
${makeExample(
|
||||
"Le morceau complet", `
|
||||
// Aucun changement dans le code
|
||||
beat(1)::sound('kick').out()
|
||||
beat(2)::sound('snare').out()
|
||||
beat(.5)::sound('hh').out()
|
||||
beat([0.25,0.5].beat(1))::sound("pluck")
|
||||
.note([40,45].beat(2)).out()
|
||||
|
||||
// Nouvelle partie mélodique
|
||||
beat([0.25,0.5].beat())::sound("pluck")
|
||||
.note([0,7,5,8,2,9,0].scale("Major",60).beat(1))
|
||||
.vib(8).vibmod(1/4)
|
||||
.delay(0.5).room(1.5).size(0.5)
|
||||
.out()
|
||||
`, true,)}
|
||||
|
||||
<br>
|
||||
|
||||
Ici, on ajoute une nouvelle mélodie mais il s'agit aussi d'un nouvel instrument. C'est pour cela que le code est plus long. Quand on fait du <em>live coding</em>, on code tout en même temps : notes, rythmes, mélodies, sons. C'est beaucoup de choses ! C'est pour cela que le code est court, on essaie de tout taper très vite en jouant !
|
||||
|
||||
- Que signifie selon vous <ic>vib</ic>, <ic>delay</ic>, <ic>room</ic> ou <ic>size</ic> ?
|
||||
|
||||
- Que se passe-t-il si je change les valeurs dans <ic>vib</ic>, <ic>delay</ic>, <ic>room</ic> ou <ic>size</ic> ?
|
||||
|
||||
<br>
|
||||
|
||||
**Exercices :**
|
||||
|
||||
- Transformer <ic>vib(8)</ic> en <ic>vib([2,4,8].beat(1))</ic>.
|
||||
- Transformer <ic>"pluck"</ic> en <ic>["pluck", "clap"].beat(1)</ic>.
|
||||
|
||||
Vous pouvez aussi utiliser la fonction <ic>rhythm</ic> pour jouer rapidement des rythmes.
|
||||
|
||||
${makeExample(
|
||||
"Rythmes rythmes rythmes", `
|
||||
rhythm(0.5, 3, 8)::sound('bd').out()
|
||||
rhythm(0.5, 3, 8)::sound('clap').out()
|
||||
rhythm(0.5, 6, 8)::sound('hat').out()
|
||||
rhythm(0.25, 6, 8)::sound('hat')
|
||||
.vel(0.3).speed(2).out()
|
||||
rhythm(0.5, 2, 8)::sound('sd').out()
|
||||
`, true)};
|
||||
|
||||
## Créer un instrument
|
||||
|
||||
<br>
|
||||
|
||||
Nous allons créer un nouvel instrument à partir d'un son de base. Voici un premier son :
|
||||
|
||||
${makeExample("Notre son de base", `beat(2)::sound('sine').note(50).ad(0, .5).out()`, true)}
|
||||
|
||||
<br>
|
||||
|
||||
Ce son est assez ennuyeux. Nous allons ajouter quelques paramètres :
|
||||
|
||||
${makeExample("Beaucoup mieux !", `beat(2)::sound('sine').note(50).fmi(2).fmh(2).ad(0, .5).out()`, true)}
|
||||
|
||||
<br>
|
||||
|
||||
Nous allons aussi ajouter quelques effets intéressants :
|
||||
|
||||
${makeExample("Ajout d'un écho", `beat(2)::sound('sine').note(50)
|
||||
.fmi(2).fmh(2).ad(1/16, 1.5)
|
||||
.delay(0.5).delayt(0.75).out()`,
|
||||
true)}
|
||||
|
||||
<br>
|
||||
|
||||
Nous pouvons utiliser plusieurs techniques pour rendre le son plus dynamique :
|
||||
- générer des valeurs aléatoires pour les paramètres
|
||||
- utiliser des générateurs de valeurs (comme <ic>usine</ic>)
|
||||
- utiliser la souris ou un autre contrôleur pour changer les valeurs en temps réel
|
||||
|
||||
${makeExample("Plus dynamique encore", `
|
||||
beat(2)::sound('sine').note([50,55,57,62,66, 69, 74].mouseX())
|
||||
.fmi(usine(1/4)).fmh([1,2,0.5].beat())
|
||||
.ad(1/16, 1.5).delay(0.5).delayt(0.75)
|
||||
.out()`, true)}
|
||||
|
||||
<br>
|
||||
|
||||
Un exemple final, le plus complexe jusqu'à présent :
|
||||
|
||||
${makeExample("Un instrument de musique complet", `
|
||||
beat(2)::sound('triangle')
|
||||
.note([50,55,57,62,66, 69, 74].mouseX())
|
||||
.fmi(usine(1/4)).fmh([1,2,0.5].beat())
|
||||
.ad(1/16, 1.5).delay(0.5).delayt(0.75)
|
||||
.room(0.5).size(8).lpf(usine(1/3)*4000).out()`, true)}
|
||||
|
||||
## Compléments
|
||||
|
||||
${makeExample("Quelques échantillons", `
|
||||
ab ade ades2 ades3 ades4 alex alphabet amencutup armora arp arpy auto
|
||||
baa baa2 bass bass0 bass1 bass2 bass3 bassdm bassfoo battles bd bend
|
||||
bev bin birds birds3 bleep blip blue bottle breaks125 breaks152
|
||||
breaks157 breaks165 breath bubble can casio cb cc chin circus clak
|
||||
click clubkick co coins control cosmicg cp cr crow d db diphone
|
||||
diphone2 dist dork2 dorkbot dr dr2 dr55 dr_few drum drumtraks e east
|
||||
electro1 em2 erk f feel feelfx fest fire flick fm foo future gab
|
||||
gabba gabbaloud gabbalouder glasstap glitch glitch2 gretsch gtr h
|
||||
hand hardcore hardkick haw hc hh hh27 hit hmm ho hoover house ht if
|
||||
ifdrums incoming industrial insect invaders jazz jungbass jungle juno
|
||||
jvbass kicklinn koy kurt latibro led less lighter linnhats lt made
|
||||
made2 mash mash2 metal miniyeah monsterb moog mouth mp3 msg mt mute
|
||||
newnotes noise noise2 notes numbers oc off outdoor pad padlong pebbles
|
||||
perc peri pluck popkick print proc procshort psr rave rave2 ravemono
|
||||
realclaps reverbkick rm rs sax sd seawolf sequential sf sheffield
|
||||
short sid sine sitar sn space speakspell speech speechless speedupdown
|
||||
stab stomp subroc3d sugar sundance tabla tabla2 tablex tacscan tech
|
||||
techno tink tok toys trump ul ulgab uxay v voodoo wind wobble world
|
||||
xmas yeah`, true)}
|
||||
|
||||
|
||||
`
|
||||
};
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Topos scripts are using the [JavaScript](https://en.wikipedia.org/wiki/JavaScrip
|
||||
|
||||
- [The Modern JavaScript Tutorial](https://javascript.info/): another well known source to learn the language.
|
||||
|
||||
**You do not need to have any prior knowledge of programming to use Topos**.
|
||||
**You do not need to have any prior knowledge of programming** to use Topos**.
|
||||
|
||||
# How is the code evaluated?
|
||||
|
||||
@ -23,7 +23,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 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",
|
||||
)}. 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 can also use <ic>logOnce(message)</ic> to print a message only once (or everytime you press Ctrl+Shift+Backspace).
|
||||
)}. 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!
|
||||
|
||||
# Common idioms
|
||||
|
||||
@ -25,7 +25,7 @@ ${makeExample(
|
||||
beat(1) && active_notes() && sound('sine').chord(active_notes()).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Play active notes as arpeggios",
|
||||
@ -35,7 +35,7 @@ ${makeExample(
|
||||
).cutoff(300 + usine(1/4) * 2000).out()
|
||||
`,
|
||||
false,
|
||||
)}
|
||||
)}
|
||||
|
||||
|
||||
* <ic>sticky_notes(channel?: number)</ic>: returns array of the last pressed keys as an array of MIDI note numbers (0-127). Notes are added and removed from the list with the "Note on"-event. Returns undefined if no keys have been pressed.
|
||||
@ -47,7 +47,7 @@ ${makeExample(
|
||||
.note(sticky_notes().palindrome().beat(0.25)).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
* <ic>last_note(channel?: number)</ic>: returns the last note that has been received. Returns 60 if no other notes have been received.
|
||||
|
||||
@ -59,7 +59,7 @@ ${makeExample(
|
||||
.vibmod([1,3,2,4].beat(2)).out()
|
||||
`,
|
||||
false,
|
||||
)}
|
||||
)}
|
||||
|
||||
* <ic>buffer()</ic>: return true if there are notes in the buffer.
|
||||
* <ic>buffer_note(channel?: number)</ic>: returns last unread note that has been received. Note is fetched and removed from start of the buffer once this is called. Returns undefined if no notes have been received.
|
||||
@ -70,7 +70,7 @@ ${makeExample(
|
||||
beat(1) && buffer() && sound('sine').note(buffer_note()).out()
|
||||
`,
|
||||
false,
|
||||
)}
|
||||
)}
|
||||
|
||||
|
||||
|
||||
@ -80,33 +80,33 @@ ${makeExample(
|
||||
Midi CC messages can be used to control any value in Topos. MIDI input can be defined in Settings and last received CC message can be used to control any numeric value within Topos.
|
||||
|
||||
Currently supported methods for CC input are:
|
||||
* <ic>ccIn(control: number, channel?: number)</ic>: Returns last received CC value for given control number (and optional channel). By default last CC value is last value from ANY channel or 64 if no CC messages have been received.
|
||||
* <ic>last_cc(control: number, channel?: number)</ic>: Returns last received CC value for given control number (and optional channel). By default last CC value is last value from ANY channel or 64 if no CC messages have been received.
|
||||
|
||||
${makeExample(
|
||||
"Play notes with cc",
|
||||
`
|
||||
beat(0.5) && sound('arp').note(ccin(74)).out()
|
||||
beat(0.5) && sound('arp').note(last_cc(74)).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Control everything with CCs",
|
||||
`
|
||||
beat(0.5) :: sound('sine')
|
||||
.freq(ccIn(75)*3)
|
||||
.cutoff(ccIn(76)*2*usine())
|
||||
.freq(last_cc(75)*3)
|
||||
.cutoff(last_cc(76)*2*usine())
|
||||
.sustain(1.0)
|
||||
.out()
|
||||
|
||||
beat(ccIn(74)/127*.5) :: sound('sine')
|
||||
.freq(ccIn(75)*6)
|
||||
.cutoff(ccIn(76)*3*usine())
|
||||
.sustain(ccIn(74)/127*.25)
|
||||
beat(last_cc(74)/127*.5) :: sound('sine')
|
||||
.freq(last_cc(75)*6)
|
||||
.cutoff(last_cc(76)*3*usine())
|
||||
.sustain(last_cc(74)/127*.25)
|
||||
.out()
|
||||
`,
|
||||
false,
|
||||
)}
|
||||
)}
|
||||
|
||||
|
||||
## Run scripts with MIDI
|
||||
@ -129,7 +129,7 @@ ${makeExample(
|
||||
"Show scale on external keyboard",
|
||||
`show_scale("F","aeolian",0,4)`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample("Hide scale", `hide_scale("F","aeolian",0,4)`, true)}
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ ${makeExample(
|
||||
"Welcome! Eval to get started",
|
||||
examples[Math.floor(Math.random() * examples.length)],
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
# What is Topos?
|
||||
|
||||
@ -31,7 +31,7 @@ rhythm(.25, [5, 7].beat(2), 8) :: sound(['hc', 'fikea', 'hat'].pick(1))
|
||||
beat([2,0.5].dur(13.5, 0.5))::snd('fsoftsnare')
|
||||
.n(0).speed([1, 0.5]).o(4).out()`,
|
||||
false,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Computer music should be immediate and intuitive",
|
||||
@ -48,7 +48,7 @@ beat(.25)::snd('sine')
|
||||
.room(0.5).size(8) // Reverb
|
||||
.out()`,
|
||||
false,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Making the web less dreadful, one beep at at time",
|
||||
@ -59,13 +59,15 @@ beat(.25) :: sound('sid').note(
|
||||
[34, 36, 41].beat(.25) + [[0,-24].pick(),12].beat())
|
||||
.room(0.9).size(0.9).n(4).out()`,
|
||||
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).
|
||||
|
||||
## Alternative documentation source (.pdf)
|
||||
## Demo Songs
|
||||
|
||||
You can also find a .pdf version listing the principal commands and functions [here](https://github.com/Bubobubobubobubo/topos/blob/main/src/documentation/basics/TOPOS_COMMANDS.pdf). This document has been generated by Chris Collis. It recaps the main sections of this documentation and can be a good companion while learning Topos.
|
||||
Reloading the application will get you one random song example to study every time. Press ${key_shortcut(
|
||||
"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 :).
|
||||
|
||||
## Support
|
||||
|
||||
|
||||
@ -733,8 +733,8 @@ const completionDatabase: CompletionDatabase = {
|
||||
midi: {
|
||||
name: "midi",
|
||||
category: "midi",
|
||||
description: "Send a MIDI message (note, velocity, channel)",
|
||||
example: "midi(144, 60, 1)",
|
||||
description: "Send a MIDI message",
|
||||
example: "midi(144, 60, 100)",
|
||||
},
|
||||
control_change: {
|
||||
name: "control_change",
|
||||
@ -742,12 +742,6 @@ const completionDatabase: CompletionDatabase = {
|
||||
description: "Send a MIDI control change message",
|
||||
example: "control_change({control: 1, value: 60, channel: 10})",
|
||||
},
|
||||
cc: {
|
||||
name: "cc",
|
||||
category: "midi",
|
||||
description: "Send a MIDI control change message",
|
||||
example: "cc({control: 1, value: 60, channel: 10})",
|
||||
},
|
||||
program_change: {
|
||||
name: "program_change",
|
||||
category: "midi",
|
||||
@ -788,7 +782,7 @@ const completionDatabase: CompletionDatabase = {
|
||||
name: "counter",
|
||||
category: "patterns",
|
||||
description: "Counter/iterator",
|
||||
example: "counter('my_counter', 20, 1)",
|
||||
example: "counter('my_counter_, 20, 1)",
|
||||
},
|
||||
drunk: {
|
||||
name: "drunk",
|
||||
@ -814,17 +808,11 @@ const completionDatabase: CompletionDatabase = {
|
||||
description: "Wraps (or not) of the drunk walk (boolean)",
|
||||
example: "drunk_wrap(true)",
|
||||
},
|
||||
global: {
|
||||
name: "global",
|
||||
v: {
|
||||
name: "v",
|
||||
category: "variable",
|
||||
description: "Global Variable setter or getter",
|
||||
example: "global.my_var = 10; // Sets global variable 'my_var' to 10",
|
||||
},
|
||||
g: {
|
||||
name: "g",
|
||||
category: "variable",
|
||||
description: "Global Variable setter or getter",
|
||||
example: "g.my_var = 10; // Sets global variable 'my_var' to 10",
|
||||
example: "v('my_var', 10) // Sets global variable 'my_var' to 10",
|
||||
},
|
||||
delete_variable: {
|
||||
name: "delete_variable",
|
||||
@ -965,12 +953,12 @@ export const inlineHoveringTips = hoverTooltip(
|
||||
let completion =
|
||||
completionDatabase[text.slice(start - from, end - from)] || {};
|
||||
let divContent = `
|
||||
<h1 class="text-brightwhite text-base pb-1">${completion.name} [<em class="text-white">${completion.category}</em>]</h1>
|
||||
<h1 class="text-orange-300 text-base pb-1">${completion.name} [<em class="text-white">${completion.category}</em>]</h1>
|
||||
<p class="text-base pl-4">${completion.description}</p>
|
||||
<pre class="-mt-2"><code class="pl-4 text-base">${completion.example}</code></pre></div>
|
||||
`;
|
||||
let dom = document.createElement("div");
|
||||
dom.classList.add("px-4", "py-2", "bg-background", "rounded-lg");
|
||||
dom.classList.add("px-4", "py-2", "bg-neutral-700", "rounded-lg");
|
||||
dom.innerHTML = divContent;
|
||||
return { dom };
|
||||
},
|
||||
@ -990,7 +978,7 @@ export const toposCompletions = (context: CompletionContext) => {
|
||||
info: () => {
|
||||
let div = document.createElement("div");
|
||||
div.innerHTML = `
|
||||
<h1 class="text-brightwhite text-base pb-1">${completionDatabase[key].name} [<em class="text-white">${completionDatabase[key].category}</em>]</h1>
|
||||
<h1 class="text-orange-300 text-base pb-1">${completionDatabase[key].name} [<em class="text-white">${completionDatabase[key].category}</em>]</h1>
|
||||
<p class="text-base pl-4">${completionDatabase[key].description}</p>
|
||||
<div class="overflow-hidden overflow-scroll rounded px-2 ml-4 mt-2 bg-neutral-800"><code class="text-sm">${completionDatabase[key].example}</code></div>
|
||||
`;
|
||||
|
||||
@ -18,19 +18,17 @@ ${makeExample(
|
||||
beat(.5) && snd(['sine', 'triangle', 'sawtooth', 'square'].beat()).freq(100).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
Note that you can also use noise if you do not want to use a periodic oscillator:
|
||||
|
||||
${makeExample(
|
||||
"Listening to the different types of noise",
|
||||
`
|
||||
beat(.5) && snd(['brown', 'pink', 'white', 'crackle'].beat()).adsr(0,.1,0,0).out()
|
||||
beat(.5) && snd(['brown', 'pink', 'white'].beat()).adsr(0,.1,0,0).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
The <ic>crackle</ic> type can be controlled using the <ic>density</ic> parameter.
|
||||
)}
|
||||
|
||||
Two functions are primarily used to control the frequency of the synthesizer:
|
||||
- <ic>freq(hz: number)</ic>: sets the frequency of the oscillator.
|
||||
@ -42,7 +40,7 @@ ${makeExample(
|
||||
beat(.5) && snd('triangle').freq([100,200,400].beat(2)).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Selecting a note",
|
||||
@ -62,7 +60,7 @@ ${makeExample(
|
||||
beat(1) && snd('triangle').chord(["C","Em7","Fmaj7","Emin"].beat(2)).adsr(0,.2).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Playing a chord from a list of notes and doing inversions",
|
||||
@ -70,7 +68,7 @@ ${makeExample(
|
||||
beat(.5) && snd('triangle').chord(60,64,67,72).invert([1,-3,4,-5].pick()).adsr(0,.2).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
# Controlling amplitude
|
||||
|
||||
@ -82,13 +80,13 @@ ${makeExample(
|
||||
"Setting the gain",
|
||||
`beat(0.25) :: sound('sawtooth').gain([0.0, 1/8, 1/4, 1/2, 1].beat(0.5)).out()`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Setting the velocity",
|
||||
`beat(0.25) :: sound('sawtooth').velocity([0.0, 1/8, 1/4, 1/2, 1].beat(0.5)).out()`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
## Envelopes
|
||||
|
||||
@ -111,7 +109,7 @@ beat(0.5) :: sound('wt_piano')
|
||||
.sustain([0.1,0.5].beat(4))
|
||||
.out()`,
|
||||
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:
|
||||
|
||||
@ -127,7 +125,7 @@ beat(0.5) :: sound('wt_piano')
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
- <ic>ad(attack: number, decay: number)</ic>: sets the attack and decay phases, setting sustain and release to <ic>0</ic>.
|
||||
|
||||
@ -141,7 +139,7 @@ beat(0.5) :: sound('wt_piano')
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
## Substractive synthesis using filters
|
||||
|
||||
@ -153,7 +151,7 @@ ${makeExample(
|
||||
"Filtering the high frequencies of an oscillator",
|
||||
`beat(.5) :: sound('sawtooth').cutoff(50 + usine(1/8) * 2000).out()`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Simple synthesizer voice with filter",
|
||||
@ -164,7 +162,7 @@ beat(.5) && snd('sawtooth')
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Blessed by the square wave",
|
||||
@ -175,7 +173,7 @@ beat([.5, .75, 2].beat()) :: [100,101].forEach((freq) => sound('square')
|
||||
.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()`,
|
||||
false,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Ghost carillon (move your mouse!)",
|
||||
@ -189,7 +187,7 @@ beat(1/8)::sound('sine')
|
||||
.gain(0.25)
|
||||
.out()`,
|
||||
false,
|
||||
)}
|
||||
)}
|
||||
|
||||
## Noise
|
||||
|
||||
@ -206,7 +204,7 @@ beat(1) :: sound('triangle')
|
||||
.vibmod([1,2,4,8].beat(2))
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
## Wavetable synthesis
|
||||
|
||||
@ -223,7 +221,7 @@ beat(1) :: sound('kick').n(4).out()
|
||||
beat(2) :: sound('snare').out()
|
||||
beat(.5) :: sound('hh').out()`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
|
||||
Let's explore the galaxy of possible waveforms. It can be hard to explore them all, there is a **lot** of them:
|
||||
@ -241,7 +239,7 @@ beat(2) :: v('swave', collection.pick())
|
||||
beat(0.5) :: sound(v('swave')).n(v('selec')).out()
|
||||
`,
|
||||
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...
|
||||
|
||||
@ -267,7 +265,7 @@ beat(.25) && snd('triangle').adsr(0.02, 0.1, 0.1, 0.1)
|
||||
beat(2) :: sound('cp').room(1).sz(1).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Giving some love to ugly inharmonic sounds",
|
||||
@ -278,7 +276,7 @@ beat(.5) :: sound('sine')
|
||||
.fmh([1, 1.75].beat())
|
||||
.fmi($(1) % 30).orbit(2).room(0.5).out()`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Peace and serenity through FM synthesis",
|
||||
@ -292,7 +290,7 @@ beat(0.25) :: sound('sine')
|
||||
.delayfb(0.8).fmh(Math.floor(usine(.5) * 4))
|
||||
.out()`,
|
||||
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.
|
||||
|
||||
@ -313,7 +311,7 @@ beat(.5) :: sound('sine')
|
||||
.fmsus(0).fmdec(0.2).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
## ZzFX
|
||||
|
||||
@ -327,7 +325,7 @@ ${makeExample(
|
||||
beat(.5) :: sound(['z_sine', 'z_triangle', 'z_sawtooth', 'z_tan', 'z_noise'].beat()).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
${makeExample(
|
||||
"Minimalist chiptune",
|
||||
`
|
||||
@ -341,7 +339,7 @@ beat(.5) :: sound('z_triangle')
|
||||
.pitchJumpTime(0.01).out()
|
||||
`,
|
||||
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:
|
||||
|
||||
@ -379,7 +377,7 @@ beat(.25) :: sound('z_tan')
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
${makeExample(
|
||||
"What is happening to me?",
|
||||
`
|
||||
@ -389,7 +387,7 @@ beat(1) :: snd('zzfx').zzfx([
|
||||
].beat()).out()
|
||||
`,
|
||||
false,
|
||||
)}
|
||||
)}
|
||||
${makeExample(
|
||||
"Les voitures dans le futur",
|
||||
`
|
||||
@ -401,7 +399,7 @@ beat(1) :: sound(['z_triangle', 'z_sine'].pick())
|
||||
.delayt(0.75).delayfb(0.5).out()
|
||||
`,
|
||||
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:
|
||||
${makeExample(
|
||||
@ -411,7 +409,7 @@ ${makeExample(
|
||||
beat(2) :: sound('zzfx').zzfx([3.62,,452,.16,.1,.21,,2.5,,,403,.05,.29,,,,.17,.34,.22,.68]).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
# Speech synthesis
|
||||
|
||||
@ -433,7 +431,7 @@ ${makeExample(
|
||||
once() && speak("Hello world!")
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Let's hear people talking about Topos",
|
||||
@ -441,7 +439,7 @@ ${makeExample(
|
||||
beat(2) && speak("Topos!","fr",irand(0,5))
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
|
||||
You can also use speech by chaining methods to a string:
|
||||
@ -452,7 +450,7 @@ ${makeExample(
|
||||
onbeat(4) && "Foobaba".voice(irand(0,10)).speak()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Building string and chaining",
|
||||
@ -465,7 +463,7 @@ ${makeExample(
|
||||
beat(6) && sentence.pitch(0).rate(0).voice([0,2].pick()).speak()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Live coded poetry with array and string chaining",
|
||||
@ -485,6 +483,6 @@ ${makeExample(
|
||||
.speak();
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
`;
|
||||
};
|
||||
|
||||
@ -70,7 +70,7 @@ ${makeExample(
|
||||
beat(0.5)::sound('wt_stereo').n([0, 1].pick()).ad(0, .25).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
|
||||
Pick one folder and spend some time exploring it. There is a lot of different waveforms.
|
||||
@ -81,8 +81,7 @@ ${samples_to_markdown(application, "Waveforms")}
|
||||
|
||||
## Drum machines sample pack
|
||||
|
||||
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(
|
||||
"Using a classic drum machine",
|
||||
@ -90,7 +89,7 @@ ${makeExample(
|
||||
beat(0.5)::sound(['bd', 'cp'].pick()).bank("AkaiLinn").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
Here is the complete list of available machines:
|
||||
|
||||
@ -99,41 +98,6 @@ Here is the complete list of available machines:
|
||||
${samples_to_markdown(application, "Machines")}
|
||||
</div>
|
||||
|
||||
In practice, using them will lead you to write short two letters long sample names, each one for a different piece of the kit:
|
||||
|
||||
| Kit Piece | Short name |
|
||||
|-----------|----------------|
|
||||
|
|
||||
| **Bass/kick drum** | <ic>bd</ic> |
|
||||
| **Snare drum** | <ic>sd</ic> |
|
||||
| **Rimshot** | <ic>rim</ic> |
|
||||
| **Clap** | <ic>cp</ic> |
|
||||
| **Closed hi-hat** | <ic>hh</ic> |
|
||||
| **Open hi-hat** | <ic>oh</ic> |
|
||||
| **Crash** | <ic>cr</ic> |
|
||||
| **Ride** | <ic>rd</ic> |
|
||||
| **Shakers (and maracas, cabasas, etc)** | <ic>sh</ic> |
|
||||
| **High tom** | <ic>ht</ic> |
|
||||
| **Medium tom** | <ic>mt</ic> |
|
||||
| **Low tom** | <ic>lt</ic> |
|
||||
| **Cowbell** | <ic>cb</ic> |
|
||||
| **Tambourine** | <ic>tb</ic> |
|
||||
| **Other percussions** | <ic>perc</ic> |
|
||||
| **Miscellaneous samples** | <ic>misc</ic> |
|
||||
| **Effects** | <ic>fx</ic> |
|
||||
|
||||
Note that there is also a <ic>drumMachine</ic> function that allows you to play a random drum machine without even typing the name.
|
||||
It takes a single argument, a number, that will pick a machine for you in the list:
|
||||
|
||||
${makeExample(
|
||||
"Using a classic drum machine",
|
||||
`
|
||||
beat(1/2)::sound(['bd', 'cp'].pick()).drumMachine(1).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
|
||||
## FoxDot sample pack
|
||||
|
||||
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.
|
||||
@ -160,7 +124,7 @@ ${makeExample(
|
||||
beat(4)::sound('amen1').stretch(4).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
)}
|
||||
|
||||
The stretch should be adapted based on the length of each amen break.
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@ beat(1)::sound('fhh').juxrev().out()
|
||||
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(
|
||||
"Creating synth presets",
|
||||
"Re-creating a classic Tidal function",
|
||||
`
|
||||
// Registering a specific synth architecture
|
||||
register('sub', (n,x=4,y=80)=>n.ad(0, .25)
|
||||
@ -54,26 +54,6 @@ rhythm(.25, [6, 8].beat(), 12)::sound('sine')
|
||||
true,
|
||||
)}
|
||||
|
||||
## Registering chain for all events
|
||||
|
||||
The chain can also be registered automatically for all events. This is useful if you want to add a specific effect to all your events.
|
||||
|
||||
${makeExample(
|
||||
"Registering chain to all events at once",
|
||||
`
|
||||
z0("h 9 ^ <7 5 3 1>")
|
||||
.sound("sine")
|
||||
.out()
|
||||
|
||||
z1("0 4 3 2")
|
||||
.sound("sine")
|
||||
.out()
|
||||
|
||||
all(x=>x.room(1).delay(rI(0,0.5)))
|
||||
`,
|
||||
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...
|
||||
@ -140,6 +120,8 @@ There is a growing collection of probability and chance methods you can use:
|
||||
| <ic>almostAlways</ic> | With a 98.5% probability. | <ic>.almostAlways(s => s.note(70))</ic> |
|
||||
| <ic>always</ic> | Always transforms the Event. | <ic>.always(s => s.note(71))</ic> |
|
||||
|
||||
|
||||
|
||||
### MIDI Chaining
|
||||
|
||||
The conditional chaining also applies to MIDI. Values can also be incremented using <ic>+=</ic> notation.
|
||||
|
||||
@ -37,25 +37,6 @@ beat(1) :: script(1, 3, 5)
|
||||
- <ic>mean(...values: number[]): number</ic>: returns the arithmetic mean of a list of numbers.
|
||||
- <ic>limit(value: number, min: number, max: number): number</ic>: Limits a value between a minimum and a maximum.
|
||||
|
||||
### Scaling functions
|
||||
|
||||
There are some very useful scaling methods taken from **SuperCollider**. You can call these on any number:
|
||||
|
||||
- <ic>.linlin(inMin: number, inMax: number, outMin: number, outMax: number)</ic>: scale linearly from one range to another.
|
||||
- <ic>.linexp(inMin: number, inMax: number, outMin: number, outMax: number)</ic>: scale a linear range to an exponential range.
|
||||
- <ic>.explin(inMin: number, inMax: number, outMin: number, outMax: number)</ic>: scale an exponential range to a linear range.
|
||||
- <ic>.expexp(inMin: number, inMax: number, outMin: number, outMax: number)</ic>: scale an exponential range to another exponential range.
|
||||
- <ic>.lincurve(inMin: number, inMax: number, outMin: number, outMax: number, curve: number)</ic>: scale a number from one range to another following a specific curve.
|
||||
- <ic>curve: number</ic>: <ic>0</ic> is linear, <ic>< 0</ic> is concave, negatively curved, <ic>> 0</ic> is convex, positively curved
|
||||
|
||||
${makeExample(
|
||||
"Scaling an LFO",
|
||||
`usine(1/2).linlin(0, 1, 0, 100)`,
|
||||
true,
|
||||
)}
|
||||
|
||||
|
||||
|
||||
## Delay functions
|
||||
|
||||
- <ic>delay(ms: number, func: Function): void</ic>: Delays the execution of a function by a given number of milliseconds.
|
||||
|
||||
@ -8,10 +8,11 @@ export const lfos = (application: Editor): string => {
|
||||
|
||||
Low Frequency Oscillators (_LFOs_) are an important piece in any digital audio workstation or synthesizer. Topos implements some basic waveforms you can play with to automatically modulate your paremeters.
|
||||
|
||||
- <ic>sine(freq: number = 1, phase: number = 0): number</ic>: returns a sinusoïdal oscillation between <ic>-1</ic> and <ic>1</ic>.
|
||||
- <ic>sine(freq: number = 1, times: number = 1, offset: number= 0): number</ic>: returns a sinusoïdal oscillation between <ic>-1</ic> and <ic>1</ic>.
|
||||
- <ic>freq</ic> : frequency in hertz.
|
||||
- <ic>phase</ic> : phase amount (adds or substract from current time point).
|
||||
- <ic>usine(freq: number = 1, phase: 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>times</ic> : output value multiplier.
|
||||
- <ic>offset</ic>: linear offset.
|
||||
- <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(
|
||||
"Modulating the speed of a sample player using a sine LFO",
|
||||
@ -19,8 +20,8 @@ ${makeExample(
|
||||
true,
|
||||
)};
|
||||
|
||||
- <ic>triangle(freq: number = 1, phase: number = 0): number</ic>: returns a triangle oscillation between <ic>-1</ic> and <ic>1</ic>.
|
||||
- <ic>utriangle(freq: number = 1, phase: number = 0): number</ic>: returns a triangle oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_.
|
||||
- <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_.
|
||||
|
||||
${makeExample(
|
||||
"Modulating the speed of a sample player using a triangle LFO",
|
||||
@ -28,8 +29,8 @@ ${makeExample(
|
||||
true,
|
||||
)}
|
||||
|
||||
- <ic>saw(freq: number = 1, phase: number = 0): number</ic>: returns a sawtooth-like oscillation between <ic>-1</ic> and <ic>1</ic>.
|
||||
- <ic>usaw(freq: number = 1, phase: 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>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_.
|
||||
|
||||
${makeExample(
|
||||
"Modulating the speed of a sample player using a saw LFO",
|
||||
@ -37,8 +38,8 @@ ${makeExample(
|
||||
true,
|
||||
)}
|
||||
|
||||
- <ic>square(freq: number = 1, 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, 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>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.
|
||||
|
||||
${makeExample(
|
||||
"Modulating the speed of a sample player using a square LFO",
|
||||
@ -47,7 +48,6 @@ ${makeExample(
|
||||
)};
|
||||
|
||||
- <ic>noise(times: number = 1)</ic>: returns a random value between -1 and 1.
|
||||
- <ic>unoise(times: number = 1)</ic>: returns a random value between 0 and 1.
|
||||
|
||||
${makeExample(
|
||||
"Modulating the speed of a sample player using noise",
|
||||
|
||||
@ -120,26 +120,7 @@ beat(1)::sound(['kick', 'fsnare'].dur(3, 1))
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Patterning with ternary statements",
|
||||
`
|
||||
const dada = flipbar(2) ? [0,[3,5,-1].bar(3),2,3] : [9,8,9,6]
|
||||
beat(0.5) :: sound('wt_hvoice:3')
|
||||
.pitch(dada.beat(0.5))
|
||||
.scale("88.0")
|
||||
.adsr(0.05, 0.05, 0, 0)
|
||||
.cutoff(500 + usine(1/8) * 5000)
|
||||
.room(1.5)
|
||||
.resonance(0.25)
|
||||
.out()
|
||||
beat(1) :: sound('kick').n(4).out()
|
||||
onbeat([0.5,0.8].beat(1),2) :: sound('snare').out()
|
||||
onbeat(0.5,0.8,1,1.5,2,2.5,3,4) :: sound('hh').out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Iteration using a counter
|
||||
## Iterating over lists
|
||||
|
||||
- <ic>counter(name,limit?,step?)</ic>: return the next value on the list based on counter value. The limit is optional and defaults to the length of the list. The step is optional and defaults to 1. Setting / changing limit will reset the counter.
|
||||
- <ic>$(name,limit?,step?)</ic>: shorter alias for the counter.
|
||||
|
||||
@ -8,7 +8,7 @@ export const ziffers_algorithmic = (application: Editor): string => {
|
||||
|
||||
Ziffers provides shorthands for **many** numeric and algorithimic operations such as evaluating random numbers and creating sequences using list operations:
|
||||
|
||||
* **List operations:** Element-wise operation (_e.g._ <ic>(3 2 1)+(2 5)</ic>) using the <ic>+</ic> operator. All the arithmetic operators are supported.
|
||||
* **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",
|
||||
@ -78,20 +78,8 @@ z1("s A=(0 (1,4)) B~(2 (3,8)) A B A B A")
|
||||
true,
|
||||
)}
|
||||
|
||||
## Generative functions
|
||||
|
||||
* <ic>at(index: number, ...args?: number[])</ic> Get event(s) at given index
|
||||
* <ic>repeat(amount: number)</ic> Repeat the generated pattern without re-evaluating random patterns
|
||||
* <ic>keep()</ic> Keep the generated pattern without re-evaluating random patterns. Same as repeat(0).
|
||||
* <ic>shuffle()</ic> Shuffle the pattern
|
||||
* <ic>deal(amount: number): Shuffle the generated pattern and deal given number of elements
|
||||
* <ic>retrograde()</ic> Reverse the generated pattern
|
||||
* <ic>invert()</ic> Invert the generated pattern
|
||||
* <ic>rotate(amount: number)</ic> Rotate the generated pattern by given amount
|
||||
* <ic>between(start: number, end: number)</ic> Select a range of elements from the generated pattern
|
||||
* <ic>from(start: number)</ic> Select a range of elements from the start index to the end of the pattern
|
||||
* <ic>to(end: number)</ic> Select a range of elements from the beginning of the pattern to the end index
|
||||
* <ic>every(amount: number)</ic> Select every n-th element from the pattern
|
||||
|
||||
|
||||
`;
|
||||
};
|
||||
|
||||
@ -32,10 +32,6 @@ z4('1/4 kick kick snare kick').sound().gain(1).cutoff(osci).out()
|
||||
true,
|
||||
)}
|
||||
|
||||
## Evaluation
|
||||
|
||||
Evaluation of live coded Ziffers patterns can be done in 3 different ways. Normal evaluation using <ic>Ctrl+Enter</ic> updates the pattern after the current cycle is finished. Evaluation using <ic>Ctrl+Shift+Enter</ic> updates the pattern immediately keeping the current position, which enables to modify future events even within the current cycle. Evaluation using <ic>Ctrl+Shift+Backspace</ic> resets the current pattern and starts from the beginning immediately.
|
||||
|
||||
## 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.
|
||||
|
||||
@ -6,19 +6,19 @@ export const ziffers_tonnetz = (application: Editor): string => {
|
||||
return `
|
||||
# Tonnetz
|
||||
|
||||
The Riemannian Tonnetz is a geometric representation of pitches where we apply 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>. Nevertheless, our implementation allows you to play in different chord complexes and **combine 67 transformations** with **new exploratory notation**. You have at your disposal the sets: traditional PLR, film music, extended PLR* and functions for seventh chords PLRQ, PLRQ*, ST.
|
||||
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 pitch spaces which are all supported in Ziffers implementation.
|
||||
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, OctaCycles, Enneacycles, Weitzmann Regions, Boretz Regions, OctaTowers, Cube Dance and Power Towers. You can explore each of these graphs in great generality over different Tonnetz.
|
||||
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. Explorative transformations also include cardinal direction transformations (North, South, East, West) as visualized by the <a href="https://numeric-tonnetz-ziffers-6f7c9299bb4e1292f6891b9aceba16d81409236.gitlab.io/" target="_blank">numerical Tonnetz</a> and correspond to different Neo-Riemannian operations depending on the chord type (Major or Minor).
|
||||
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>[plrfsntqNSEW][1-9]*</ic>:
|
||||
Indexed transformations <ic>[plrfsntq][1-9]*</ic>:
|
||||
|
||||
* p: Parallel
|
||||
* l: Leading-tone exchange
|
||||
@ -29,10 +29,6 @@ Indexed transformations <ic>[plrfsntqNSEW][1-9]*</ic>:
|
||||
* h: Film transformation - Hexatonic Pole
|
||||
* t: Film transformation - Tritone transposition
|
||||
* q: PLR* transformation or PLRQ* transformation
|
||||
* N: North transformation
|
||||
* S: South transformation
|
||||
* E: East transformation
|
||||
* W: West transformation
|
||||
|
||||
### Examples:
|
||||
|
||||
@ -69,16 +65,6 @@ z1("024")
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Explorative transformations with cardinal directions",
|
||||
`
|
||||
z1("1/4 i")
|
||||
.tonnetz("p Np N2p N3p plr N3plr E EE EEE E6 NSE3W2")
|
||||
.sound("sine")
|
||||
.out()
|
||||
`
|
||||
)}
|
||||
|
||||
## 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.
|
||||
@ -119,7 +105,7 @@ Therefore, you will see that paying attention to the examples will allow you to
|
||||
${makeExample(
|
||||
"Synthetic 'Morton'",
|
||||
`
|
||||
z0('h. 0 q _6 h _4 _3 w _2 _0 h. ^0 q 6 h 4 3 3/4 2 5/4 0 w r')
|
||||
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()
|
||||
@ -129,7 +115,7 @@ z1('w 904')
|
||||
.tonnetz('o f l l o f l l o')
|
||||
.sound('sine').adsr(0.1, 1, 1, 1.9).out()
|
||||
|
||||
z2('904')
|
||||
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')
|
||||
@ -137,10 +123,9 @@ z2('904')
|
||||
|
||||
z3('e __ 4 s 0 e 1 2 s')
|
||||
.sound('hat').delay(0.5).delayfb(0.35).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Different Tonnetz, Chord Complexes
|
||||
## 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.
|
||||
|
||||
@ -219,19 +204,17 @@ z1("1.0 047{10}")
|
||||
|
||||
## Cyclic methods
|
||||
|
||||
In addition to the traditional tonnetz 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:
|
||||
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, components: number = 1)</ic>: Cycles through chords via hexatonic cycles
|
||||
* <ic>octaCycle(tonnetz: number[], repeats: number = 4, components: number = 1)</ic>: Cycles through chords via octatonic cycles
|
||||
* <ic>enneaCycle(tonnetz: number[], repeats: number = 3, components: number = 1)</ic>: Cycles through chords via enneatonic cycles
|
||||
* <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
|
||||
|
||||
:warning: By default, the number of graph <ic>components</ic> is set to <ic>1</ic>. Therefore, these methods produce a single hexatonic, octatonic, and enneatonic cycle, respectively. OctaTowers were implemented in the same way, so it generates a single octatonic tower. Try increasing the number of components to obtain different graphs.
|
||||
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.
|
||||
|
||||
**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>.
|
||||
|
||||
**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>.
|
||||
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:
|
||||
|
||||
@ -281,120 +264,20 @@ ${makeExample(
|
||||
"HexaCycles with vitamins",
|
||||
`
|
||||
z1("0")
|
||||
.scale("chromatic")
|
||||
.hexaCycle([2,3,7],4)
|
||||
.sound("sine").out()
|
||||
.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, 253-256)](https://www.jstor.org/stable/843877)
|
||||
* 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)
|
||||
|
||||
## More traversing methods
|
||||
## :construction: Regions and OctaTowers
|
||||
|
||||
In addition to the cyclical traversing methods, Ziffers implements traversing methods that traverse the Tonnetz in different ways. These methods are:
|
||||
|
||||
* <ic>weitzmannRegions(tonnetz: number[])</ic>: Cycles through chords in a Weitzmann region
|
||||
* <ic>boretzRegions(tonnetz: number[])</ic>: Cycles through chords in a Boretz region
|
||||
* <ic>octaTowers(tonnetz: number[], repeats: number = 3, components: number = 1)</ic>: Cycles through chords using the octaTowers
|
||||
* <ic>cubeDance(tonnetz: number[], repeats: number = 3)</ic>: Cycles through chords in a Cube Dance
|
||||
* <ic>powerTowers(tonnetz: number[], repeats: number = 3)</ic>: Cycles through chords using the Power Towers
|
||||
|
||||
**Weitzmann Regions** is composed only of three-note chords. Following Richard Cohn's **Weitzmann water bug** graph, the region consists of an augmented chord (body), three major chords, and three minor chords (feet). The latter related to the central chord by a minimal parsimonious movement. A cyclic order of **Nebenverdwandt / R** transformations proposed by Carl Weitzmann himself has been chosen.
|
||||
|
||||
**Boretz Regions** is the four-note analogue of the Weitzmann regions. Richard Cohn draws them in **Boretz Spiders**, a graph consisting of 8 feet between 7th and half-diminished 7th chords. The body (prosoma-opisthosoma) is a <ic>dim7</ic> chord, related to the others by a semitonal movement.
|
||||
|
||||
**OctaTowers** generates a graph composed of **12** chords, whose types are <ic>halfdim7, m7 and 7</ic>. A reading from left to right in an ascending diagonal has been chosen. Note that changing the number of components to <ic>3</ic> will obtain the complete graph (**36** chords).
|
||||
|
||||
**Cube Dance** is another graph of **28** chords that is built primarily with HexaCycles (4 hexatonic cycles), except that it adds <ic>augmented</ic> triads as assemblers. As with Power Towers, one possible path has been selected.
|
||||
|
||||
**Power Towers** use **39** four-note chords (<ic>halfdim7, m7 and 7</ic>). As you can notice, it is composed of OctaTowers (3 octatonic towers) assembled by <ic>dim7</ic> type chords. One of the many paths for succession has been chosen.
|
||||
|
||||
As you have noticed, all these graphs usually have many chords, so sometimes it will be convenient to slice up fragments of the cycles. We encourage you to explore these methods and their different parameters. The tonnetz traversing methods can be used in combination with the Ziffers generative methods to sequence, arpeggiate and to randomize the chords in different ways.
|
||||
|
||||
${makeExample(
|
||||
"Cube Dance swing",
|
||||
`
|
||||
z1("0").cubeDance([3,4,5])
|
||||
.sound("sine")
|
||||
.ad(r(0.1,0.5),0.1)
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Selecting subset of chords from the cube dance",
|
||||
`
|
||||
z1("1/2 0")
|
||||
.cubeDance([3,4,5],4)
|
||||
.at(0,8,2,rI(9,14))
|
||||
.sound("triangle")
|
||||
.ad(0.05,0.15)
|
||||
.delay(2)
|
||||
.out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Power Towers with pulse",
|
||||
`
|
||||
z1("1/4 2").powerTowers([2,3,7])
|
||||
.between(5,11)
|
||||
.arpeggio("e 0 3 1 2")
|
||||
.sound("sine")
|
||||
.adsr(0.01,0.1,0.1,0.9)
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Between an OctaTower",
|
||||
`
|
||||
z1("s. 0")
|
||||
.octaTower()
|
||||
.between(2,8)
|
||||
.arpeggio(3,2,1,rI(1,5))
|
||||
.sound("sawtooth")
|
||||
.adsr(0.1,0.15,0,0.1)
|
||||
.out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Selecting chords from the weitzmann region",
|
||||
`
|
||||
z1("1/8 0")
|
||||
.weitzmannRegions()
|
||||
.at(1,rI(0,7),4,6)
|
||||
.arpeggio(0,2,1,rI(0,2))
|
||||
.sound("sine")
|
||||
.ad(0.15,0.15)
|
||||
.out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Boretz Spider",
|
||||
`
|
||||
z1("1/16 0")
|
||||
.boretzRegions([1,4,7])
|
||||
.at(2,rI(3,7),4,6)
|
||||
.arpeggio(1,0,2,rI(1,4))
|
||||
.sound("square")
|
||||
.adsr(0.1,0.1,0.1,0.2)
|
||||
.out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
* Remark F: You can find more details about Weitzmann and Boretz regions in chapters 4 and 7 of Richard Cohn's book [Audacious Euphony: Chromatic Harmony and the Triad's Second Nature (2012)](https://books.google.com.pe/books?id=rZxZCMRiO9EC&pg=PA59&hl=es&source=gbs_toc_r&cad=2#v=onepage&q&f=false).
|
||||
TBD: Implement and write about Weitzmann Regions, Boretz Regions, OctaTowers
|
||||
|
||||
`;
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { type UserAPI } from "../API";
|
||||
import { safeScale, stepsToScale } from "zifferjs";
|
||||
export { };
|
||||
export {};
|
||||
|
||||
declare global {
|
||||
interface Array<T> {
|
||||
@ -60,14 +60,14 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this[zoneIndex];
|
||||
};
|
||||
|
||||
Array.prototype.square = function(): number[] {
|
||||
Array.prototype.square = function (): number[] {
|
||||
/**
|
||||
* @returns New array with squared values.
|
||||
*/
|
||||
return this.map((x: number) => x * x);
|
||||
};
|
||||
|
||||
Array.prototype.sometimes = function(func: Function): number[] {
|
||||
Array.prototype.sometimes = function (func: Function): number[] {
|
||||
if (api.randomGen() < 0.5) {
|
||||
return func(this);
|
||||
} else {
|
||||
@ -75,11 +75,11 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
}
|
||||
};
|
||||
|
||||
Array.prototype.apply = function(func: Function): number[] {
|
||||
Array.prototype.apply = function (func: Function): number[] {
|
||||
return func(this);
|
||||
};
|
||||
|
||||
Array.prototype.sqrt = function(): number[] {
|
||||
Array.prototype.sqrt = function (): number[] {
|
||||
/**
|
||||
* @returns New array with square roots of values. Throws if any element is negative.
|
||||
*/
|
||||
@ -88,7 +88,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this.map((x: number) => Math.sqrt(x));
|
||||
};
|
||||
|
||||
Array.prototype.add = function(amount: number): number[] {
|
||||
Array.prototype.add = function (amount: number): number[] {
|
||||
/**
|
||||
* @param amount - The value to add to each element in the array.
|
||||
* @returns New array with added values.
|
||||
@ -96,7 +96,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this.map((x: number) => x + amount);
|
||||
};
|
||||
|
||||
Array.prototype.sub = function(amount: number): number[] {
|
||||
Array.prototype.sub = function (amount: number): number[] {
|
||||
/**
|
||||
* @param amount - The value to subtract from each element in the array.
|
||||
* @returns New array with subtracted values.
|
||||
@ -104,7 +104,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this.map((x: number) => x - amount);
|
||||
};
|
||||
|
||||
Array.prototype.mult = function(amount: number): number[] {
|
||||
Array.prototype.mult = function (amount: number): number[] {
|
||||
/**
|
||||
* @param amount - The value to multiply with each element in the array.
|
||||
* @returns New array with multiplied values.
|
||||
@ -112,7 +112,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this.map((x: number) => x * amount);
|
||||
};
|
||||
|
||||
Array.prototype.div = function(amount: number): number[] {
|
||||
Array.prototype.div = function (amount: number): number[] {
|
||||
/**
|
||||
* @param amount - The value to divide each element in the array by.
|
||||
* @returns New array with divided values. Throws if division by zero.
|
||||
@ -121,7 +121,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this.map((x: number) => x / amount);
|
||||
};
|
||||
|
||||
Array.prototype.pick = function() {
|
||||
Array.prototype.pick = function () {
|
||||
/**
|
||||
* Returns a random element from an array.
|
||||
*
|
||||
@ -130,7 +130,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this[Math.floor(api.randomGen() * this.length)];
|
||||
};
|
||||
|
||||
Array.prototype.gen = function(min: number, max: number, times: number) {
|
||||
Array.prototype.gen = function (min: number, max: number, times: number) {
|
||||
/**
|
||||
* Returns an array of random numbers.
|
||||
* @param min - The minimum value of the random numbers
|
||||
@ -147,7 +147,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
);
|
||||
};
|
||||
|
||||
Array.prototype.bar = function(value: number = 1) {
|
||||
Array.prototype.bar = function (value: number = 1) {
|
||||
/**
|
||||
* Returns an element from an array based on the current bar.
|
||||
*
|
||||
@ -162,7 +162,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
}
|
||||
};
|
||||
|
||||
Array.prototype.beat = function(divisor: number = 1) {
|
||||
Array.prototype.beat = function (divisor: number = 1) {
|
||||
const chunk_size = divisor; // Get the first argument (chunk size)
|
||||
const timepos = api.app.clock.pulses_since_origin;
|
||||
const slice_count = Math.floor(
|
||||
@ -172,7 +172,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
};
|
||||
Array.prototype.b = Array.prototype.beat;
|
||||
|
||||
Array.prototype.dur = function(...durations: number[]) {
|
||||
Array.prototype.dur = function (...durations: number[]) {
|
||||
const timepos = api.app.clock.pulses_since_origin;
|
||||
const ppqn = api.ppqn();
|
||||
const adjustedDurations: number[] = this.map(
|
||||
@ -195,7 +195,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
throw new Error("Durations array does not match the pattern length.");
|
||||
};
|
||||
|
||||
Array.prototype.shuffle = function() {
|
||||
Array.prototype.shuffle = function () {
|
||||
/**
|
||||
* Shuffles the array in place.
|
||||
*
|
||||
@ -214,7 +214,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this;
|
||||
};
|
||||
|
||||
Array.prototype.rotate = function(steps: number) {
|
||||
Array.prototype.rotate = function (steps: number) {
|
||||
/**
|
||||
* Rotates the array in place.
|
||||
*
|
||||
@ -234,7 +234,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this;
|
||||
};
|
||||
|
||||
Array.prototype.unique = function() {
|
||||
Array.prototype.unique = function () {
|
||||
/**
|
||||
* Removes duplicate elements from the array in place.
|
||||
*
|
||||
@ -267,7 +267,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
if (this.length <= 1) {
|
||||
return this;
|
||||
}
|
||||
for (let i = 0; i < this.length;) {
|
||||
for (let i = 0; i < this.length; ) {
|
||||
const rand = api.randomGen() * 100;
|
||||
if (rand < amount) {
|
||||
if (this.length > 1) {
|
||||
@ -380,7 +380,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return left_to_right.concat(right_to_left);
|
||||
};
|
||||
|
||||
Array.prototype.loop = function(index: number) {
|
||||
Array.prototype.loop = function (index: number) {
|
||||
/**
|
||||
* Returns an element from the array based on the index.
|
||||
* The index will wrap over the array.
|
||||
@ -391,7 +391,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
return this[index % this.length];
|
||||
};
|
||||
|
||||
Array.prototype.random = function() {
|
||||
Array.prototype.random = function () {
|
||||
/**
|
||||
* Returns a random element from the array.
|
||||
*
|
||||
@ -410,10 +410,10 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
*
|
||||
* @returns the shifted array
|
||||
*/
|
||||
const idx = api.counter(name, limit, step);
|
||||
if (limit) {
|
||||
const idx = api.counter(name,limit,step);
|
||||
if(limit) {
|
||||
return this[idx % this.length];
|
||||
} else if (idx < this.length) {
|
||||
} else if(idx < this.length) {
|
||||
return this[idx];
|
||||
} else {
|
||||
return this[this.length - 1];
|
||||
@ -425,7 +425,7 @@ export const makeArrayExtensions = (api: UserAPI) => {
|
||||
|
||||
|
||||
|
||||
Array.prototype.scale = function(
|
||||
Array.prototype.scale = function (
|
||||
scale: string = "major",
|
||||
base_note: number = 0,
|
||||
) {
|
||||
@ -442,14 +442,14 @@ Array.prototype.scale = function(
|
||||
return this.map((value) => {
|
||||
const octaveShift = Math.floor(value / selected_scale.length) * 12;
|
||||
return (
|
||||
selected_scale[mod(Math.floor(value), selected_scale.length)] +
|
||||
selected_scale[mod(value, selected_scale.length)] +
|
||||
base_note +
|
||||
octaveShift
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
Array.prototype.scaleArp = function(
|
||||
Array.prototype.scaleArp = function (
|
||||
scaleName: string = "major",
|
||||
boundary: number = 0,
|
||||
) {
|
||||
|
||||
@ -4,7 +4,6 @@ import { Player } from "../classes/ZPlayer";
|
||||
import { SoundEvent } from "../classes/SoundEvent";
|
||||
import { SkipEvent } from "../classes/SkipEvent";
|
||||
|
||||
|
||||
declare global {
|
||||
interface Number {
|
||||
z(): Player;
|
||||
@ -26,132 +25,84 @@ declare global {
|
||||
z15(): Player;
|
||||
z16(): Player;
|
||||
midi(): MidiEvent;
|
||||
sound(name: string): SoundEvent | SkipEvent,
|
||||
linlin(a: number, b: number, c: number, d: number): number,
|
||||
linexp(a: number, b: number, c: number, d: number): number,
|
||||
explin(a: number, b: number, c: number, d: number): number,
|
||||
expexp(a: number, b: number, c: number, d: number): number,
|
||||
lincurve(inMin: number, inMax: number,
|
||||
outMin: number, outMax: number,
|
||||
curve: number): number;
|
||||
sound(name: string): SoundEvent | SkipEvent;
|
||||
}
|
||||
}
|
||||
|
||||
export const makeNumberExtensions = (api: UserAPI) => {
|
||||
|
||||
Number.prototype.linlin = function(a: number, b: number, c: number, d: number) {
|
||||
if (this.valueOf() < a) return c;
|
||||
if (this.valueOf() > b) return d;
|
||||
return (this.valueOf() - a) / (b - a) * (d - c) + c;
|
||||
};
|
||||
|
||||
Number.prototype.explin = function(a: number, b: number, c: number, d: number) {
|
||||
if (this.valueOf() <= a) return c;
|
||||
if (this.valueOf() >= b) return d;
|
||||
return (Math.log(this.valueOf() / a)) / (Math.log(b / a)) * (d - c) + c;
|
||||
};
|
||||
|
||||
Number.prototype.expexp = function(a: number, b: number, c: number, d: number) {
|
||||
if (this.valueOf() <= a) return c;
|
||||
if (this.valueOf() >= b) return d;
|
||||
return Math.pow(d / c, Math.log(this.valueOf() / a) / Math.log(b / a)) * c;
|
||||
};
|
||||
|
||||
Number.prototype.lincurve = function(
|
||||
inMin: number, inMax: number,
|
||||
outMin: number, outMax: number,
|
||||
curve: number) {
|
||||
if (this.valueOf() <= inMin) return outMin;
|
||||
if (this.valueOf() >= inMax) return outMax;
|
||||
if (Math.abs(curve) < 0.001) {
|
||||
return (this.valueOf() - inMin) / (inMax - inMin) * (outMax - outMin) + outMin;
|
||||
};
|
||||
let grow = Math.exp(curve);
|
||||
let a = outMax - outMin / (1.0 - grow);
|
||||
let b = outMin + a;
|
||||
let scaled = (this.valueOf() - inMin) / (inMax - inMin);
|
||||
return b - (a * Math.pow(grow, scaled))
|
||||
}
|
||||
|
||||
Number.prototype.linexp = function(a: number, b: number, c: number, d: number) {
|
||||
if (this.valueOf() <= a) return c;
|
||||
if (this.valueOf() >= b) return d;
|
||||
return Math.pow(d / c, (this.valueOf() - a) / (b - a)) * c;
|
||||
};
|
||||
|
||||
Number.prototype.z0 = function(options: { [key: string]: any } = {}) {
|
||||
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.z1 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z1(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z2 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z2 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z2(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z3 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z3 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z3(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z4 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z4 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z4(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z5 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z5 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z5(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z6 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z6 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z6(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z7 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z7 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z7(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z8 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z8 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z8(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z9 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z9 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z9(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z10 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z10 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z10(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z11 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z11 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z11(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z12 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z12 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z12(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z13 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z13 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z13(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z14 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z14 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z14(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z15 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z15 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z15(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.z16 = function(options: { [key: string]: any } = {}) {
|
||||
Number.prototype.z16 = function (options: { [key: string]: any } = {}) {
|
||||
return api.z16(this.valueOf().toString().split("").join(" "), options);
|
||||
};
|
||||
|
||||
Number.prototype.midi = function(...kwargs: any[]) {
|
||||
Number.prototype.midi = function (...kwargs: any[]) {
|
||||
return api.midi(this.valueOf(), ...kwargs);
|
||||
};
|
||||
|
||||
Number.prototype.sound = function(name: string): SoundEvent | SkipEvent {
|
||||
Number.prototype.sound = function (name: string): SoundEvent | SkipEvent {
|
||||
if (Number.isInteger(this.valueOf())) {
|
||||
return (api.sound(name) as SoundEvent).note(this.valueOf());
|
||||
} else {
|
||||
|
||||
24
src/main.ts
24
src/main.ts
@ -5,7 +5,7 @@ import { javascript } from "@codemirror/lang-javascript";
|
||||
import { markdown } from "@codemirror/lang-markdown";
|
||||
import { Extension } from "@codemirror/state";
|
||||
import { outputSocket } from "./IO/OSC";
|
||||
import { getCodeMirrorTheme, switchToDebugTheme } from "./EditorSetup";
|
||||
import { getCodeMirrorTheme } from "./EditorSetup";
|
||||
import {
|
||||
initializeSelectedUniverse,
|
||||
AppSettings,
|
||||
@ -213,7 +213,13 @@ export class Editor {
|
||||
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);
|
||||
}
|
||||
|
||||
this.documentationStyle = createDocumentationStyle(this);
|
||||
this.bindings = Object.keys(this.documentationStyle).map((key) => ({
|
||||
@ -225,7 +231,7 @@ export class Editor {
|
||||
|
||||
// Get documentation id from hash parameter
|
||||
const document_id = window.location.hash.slice(1);
|
||||
if (document_id && document_id !== "" && documentation_pages.includes(document_id)) {
|
||||
if(document_id && document_id !== "" && documentation_pages.includes(document_id)) {
|
||||
this.currentDocumentationPane = document_id
|
||||
updateDocumentationContent(this, this.bindings);
|
||||
showDocumentation(this);
|
||||
@ -559,7 +565,7 @@ export class Editor {
|
||||
console.log("Hydra loaded successfully");
|
||||
this.initializeHydra();
|
||||
};
|
||||
script.onerror = function() {
|
||||
script.onerror = function () {
|
||||
console.error("Error loading Hydra script");
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
@ -576,8 +582,8 @@ export class Editor {
|
||||
enableStreamCapture: false,
|
||||
});
|
||||
this.hydra = this.hydra_backend.synth;
|
||||
this.hydra.setResolution(1280, 768);
|
||||
(globalThis as any).hydra = this.hydra;
|
||||
this.hydra.setResolution(1024, 768);
|
||||
}
|
||||
|
||||
private setCanvas(canvas: HTMLCanvasElement): void {
|
||||
@ -597,8 +603,8 @@ export class Editor {
|
||||
}
|
||||
}
|
||||
|
||||
private updateInterfaceTheme(selected_theme: { [key: string]: string }): void {
|
||||
function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
|
||||
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),
|
||||
@ -615,7 +621,7 @@ export class Editor {
|
||||
}
|
||||
}
|
||||
|
||||
getColorScheme(theme_name: string): { [key: string]: string } {
|
||||
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];
|
||||
@ -623,10 +629,6 @@ export class Editor {
|
||||
|
||||
readTheme(theme_name: string): void {
|
||||
// Check if the theme exists in colors.json
|
||||
if (theme_name == "debug") {
|
||||
switchToDebugTheme(this);
|
||||
return
|
||||
}
|
||||
let themes: Record<string, { [key: string]: any }> = colors;
|
||||
let selected_theme = themes[theme_name];
|
||||
if (selected_theme) {
|
||||
|
||||
19
yarn.lock
19
yarn.lock
@ -3609,13 +3609,6 @@ ts-interface-checker@^0.1.9:
|
||||
resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
|
||||
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
|
||||
|
||||
ts-tonnetz@^0.0.84:
|
||||
version "0.0.84"
|
||||
resolved "https://registry.yarnpkg.com/ts-tonnetz/-/ts-tonnetz-0.0.84.tgz#29a87378e4b7eddd54448556213a5787eb4e915f"
|
||||
integrity sha512-s6heaLn+BRM3CA0VzTMd9UIMsgIpNTumcwjQHOgp51IgGw4EQKTnfPQXXlmoTriZByO9tn5+Ykgq1m9eHpGlxw==
|
||||
dependencies:
|
||||
typescript "5.2.2"
|
||||
|
||||
tslib@^2.3.1, tslib@^2.6.1:
|
||||
version "2.6.1"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
|
||||
@ -3665,7 +3658,7 @@ typed-array-length@^1.0.4:
|
||||
for-each "^0.3.3"
|
||||
is-typed-array "^1.1.9"
|
||||
|
||||
typescript@5.2.2, typescript@^5.2.2:
|
||||
typescript@^5.2.2:
|
||||
version "5.2.2"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
|
||||
integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
|
||||
@ -4040,12 +4033,10 @@ yaml@^2.1.1:
|
||||
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
|
||||
integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
|
||||
|
||||
zifferjs@^0.0.62:
|
||||
version "0.0.62"
|
||||
resolved "https://registry.yarnpkg.com/zifferjs/-/zifferjs-0.0.62.tgz#77dc18076984836fd00c54bef46dfe029b834307"
|
||||
integrity sha512-OCT4Hq79kgSjP8bFiurB/T2poJtagDLgwjobIrGwdCiDixP31ereGalNoqqiHHBrjOg6Gj8m9AFjzCrup+4osA==
|
||||
dependencies:
|
||||
ts-tonnetz "^0.0.84"
|
||||
zifferjs@^0.0.55:
|
||||
version "0.0.55"
|
||||
resolved "https://registry.yarnpkg.com/zifferjs/-/zifferjs-0.0.55.tgz#ff7d08c9afde6cb78649f585b5a2c97ee4c97f22"
|
||||
integrity sha512-QO/xWN3RugMbusIYxB7H1aHSm1w8OD1leEseJcDwxBx9VxTBWZF9SrxGbNdRowFAIfFg9b4hpOYmMSQYqi87EA==
|
||||
|
||||
zyklus@^0.1.4:
|
||||
version "0.1.4"
|
||||
|
||||
Reference in New Issue
Block a user