Compare commits
86 Commits
zifferjsdo
...
import-sam
| Author | SHA1 | Date | |
|---|---|---|---|
| 1f06e855d1 | |||
| ff333a0526 | |||
| 13360faf0c | |||
| 9bab06ad2a | |||
| 88358e1254 | |||
| 07df2a8bdc | |||
| a7b8a846c0 | |||
| e7129585b1 | |||
| 5eb4f29120 | |||
| 4156c0d399 | |||
| cb882bdbaf | |||
| 57fe8a4824 | |||
| 8739c3b9b6 | |||
| 81beb352e1 | |||
| b5f9bf05f3 | |||
| 6354a137c9 | |||
| e1d70f2e58 | |||
| 0a3aca69cc | |||
| 78cbc3ac19 | |||
| c140c1d3e1 | |||
| 915d83e69e | |||
| 09a7295f18 | |||
| f21faa3798 | |||
| ee732420d6 | |||
| da656d1adf | |||
| a53f465792 | |||
| e288ecb316 | |||
| 175bd97c24 | |||
| 255b35240e | |||
| 02d8863039 | |||
| 8f463097bc | |||
| 932c8cb6ca | |||
| 46d4562012 | |||
| 96959e7b8f | |||
| 427a6e470f | |||
| 17e30a506e | |||
| 6ccd4936f3 | |||
| 278ab026cd | |||
| 94c1574d96 | |||
| 69c5b00b1f | |||
| 969e3db499 | |||
| fb4d311ba8 | |||
| 32ae67b2c6 | |||
| 0883e26f21 | |||
| 69cd462c68 | |||
| eb103dbebd | |||
| eb5e1fb384 | |||
| 2e548b83f0 | |||
| c282cb0c47 | |||
| 0873340ec9 | |||
| e5cb18d8bf | |||
| ce1f005f07 | |||
| ca617d233b | |||
| 04dd6c079d | |||
| 65fc8fa4ab | |||
| 1ff7896ed2 | |||
| 10c28a7ecf | |||
| 73d514d6e3 | |||
| 4395b29482 | |||
| afa6457f88 | |||
| 9bc869c0d9 | |||
| cbb9b9d0f8 | |||
| 2cad89a29a | |||
| ee3d9a63e9 | |||
| d70f11441e | |||
| 818e1a62ef | |||
| 0e8ef2ad75 | |||
| 1950f5af97 | |||
| 7ae2c03ba1 | |||
| c93eac267a | |||
| ba973b028f | |||
| 46fed8faaf | |||
| 62c1ccd9c4 | |||
| 04e17bef80 | |||
| 3f450fc5c7 | |||
| 2d3c48c1c1 | |||
| 491461e354 | |||
| aef26b0811 | |||
| 9328a14de4 | |||
| c04de0d582 | |||
| e1a1a5e501 | |||
| 1043af0e74 | |||
| 096b45ff9d | |||
| 8d30c34ef7 | |||
| 625b1acfb2 | |||
| ff90e4dc18 |
425
index.html
425
index.html
@ -1,4 +1,4 @@
|
||||
<!doctype html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@ -11,15 +11,13 @@
|
||||
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<link rel="stylesheet" href="/src/output.css" />
|
||||
<link rel="stylesheet" href='/fonts/index.css' >
|
||||
<link rel="stylesheet" href="/src/output.css" />
|
||||
<script src="https://unpkg.com/hydra-synth"></script>
|
||||
</head>
|
||||
<style>
|
||||
|
||||
body {
|
||||
font-family: "Arial";
|
||||
background-color: #111827;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
@ -28,11 +26,10 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fluid-bg-transition {
|
||||
.fluid-transition {
|
||||
transition: background-color 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.fullscreencanvas {
|
||||
position: fixed; /* ignore margins */
|
||||
top: 0px;
|
||||
@ -66,60 +63,89 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.bar_button {
|
||||
@apply mx-2 px-2 py-2 flex inline rounded-lg bg-background text-foreground hover:bg-foreground hover:text-background
|
||||
}
|
||||
|
||||
.side_button {
|
||||
@apply px-2 py-2 bg-background text-foreground rounded-lg hover:bg-foreground hover:text-background
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@apply bg-selection_foreground text-sm lg:text-xl border-b py-4 text-foreground
|
||||
}
|
||||
|
||||
.tab_panel {
|
||||
@apply inline-block lg:px-4 px-8 py-1 text-brightwhite
|
||||
}
|
||||
|
||||
.doc_header {
|
||||
@apply pl-2 pr-2 lg:text-xl text-sm py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
||||
}
|
||||
|
||||
.doc_subheader {
|
||||
@apply pl-2 pr-2 lg:text-xl text-sm ml-6 py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<body id="all" class="z-0 bg-neutral-800 overflow-y-hidden">
|
||||
|
||||
<body id="all" class="z-0 overflow-y-hidden bg-black">
|
||||
<!-- The header is hidden on smaller devices -->
|
||||
<header class="py-0 block text-white bg-neutral-900">
|
||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
|
||||
<a class="flex title-font font-medium items-center text-black mb-0">
|
||||
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 bg-white rounded-full" alt="Topos Frog Logo" />
|
||||
<input id="universe-viewer" class="hidden bg-transparent xl:block ml-4 text-2xl text-white placeholder-white" id="renamer" type="text" placeholder="Topos">
|
||||
|
||||
<header class="py-0 block">
|
||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background">
|
||||
<a class="flex title-font font-medium items-center mb-0">
|
||||
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/>
|
||||
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-brightwhite placeholder-brightwhite" id="renamer" type="text" placeholder="Topos">
|
||||
</a>
|
||||
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
|
||||
<a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<!-- Play Button -->
|
||||
<a title="Play button (Ctrl+P)" id="play-button-1" class="bar_button">
|
||||
<svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
|
||||
<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
|
||||
</svg>
|
||||
<svg id="pause-icon" class="hidden w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg id="pause-icon" class="hidden w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
|
||||
</svg>
|
||||
<p id="play-label" class="hidden lg:block text-xl pl-2 text-white inline-block">Play</p>
|
||||
<p id="play-label" class="hidden lg:block text-xl pl-2 inline-block">Play</p>
|
||||
</a>
|
||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
|
||||
<!-- Stop button -->
|
||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
|
||||
<rect x="6.5" y="6.5" width="7" height="7" fill="black" rx="1" ry="1"/>
|
||||
<rect x="6.5" y="6.5" width="7" height="7" fill="selection_background" rx="1" ry="1"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Stop</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Stop</p>
|
||||
</a>
|
||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
||||
|
||||
<!-- Eval button -->
|
||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Eval</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Eval</p>
|
||||
</a>
|
||||
|
||||
<a title="Clear button" id="clear-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<a title="Clear button" id="clear-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Clear</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Clear</p>
|
||||
</a>
|
||||
|
||||
<a title="Share button" id="share-button" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
||||
<a title="Share button" id="share-button" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Share</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Share</p>
|
||||
</a>
|
||||
|
||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="flex flex-row hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Docs</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Docs</p>
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
@ -128,137 +154,133 @@
|
||||
</header>
|
||||
|
||||
<div id="documentation" class="hidden">
|
||||
<div id="documentation-page" class="flex flex-row bg-transparent">
|
||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-neutral-900 text-white">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
|
||||
<details class="" open=true>
|
||||
<div id="documentation-page" class="flex flex-row transparent">
|
||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-background">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-background">
|
||||
<details class="" open>
|
||||
<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="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Welcome </p>
|
||||
<p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
|
||||
<p rel="noopener noreferrer" id="docs_interaction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interaction</p>
|
||||
<p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Keyboard</p>
|
||||
<p rel="noopener noreferrer" id="docs_mouse" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Mouse</p>
|
||||
<p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Coding</p>
|
||||
<p rel="noopener noreferrer" id="docs_introduction" class="doc_header">Welcome </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>
|
||||
<p rel="noopener noreferrer" id="docs_mouse" class="doc_header">Mouse</p>
|
||||
<p rel="noopener noreferrer" id="docs_code" class="doc_header">Coding</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="space-y-2" open=true>
|
||||
<details class="space-y-2" open>
|
||||
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Time -->
|
||||
<details class="space-y-2" open=false>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Time</summary>
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Time</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_time" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Dealing with time</p>
|
||||
<p rel="noopener noreferrer" id="docs_linear" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Transport</p>
|
||||
<p rel="noopener noreferrer" id="docs_cyclic" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Cycles</p>
|
||||
<p rel="noopener noreferrer" id="docs_longform" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Structure</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Samples -->
|
||||
<details class="space-y-2" open=false>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Audio Engine</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_audio_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Playing a sound</p>
|
||||
<p rel="noopener noreferrer" id="docs_amplitude" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Amplitude</p>
|
||||
<p rel="noopener noreferrer" id="docs_sampler" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Sampler</p>
|
||||
<p rel="noopener noreferrer" id="docs_synths" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synths</p>
|
||||
<p rel="noopener noreferrer" id="docs_reverb_delay" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Effects</p>
|
||||
<p rel="noopener noreferrer" id="docs_time" class="doc_subheader">Dealing with time</p>
|
||||
<p rel="noopener noreferrer" id="docs_linear" class="doc_subheader">Time & Transport</p>
|
||||
<p rel="noopener noreferrer" id="docs_cyclic" class="doc_subheader">Time & Cycles</p>
|
||||
<p rel="noopener noreferrer" id="docs_longform" class="doc_subheader">Time & Structure</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Audio Engine -->
|
||||
<details class="space-y-2" open=false>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Samples</summary>
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Audio Engine</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_sample_list" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">List of samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_loading_samples" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Loading Samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_audio_basics" class="doc_subheader">Playing a sound</p>
|
||||
<p rel="noopener noreferrer" id="docs_amplitude" class="doc_subheader">Amplitude</p>
|
||||
<p rel="noopener noreferrer" id="docs_sampler" class="doc_subheader">Sampler</p>
|
||||
<p rel="noopener noreferrer" id="docs_synths" class="doc_subheader">Synths</p>
|
||||
<p rel="noopener noreferrer" id="docs_filters" class="doc_subheader">Filters</p>
|
||||
<p rel="noopener noreferrer" id="docs_effects" class="doc_subheader">Effects</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Array patterns</p>
|
||||
<p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
|
||||
<p rel="noopener noreferrer" id="docs_osc" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">OSC</p>
|
||||
<!-- Samples -->
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header ">Samples</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_sample_list" class="doc_subheader">List of samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_loading_samples" class="doc_subheader">External samples</p>
|
||||
</div>
|
||||
</details>
|
||||
<p rel="noopener noreferrer" id="docs_midi" class="doc_header">MIDI</p>
|
||||
<p rel="noopener noreferrer" id="docs_osc" class="doc_header">OSC</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="space-y-2" open=true>
|
||||
<details class="space-y-2" open>
|
||||
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Global Variables</p>
|
||||
<p rel="noopener noreferrer" id="docs_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Low Freq Oscs.</p>
|
||||
<p rel="noopener noreferrer" id="docs_probabilities" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Probabilities</p>
|
||||
<p rel="noopener noreferrer" id="docs_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Chaining</p>
|
||||
<p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>
|
||||
|
||||
|
||||
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg doc_header">Array patterns</p>
|
||||
<!-- Ziffers -->
|
||||
<details class="space-y-2" open=false>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Ziffers</summary>
|
||||
<details class="space-y-2">
|
||||
<summary class="doc_header">Ziffers</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Basics</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Scales</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Rhythm</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Algorithmic</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Tonnetz</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="doc_subheader">Basics</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="doc_subheader">Scales</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="doc_subheader">Rhythm</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="doc_subheader">Algorithmic</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="doc_subheader">Tonnetz</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_syncing" class="doc_subheader">Syncing</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!--
|
||||
<p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
|
||||
-->
|
||||
<p rel="noopener noreferrer" id="docs_variables" class="doc_header">Global Variables</p>
|
||||
<p rel="noopener noreferrer" id="docs_lfos" class="doc_header">Low Freq Oscs.</p>
|
||||
<p rel="noopener noreferrer" id="docs_probabilities" class="doc_header">Probabilities</p>
|
||||
<p rel="noopener noreferrer" id="docs_chaining" class="doc_header">Chaining</p>
|
||||
<p rel="noopener noreferrer" id="docs_functions" class="doc_header">Functions</p>
|
||||
<p rel="noopener noreferrer" id="docs_generators" class="doc_header">Generators</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="space-y-2" open=true>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">More</summary>
|
||||
<details class="space-y-2" open>
|
||||
<summary class="font-semibold lg:text-xl doc_header">More</summary>
|
||||
<div class="flex flex-col">
|
||||
<a rel="noopener noreferrer" id="docs_synchronisation" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synchronisation</a>
|
||||
<a rel="noopener noreferrer" id="docs_oscilloscope" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Oscilloscope</a>
|
||||
<a rel="noopener noreferrer" id="docs_bonus" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Bonus/Trivia</a>
|
||||
<a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
|
||||
<a rel="noopener noreferrer" id="docs_synchronisation" class="doc_subheader">Synchronisation</a>
|
||||
<a rel="noopener noreferrer" id="docs_oscilloscope" class="doc_subheader">Oscilloscope</a>
|
||||
<a rel="noopener noreferrer" id="docs_bonus" class="doc_header">Bonus/Trivia</a>
|
||||
<a rel="noopener noreferrer" id="docs_about" class="doc_header">About Topos</a>
|
||||
</div>
|
||||
</details>
|
||||
<details class="" open=true>
|
||||
<details class="" open>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">Community</summary>
|
||||
<form action="https://github.com/Bubobubobubobubo/topos">
|
||||
<input rel="noopener noreferrer" id="github_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="GitHub" />
|
||||
<input rel="noopener noreferrer" id="github_link" class="doc_header" type="submit" value="GitHub" />
|
||||
</form>
|
||||
<form action="https://discord.gg/6T67DqBNNT">
|
||||
<input rel="noopener noreferrer" id="discord_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="Discord" />
|
||||
<input rel="noopener noreferrer" id="discord_link" class="doc_header" type="submit" value="Discord" />
|
||||
</form>
|
||||
<form action="https://ko-fi.com/raphaelbubo">
|
||||
<input rel="noopener noreferrer" id="support_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="Support" />
|
||||
<input rel="noopener noreferrer" id="support_link" class="doc_header" type="submit" value="Support" />
|
||||
</form>
|
||||
</details>
|
||||
</nav>
|
||||
</aside>
|
||||
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 bg-transparent"></div>
|
||||
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app">
|
||||
<!-- This modal is used for switching between buffers -->
|
||||
<div id="modal-buffers" class="invisible bg-gray-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-white">
|
||||
<p class="text-semibold lg:text-2xl text-sm pb-4">Known universes</p>
|
||||
<div id="modal-buffers" class="invisible flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
|
||||
<p class="text-semibold lg:text-2xl text-sm pb-4 text-selection_foreground">Known universes</p>
|
||||
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
|
||||
<div id="disclaimer" class="pb-4">
|
||||
<form id="universe-creator">
|
||||
<label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only text-white">Search</label>
|
||||
<label for="search" class="mb-2 text-sm font-medium sr-only ">Search</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-500 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg bg-neutral-800 text-white" placeholder="Buffer..." required>
|
||||
<button id="load-universe-button" class="text-black absolute right-2.5 bottom-2.5 bg-white hover:bg-white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
|
||||
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg neutral-800 " placeholder="Buffer..." required>
|
||||
<button id="load-universe-button" class="bg-background text-selection_background absolute right-2.5 bottom-2.5 focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-2 flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 border-spacing-y-4">
|
||||
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 hover:bg-neutral-700 bg-neutral-800 text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Close</button>
|
||||
<div class="mt-2 flex space-x-6 border-t rounded-b border-spacing-y-4">
|
||||
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-background text-selection_background">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -267,29 +289,26 @@
|
||||
|
||||
<!-- This modal is used for settings -->
|
||||
<div id="modal-settings" class="invisible flex
|
||||
absolute lg:justify-center lg:items-center
|
||||
absolute lg:justify-center lg:items-center
|
||||
lg:overflow-y-auto lg:overflow-x-auto
|
||||
overflow-y-scroll owerflow-x-scroll
|
||||
md:top-0 md:bottom-0 h-screen w-full"
|
||||
>
|
||||
<div class="grid w-full grid-col-3">
|
||||
<div class="bg-white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8">
|
||||
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg
|
||||
bg-gray-800 justify-center lg:text-center lg:pl-0 pl-8 text-white mx-4
|
||||
text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
|
||||
<div class="white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8 bg-foreground">
|
||||
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg justify-center lg:text-center lg:pl-0 pl-8 mx-4 subtitle">Topos Application Settings</h1>
|
||||
<div class="flex lg:flex-row flex-col mr-4 ml-4">
|
||||
<!-- Font Size Selection -->
|
||||
<div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4">Font Settings</p>
|
||||
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4 text-selection_background">Theme Settings</p>
|
||||
<div class="mb-6 mx-4 font-semibold">
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label>
|
||||
<input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900
|
||||
text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700
|
||||
dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm text-foreground">Size:</label>
|
||||
<input type="text" id="font-size-input" type="number" class="border
|
||||
text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 focus:border-blue-500">
|
||||
</div>
|
||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm">Font:</label>
|
||||
<select id="font-family" class="bg-gray-50 ml-4 border border-gray-300 mb-2
|
||||
text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
|
||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Font:</label>
|
||||
<select id="font-family" class=" ml-4 border mb-2
|
||||
text-sm rounded-lg focus:border-blue-500 block p-2.5">
|
||||
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
||||
<option value="Jet Brains">Jet Brains</option>
|
||||
<option value="Courier">Courier</option>
|
||||
@ -301,186 +320,199 @@
|
||||
<option value="Steps Mono">Steps Mono</option>
|
||||
<option value="Steps Mono Thin">Steps Mono Thin</option>
|
||||
</select>
|
||||
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<label for="theme" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Theme:</label>
|
||||
<select id="theme-selector" class="ml-4 border mb-2
|
||||
text-sm rounded-lg block p-2.5">
|
||||
</select>
|
||||
<div id="theme-previewer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editor mode selection -->
|
||||
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p>
|
||||
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Editor options</p>
|
||||
<!-- Checkboxes -->
|
||||
<div class="pr-4">
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Vim Mode</label>
|
||||
<input id="vim-mode" 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-selection_background">Vim Mode</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label>
|
||||
<input id="show-line-numbers" 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 Line Numbers</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Time Position</label>
|
||||
<input id="show-time-position" 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 Time Position</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
|
||||
<input id="show-tips" 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 Hovering Tips</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Completions</label>
|
||||
<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 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>
|
||||
<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>
|
||||
|
||||
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p>
|
||||
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">File Management</p>
|
||||
<div class="flex flex-col space-y-2 pb-2">
|
||||
<button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="download-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Download universes</span>
|
||||
<span class="text-selection_foreground">Download universes</span>
|
||||
</button>
|
||||
<button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="upload-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Upload universes</span>
|
||||
<span class="text-selection_foreground">Upload universes</span>
|
||||
</button>
|
||||
<button id="destroy-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="destroy-universes" class="bg-brightwhite font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<span>Destroy universes</span>
|
||||
<span class="text-selection_foreground">Destroy universes</span>
|
||||
</button>
|
||||
<!-- Upload audio samples -->
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-2 pt-2 underline underline-offset-4 text-selection_background">Audio samples</p>
|
||||
|
||||
<label class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<input id="upload-samples" type="file" class="hidden" accept="file" webkitdirectory directory multiple>
|
||||
<span id="sample-indicator" class="text-selection_foreground">Import samples</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Midi settings -->
|
||||
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4">
|
||||
<div id="midi-settings-container" class="rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4 bg-color bg-selection_foreground">
|
||||
<div class="lg:flex lg:flex-row w-fit">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">MIDI I/O Settings</p>
|
||||
<div class="flex items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI Clock: </label>
|
||||
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">MIDI Clock: </label>
|
||||
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
||||
<option value="-1">Internal</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Clock PPQN: </label>
|
||||
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">Clock PPQN: </label>
|
||||
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
||||
<option value="24">24</option>
|
||||
<option value="48">48</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Send MIDI Clock</label>
|
||||
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Send MIDI Clock</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:flex block flex-row">
|
||||
<div class="flex items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI input: </label>
|
||||
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">MIDI input: </label>
|
||||
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600 focus:ring-2">
|
||||
<option value="-1">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Route channels to scripts</label>
|
||||
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Route channels to scripts</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audio nudge slider -->
|
||||
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p>
|
||||
<div class="flex flex-column pb-2">
|
||||
<p class="pt-0.5 ml-4">Clock:</p>
|
||||
<div id="midi-settings-container" class="rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Audio/Event Nudging</p> <div class="flex flex-column pb-2">
|
||||
<p class="pt-0.5 ml-4 text-foreground">Clock:</p>
|
||||
<input
|
||||
type="range" id="audio_nudge"
|
||||
name="audiorangeInput"
|
||||
min="-200" max="200"
|
||||
value="0"
|
||||
class="w-full ml-4"
|
||||
class="w-full ml-4 text-red"
|
||||
oninput="nudgenumber.value=audio_nudge.value"
|
||||
>
|
||||
<output
|
||||
name="nudgenumber"
|
||||
id="nudgenumber"
|
||||
for="audiorangeInput"
|
||||
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white"
|
||||
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
||||
>0</output>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column">
|
||||
|
||||
<p class="pt-0.5 ml-4">Audio:</p>
|
||||
<p class="pt-0.5 ml-4 text-foreground">Audio:</p>
|
||||
<input
|
||||
type="range" id="dough_nudge"
|
||||
name="doughrangeInput"
|
||||
min="0" max="100"
|
||||
value="0"
|
||||
class="w-full ml-4"
|
||||
class="w-full ml-4 text-foreground"
|
||||
oninput="doughnumber.value=dough_nudge.value"
|
||||
>
|
||||
<output
|
||||
name="doughnumber"
|
||||
id="doughnumber"
|
||||
for="doughrangeInput"
|
||||
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white"
|
||||
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
||||
>0</output>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
||||
<div class="flex space-x-6 border-t rounded-b mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
||||
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
|
||||
hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4
|
||||
font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
|
||||
hover:bg-background bg-background mt-4 mb-4 focus:ring-4
|
||||
font-medium rounded-lg text-sm px-5 py-2.5 text-center text-selection_background">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row max-h-fit">
|
||||
|
||||
<!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
|
||||
<aside id="sidebar" class="
|
||||
flex flex-col items-center w-14
|
||||
h-screen py-2 border-r
|
||||
rtl:border-l max-h-fit
|
||||
rtl:border-r-0 bg-neutral-900
|
||||
dark:border-neutral-700 border-none"
|
||||
rtl:border-r-0 bg-background
|
||||
border-neutral-700 border-none"
|
||||
>
|
||||
<nav class="flex flex-col space-y-6">
|
||||
<a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<a title="Local Scripts (Ctrl + L)" id="local-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<path d="M18 5H0v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5Zm-7.258-2L9.092.8a2.009 2.009 0 0 0-1.6-.8H2.049a2 2 0 0 0-2 2v1h10.693Z"/>
|
||||
</svg>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
||||
<a title="Global Script (Ctrl + G)" id="global-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
||||
<path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z"/>
|
||||
<path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
||||
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<a title="Project notes (Ctrl + N)" id="note-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Application Settings" id="settings-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<a title="Application Settings" id="settings-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
@ -494,55 +526,54 @@
|
||||
|
||||
<!-- Tabs for local files -->
|
||||
<div class="min-w-screen flex grow flex-col">
|
||||
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center text-white bg-neutral-900 space-x-1 lg:space-x-8">
|
||||
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center bg-background space-x-1 lg:space-x-8">
|
||||
<li class="pl-5">
|
||||
<a title="Local Script 1 (F1)" id="tab-1" class="bg-orange-300 inline-block lg:px-4 px-2 py-1 text-white hover:bg-gray-800">1</a>
|
||||
<a title="Local Script 1 (F1)" id="tab-1" class="tab_panel">1</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 2 (F2)" id="tab-2" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">2</a>
|
||||
<a title="Local Script 2 (F2)" id="tab-2" class="tab_panel">2</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 3 (F3)" id="tab-3" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">3</a>
|
||||
<a title="Local Script 3 (F3)" id="tab-3" class="tab_panel">3</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 4 (F4)" id="tab-4" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">4</a>
|
||||
<a title="Local Script 4 (F4)" id="tab-4" class="tab_panel">4</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 5 (F5)" id="tab-5" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">5</a>
|
||||
<a title="Local Script 5 (F5)" id="tab-5" class="tab_panel">5</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 6 (F6)" id="tab-6" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">6</a>
|
||||
<a title="Local Script 6 (F6)" id="tab-6" class="tab_panel">6</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 7 (F7)" id="tab-7" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">7</a>
|
||||
<a title="Local Script 7 (F7)" id="tab-7" class="tab_panel">7</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 8 (F8)" id="tab-8" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">8</a>
|
||||
<a title="Local Script 8 (F8)" id="tab-8" class="tab_panel">8</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 9 (F9)" id="tab-9" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">9</a>
|
||||
<a title="Local Script 9 (F9)" id="tab-9" class="tab_panel">9</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- Here comes the editor itself -->
|
||||
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
|
||||
<canvas id="hydra-bg" class="fullscreencanvas"></canvas>
|
||||
<canvas id="scope" class="fullscreencanvas"></canvas>
|
||||
<canvas id="hydra-bg" class="fullscreencanvas"></canvas>
|
||||
<canvas id="feedback" class="fullscreencanvas"></canvas>
|
||||
</div>
|
||||
<p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
||||
<p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
|
||||
<template id="ui-known-universe-item-template">
|
||||
<!-- A known universe button in "opening" interface -->
|
||||
<li class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4">
|
||||
<li class="py-2 px-4 flex justify-between text-brightwhite hover:bg-selection_background hover:text-selection_foreground">
|
||||
<button class="universe-name load-universe" title="Load this universe">Universe Name</button>
|
||||
<button class="delete-universe" title="Delete this universe">🗑</button>
|
||||
</li>
|
||||
</template>
|
||||
</body>
|
||||
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
|
||||
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute right-2 bottom-12">/////// Fill ///////</p>
|
||||
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold cursor-textpointer-events-none select-none text-sm absolute bottom-2 right-2 bg-foreground text-background"></p>
|
||||
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold cursor-textpointer-events-none select-none text-sm absolute right-2 bottom-12 bg-foreground text-background">/////// Fill ///////</p>
|
||||
</html>
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
"autoprefixer": "^10.4.14",
|
||||
"codemirror": "^6.0.1",
|
||||
"fflate": "^0.8.0",
|
||||
"highlight.js": "^11.9.0",
|
||||
"jisg": "^0.9.7",
|
||||
"lru-cache": "^10.0.1",
|
||||
"marked": "^7.0.3",
|
||||
@ -37,13 +38,13 @@
|
||||
"postcss": "^8.4.27",
|
||||
"showdown": "^2.1.0",
|
||||
"showdown-highlight": "^3.1.0",
|
||||
"superdough": "^0.9.11",
|
||||
"superdough": "^0.9.12",
|
||||
"tailwind-highlightjs": "^2.0.1",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tone": "^14.8.49",
|
||||
"unique-names-generator": "^4.7.1",
|
||||
"vite-plugin-markdown": "^2.1.0",
|
||||
"zifferjs": "^0.0.47",
|
||||
"zifferjs": "^0.0.55",
|
||||
"zyklus": "^0.1.4",
|
||||
"zzfx": "^1.2.0"
|
||||
}
|
||||
|
||||
169
src/API.ts
169
src/API.ts
@ -1,6 +1,7 @@
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { sendToServer, type OSCMessage, oscMessages } from "./IO/OSC";
|
||||
import { getAllScaleNotes, nearScales, seededRandom } from "zifferjs";
|
||||
import colorschemes from "./colors.json";
|
||||
import {
|
||||
MidiCCEvent,
|
||||
MidiConnection,
|
||||
@ -13,6 +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 } from "./Utils/Generic";
|
||||
import {
|
||||
loadUniverse,
|
||||
openUniverseModal,
|
||||
@ -86,7 +88,9 @@ export class UserAPI {
|
||||
public randomGen = Math.random;
|
||||
public currentSeed: string | undefined = undefined;
|
||||
public localSeeds = new Map<string, Function>();
|
||||
public patternCache = new LRUCache({ max: 1000, ttl: 1000 * 60 * 5 });
|
||||
public patternCache = new LRUCache({ max: 10000, ttl: 10000 * 60 * 5 });
|
||||
public invalidPatterns: {[key: string]: boolean} = {};
|
||||
public cueTimes: { [key: string]: number } = {};
|
||||
private errorTimeoutID: number = 0;
|
||||
private printTimeoutID: number = 0;
|
||||
public MidiConnection: MidiConnection;
|
||||
@ -143,6 +147,7 @@ export class UserAPI {
|
||||
? code
|
||||
: (this.app.selectedExample as string);
|
||||
}
|
||||
this.clearPatternCache();
|
||||
this.stop();
|
||||
this.play();
|
||||
};
|
||||
@ -154,6 +159,7 @@ export class UserAPI {
|
||||
current_universe.example.candidate! = "";
|
||||
current_universe.example.committed! = "";
|
||||
}
|
||||
this.clearPatternCache();
|
||||
this.stop();
|
||||
};
|
||||
|
||||
@ -163,6 +169,7 @@ export class UserAPI {
|
||||
current_universe.example.candidate! = "";
|
||||
current_universe.example.committed! = "";
|
||||
}
|
||||
this.clearPatternCache();
|
||||
this.stop();
|
||||
this.play();
|
||||
this.app.exampleIsPlaying = true;
|
||||
@ -214,7 +221,7 @@ export class UserAPI {
|
||||
clearTimeout(this.printTimeoutID);
|
||||
clearTimeout(this.errorTimeoutID);
|
||||
this.app.interface.error_line.innerHTML = message as string;
|
||||
this.app.interface.error_line.style.color = "white";
|
||||
this.app.interface.error_line.style.color = "red";
|
||||
this.app.interface.error_line.classList.remove("hidden");
|
||||
// @ts-ignore
|
||||
this.printTimeoutID = setTimeout(
|
||||
@ -697,7 +704,7 @@ export class UserAPI {
|
||||
};
|
||||
|
||||
// =============================================================
|
||||
// Ziffers related functions
|
||||
// Cache functions
|
||||
// =============================================================
|
||||
|
||||
public generateCacheKey = (...args: any[]): string => {
|
||||
@ -708,10 +715,74 @@ export class UserAPI {
|
||||
this.patternCache.forEach((player) => (player as Player).reset());
|
||||
};
|
||||
|
||||
public clearPatternCache = (): void => {
|
||||
this.patternCache.clear();
|
||||
}
|
||||
|
||||
public removePatternFromCache = (id: string): void => {
|
||||
this.patternCache.delete(id);
|
||||
};
|
||||
|
||||
maybeToNumber = (something: any): number|any => {
|
||||
// If something is BigInt
|
||||
if(typeof something === "bigint") {
|
||||
return Number(something);
|
||||
} else {
|
||||
return something;
|
||||
}
|
||||
}
|
||||
|
||||
cache = (key: string, value: any) => {
|
||||
/**
|
||||
* Gets or sets a value in the cache.
|
||||
*
|
||||
* @param key - The key of the value to get or set
|
||||
* @param value - The value to set
|
||||
* @returns The value of the key
|
||||
*/
|
||||
if(value !== undefined) {
|
||||
if(isGenerator(value)) {
|
||||
if(this.patternCache.has(key)) {
|
||||
const cachedValue = (this.patternCache.get(key) as Generator<any>).next().value
|
||||
if(cachedValue!==0 && !cachedValue) {
|
||||
const generator = value as unknown as Generator<any>
|
||||
this.patternCache.set(key, generator);
|
||||
return this.maybeToNumber(generator.next().value);
|
||||
}
|
||||
return this.maybeToNumber(cachedValue);
|
||||
} else {
|
||||
const generator = value as unknown as Generator<any>
|
||||
this.patternCache.set(key, generator);
|
||||
return this.maybeToNumber(generator.next().value);
|
||||
}
|
||||
} else if(isGeneratorFunction(value)) {
|
||||
if(this.patternCache.has(key)) {
|
||||
const cachedValue = (this.patternCache.get(key) as Generator<any>).next().value;
|
||||
if(cachedValue || cachedValue===0 || cachedValue===0n) {
|
||||
return this.maybeToNumber(cachedValue);
|
||||
} else {
|
||||
const generator = value();
|
||||
this.patternCache.set(key, generator);
|
||||
return this.maybeToNumber(generator.next().value);
|
||||
}
|
||||
} else {
|
||||
const generator = value();
|
||||
this.patternCache.set(key, generator);
|
||||
return this.maybeToNumber(generator.next().value);
|
||||
}
|
||||
} else {
|
||||
this.patternCache.set(key, value);
|
||||
return this.maybeToNumber(value);
|
||||
}
|
||||
} else {
|
||||
return this.maybeToNumber(this.patternCache.get(key));
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================
|
||||
// Ziffers related functions
|
||||
// =============================================================
|
||||
|
||||
public z = (
|
||||
input: string | Generator<number>,
|
||||
options: InputOptions = {},
|
||||
@ -720,34 +791,54 @@ export class UserAPI {
|
||||
const zid = "z" + id.toString();
|
||||
const key = id === "" ? this.generateCacheKey(input, options) : zid;
|
||||
|
||||
const validSyntax = typeof input === "string" && !this.invalidPatterns[input]
|
||||
|
||||
let player;
|
||||
let replace = false;
|
||||
|
||||
if (this.app.api.patternCache.has(key)) {
|
||||
player = this.app.api.patternCache.get(key) as Player;
|
||||
if (typeof input === "string" && player.input !== input) {
|
||||
player = undefined;
|
||||
|
||||
if (typeof input === "string" &&
|
||||
player.input !== input &&
|
||||
player.atTheBeginning()) {
|
||||
replace = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!player) {
|
||||
player = new Player(input, options, this.app, zid);
|
||||
this.app.api.patternCache.set(key, player);
|
||||
if ((typeof input !== "string" || validSyntax) && (!player || replace)) {
|
||||
const newPlayer = new Player(input, options, this.app, zid);
|
||||
if(newPlayer.isValid()) {
|
||||
player = newPlayer
|
||||
this.patternCache.set(key, player);
|
||||
} else if(typeof input === "string") {
|
||||
this.invalidPatterns[input] = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (player.ziffers.generator && player.ziffers.generatorDone) {
|
||||
this.removePatternFromCache(key);
|
||||
if(player) {
|
||||
|
||||
if(player.atTheBeginning()) {
|
||||
if(typeof input === "string" && !validSyntax) this.app.api.log(`Invalid syntax: ${input}`);
|
||||
}
|
||||
|
||||
if (player.ziffers.generator && player.ziffers.generatorDone) {
|
||||
this.removePatternFromCache(key);
|
||||
}
|
||||
|
||||
if (typeof id === "number") player.zid = zid;
|
||||
|
||||
player.updateLastCallTime();
|
||||
|
||||
if (id !== "" && zid !== "z0") {
|
||||
// Sync named patterns to z0 by default
|
||||
player.sync("z0", false);
|
||||
}
|
||||
|
||||
return player;
|
||||
} else {
|
||||
throw new Error(`Invalid syntax: ${input}`);
|
||||
}
|
||||
|
||||
if (typeof id === "number") player.zid = zid;
|
||||
|
||||
player.updateLastCallTime();
|
||||
|
||||
if (id !== "" && zid !== "z0") {
|
||||
// Sync named patterns to z0 by default
|
||||
player.sync("z0");
|
||||
}
|
||||
|
||||
return player;
|
||||
};
|
||||
|
||||
public z0 = (input: string, opts: InputOptions = {}) =>
|
||||
@ -2176,4 +2267,40 @@ export class UserAPI {
|
||||
*/
|
||||
this.app.clock.time_signature = [numerator, denominator];
|
||||
};
|
||||
|
||||
public cue = (functionName: string|Function): void => {
|
||||
functionName = typeof functionName === "function" ? functionName.name : functionName;
|
||||
this.cueTimes[functionName] = this.app.clock.pulses_since_origin;
|
||||
};
|
||||
|
||||
public theme = (color_scheme: string): void => {
|
||||
this.app.readTheme(color_scheme);
|
||||
console.log("Changing color scheme for: ", color_scheme)
|
||||
}
|
||||
|
||||
public themeName = (): string => {
|
||||
return this.app.currentThemeName;
|
||||
}
|
||||
|
||||
public randomTheme = (): void => {
|
||||
let theme_names = this.getThemes();
|
||||
let selected_theme = theme_names[Math.floor(Math.random() * theme_names.length)];
|
||||
this.app.readTheme(selected_theme);
|
||||
this.app.api.log(selected_theme);
|
||||
}
|
||||
|
||||
public nextTheme = (): void => {
|
||||
let theme_names = this.getThemes();
|
||||
let current_theme = this.app.api.themeName();
|
||||
let current_theme_idx = theme_names.indexOf(current_theme);
|
||||
let next_theme_idx = (current_theme_idx + 1) % theme_names.length;
|
||||
let next_theme = theme_names[next_theme_idx];
|
||||
this.app.readTheme(next_theme);
|
||||
this.app.api.log(next_theme);
|
||||
}
|
||||
|
||||
public getThemes = (): string[] => {
|
||||
return Object.keys(colorschemes);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { type Editor } from "./main";
|
||||
// Basics
|
||||
import { introduction } from "./documentation/basics/welcome";
|
||||
import { loading_samples } from "./documentation/samples/loading_samples";
|
||||
import { amplitude } from "./documentation/audio_engine/amplitude";
|
||||
import { reverb } from "./documentation/audio_engine/reverb_delay";
|
||||
import { sampler } from "./documentation/audio_engine/sampler";
|
||||
import { sample_banks } from "./documentation/samples/sample_banks";
|
||||
import { audio_basics } from "./documentation/audio_engine/audio_basics";
|
||||
import { sample_list } from "./documentation/samples/sample_list";
|
||||
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";
|
||||
import { sampler } from "./documentation/learning/audio_engine/sampler";
|
||||
import { sample_banks } from "./documentation/learning/samples/sample_banks";
|
||||
import { audio_basics } from "./documentation/learning/audio_engine/audio_basics";
|
||||
import { sample_list } from "./documentation/learning/samples/sample_list";
|
||||
import { software_interface } from "./documentation/basics/interface";
|
||||
import { shortcuts } from "./documentation/basics/keyboard";
|
||||
import { code } from "./documentation/basics/code";
|
||||
@ -17,37 +17,37 @@ import { oscilloscope } from "./documentation/more/oscilloscope";
|
||||
import { synchronisation } from "./documentation/more/synchronisation";
|
||||
import { about } from "./documentation/more/about";
|
||||
import { bonus } from "./documentation/more/bonus";
|
||||
import { chaining } from "./documentation/chaining";
|
||||
import { interaction } from "./documentation/interaction";
|
||||
import { time } from "./documentation/time/time";
|
||||
import { linear_time } from "./documentation/time/linear_time";
|
||||
import { cyclical_time } from "./documentation/time/cyclical_time";
|
||||
import { long_forms } from "./documentation/long_forms";
|
||||
import { midi } from "./documentation/midi";
|
||||
import { osc } from "./documentation/osc";
|
||||
import { sound } from "./documentation/engine";
|
||||
import { patterns } from "./documentation/patterns";
|
||||
import { functions } from "./documentation/functions";
|
||||
import { variables } from "./documentation/variables";
|
||||
import { probabilities } from "./documentation/probabilities";
|
||||
import { lfos } from "./documentation/lfos";
|
||||
import { chaining } from "./documentation/patterns/chaining";
|
||||
import { interaction } from "./documentation/basics/interaction";
|
||||
import { time } from "./documentation/learning/time/time";
|
||||
import { linear_time } from "./documentation/learning/time/linear_time";
|
||||
import { cyclical_time } from "./documentation/learning/time/cyclical_time";
|
||||
import { long_forms } from "./documentation/learning/time/long_forms";
|
||||
import { midi } from "./documentation/learning/midi";
|
||||
import { osc } from "./documentation/learning/osc";
|
||||
import { patterns } from "./documentation/patterns/patterns";
|
||||
import { functions } from "./documentation/patterns/functions";
|
||||
import { generators } from "./documentation/patterns/generators";
|
||||
import { variables } from "./documentation/patterns/variables";
|
||||
import { probabilities } from "./documentation/patterns/probabilities";
|
||||
import { lfos } from "./documentation/patterns/lfos";
|
||||
import { ziffers_basics } from "./documentation/patterns/ziffers/ziffers_basics";
|
||||
import { ziffers_scales } from "./documentation/patterns/ziffers/ziffers_scales";
|
||||
import { ziffers_rhythm } from "./documentation/patterns/ziffers/ziffers_rhythm";
|
||||
import { ziffers_algorithmic } from "./documentation/patterns/ziffers/ziffers_algorithmic";
|
||||
|
||||
import { ziffers_tonnetz } from "./documentation/patterns/ziffers/ziffers_tonnetz";
|
||||
|
||||
import { synths } from "./documentation/synths";
|
||||
|
||||
import { ziffers_syncing } from "./documentation/patterns/ziffers/ziffers_syncing";
|
||||
import { synths } from "./documentation/learning/audio_engine/synths";
|
||||
// Setting up the Markdown converter with syntax highlighting
|
||||
import showdown from "showdown";
|
||||
import showdownHighlight from "showdown-highlight";
|
||||
import "highlight.js/styles/atom-one-dark-reasonable.min.css";
|
||||
import { createDocumentationStyle } from "./DomElements";
|
||||
import { filters } from "./documentation/learning/audio_engine/filters";
|
||||
showdown.setFlavor("github");
|
||||
|
||||
export const key_shortcut = (shortcut: string): string => {
|
||||
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
|
||||
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-brightwhite bg-brightblack border border-black rounded-lg">${shortcut}</kbd>`;
|
||||
};
|
||||
|
||||
export const makeExampleFactory = (application: Editor): Function => {
|
||||
@ -63,13 +63,11 @@ export const makeExampleFactory = (application: Editor): Function => {
|
||||
return `
|
||||
<details ${open ? "open" : ""}>
|
||||
<summary >${description}
|
||||
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-green-700 bg-emerald-600 inline-block" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
|
||||
<button class="py-1 text-base px-4 hover:bg-neutral-600 bg-neutral-500 inline-block " onclick="app.api._stopDocExample()">⏸️ Pause</button>
|
||||
<button class="py-1 text-base px-4 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
|
||||
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-brightgreen bg-green inline-block text-selection_foreground" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
|
||||
<button class="py-1 text-base px-4 hover:brightyellow bg-yellow text-selection_foreground inline-block" onclick="app.api._stopDocExample()">⏸️ Pause</button>
|
||||
<button class="py-1 text-base px-4 hover:bg-brightmagenta bg-magenta text-selection_foreground inline-block" onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
|
||||
</summary>
|
||||
\`\`\`javascript
|
||||
${code}
|
||||
\`\`\`
|
||||
<pre><code class="hljs language-javascript">${code.trim()}</code></pre>
|
||||
</details>
|
||||
`;
|
||||
};
|
||||
@ -93,8 +91,8 @@ export const documentation_factory = (application: Editor) => {
|
||||
linear: linear_time(application),
|
||||
cyclic: cyclical_time(application),
|
||||
longform: long_forms(application),
|
||||
sound: sound(application),
|
||||
synths: synths(application),
|
||||
filters: filters(application),
|
||||
chaining: chaining(application),
|
||||
patterns: patterns(application),
|
||||
ziffers_basics: ziffers_basics(application),
|
||||
@ -102,15 +100,17 @@ export const documentation_factory = (application: Editor) => {
|
||||
ziffers_algorithmic: ziffers_algorithmic(application),
|
||||
ziffers_rhythm: ziffers_rhythm(application),
|
||||
ziffers_tonnetz: ziffers_tonnetz(application),
|
||||
ziffers_syncing: ziffers_syncing(application),
|
||||
midi: midi(application),
|
||||
osc: osc(application),
|
||||
lfos: lfos(application),
|
||||
variables: variables(application),
|
||||
probabilities: probabilities(application),
|
||||
functions: functions(application),
|
||||
generators: generators(application),
|
||||
shortcuts: shortcuts(application),
|
||||
amplitude: amplitude(application),
|
||||
reverb_delay: reverb(application),
|
||||
effects: effects(application),
|
||||
sampler: sampler(application),
|
||||
mouse: mouse(application),
|
||||
oscilloscope: oscilloscope(application),
|
||||
@ -138,13 +138,17 @@ export const showDocumentation = (app: Editor) => {
|
||||
document.getElementById("documentation")?.classList.remove("hidden");
|
||||
// Load and convert Markdown content from the documentation file
|
||||
let style = createDocumentationStyle(app);
|
||||
let bindings = Object.keys(style).map((key) => ({
|
||||
type: "output",
|
||||
regex: new RegExp(`<${key}([^>]*)>`, "g"),
|
||||
//@ts-ignore
|
||||
replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`,
|
||||
}));
|
||||
updateDocumentationContent(app, bindings);
|
||||
|
||||
function update_and_assign(callback: Function) {
|
||||
let bindings = Object.keys(style).map((key) => ({
|
||||
type: "output",
|
||||
regex: new RegExp(`<${key}([^>]*)>`, "g"),
|
||||
//@ts-ignore
|
||||
replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`,
|
||||
}));
|
||||
callback(bindings)
|
||||
}
|
||||
update_and_assign((e: Object) => updateDocumentationContent(app, e));
|
||||
}
|
||||
};
|
||||
|
||||
@ -165,15 +169,31 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
|
||||
* @param app - The editor application.
|
||||
* @param bindings - Additional bindings for the showdown converter.
|
||||
*/
|
||||
let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-brightwhite'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
|
||||
const converter = new showdown.Converter({
|
||||
emoji: true,
|
||||
moreStyling: true,
|
||||
backslashEscapesHTMLTags: true,
|
||||
extensions: [showdownHighlight({ auto_detection: true }), ...bindings],
|
||||
extensions: [showdownHighlight({
|
||||
pre: true,
|
||||
auto_detection: false
|
||||
}), ...bindings],
|
||||
});
|
||||
const converted_markdown = converter.makeHtml(
|
||||
app.docs[app.currentDocumentationPane],
|
||||
);
|
||||
document.getElementById("documentation-content")!.innerHTML =
|
||||
converted_markdown;
|
||||
};
|
||||
console.log(app.currentDocumentationPane);
|
||||
|
||||
function _update_and_assign(callback: Function) {
|
||||
const converted_markdown = converter.makeHtml(
|
||||
app.docs[app.currentDocumentationPane],
|
||||
);
|
||||
callback(converted_markdown)
|
||||
}
|
||||
_update_and_assign((e: string)=> {
|
||||
let display_content = e === undefined ? loading_message : e;
|
||||
document.getElementById("documentation-content")!.innerHTML = display_content;
|
||||
})
|
||||
if (document.getElementById("documentation-content")!.innerHTML.replace(/"/g, "'") == loading_message.replace(/"/g, "'")) {
|
||||
setTimeout(() => {
|
||||
updateDocumentationContent(app, bindings);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
@ -18,6 +18,8 @@ export const singleElements = {
|
||||
load_universe_button: "load-universe-button",
|
||||
download_universe_button: "download-universes",
|
||||
upload_universe_button: "upload-universes",
|
||||
upload_samples_button: "upload-samples",
|
||||
sample_indicator: "sample-indicator",
|
||||
destroy_universes_button: "destroy-universes",
|
||||
documentation_button: "doc-button-1",
|
||||
eval_button: "eval-button-1",
|
||||
@ -43,6 +45,8 @@ export const singleElements = {
|
||||
midi_clock_checkbox: "send-midi-clock",
|
||||
midi_channels_scripts: "midi-channels-scripts",
|
||||
midi_clock_ppqn: "midi-clock-ppqn-input",
|
||||
theme_selector: "theme-selector",
|
||||
theme_previewer: "theme-previewer",
|
||||
load_demo_songs: "load-demo-songs",
|
||||
normal_mode_button: "normal-mode",
|
||||
vim_mode_button: "vim-mode",
|
||||
@ -70,30 +74,30 @@ export const createDocumentationStyle = (app: Editor) => {
|
||||
*/
|
||||
|
||||
return {
|
||||
h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
|
||||
h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
|
||||
h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
|
||||
h1: "text-brightwhite lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
|
||||
h2: "text-brightwhite lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
|
||||
h3: "text-brightwhite lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
|
||||
ul: "text-underline ml-12",
|
||||
li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
|
||||
p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
|
||||
warning:
|
||||
"animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal",
|
||||
a: "lg:text-2xl text-base text-orange-300",
|
||||
"animate-pulse lg:text-2xl font-bold text-brightred lg:mx-6 mx-2 my-4 leading-normal",
|
||||
a: "lg:text-2xl text-base text-white",
|
||||
code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
|
||||
icode:
|
||||
"lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
|
||||
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
|
||||
blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
|
||||
"lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
||||
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
||||
blockquote: "text-brightwhite border-l-4 border-white pl-4 my-4 mx-4",
|
||||
details:
|
||||
"lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-neutral-900",
|
||||
"lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-selection_foreground",
|
||||
summary: "font-semibold text-xl",
|
||||
table:
|
||||
"justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
|
||||
thead:
|
||||
"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
|
||||
"text-xs text-gray-700 uppercase",
|
||||
th: "",
|
||||
td: "",
|
||||
tr: "",
|
||||
box: "border bg-red-500",
|
||||
box: "border bg-red",
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Prec } from "@codemirror/state";
|
||||
import { indentWithTab } from "@codemirror/commands";
|
||||
import { tags as t } from "@lezer/highlight";
|
||||
import {
|
||||
keymap,
|
||||
lineNumbers,
|
||||
@ -7,8 +8,6 @@ import {
|
||||
drawSelection,
|
||||
highlightActiveLine,
|
||||
dropCursor,
|
||||
// rectangularSelection,
|
||||
// crosshairCursor,
|
||||
highlightActiveLineGutter,
|
||||
} from "@codemirror/view";
|
||||
import { Extension, EditorState } from "@codemirror/state";
|
||||
@ -18,6 +17,7 @@ import {
|
||||
syntaxHighlighting,
|
||||
indentOnInput,
|
||||
bracketMatching,
|
||||
HighlightStyle,
|
||||
} from "@codemirror/language";
|
||||
import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
|
||||
import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
|
||||
@ -30,12 +30,215 @@ import { lintKeymap } from "@codemirror/lint";
|
||||
import { Compartment } from "@codemirror/state";
|
||||
import { Editor } from "./main";
|
||||
import { EditorView } from "codemirror";
|
||||
import { toposTheme } from "./themes/toposTheme";
|
||||
import { javascript } from "@codemirror/lang-javascript";
|
||||
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 => {
|
||||
// @ts-ignore
|
||||
const black = theme["black"],
|
||||
red = theme["red"],
|
||||
green = theme["green"],
|
||||
yellow = theme["yellow"],
|
||||
blue = theme["blue"],
|
||||
magenta = theme["magenta"],
|
||||
cyan = theme["cyan"],
|
||||
white = theme["white"],
|
||||
// @ts-ignore
|
||||
brightblack = theme["brightblack"],
|
||||
// @ts-ignore
|
||||
brightred = theme["brightred"],
|
||||
brightgreen = theme["brightgreen"],
|
||||
// @ts-ignore
|
||||
brightyellow = theme["brightyellow"],
|
||||
// @ts-ignore
|
||||
brightblue = theme["brightblue"],
|
||||
// @ts-ignore
|
||||
brightmagenta = theme["brightmagenta"],
|
||||
// @ts-ignore
|
||||
brightcyan = theme["brightcyan"],
|
||||
brightwhite = theme["brightwhite"],
|
||||
background = theme["background"],
|
||||
selection_foreground = theme["selection_foreground"],
|
||||
cursor = theme["cursor"],
|
||||
foreground = theme["foreground"],
|
||||
selection_background = theme["selection_background"];
|
||||
const toposTheme = EditorView.theme( {
|
||||
"&": {
|
||||
color: background,
|
||||
// backgroundColor: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-content": {
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||
{
|
||||
backgroundColor: selection_foreground,
|
||||
border: `0.5px solid ${selection_background}`,
|
||||
},
|
||||
".cm-panels": {
|
||||
backgroundColor: selection_background,
|
||||
color: red,
|
||||
},
|
||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
||||
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
||||
".cm-searchMatch": {
|
||||
outline: `1px solid ${magenta}`,
|
||||
},
|
||||
".cm-searchMatch.cm-searchMatch-selected": {
|
||||
backgroundColor: red,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
// backgroundColor: highlightBackground
|
||||
backgroundColor: `${selection_foreground}`,
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: yellow,
|
||||
outline: `1px solid ${red}`,
|
||||
},
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: yellow,
|
||||
// outline: `1px solid ${base02}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: yellow,
|
||||
},
|
||||
|
||||
".cm-gutters": {
|
||||
//backgroundColor: base00,
|
||||
backgroundColor: "transparent",
|
||||
color: foreground,
|
||||
},
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: selection_background,
|
||||
color: selection_foreground,
|
||||
},
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${blue}`,
|
||||
},
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
backgroundColor: background,
|
||||
},
|
||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||
borderTopColor: background,
|
||||
borderBottomColor: background,
|
||||
},
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: background,
|
||||
color: background,
|
||||
},
|
||||
},
|
||||
},
|
||||
{ dark: true },
|
||||
);
|
||||
|
||||
let toposHighlightStyle = HighlightStyle.define([
|
||||
{ tag: t.paren, color: brightwhite },
|
||||
{ tag: [t.propertyName, t.punctuation, t.variableName], color: brightwhite },
|
||||
{ tag: t.keyword, color: yellow },
|
||||
{ tag: [t.name, t.deleted, t.character, t.macroName], color: red, },
|
||||
{ tag: [t.function(t.variableName)], color: blue },
|
||||
{ tag: [t.labelName], color: red },
|
||||
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: cyan, },
|
||||
{ tag: [t.definition(t.name), t.separator], color: magenta },
|
||||
{ tag: [t.brace], color: white },
|
||||
{ tag: [t.annotation], color: blue, },
|
||||
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: yellow, },
|
||||
{ tag: [t.typeName, t.className], color: magenta, },
|
||||
{ tag: [t.operator, t.operatorKeyword], color: blue, },
|
||||
{ tag: [t.tagName], color: blue, },
|
||||
{ tag: [t.squareBracket], color: blue, },
|
||||
{ tag: [t.angleBracket], color: blue, },
|
||||
{ tag: [t.attributeName], color: red, },
|
||||
{ tag: [t.regexp], color: brightgreen, },
|
||||
{ tag: [t.quote], color: green, },
|
||||
{ tag: [t.string], color: green },
|
||||
{
|
||||
tag: t.link,
|
||||
color: green,
|
||||
textDecoration: "underline",
|
||||
textUnderlinePosition: "under",
|
||||
},
|
||||
{
|
||||
tag: [t.url, t.escape, t.special(t.string)],
|
||||
color: green,
|
||||
},
|
||||
{ tag: [t.meta], color: brightwhite },
|
||||
{ tag: [t.comment], color: brightwhite, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: brightwhite },
|
||||
{ tag: t.strong, fontWeight: "bold", color: white },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: white },
|
||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||
{ tag: t.heading, fontWeight: "bold", color: white },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: white },
|
||||
{
|
||||
tag: [t.heading2, t.heading3, t.heading4],
|
||||
fontWeight: "bold",
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: red,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green},
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: green,
|
||||
},
|
||||
{
|
||||
tag: [t.contentSeparator],
|
||||
color: green,
|
||||
},
|
||||
{ tag: t.invalid, color: red, borderBottom: `1px dotted ${red}` },
|
||||
]);
|
||||
return [ toposTheme, syntaxHighlighting(toposHighlightStyle),
|
||||
]
|
||||
}
|
||||
|
||||
// const debugTheme = EditorView.theme({
|
||||
// ".cm-line span": {
|
||||
// position: "relative",
|
||||
// },
|
||||
// ".cm-line span:hover::after": {
|
||||
// position: "absolute",
|
||||
// bottom: "100%",
|
||||
// left: 0,
|
||||
// background: "black",
|
||||
// color: "white",
|
||||
// border: "solid 2px",
|
||||
// borderRadius: "5px",
|
||||
// content: "var(--tags)",
|
||||
// width: `max-content`,
|
||||
// padding: "1px 4px",
|
||||
// zIndex: 10,
|
||||
// pointerEvents: "none",
|
||||
// },
|
||||
// });
|
||||
|
||||
// const debugHighlightStyle = HighlightStyle.define(
|
||||
// // @ts-ignore
|
||||
// Object.entries(t).map(([key, value]) => {
|
||||
// return { tag: value, "--tags": `"tag.${key}"` };
|
||||
// })
|
||||
// );
|
||||
// const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
|
||||
|
||||
|
||||
export const jsCompletions = javascriptLanguage.data.of({
|
||||
autocomplete: toposCompletions,
|
||||
});
|
||||
@ -70,6 +273,7 @@ export const editorSetup: Extension = (() => [
|
||||
export const installEditor = (app: Editor) => {
|
||||
app.vimModeCompartment = new Compartment();
|
||||
app.hoveringCompartment = new Compartment();
|
||||
app.themeCompartment = new Compartment();
|
||||
app.completionsCompartment = new Compartment();
|
||||
app.withLineNumbers = new Compartment();
|
||||
app.chosenLanguage = new Compartment();
|
||||
@ -99,7 +303,10 @@ export const installEditor = (app: Editor) => {
|
||||
app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
|
||||
),
|
||||
editorSetup,
|
||||
toposTheme,
|
||||
app.themeCompartment.of(
|
||||
getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
|
||||
// debug
|
||||
),
|
||||
app.chosenLanguage.of(javascript()),
|
||||
];
|
||||
app.dynamicPlugins = new Compartment();
|
||||
|
||||
@ -136,7 +136,7 @@ export class AppSettings {
|
||||
*/
|
||||
|
||||
public vimMode: boolean = false;
|
||||
public theme: string = "toposTheme";
|
||||
public theme: string = "Everblush";
|
||||
public font: string = "IBM Plex Mono";
|
||||
public font_size: number = 24;
|
||||
public universes: Universes;
|
||||
|
||||
155
src/IO/SampleLoading.ts
Normal file
155
src/IO/SampleLoading.ts
Normal file
@ -0,0 +1,155 @@
|
||||
/**
|
||||
* This code is taken from https://github.com/tidalcycles/strudel/pull/839. The logic is written by
|
||||
* daslyfe (Jade Rose Rowland). I have tweaked it a bit to fit the needs of this project (TypeScript),
|
||||
* etc... Many thanks for this piece of code! This code is initially part of the Strudel project:
|
||||
* https://github.com/tidalcycles/strudel.
|
||||
*/
|
||||
|
||||
// @ts-ignore
|
||||
import { registerSound, onTriggerSample } from "superdough";
|
||||
|
||||
export const isAudioFile = (filename: string) => ['wav', 'mp3'].includes(filename.split('.').slice(-1)[0]);
|
||||
|
||||
interface samplesDBConfig {
|
||||
dbName: string,
|
||||
table: string,
|
||||
columns: string[],
|
||||
version: number
|
||||
}
|
||||
|
||||
export const samplesDBConfig = {
|
||||
dbName: 'samples',
|
||||
table: 'usersamples',
|
||||
columns: ['data_url', 'title'],
|
||||
version: 1
|
||||
}
|
||||
|
||||
async function bufferToDataUrl(buf: Buffer) {
|
||||
return new Promise((resolve) => {
|
||||
var blob = new Blob([buf], { type: 'application/octet-binary' });
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (event: Event) {
|
||||
// @ts-ignore
|
||||
resolve(event.target.result);
|
||||
};
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
}
|
||||
|
||||
const processFilesForIDB = async (files: FileList) => {
|
||||
return await Promise.all(
|
||||
Array.from(files)
|
||||
.map(async (s: File) => {
|
||||
const title = s.name;
|
||||
if (!isAudioFile(title)) {
|
||||
return;
|
||||
}
|
||||
//create obscured url to file system that can be fetched
|
||||
const sUrl = URL.createObjectURL(s);
|
||||
//fetch the sound and turn it into a buffer array
|
||||
const buf = await fetch(sUrl).then((res) => res.arrayBuffer());
|
||||
//create a url blob containing all of the buffer data
|
||||
// @ts-ignore
|
||||
// TODO: conversion to do here, remove ts-ignore
|
||||
const base64 = await bufferToDataUrl(buf);
|
||||
return {
|
||||
title,
|
||||
blob: base64,
|
||||
id: s.webkitRelativePath,
|
||||
};
|
||||
})
|
||||
.filter(Boolean),
|
||||
).catch((error) => {
|
||||
console.log('Something went wrong while processing uploaded files', error);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export const registerSamplesFromDB = (config: samplesDBConfig, onComplete = () => {}) => {
|
||||
openDB(config, (objectStore: IDBObjectStore) => {
|
||||
let query = objectStore.getAll();
|
||||
query.onsuccess = (event: Event) => {
|
||||
// @ts-ignore
|
||||
const soundFiles = event.target.result;
|
||||
if (!soundFiles?.length) {
|
||||
return;
|
||||
}
|
||||
const sounds = new Map();
|
||||
[...soundFiles]
|
||||
.sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true, sensitivity: 'base' }))
|
||||
.forEach((soundFile) => {
|
||||
const title = soundFile.title;
|
||||
if (!isAudioFile(title)) {
|
||||
return;
|
||||
}
|
||||
const splitRelativePath = soundFile.id?.split('/');
|
||||
const parentDirectory = splitRelativePath[splitRelativePath.length - 2];
|
||||
const soundPath = soundFile.blob;
|
||||
const soundPaths = sounds.get(parentDirectory) ?? new Set();
|
||||
soundPaths.add(soundPath);
|
||||
sounds.set(parentDirectory, soundPaths);
|
||||
});
|
||||
|
||||
sounds.forEach((soundPaths, key) => {
|
||||
const value = Array.from(soundPaths);
|
||||
// @ts-ignore
|
||||
registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
|
||||
type: 'sample',
|
||||
samples: value,
|
||||
baseUrl: undefined,
|
||||
prebake: false,
|
||||
tag: "user",
|
||||
});
|
||||
});
|
||||
onComplete();
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const openDB = (config: samplesDBConfig, onOpened: Function) => {
|
||||
const { dbName, version, table, columns } = config
|
||||
|
||||
if (!('indexedDB' in window)) {
|
||||
console.log('This browser doesn\'t support IndexedDB')
|
||||
return
|
||||
}
|
||||
const dbOpen = indexedDB.open(dbName, version);
|
||||
|
||||
|
||||
dbOpen.onupgradeneeded = (_event) => {
|
||||
const db = dbOpen.result;
|
||||
const objectStore = db.createObjectStore(table, { keyPath: 'id', autoIncrement: false });
|
||||
columns.forEach((c: any) => {
|
||||
objectStore.createIndex(c, c, { unique: false });
|
||||
});
|
||||
};
|
||||
dbOpen.onerror = function (err: Event) {
|
||||
console.log('Error opening DB: ', (err.target as IDBOpenDBRequest).error);
|
||||
}
|
||||
dbOpen.onsuccess = function (_event: Event) {
|
||||
const db = dbOpen.result;
|
||||
db.onversionchange = function() {
|
||||
db.close();
|
||||
alert("Database is outdated, please reload the page.")
|
||||
};
|
||||
const writeTransaction = db.transaction([table], 'readwrite'),
|
||||
objectStore = writeTransaction.objectStore(table);
|
||||
// Writing in the database here!
|
||||
onOpened(objectStore)
|
||||
}
|
||||
}
|
||||
|
||||
export const uploadSamplesToDB = async (config: samplesDBConfig, files: FileList) => {
|
||||
await processFilesForIDB(files).then((files) => {
|
||||
const onOpened = (objectStore: IDBObjectStore, _db: IDBDatabase) => {
|
||||
// @ts-ignore
|
||||
files.forEach((file: File) => {
|
||||
if (file == null) {
|
||||
return;
|
||||
}
|
||||
objectStore.put(file);
|
||||
});
|
||||
};
|
||||
openDB(config, onOpened);
|
||||
});
|
||||
};
|
||||
@ -1,6 +1,7 @@
|
||||
import { EditorView } from "codemirror";
|
||||
import { vim } from "@replit/codemirror-vim";
|
||||
import { type Editor } from "./main";
|
||||
import colors from "./colors.json";
|
||||
import {
|
||||
documentation_factory,
|
||||
hideDocumentation,
|
||||
@ -24,6 +25,7 @@ import { lineNumbers } from "@codemirror/view";
|
||||
import { jsCompletions } from "./EditorSetup";
|
||||
import { createDocumentationStyle } from "./DomElements";
|
||||
import { saveState } from "./WindowBehavior";
|
||||
import { registerSamplesFromDB, samplesDBConfig, uploadSamplesToDB } from "./IO/SampleLoading";
|
||||
|
||||
export const installInterfaceLogic = (app: Editor) => {
|
||||
// Initialize style
|
||||
@ -57,9 +59,11 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
tabs[i].addEventListener("click", (event) => {
|
||||
// Updating the CSS accordingly
|
||||
tabs[i].classList.add("bg-orange-300");
|
||||
tabs[i].classList.add("bg-foreground");
|
||||
tabs[i].classList.add("text-selection_foreground");
|
||||
for (let j = 0; j < tabs.length; j++) {
|
||||
if (j != i) tabs[j].classList.remove("bg-orange-300");
|
||||
if (j != i) tabs[j].classList.remove("bg-foreground");
|
||||
if (j != i) tabs[j].classList.remove("text-selection_foreground");
|
||||
}
|
||||
app.currentFile().candidate = app.view.state.doc.toString();
|
||||
|
||||
@ -156,6 +160,21 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
);
|
||||
});
|
||||
|
||||
app.interface.upload_samples_button.addEventListener("input", async (event) => {
|
||||
let fileInput = event.target as HTMLInputElement;
|
||||
if (!fileInput.files?.length) {
|
||||
return;
|
||||
}
|
||||
app.interface.sample_indicator.innerText = "Loading...";
|
||||
app.interface.sample_indicator.classList.add("animate-pulse");
|
||||
await uploadSamplesToDB(samplesDBConfig, fileInput.files).then(() => {
|
||||
registerSamplesFromDB(samplesDBConfig, () => {
|
||||
app.interface.sample_indicator.innerText = "Import samples";
|
||||
app.interface.sample_indicator.classList.remove("animate-pulse");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
app.interface.upload_universe_button.addEventListener("click", () => {
|
||||
const fileInput = document.createElement("input");
|
||||
fileInput.type = "file";
|
||||
@ -289,6 +308,18 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
});
|
||||
});
|
||||
|
||||
app.interface.theme_selector.addEventListener("change", () => {
|
||||
app.settings.theme = (app.interface.theme_selector as HTMLSelectElement).value;
|
||||
app.readTheme(app.settings.theme);
|
||||
// @ts-ignore
|
||||
let selected_theme = colors[app.settings.theme as string];
|
||||
let theme_preview = "";
|
||||
for (const [key, _] of Object.entries(selected_theme)) {
|
||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</div>`;
|
||||
}
|
||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
||||
});
|
||||
|
||||
app.interface.settings_button.addEventListener("click", () => {
|
||||
// Populate the font selector
|
||||
const fontFamilySelect = document.getElementById(
|
||||
@ -298,6 +329,26 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
fontFamilySelect.value = app.settings.font;
|
||||
}
|
||||
|
||||
app.interface.theme_selector.innerHTML = "";
|
||||
let all_themes = Object.keys(colors);
|
||||
all_themes.sort((a, b) => {
|
||||
return a.toLowerCase().localeCompare(b.toLowerCase());
|
||||
});
|
||||
app.interface.theme_selector.innerHTML = all_themes.map((color) => {
|
||||
return `<option value="${color}">${color}</option>`
|
||||
}).join("");
|
||||
// Set the selected theme in the selector to app.settings.theme
|
||||
// @ts-ignore
|
||||
app.interface.theme_selector.value = app.settings.theme;
|
||||
|
||||
// @ts-ignore
|
||||
let selected_theme = colors[app.settings.theme as string];
|
||||
let theme_preview = "<div class='ml-6'>";
|
||||
for (const [key, _] of Object.entries(selected_theme)) {
|
||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</p>`;
|
||||
}
|
||||
theme_preview += "</div>";
|
||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
||||
// Populate the font family selector
|
||||
const doughNudgeRange = app.interface.dough_nudge_range as HTMLInputElement;
|
||||
doughNudgeRange.value = app.dough_nudge.toString();
|
||||
@ -491,7 +542,8 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
"sampler",
|
||||
"amplitude",
|
||||
"audio_basics",
|
||||
"reverb_delay",
|
||||
"filters",
|
||||
"effects",
|
||||
"interface",
|
||||
"interaction",
|
||||
"code",
|
||||
@ -507,9 +559,11 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
"ziffers_rhythm",
|
||||
"ziffers_algorithmic",
|
||||
"ziffers_tonnetz",
|
||||
"ziffers_syncing",
|
||||
"midi",
|
||||
"osc",
|
||||
"functions",
|
||||
"generators",
|
||||
"lfos",
|
||||
"probabilities",
|
||||
"variables",
|
||||
@ -523,18 +577,25 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
"loading_samples",
|
||||
].forEach((e) => {
|
||||
let name = `docs_` + e;
|
||||
document.getElementById(name)!.addEventListener("click", async () => {
|
||||
if (name !== "docs_sample_list") {
|
||||
app.currentDocumentationPane = e;
|
||||
updateDocumentationContent(app, bindings);
|
||||
} else {
|
||||
console.log("Loading samples!");
|
||||
await loadSamples().then(() => {
|
||||
app.docs = documentation_factory(app);
|
||||
|
||||
// Check if the element exists
|
||||
let element = document.getElementById(name);
|
||||
if (element) {
|
||||
element.addEventListener("click", async () => {
|
||||
if (name !== "docs_sample_list") {
|
||||
app.currentDocumentationPane = e;
|
||||
updateDocumentationContent(app, bindings);
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("Loading samples!");
|
||||
await loadSamples().then(() => {
|
||||
app.docs = documentation_factory(app);
|
||||
app.currentDocumentationPane = e;
|
||||
updateDocumentationContent(app, bindings);
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("Could not find element " + name);
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
@ -109,6 +109,15 @@ export const registerOnKeyDown = (app: Editor) => {
|
||||
app.flashBackground("#404040", 200);
|
||||
}
|
||||
|
||||
// Force eval with clearing cache
|
||||
if (event.ctrlKey && event.shiftKey && (event.key === "Backspace" || event.key === "Delete")) {
|
||||
event.preventDefault();
|
||||
app.api.clearPatternCache();
|
||||
app.currentFile().candidate = app.view.state.doc.toString();
|
||||
tryEvaluate(app, app.currentFile());
|
||||
app.flashBackground("#404040", 200);
|
||||
}
|
||||
|
||||
// app is the modal to switch between universes
|
||||
if (event.ctrlKey && event.key === "b") {
|
||||
event.preventDefault();
|
||||
|
||||
@ -87,4 +87,6 @@ export function filterObject(
|
||||
}
|
||||
|
||||
export const GeneratorType = (function*(){yield undefined;}).constructor;
|
||||
export const GeneratorIteratorType = (function*(){yield undefined;}).prototype.constructor;
|
||||
export const GeneratorIteratorType = (function*(){yield undefined;}).prototype.constructor;
|
||||
export const isGenerator = (v:any) => Object.prototype.toString.call(v) === '[object Generator]';
|
||||
export const isGeneratorFunction = (v:any) => Object.prototype.toString.call(v) === '[object GeneratorFunction]';
|
||||
@ -8,6 +8,8 @@ import {
|
||||
} from "zifferjs";
|
||||
import { SkipEvent } from "./SkipEvent";
|
||||
import { SoundParams } from "./SoundEvent";
|
||||
import { centsToSemitones, edoToSemitones, ratiosToSemitones } from "zifferjs/src/scale";
|
||||
import { safeMod } from "zifferjs/src/utils";
|
||||
|
||||
export type EventOperation<T> = (instance: T, ...args: any[]) => void;
|
||||
|
||||
@ -209,9 +211,14 @@ export class AbstractEvent {
|
||||
* @param func - The function to be applied to the Event
|
||||
* @returns The transformed Event
|
||||
*/
|
||||
return this.modify(func);
|
||||
return this.modify(func).update();
|
||||
};
|
||||
|
||||
mod = (value: number): AbstractEvent => {
|
||||
this.values.originalPitch = safeMod(this.values.originalPitch, value);
|
||||
return this.update();
|
||||
}
|
||||
|
||||
noteLength = (
|
||||
value: number | number[],
|
||||
...kwargs: number[]
|
||||
@ -294,8 +301,9 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
|
||||
}
|
||||
this.values["pitch"] = value;
|
||||
if (this.values.key && this.values.parsedScale) this.update();
|
||||
return this;
|
||||
this.values["originalPitch"] = value;
|
||||
this.defaultPitchKeyScale();
|
||||
return this.update();
|
||||
};
|
||||
|
||||
pc = this.pitch;
|
||||
@ -309,13 +317,15 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
if (kwargs.length > 0) {
|
||||
value = Array.isArray(value) ? value.concat(kwargs) : [value, ...kwargs];
|
||||
}
|
||||
this.values["octave"] = value;
|
||||
this.values["paramOctave"] = value;
|
||||
if (
|
||||
this.values.key &&
|
||||
(this.values.pitch || this.values.pitch === 0) &&
|
||||
this.values.parsedScale
|
||||
)
|
||||
this.update();
|
||||
) {
|
||||
return this.update();
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
@ -332,11 +342,19 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
if (
|
||||
(this.values.pitch || this.values.pitch === 0) &&
|
||||
this.values.parsedScale
|
||||
)
|
||||
this.update();
|
||||
) {
|
||||
return this.update();
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
defaultPitchKeyScale() {
|
||||
if (!this.values.key) this.values.key = 60;
|
||||
if (!(this.values.pitch || this.values.pitch === 0)) this.values.pitch = 0;
|
||||
if (!this.values.parsedScale) this.values.parsedScale = safeScale("major");
|
||||
}
|
||||
|
||||
scale = (
|
||||
value: string | number | (number | string)[],
|
||||
...kwargs: (string | number)[]
|
||||
@ -354,12 +372,38 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
} else if (Array.isArray(value)) {
|
||||
this.values.parsedScale = value.map((v) => safeScale(v));
|
||||
}
|
||||
if (this.values.key && (this.values.pitch || this.values.pitch === 0)) {
|
||||
this.update();
|
||||
}
|
||||
return this;
|
||||
this.defaultPitchKeyScale();
|
||||
return this.update();
|
||||
};
|
||||
|
||||
semitones(values: number|number[], ...rest: number[]) {
|
||||
const scaleValues = typeof values === "number" ? [values, ...rest] : values;
|
||||
this.values.parsedScale = safeScale(scaleValues);
|
||||
this.defaultPitchKeyScale();
|
||||
return this.update();
|
||||
}
|
||||
steps = this.semitones;
|
||||
|
||||
cents(values: number|number[], ...rest: number[]) {
|
||||
const scaleValues = typeof values === "number" ? [values, ...rest] : values;
|
||||
this.values.parsedScale = safeScale(centsToSemitones(scaleValues));
|
||||
this.defaultPitchKeyScale();
|
||||
return this.update();
|
||||
}
|
||||
|
||||
ratios(values: number|number[], ...rest: number[]) {
|
||||
const scaleValues = typeof values === "number" ? [values, ...rest] : values;
|
||||
this.values.parsedScale = safeScale(ratiosToSemitones(scaleValues));
|
||||
this.defaultPitchKeyScale();
|
||||
return this.update();
|
||||
}
|
||||
|
||||
edo(value: number, intervals: string|number[] = new Array(value).fill(1)) {
|
||||
this.values.parsedScale = edoToSemitones(value, intervals);
|
||||
this.defaultPitchKeyScale();
|
||||
return this.update();
|
||||
}
|
||||
|
||||
protected updateValue<T>(key: string, value: T | T[] | null): this {
|
||||
if (value == null) return this;
|
||||
this.values[key] = value;
|
||||
@ -391,6 +435,7 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
};
|
||||
|
||||
public invert = (howMany: number = 0) => {
|
||||
if(howMany === 0) return this;
|
||||
if (this.values.note) {
|
||||
let notes = [...this.values.note];
|
||||
notes = howMany < 0 ? [...notes].reverse() : notes;
|
||||
@ -403,6 +448,25 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
}
|
||||
};
|
||||
|
||||
public log = (key: string|string[], ...args: string[]) => {
|
||||
/*
|
||||
* Log values from values using log()
|
||||
*
|
||||
* @param key - The key(s) to log
|
||||
* @returns this and logs the values
|
||||
*/
|
||||
if (typeof key === "string") {
|
||||
if(args && args.length > 0) {
|
||||
this.app.api.log([key, ...args].map((k) => this.values[k]));
|
||||
} else {
|
||||
this.app.api.log(this.values[key]);
|
||||
}
|
||||
} else {
|
||||
this.app.api.log([...key, ...args].map((k) => this.values[k]));
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
freq = (value: number | number[], ...kwargs: number[]): this => {
|
||||
/*
|
||||
* This function is used to set the frequency of the Event.
|
||||
@ -438,7 +502,13 @@ export abstract class AudibleEvent extends AbstractEvent {
|
||||
return this;
|
||||
};
|
||||
|
||||
update = (): void => {
|
||||
update = (): this => {
|
||||
// Overwrite in subclasses
|
||||
return this;
|
||||
};
|
||||
|
||||
cue = (functionName: string|Function): this => {
|
||||
this.app.api.cue(functionName);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { AudibleEvent } from "./AbstractEvents";
|
||||
import { type Editor } from "../main";
|
||||
import { MidiConnection } from "../IO/MidiConnection";
|
||||
import { noteFromPc } from "zifferjs";
|
||||
import { resolvePitchClass } from "zifferjs";
|
||||
import {
|
||||
filterObject,
|
||||
arrayOfObjectsToObjectWithArrays,
|
||||
@ -66,8 +66,7 @@ export class MidiEvent extends AudibleEvent {
|
||||
return funcResult;
|
||||
} else {
|
||||
func(this.values);
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
}
|
||||
};
|
||||
|
||||
@ -83,34 +82,36 @@ export class MidiEvent extends AudibleEvent {
|
||||
return this;
|
||||
};
|
||||
|
||||
update = (): void => {
|
||||
// Get key, pitch, parsedScale and octave from this.values object
|
||||
update = (): this => {
|
||||
const filteredValues = filterObject(this.values, [
|
||||
"key",
|
||||
"pitch",
|
||||
"originalPitch",
|
||||
"parsedScale",
|
||||
"octave",
|
||||
"addedOctave"
|
||||
]);
|
||||
|
||||
const events = objectWithArraysToArrayOfObjects(filteredValues, [
|
||||
"parsedScale",
|
||||
]);
|
||||
|
||||
events.forEach((event) => {
|
||||
const [note, bend] = noteFromPc(
|
||||
(event.key as number) || "C4",
|
||||
(event.pitch as number) || 0,
|
||||
(event.parsedScale as number[]) || event.scale || "MAJOR",
|
||||
(event.octave as number) || 0,
|
||||
events.forEach((soundEvent) => {
|
||||
const resolvedPitchClass = resolvePitchClass(
|
||||
(soundEvent.key || "C4"),
|
||||
(soundEvent.originalPitch || soundEvent.pitch || 0),
|
||||
(soundEvent.parsedScale || soundEvent.scale || "MAJOR"),
|
||||
(soundEvent.addedOctave || 0)
|
||||
);
|
||||
event.note = note;
|
||||
if (bend) event.bend = bend;
|
||||
soundEvent.note = resolvedPitchClass.note;
|
||||
soundEvent.pitch = resolvedPitchClass.pitch;
|
||||
soundEvent.octave = resolvedPitchClass.octave;
|
||||
});
|
||||
|
||||
const newArrays = arrayOfObjectsToObjectWithArrays(events) as MidiParams;
|
||||
|
||||
|
||||
this.values.note = newArrays.note;
|
||||
if (newArrays.bend) this.values.bend = newArrays.bend;
|
||||
return this;
|
||||
};
|
||||
|
||||
out = (): void => {
|
||||
|
||||
@ -6,7 +6,7 @@ import {
|
||||
arrayOfObjectsToObjectWithArrays,
|
||||
objectWithArraysToArrayOfObjects,
|
||||
} from "../Utils/Generic";
|
||||
import { midiToFreq, noteFromPc } from "zifferjs";
|
||||
import { midiToFreq, resolvePitchClass } from "zifferjs";
|
||||
|
||||
import {
|
||||
superdough,
|
||||
@ -22,10 +22,13 @@ export type SoundParams = {
|
||||
note?: number | number[];
|
||||
freq?: number | number[];
|
||||
pitch?: number | number[];
|
||||
originalPitch?: number | number[];
|
||||
key?: string;
|
||||
scale?: string;
|
||||
parsedScale?: number[];
|
||||
octave?: number | number[];
|
||||
addedOctave?: number | number[];
|
||||
pitchOctave?: number | number[];
|
||||
};
|
||||
|
||||
export class SoundEvent extends AudibleEvent {
|
||||
@ -311,7 +314,7 @@ export class SoundEvent extends AudibleEvent {
|
||||
self.updateValue("roomsize", value);
|
||||
return self;
|
||||
},
|
||||
comp: ["compressor", "cmp"],
|
||||
comp: ["comp","compressor", "cmp"],
|
||||
ratio: function (self: SoundEvent, value: number) {
|
||||
self.updateValue("compressorRatio", value);
|
||||
return self;
|
||||
@ -378,36 +381,44 @@ export class SoundEvent extends AudibleEvent {
|
||||
if (funcResult instanceof Object) return funcResult;
|
||||
else {
|
||||
func(this.values);
|
||||
this.update();
|
||||
return this;
|
||||
return this.update();
|
||||
}
|
||||
};
|
||||
|
||||
update = (): void => {
|
||||
update = (): this => {
|
||||
const filteredValues = filterObject(this.values, [
|
||||
"key",
|
||||
"pitch",
|
||||
"originalPitch",
|
||||
"parsedScale",
|
||||
"addedOctave",
|
||||
"octave",
|
||||
"paramOctave"
|
||||
]);
|
||||
const events = objectWithArraysToArrayOfObjects(filteredValues, [
|
||||
"parsedScale",
|
||||
]);
|
||||
events.forEach((event) => {
|
||||
const [note, _] = noteFromPc(
|
||||
(event.key as number) || "C4",
|
||||
(event.pitch as number) || 0,
|
||||
(event.parsedScale as number[]) || event.scale || "MAJOR",
|
||||
(event.octave as number) || 0,
|
||||
events.forEach((soundEvent) => {
|
||||
const resolvedPitchClass = resolvePitchClass(
|
||||
(soundEvent.key || "C4"),
|
||||
(soundEvent.originalPitch || soundEvent.pitch || 0),
|
||||
(soundEvent.parsedScale || soundEvent.scale || "MAJOR"),
|
||||
(soundEvent.paramOctave || 0)+(soundEvent.addedOctave || 0)
|
||||
);
|
||||
event.note = note;
|
||||
event.freq = midiToFreq(note);
|
||||
soundEvent.note = resolvedPitchClass.note;
|
||||
soundEvent.freq = midiToFreq(resolvedPitchClass.note);
|
||||
soundEvent.pitch = resolvedPitchClass.pitch;
|
||||
soundEvent.octave = resolvedPitchClass.octave;
|
||||
});
|
||||
|
||||
const newArrays = arrayOfObjectsToObjectWithArrays(events) as SoundParams;
|
||||
|
||||
this.values.note = newArrays.note;
|
||||
this.values.freq = newArrays.freq;
|
||||
this.values.pitch = newArrays.pitch;
|
||||
this.values.octave = newArrays.octave;
|
||||
this.values.pitchOctave = newArrays.pitchOctave;
|
||||
return this;
|
||||
};
|
||||
|
||||
out = (orbit?: number | number[]): void => {
|
||||
|
||||
@ -5,7 +5,7 @@ import { SkipEvent } from "./SkipEvent";
|
||||
import { SoundEvent, SoundParams } from "./SoundEvent";
|
||||
import { MidiEvent, MidiParams } from "./MidiEvent";
|
||||
import { RestEvent } from "./RestEvent";
|
||||
import { GeneratorIteratorType, GeneratorType, arrayOfObjectsToObjectWithArrays } from "../Utils/Generic";
|
||||
import { arrayOfObjectsToObjectWithArrays, isGenerator } from "../Utils/Generic";
|
||||
import { TonnetzSpaces } from "zifferjs/src/tonnetz";
|
||||
|
||||
export type InputOptions = { [key: string]: string | number };
|
||||
@ -17,6 +17,7 @@ export class Player extends AbstractEvent {
|
||||
startCallTime: number = 0;
|
||||
lastCallTime: number = 0;
|
||||
waitTime = 0;
|
||||
cueName: string|undefined = undefined;
|
||||
played: boolean = false;
|
||||
current!: Pitch | Chord | ZRest;
|
||||
retro: boolean = false;
|
||||
@ -39,7 +40,7 @@ export class Player extends AbstractEvent {
|
||||
} else if (typeof input === "number") {
|
||||
this.input = input;
|
||||
this.ziffers = Ziffers.fromNumber(input, options);
|
||||
} else if (input.constructor === GeneratorType || input.constructor === GeneratorIteratorType){
|
||||
} else if (isGenerator(input)) {
|
||||
this.ziffers = Ziffers.fromGenerator(input, options);
|
||||
this.input = this.ziffers.input;
|
||||
} else {
|
||||
@ -48,6 +49,10 @@ export class Player extends AbstractEvent {
|
||||
this.zid = zid;
|
||||
}
|
||||
|
||||
isValid() {
|
||||
return this.ziffers.values.length > 0;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.initCallTime = 0;
|
||||
this.startCallTime = 0;
|
||||
@ -127,11 +132,13 @@ export class Player extends AbstractEvent {
|
||||
|
||||
const patternIsStarting =
|
||||
this.notStarted() &&
|
||||
(this.pulse() === 0 || this.origin() >= this.nextBeatInTicks()) &&
|
||||
this.origin() >= this.waitTime;
|
||||
this.waitTime >= 0 &&
|
||||
this.origin() >= this.waitTime &&
|
||||
(this.pulse() === 0 || this.origin() >= this.nextBeatInTicks());
|
||||
|
||||
const timeToPlayNext =
|
||||
this.current &&
|
||||
this.waitTime >= 0 &&
|
||||
this.pulseToSecond(this.origin()) >=
|
||||
this.pulseToSecond(this.lastCallTime) +
|
||||
this.pulseToSecond(this.current.duration * 4 * this.app.clock.ppqn) &&
|
||||
@ -157,8 +164,19 @@ export class Player extends AbstractEvent {
|
||||
return areWeThereYet;
|
||||
};
|
||||
|
||||
checkCue() {
|
||||
if(this.ziffers.atLast()) {
|
||||
if(this.cueName && this.app.api.cueTimes[this.cueName]) {
|
||||
delete this.app.api.cueTimes[this.cueName];
|
||||
this.cueName = undefined;
|
||||
this.waitTime = -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sound(name?: string | string[] | SoundParams | SoundParams[]) {
|
||||
if (this.areWeThereYet()) {
|
||||
this.checkCue();
|
||||
const event = this.next() as Pitch | Chord | ZRest;
|
||||
const noteLengthInSeconds = this.app.clock.convertPulseToSecond(
|
||||
event.duration * 4 * this.app.clock.ppqn,
|
||||
@ -168,9 +186,12 @@ export class Player extends AbstractEvent {
|
||||
"freq",
|
||||
"note",
|
||||
"pitch",
|
||||
"originalPitch",
|
||||
"key",
|
||||
"scale",
|
||||
"octave",
|
||||
"pitchOctave",
|
||||
"addedOctave",
|
||||
"parsedScale",
|
||||
) as SoundParams;
|
||||
|
||||
@ -187,9 +208,12 @@ export class Player extends AbstractEvent {
|
||||
"freq",
|
||||
"note",
|
||||
"pitch",
|
||||
"originalPitch",
|
||||
"key",
|
||||
"scale",
|
||||
"octave",
|
||||
"pitchOctave",
|
||||
"addedOctave",
|
||||
"parsedScale",
|
||||
);
|
||||
}) as SoundParams[];
|
||||
@ -213,14 +237,18 @@ export class Player extends AbstractEvent {
|
||||
|
||||
midi(value: number | undefined = undefined) {
|
||||
if (this.areWeThereYet()) {
|
||||
this.checkCue();
|
||||
const event = this.next() as Pitch | Chord | ZRest;
|
||||
const obj = event.getExisting(
|
||||
"note",
|
||||
"pitch",
|
||||
"originalPitch",
|
||||
"bend",
|
||||
"key",
|
||||
"scale",
|
||||
"octave",
|
||||
"pitchOctave",
|
||||
"addedOctave",
|
||||
"parsedScale",
|
||||
) as MidiParams;
|
||||
if (event instanceof Pitch) {
|
||||
@ -239,11 +267,34 @@ export class Player extends AbstractEvent {
|
||||
}
|
||||
}
|
||||
|
||||
scale(name: string) {
|
||||
scale(name: string|number[]) {
|
||||
if (this.atTheBeginning()) this.ziffers.scale(name);
|
||||
return this;
|
||||
}
|
||||
|
||||
semitones(values: number|number[], ...rest: number[]) {
|
||||
values = typeof values === "number" ? [values, ...rest] : values;
|
||||
if (this.atTheBeginning()) this.ziffers.semitones(values);
|
||||
return this;
|
||||
}
|
||||
|
||||
cents(values: number|number[], ...rest: number[]) {
|
||||
values = typeof values === "number" ? [values, ...rest] : values;
|
||||
if (this.atTheBeginning()) this.ziffers.cents(values);
|
||||
return this;
|
||||
}
|
||||
|
||||
ratios(values: number|number[], ...rest: number[]) {
|
||||
values = typeof values === "number" ? [values, ...rest] : values;
|
||||
if (this.atTheBeginning()) this.ziffers.ratios(values);
|
||||
return this;
|
||||
}
|
||||
|
||||
edo(value: number, scale: string|number[] = new Array(value).fill(1)) {
|
||||
if (this.atTheBeginning()) this.ziffers.edo(value, scale);
|
||||
return this;
|
||||
}
|
||||
|
||||
key(name: string) {
|
||||
if (this.atTheBeginning()) this.ziffers.key(name);
|
||||
return this;
|
||||
@ -270,18 +321,18 @@ export class Player extends AbstractEvent {
|
||||
return this;
|
||||
}
|
||||
|
||||
octaCycle(tonnetz: TonnetzSpaces = [3, 4, 5]) {
|
||||
if (this.atTheBeginning()) this.ziffers.octaCycle(tonnetz);
|
||||
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]) {
|
||||
if (this.atTheBeginning()) this.ziffers.hexaCycle(tonnetz);
|
||||
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]) {
|
||||
if (this.atTheBeginning()) this.ziffers.enneaCycle(tonnetz);
|
||||
enneaCycle(tonnetz: TonnetzSpaces = [3, 4, 5], repeats: number = 3) {
|
||||
if (this.atTheBeginning()) this.ziffers.enneaCycle(tonnetz, repeats);
|
||||
return this;
|
||||
}
|
||||
|
||||
@ -315,25 +366,65 @@ export class Player extends AbstractEvent {
|
||||
return this;
|
||||
}
|
||||
|
||||
wait(value: number | Function) {
|
||||
listen(value: string) {
|
||||
if(typeof value === "string") {
|
||||
const cueTime = this.app.api.cueTimes[value];
|
||||
this.cueName = value;
|
||||
if(cueTime && this.app.clock.pulses_since_origin <= cueTime) {
|
||||
this.waitTime = cueTime;
|
||||
} else {
|
||||
this.waitTime = -1;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
wait(value: number | string | Function) {
|
||||
|
||||
if(typeof value === "string") {
|
||||
const cueTime = this.app.api.cueTimes[value];
|
||||
this.cueName = value;
|
||||
if(cueTime && this.app.clock.pulses_since_origin <= cueTime) {
|
||||
this.waitTime = cueTime;
|
||||
} else if(this.atTheBeginning()){
|
||||
this.waitTime = -1;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
if (this.atTheBeginning()) {
|
||||
if (typeof value === "function") {
|
||||
const refPat = this.app.api.patternCache.get(value.name) as Player;
|
||||
if (refPat) this.waitTime = refPat.nextEndTime();
|
||||
return this;
|
||||
} else if(typeof value === "number") {
|
||||
this.waitTime =
|
||||
this.origin() + Math.ceil(value * 4 * this.app.clock.ppqn);
|
||||
return this;
|
||||
}
|
||||
this.waitTime =
|
||||
this.origin() + Math.ceil(value * 4 * this.app.clock.ppqn);
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
sync(value: string | Function) {
|
||||
sync(value: string | Function, manualSync: boolean = true) {
|
||||
|
||||
if(typeof value === "string") {
|
||||
if(manualSync) {
|
||||
const cueTime = this.app.api.cueTimes[value];
|
||||
if(cueTime) {
|
||||
this.waitTime = cueTime;
|
||||
} else {
|
||||
this.waitTime = -1;
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
if (this.atTheBeginning() && this.notStarted()) {
|
||||
const origin = this.app.clock.pulses_since_origin;
|
||||
const syncId = typeof value === "function" ? value.name : value;
|
||||
if (origin > 0) {
|
||||
const syncPattern = this.app.api.patternCache.get(syncId) as Player;
|
||||
const syncPattern = this.app.api.patternCache.get(value.name) as Player;
|
||||
if (syncPattern) {
|
||||
const syncPatternDuration = syncPattern.ziffers.duration;
|
||||
const syncPatternStart = syncPattern.startCallTime;
|
||||
@ -345,6 +436,13 @@ export class Player extends AbstractEvent {
|
||||
return this;
|
||||
}
|
||||
|
||||
log(key: string, ...args: string[]) {
|
||||
this.app.api.log(this.ziffers.evaluated.map((p) => {
|
||||
return Object.values(p.getExisting(...[key,...args]));
|
||||
}).join(" "));
|
||||
return this;
|
||||
}
|
||||
|
||||
out = (): void => {
|
||||
// TODO?
|
||||
};
|
||||
|
||||
7181
src/colors.json
Normal file
7181
src/colors.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
|
||||
// @ts-ignore
|
||||
export const interaction = (application: Editor): string => {
|
||||
@ -49,6 +49,9 @@ Topos is made to be controlled entirely with a keyboard. It is recommanded to st
|
||||
|Force Eval|${key_shortcut(
|
||||
"Ctrl + Shift + Enter",
|
||||
)}|Force evaluation of the current script|
|
||||
|Clear cache & Eval|${key_shortcut(
|
||||
"Ctrl + Shift + Backspace (Delete)",
|
||||
)}|Clears cache and forces evaluation to update cached scripts|
|
||||
|
||||
### Special
|
||||
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
|
||||
export const sound = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
return `
|
||||
|
||||
|
||||
## Sample Controls
|
||||
|
||||
There are some basic controls over the playback of each sample. This allows you to get into more serious sampling if you take the time to really work with your audio materials.
|
||||
|
||||
| Method | Alias | Description |
|
||||
|---------|-------|--------------------------------------------------------|
|
||||
| <ic>n</ic> | | Select a sample in the current folder (from <ic>0</ic> to infinity) |
|
||||
| <ic>begin</ic> | | Beginning of the sample playback (between <ic>0</ic> and <ic>1</ic>) |
|
||||
| <ic>end</ic> | | End of the sample (between <ic>0</ic> and <ic>1</ic>) |
|
||||
| <ic>loopBegin</ic> | | Beginning of the loop section (between <ic>0</ic> and <ic>1</ic>) |
|
||||
| <ic>loopEnd</ic> | | End of the loop section (between <ic>0</ic> and <ic>1</ic>) |
|
||||
| <ic>loop</ic> | | Whether to loop or not the audio sample |
|
||||
| <ic>stretch</ic> | | Stretches the audio playback rate of a sample over <ic>n</ic> beats |
|
||||
| <ic>speed</ic> | | Playback speed (<ic>2</ic> = twice as fast) |
|
||||
| <ic>cut</ic> | | Set with <ic>0</ic> or <ic>1</ic>. Will cut the sample as soon as another sample is played on the same bus |
|
||||
| <ic>clip</ic> | | Multiply the duration of the sample with the given number |
|
||||
| <ic>pan</ic> | | Stereo position of the audio playback (<ic>0</ic> = left, <ic>1</ic> = right)|
|
||||
|
||||
${makeExample(
|
||||
"Complex sampling duties",
|
||||
`
|
||||
// Using some of the modifiers described above :)
|
||||
beat(.5)::snd('pad').begin(0.2)
|
||||
.speed([1, 0.9, 0.8].beat(4))
|
||||
.n(2).pan(usine(.5))
|
||||
.end(rand(0.3,0.8))
|
||||
.room(0.8).size(0.5)
|
||||
.clip(1).out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
${makeExample(
|
||||
"Playing an amen break",
|
||||
`
|
||||
// Note that stretch has the same value as beat
|
||||
beat(4) :: sound('amen1').n(11).stretch(4).out()
|
||||
beat(1) :: sound('kick').shape(0.35).out()`,
|
||||
true,
|
||||
)};
|
||||
|
||||
|
||||
## Filters
|
||||
|
||||
There are three basic filters: a _lowpass_, _highpass_ and _bandpass_ filters with rather soft slope. Each of them can take up to two arguments. You can also use only the _cutoff_ frequency and the resonance will stay to its default nominal value. You will learn more about the usage of filters in the synths page!
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-------|-----------------------------------------|
|
||||
| <ic>cutoff</ic> | lpf | Cutoff frequency of the lowpass filter |
|
||||
| <ic>resonance</ic> | lpq | Resonance of the lowpass filter |
|
||||
| <ic>hcutoff</ic> | hpf | Cutoff frequency of the highpass filter |
|
||||
| <ic>hresonance</ic> | hpq | Resonance of the highpass filter |
|
||||
| <ic>bandf</ic> | bpf | Cutoff frequency of the bandpass filter |
|
||||
| <ic>bandq</ic> | bpq | Resonance of the bandpass filter |
|
||||
| <ic>vowel</ic> | | Formant filter with (vocal quality) |
|
||||
|
||||
${makeExample(
|
||||
"Filter sweep using a low frequency oscillator",
|
||||
`
|
||||
beat(.5) && snd('sawtooth')
|
||||
.cutoff([2000,500].pick() + usine(.5) * 4000)
|
||||
.resonance(0.9).freq([100,150].pick())
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
|
||||
## Compression
|
||||
|
||||
This effect is leveraging the basic WebAudio compressor. More information can be found about it on the [DynamicsCompressorNode](https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode?retiredLocale=de#instance_properties) page. This can be come quite complex :)
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>comp</ic> | cmp | Compressor threshold value (dB) over which compressor operates |
|
||||
| <ic>ratio</ic> | rt | Compressor ratio: input amount in dB needed for 1dB change in the output |
|
||||
| <ic>knee</ic> | kn | dB value defining the range over which the signal transitions to compressed section |
|
||||
| <ic>compAttack</ic> | cmpa | In seconds, time to decrease the gain by 10db |
|
||||
| <ic>compRelease</ic> | cmpr | In seconds, time to increase the gain by 10db |
|
||||
|
||||
|
||||
`;
|
||||
};
|
||||
@ -898,12 +898,6 @@ const completionDatabase: CompletionDatabase = {
|
||||
description: "Detects if the Alt key is pressed",
|
||||
example: "fill() ? 1 : 0.5",
|
||||
},
|
||||
comp: {
|
||||
name: "comp",
|
||||
category: "synthesis",
|
||||
description: "Compressor threshold (dB)",
|
||||
example: "sound('sine').comp(-4).out()",
|
||||
},
|
||||
ratio: {
|
||||
name: "ratio",
|
||||
category: "synthesis",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const amplitude = (application: Editor): string => {
|
||||
// @ts-ignore
|
||||
@ -33,42 +33,43 @@ beat(.5)::snd('cp').vel($(1)%10 / 10).out()`,
|
||||
| <ic>decay</ic> | dec | Decay value (time to decay to sustain level) |
|
||||
| <ic>sustain</ic> | sus | Sustain value (gain when sound is held) |
|
||||
| <ic>release</ic> | rel | Release value (time for the sound to die off) |
|
||||
| <ic>adsr</ic> | | Shortcut that combines all the parameters together |
|
||||
|
||||
Note that the **sustain** value is not a duration but an amplitude value (how loud). The other values are the time for each stage to take place. Here is a fairly complete example using the <ic>sawtooth</ic> basic waveform.
|
||||
|
||||
${makeExample(
|
||||
"Simple synthesizer",
|
||||
`
|
||||
let smooth = (sound) => {
|
||||
return sound.cutoff(r(100,500))
|
||||
.lpadsr(usaw(1/8) * 8, 0.05, .125, 0, 0)
|
||||
.gain(r(0.25, 0.4)).adsr(0, r(.2,.4), r(0,0.5), 0)
|
||||
.room(0.9).size(2).o(2).vib(r(2,8)).vibmod(0.125)
|
||||
}
|
||||
beat(.25)::smooth(sound('sawtooth')
|
||||
.note([50,57,55,60].beat(1))).out();
|
||||
beat(.25)::smooth(sound('sawtooth')
|
||||
.note([50,57,55,60].add(12).beat(1.5))).out();
|
||||
register("smooth", x => x.cutoff(r(100,500))
|
||||
.lpadsr(usaw(1/8) * 8, 0.05, .125, 0, 0)
|
||||
.gain(r(0.25, 0.4)).adsr(0, r(.2,.4), r(0,0.5), 0)
|
||||
.room(0.9).size(2).o(2).vib(r(2,8)).vibmod(0.125))
|
||||
beat(.25)::sound('sawtooth')
|
||||
.note([50,57,55,60].beat(1))
|
||||
.smooth().out();
|
||||
beat(.25)::sound('sawtooth')
|
||||
.note([50,57,55,60].add(12).beat(1.5))
|
||||
.smooth().out();
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
|
||||
Sometimes, using a full ADSR envelope is a bit overkill. There are other simpler controls to manipulate the envelope like the <ic>.ad</ic> method:
|
||||
|
||||
|
||||
${makeExample(
|
||||
"Replacing .adsr by .ad",
|
||||
`
|
||||
let smooth = (sound) => {
|
||||
return sound.cutoff(r(100,500))
|
||||
.lpadsr(usaw(1/8) * 8, 0.05, .125, 0, 0)
|
||||
.gain(r(0.25, 0.4)).ad(0, .25)
|
||||
.room(0.9).size(2).o(2).vib(r(2,8)).vibmod(0.125)
|
||||
}
|
||||
beat(.25)::smooth(sound('sawtooth')
|
||||
.note([50,57,55,60].beat(1))).out();
|
||||
beat(.25)::smooth(sound('sawtooth')
|
||||
.note([50,57,55,60].add(12).beat(1.5))).out();
|
||||
register("smooth", x => x.cutoff(r(100,500))
|
||||
.lpadsr(usaw(1/8) * 8, 0.05, .125, 0, 0)
|
||||
.gain(r(0.25, 0.4)).ad(0, 0.25)
|
||||
.room(0.9).size(2).o(2).vib(r(2,8)).vibmod(0.125))
|
||||
beat(.25)::sound('sawtooth')
|
||||
.note([50,57,55,60].beat(1))
|
||||
.smooth().out();
|
||||
beat(.25)::sound('sawtooth')
|
||||
.note([50,57,55,60].add(12).beat(1.5))
|
||||
.smooth().out();
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const audio_basics = (application: Editor): string => {
|
||||
// @ts-ignore
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const distortion = (application: Editor): string => {
|
||||
// @ts-ignore
|
||||
@ -1,7 +1,7 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const reverb = (application: Editor): string => {
|
||||
export const effects = (application: Editor): string => {
|
||||
// @ts-ignore
|
||||
const makeExample = makeExampleFactory(application);
|
||||
return `
|
||||
@ -90,5 +90,34 @@ beat(.5)::snd('pad').crush([16, 8, 4].beat(2)).clip(.5).out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
## Vibrato
|
||||
|
||||
You can also add some amount of vibrato to the sound using the <ic>vib</ic> and <ic>vibmod</ic> methods. These can turn any oscillator into something more lively and/or into a sound effect when used with a high amount of modulation.
|
||||
|
||||
${makeExample(
|
||||
"Different vibrato settings",
|
||||
`
|
||||
tempo(140);
|
||||
beat(1) :: sound('triangle')
|
||||
.freq(400).release(0.2)
|
||||
.vib([1/2, 1, 2, 4].beat())
|
||||
.vibmod([1,2,4,8].beat(2))
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Compression
|
||||
|
||||
This effect is leveraging the basic WebAudio compressor. More information can be found about it on the [DynamicsCompressorNode](https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode?retiredLocale=de#instance_properties) page. This can be come quite complex :)
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>comp</ic> | cmp | Compressor threshold value (dB) over which compressor operates |
|
||||
| <ic>ratio</ic> | rt | Compressor ratio: input amount in dB needed for 1dB change in the output |
|
||||
| <ic>knee</ic> | kn | dB value defining the range over which the signal transitions to compressed section |
|
||||
| <ic>compAttack</ic> | cmpa | In seconds, time to decrease the gain by 10db |
|
||||
| <ic>compRelease</ic> | cmpr | In seconds, time to increase the gain by 10db |
|
||||
|
||||
`;
|
||||
};
|
||||
145
src/documentation/learning/audio_engine/filters.ts
Normal file
145
src/documentation/learning/audio_engine/filters.ts
Normal file
@ -0,0 +1,145 @@
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const filters = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
return `
|
||||
# Filters
|
||||
|
||||
Filters can be applied to both synthesizers and samples. They are used to shape the sound by removing or emphasizing certain frequencies. They are also used to create movement in the sound by modulating the cutoff frequency of the filter over time.
|
||||
|
||||
- **lowpass filter**: filters the high frequencies, keeping the low frequencies.
|
||||
- **highpass filter**: filtering the low frequencies, keeping the high frequencies.
|
||||
- **bandpass filter**: filters the low and high frequencies around a frequency band, keeping what's in the middle.
|
||||
|
||||
${makeExample(
|
||||
"Filtering the high frequencies of an oscillator",
|
||||
`beat(.5) :: sound('sawtooth').cutoff(50 + usine(1/8) * 2000).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
These filters all come with their own set of parameters. Note that we are describing the parameters of the three different filter types here. Choose the right parameters depending on the filter type you are using:
|
||||
|
||||
|
||||
### Lowpass filter
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>cutoff</ic> | <ic>lpf</ic> | cutoff frequency of the lowpass filter |
|
||||
| <ic>resonance</ic> | <ic>lpq</ic> | resonance of the lowpass filter (0-1) |
|
||||
|
||||
${makeExample(
|
||||
"Filtering a bass",
|
||||
`beat(.5) :: sound('jvbass').lpf([250,1000,8000].beat()).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
### Highpass filter
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>hcutoff</ic> | <ic>hpf</ic> | cutoff frequency of the highpass filter |
|
||||
| <ic>hresonance</ic> | <ic>hpq</ic> | resonance of the highpass filter (0-1) |
|
||||
|
||||
${makeExample(
|
||||
"Filtering a noise source",
|
||||
`beat(.5) :: sound('gtr').hpf([250,1000, 2000, 3000, 4000].beat()).end(0.5).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
### Bandpass filter
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>bandf</ic> | <ic>bpf</ic> | cutoff frequency of the bandpass filter |
|
||||
| <ic>bandq</ic> | <ic>bpq</ic> | resonance of the bandpass filter (0-1) |
|
||||
|
||||
${makeExample(
|
||||
"Sweeping the filter on the same guitar sample",
|
||||
`beat(.5) :: sound('gtr').bandf(100 + usine(1/8) * 4000).end(0.5).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
Alternatively, <ic>lpf</ic>, <ic>hpf</ic> and <ic>bpf</ic> can take a second argument, the **resonance**.
|
||||
|
||||
## Filter order (type)
|
||||
|
||||
You can also use the <ic>ftype</ic> method to change the filter type (order). There are two types by default, <ic>12db</ic> for a gentle slope or <ic>24db</ic> for a really steep filtering slope. The <ic>24db</ic> type is particularly useful for substractive synthesis if you are trying to emulate some of the Moog or Prophet sounds:
|
||||
|
||||
- <ic>ftype(type: string)</ic>: sets the filter type (order), either <ic>12db</ic> or <ic>24db</ic>.
|
||||
|
||||
${makeExample(
|
||||
"Filtering a bass",
|
||||
`beat(.5) :: sound('jvbass').ftype(['12db', '24db'].beat(4)).lpf([250,1000,8000].beat()).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Filter envelopes
|
||||
|
||||
The examples we have studied so far are static. They filter the sound around a fixed cutoff frequency. To make the sound more interesting, you can use the ADSR filter envelopes to shape the filter cutoff frequency over time. You will always find amplitude and filter envelopes on most commercial synthesizers. This is done using the following methods:
|
||||
|
||||
### Lowpass envelope
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>lpenv</ic> | <ic>lpe</ic> | lowpass frequency modulation amount (negative or positive) |
|
||||
| <ic>lpattack</ic> | <ic>lpa</ic> | attack of the lowpass filter |
|
||||
| <ic>lpdecay</ic> | <ic>lpd</ic> | decay of the lowpass filter |
|
||||
| <ic>lpsustain</ic> | <ic>lps</ic> | sustain of the lowpass filter |
|
||||
| <ic>lprelease</ic> | <ic>lpr</ic> | release of the lowpass filter |
|
||||
| <ic>lpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
||||
|
||||
|
||||
${makeExample(
|
||||
"Filtering a sawtooth wave dynamically",
|
||||
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
||||
.cutoff(5000).lpa([0.05, 0.25, 0.5].beat(2))
|
||||
.lpenv(-8).lpq(10).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
### Highpass envelope
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>hpenv</ic> | <ic>hpe</ic> | highpass frequency modulation amount (negative or positive) |
|
||||
| <ic>hpattack</ic> | <ic>hpa</ic> | attack of the highpass filter |
|
||||
| <ic>hpdecay</ic> | <ic>hpd</ic> | decay of the highpass filter |
|
||||
| <ic>hpsustain</ic> | <ic>hps</ic> | sustain of the highpass filter |
|
||||
| <ic>hprelease</ic> | <ic>hpr</ic> | release of the highpass filter |
|
||||
| <ic>hpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
||||
|
||||
|
||||
${makeExample(
|
||||
"Let's use another filter using the same example",
|
||||
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
||||
.hcutoff(1000).hpa([0.05, 0.25, 0.5].beat(2))
|
||||
.hpenv(8).hpq(10).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
### Bandpass envelope
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>bpenv</ic> | <ic>bpe</ic> | bandpass frequency modulation amount (negative or positive) |
|
||||
| <ic>bpattack</ic> | <ic>bpa</ic> | attack of the bandpass filter |
|
||||
| <ic>bpdecay</ic> | <ic>bpd</ic> | decay of the bandpass filter |
|
||||
| <ic>bpsustain</ic> | <ic>bps</ic> | sustain of the bandpass filter |
|
||||
| <ic>bprelease</ic> | <ic>bpr</ic> | release of the bandpass filter |
|
||||
| <ic>bpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
||||
|
||||
|
||||
${makeExample(
|
||||
"And the bandpass filter, just for fun",
|
||||
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
||||
.bandf([500,1000,2000].beat(2))
|
||||
.bpa([0.25, 0.125, 0.5].beat(2) * 4)
|
||||
.bpenv(-4).release(2).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
|
||||
`;
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const sampler = (application: Editor): string => {
|
||||
// @ts-ignore
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const synths = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
@ -22,7 +22,6 @@ beat(.5) && snd(['sine', 'triangle', 'sawtooth', 'square'].beat()).freq(100).out
|
||||
|
||||
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",
|
||||
`
|
||||
@ -69,43 +68,9 @@ ${makeExample(
|
||||
beat(.5) && snd('triangle').chord(60,64,67,72).invert([1,-3,4,-5].pick()).adsr(0,.2).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Vibrato
|
||||
|
||||
You can also add some amount of vibrato to the sound using the <ic>vib</ic> and <ic>vibmod</ic> methods. These can turn any oscillator into something more lively and/or into a sound effect when used with a high amount of modulation.
|
||||
|
||||
${makeExample(
|
||||
"Different vibrato settings",
|
||||
`
|
||||
tempo(140);
|
||||
beat(1) :: sound('triangle')
|
||||
.freq(400).release(0.2)
|
||||
.vib([1/2, 1, 2, 4].beat())
|
||||
.vibmod([1,2,4,8].beat(2))
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Noise
|
||||
|
||||
A certain amount of brown noise can be added by using the <ic>.noise</ic> key:
|
||||
|
||||
${makeExample(
|
||||
"Different vibrato settings",
|
||||
`
|
||||
tempo(140);
|
||||
beat(1) :: sound('triangle')
|
||||
.freq(400).release(0.2)
|
||||
.noise([0.2,0.4,0.5].bar())
|
||||
.vib([1/2, 1, 2, 4].beat())
|
||||
.vibmod([1,2,4,8].beat(2))
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
|
||||
## Controlling the amplitude
|
||||
# Controlling amplitude
|
||||
|
||||
Controlling the amplitude and duration of the sound can be done using various techniques. The most important thing to learn is probably how set the amplitude (volume) of your synthesizer:
|
||||
- <ic>gain(gain: number)</ic>: sets the gain of the oscillator.
|
||||
@ -123,6 +88,8 @@ ${makeExample(
|
||||
true,
|
||||
)}
|
||||
|
||||
## Envelopes
|
||||
|
||||
<div class="mt-4 mb-4 lg:grid lg:grid-cols-4 lg:gap-4">
|
||||
<img class="col-span-1 lg:ml-12 bg-gray-100 rounded-lg px-2 py-2", src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/ADSR_Envelope_Graph.svg/1280px-ADSR_Envelope_Graph.svg.png" width="400" />
|
||||
<z class="pl-8 lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal col-span-3 ">Synthesizers typically come with an amplitude envelope that can help you to shape the sound with a slow attack or long release. This is done in Topos using the amplitude envelope, composed of four parameters: <ic>attack</ic>, <ic>decay</ic>, <ic>sustain</ic> and <ic>release</ic>:</z>
|
||||
@ -178,9 +145,7 @@ beat(0.5) :: sound('wt_piano')
|
||||
|
||||
The most basic synthesis technique used since the 1970s is called substractive synthesis. This technique is based on the use of rich sound sources (oscillators) as a base to build rich and moving timbres. Because rich sources contain a lot of different harmonics, you might want to filter some of them to obtain the timbre you are looking for. To do so, Topos comes with a set of basic filters that can be used to shape the sound exactly to your liking. There are three filter types by defaut, with more to be added in the future:
|
||||
|
||||
- **lowpass filter**: filters the high frequencies, keeping the low frequencies.
|
||||
- **highpass filter**: filtering the low frequencies, keeping the high frequencies.
|
||||
- **bandpass filter**: filters the low and high frequencies around a frequency band, keeping what's in the middle.
|
||||
See the Filters page for details on lowpass, highpass and bandpass filters. I also encourage you to study these simple examples to get more familiar with the construction of basic substractive synthesizers:
|
||||
|
||||
${makeExample(
|
||||
"Filtering the high frequencies of an oscillator",
|
||||
@ -188,64 +153,6 @@ ${makeExample(
|
||||
true,
|
||||
)}
|
||||
|
||||
These filters all come with their own set of parameters. Note that we are describing the parameters of the three different filter types here. Choose the right parameters depending on the filter type you are using:
|
||||
|
||||
|
||||
### Lowpass filter
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>cutoff</ic> | <ic>lpf</ic> | cutoff frequency of the lowpass filter |
|
||||
| <ic>resonance</ic> | <ic>lpq</ic> | resonance of the lowpass filter (0-1) |
|
||||
|
||||
${makeExample(
|
||||
"Filtering a bass",
|
||||
`beat(.5) :: sound('jvbass').lpf([250,1000,8000].beat()).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
### Highpass filter
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>hcutoff</ic> | <ic>hpf</ic> | cutoff frequency of the highpass filter |
|
||||
| <ic>hresonance</ic> | <ic>hpq</ic> | resonance of the highpass filter (0-1) |
|
||||
|
||||
${makeExample(
|
||||
"Filtering a noise source",
|
||||
`beat(.5) :: sound('gtr').hpf([250,1000, 2000, 3000, 4000].beat()).end(0.5).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
### Bandpass filter
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>bandf</ic> | <ic>bpf</ic> | cutoff frequency of the bandpass filter |
|
||||
| <ic>bandq</ic> | <ic>bpq</ic> | resonance of the bandpass filter (0-1) |
|
||||
|
||||
${makeExample(
|
||||
"Sweeping the filter on the same guitar sample",
|
||||
`beat(.5) :: sound('gtr').bandf(100 + usine(1/8) * 4000).end(0.5).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
Alternatively, <ic>lpf</ic>, <ic>hpf</ic> and <ic>bpf</ic> can take a second argument, the **resonance**.
|
||||
|
||||
## Filter order (type)
|
||||
|
||||
You can also use the <ic>ftype</ic> method to change the filter type (order). There are two types by default, <ic>12db</ic> for a gentle slope or <ic>24db</ic> for a really steep filtering slope. The <ic>24db</ic> type is particularly useful for substractive synthesis if you are trying to emulate some of the Moog or Prophet sounds:
|
||||
|
||||
- <ic>ftype(type: string)</ic>: sets the filter type (order), either <ic>12db</ic> or <ic>24db</ic>.
|
||||
|
||||
${makeExample(
|
||||
"Filtering a bass",
|
||||
`beat(.5) :: sound('jvbass').ftype(['12db', '24db'].beat(4)).lpf([250,1000,8000].beat()).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
I also encourage you to study these simple examples to get more familiar with the construction of basic substractive synthesizers:
|
||||
|
||||
${makeExample(
|
||||
"Simple synthesizer voice with filter",
|
||||
`
|
||||
@ -282,73 +189,23 @@ beat(1/8)::sound('sine')
|
||||
false,
|
||||
)}
|
||||
|
||||
## Filter envelopes
|
||||
|
||||
The examples we have studied so far are static. They filter the sound around a fixed cutoff frequency. To make the sound more interesting, you can use the ADSR filter envelopes to shape the filter cutoff frequency over time. You will always find amplitude and filter envelopes on most commercial synthesizers. This is done using the following methods:
|
||||
|
||||
### Lowpass envelope
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>lpenv</ic> | <ic>lpe</ic> | lowpass frequency modulation amount (negative or positive) |
|
||||
| <ic>lpattack</ic> | <ic>lpa</ic> | attack of the lowpass filter |
|
||||
| <ic>lpdecay</ic> | <ic>lpd</ic> | decay of the lowpass filter |
|
||||
| <ic>lpsustain</ic> | <ic>lps</ic> | sustain of the lowpass filter |
|
||||
| <ic>lprelease</ic> | <ic>lpr</ic> | release of the lowpass filter |
|
||||
| <ic>lpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
||||
## Noise
|
||||
|
||||
A certain amount of brown noise can be added by using the <ic>.noise</ic> key:
|
||||
|
||||
${makeExample(
|
||||
"Filtering a sawtooth wave dynamically",
|
||||
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
||||
.cutoff(5000).lpa([0.05, 0.25, 0.5].beat(2))
|
||||
.lpenv(-8).lpq(10).out()`,
|
||||
"Different vibrato settings",
|
||||
`
|
||||
tempo(140);
|
||||
beat(1) :: sound('triangle')
|
||||
.freq(400).release(0.2)
|
||||
.noise([0.2,0.4,0.5].bar())
|
||||
.vib([1/2, 1, 2, 4].beat())
|
||||
.vibmod([1,2,4,8].beat(2))
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
### Highpass envelope
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>hpenv</ic> | <ic>hpe</ic> | highpass frequency modulation amount (negative or positive) |
|
||||
| <ic>hpattack</ic> | <ic>hpa</ic> | attack of the highpass filter |
|
||||
| <ic>hpdecay</ic> | <ic>hpd</ic> | decay of the highpass filter |
|
||||
| <ic>hpsustain</ic> | <ic>hps</ic> | sustain of the highpass filter |
|
||||
| <ic>hprelease</ic> | <ic>hpr</ic> | release of the highpass filter |
|
||||
| <ic>hpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
||||
|
||||
|
||||
${makeExample(
|
||||
"Let's use another filter using the same example",
|
||||
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
||||
.hcutoff(1000).hpa([0.05, 0.25, 0.5].beat(2))
|
||||
.hpenv(8).hpq(10).out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
### Bandpass envelope
|
||||
|
||||
| Method | Alias | Description |
|
||||
|------------|-----------|---------------------------------|
|
||||
| <ic>bpenv</ic> | <ic>bpe</ic> | bandpass frequency modulation amount (negative or positive) |
|
||||
| <ic>bpattack</ic> | <ic>bpa</ic> | attack of the bandpass filter |
|
||||
| <ic>bpdecay</ic> | <ic>bpd</ic> | decay of the bandpass filter |
|
||||
| <ic>bpsustain</ic> | <ic>bps</ic> | sustain of the bandpass filter |
|
||||
| <ic>bprelease</ic> | <ic>bpr</ic> | release of the bandpass filter |
|
||||
| <ic>bpadsr</ic> | | (**takes five arguments**) set all the parameters |
|
||||
|
||||
|
||||
${makeExample(
|
||||
"And the bandpass filter, just for fun",
|
||||
`beat(.5) :: sound('sawtooth').note([48,60].beat())
|
||||
.bandf([500,1000,2000].beat(2))
|
||||
.bpa([0.25, 0.125, 0.5].beat(2) * 4)
|
||||
.bpenv(-4).release(2).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
|
||||
## Wavetable synthesis
|
||||
|
||||
Topos can also do wavetable synthesis. Wavetable synthesis allows you to use any sound file as a source to build an oscillator. By default, Topos comes with more than 1000 waveforms thanks to the awesome [AKWF](https://www.adventurekid.se/akrt/waveforms/adventure-kid-waveforms/) pack made by Kristoffer Ekstrand. Any sample name that contains <ic>wt_</ic> as a prefix will be interpreted by the sampler as a wavetable and thus as an oscillator. See for yourself:
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory, key_shortcut } from "../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory, key_shortcut } from "../../Documentation";
|
||||
|
||||
export const midi = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
|
||||
export const osc = (application: Editor): string => {
|
||||
// @ts-ignore
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const loading_samples = (application: Editor): string => {
|
||||
// @ts-ignore
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const sample_banks = (application: Editor): string => {
|
||||
// @ts-ignore
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const samples_to_markdown = (
|
||||
application: Editor,
|
||||
@ -32,7 +32,7 @@ export const samples_to_markdown = (
|
||||
|
||||
markdownList += `
|
||||
<button
|
||||
class="hover:bg-neutral-500 inline px-4 py-2 bg-neutral-700 text-orange-300 text-xl"
|
||||
class="hover:bg-foreground inline px-4 py-2 bg-black text-brightwhite hover:text-background text-xl"
|
||||
onclick="app.api._playDocExampleOnce(app.api.codeExamples['${codeId}'])"
|
||||
>
|
||||
${keys[i]}
|
||||
@ -75,7 +75,7 @@ beat(0.5)::sound('wt_stereo').n([0, 1].pick()).ad(0, .25).out()
|
||||
|
||||
Pick one folder and spend some time exploring it. There is a lot of different waveforms.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Waveforms")}
|
||||
</div>
|
||||
|
||||
@ -94,7 +94,7 @@ beat(0.5)::sound(['bd', 'cp'].pick()).bank("AkaiLinn").out()
|
||||
Here is the complete list of available machines:
|
||||
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Machines")}
|
||||
</div>
|
||||
|
||||
@ -102,7 +102,7 @@ ${samples_to_markdown(application, "Machines")}
|
||||
|
||||
The default sample pack used by Ryan Kirkbride's [FoxDot](https://github.com/Qirky/FoxDot). It is a nice curated sample pack that covers all the basic sounds you could want.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "FoxDot")}
|
||||
</div>
|
||||
|
||||
@ -110,7 +110,7 @@ ${samples_to_markdown(application, "FoxDot")}
|
||||
|
||||
This set of audio samples is taken from [this wonderful collection](https://archive.org/details/AmigaSoundtrackerSamplePacksst-xx) of **Ultimate Tracker Amiga samples**. They were initially made by Karsten Obarski. These files were processed: pitched down one octave, gain down 6db. The audio has been processed with [SoX](https://github.com/chirlu/sox). The script used to do so is also included in this repository.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Amiga")}
|
||||
</div>
|
||||
|
||||
@ -128,7 +128,7 @@ beat(4)::sound('amen1').stretch(4).out()
|
||||
|
||||
The stretch should be adapted based on the length of each amen break.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Amen")}
|
||||
</div>
|
||||
|
||||
@ -137,7 +137,7 @@ ${samples_to_markdown(application, "Amen")}
|
||||
Many live coders are expecting to find the Tidal sample library wherever they go, so here it is :)
|
||||
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Tidal")}
|
||||
</div>
|
||||
|
||||
@ -145,8 +145,16 @@ ${samples_to_markdown(application, "Tidal")}
|
||||
|
||||
This sample pack is only one folder full of french phonems! It sounds super nice.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Juliette")}
|
||||
</div>
|
||||
|
||||
## Your samples
|
||||
|
||||
These samples are the one you have loaded for the duration of the session using the <ic>Import Samples</ic> button in the configuration menu.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "user")}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const cyclical_time = (app: Editor): string => {
|
||||
// @ts-ignore
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
import pulses from "./pulses.svg";
|
||||
|
||||
export const linear_time = (app: Editor): string => {
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const long_forms = (app: Editor): string => {
|
||||
// @ts-ignore
|
||||
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
@ -1,5 +1,5 @@
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
import { type Editor } from "../../../main";
|
||||
import times from "./times.svg";
|
||||
|
||||
export const time = (application: Editor): string => {
|
||||
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
@ -9,6 +9,24 @@ export const bonus = (application: Editor): string => {
|
||||
|
||||
Some features have been included as a bonus. These features are often about patterning over things that are not directly related to sound: pictures, video, etc.
|
||||
|
||||
## Editor theme configuration
|
||||
|
||||
The editor theme can be changed using the <ic>theme</ic> and <ic>randomTheme</ic> functions. The following example will use a random color scheme for every beat:
|
||||
|
||||
${makeExample(
|
||||
"Random theme on each beat",
|
||||
`
|
||||
beat(1)::randomTheme()
|
||||
`, true)}
|
||||
|
||||
You can also pick a theme using the <ic>theme</ic> function with a string as only argument:
|
||||
|
||||
${makeExample(
|
||||
"Picking a theme",
|
||||
`
|
||||
beat(1)::theme("Batman")
|
||||
`, true)}
|
||||
|
||||
## Hydra Visual Live Coding
|
||||
|
||||
<div class="mx-12 bg-neutral-600 rounded-lg flex flex-col items-center justify-center">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
|
||||
export const chaining = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
@ -54,6 +54,25 @@ rhythm(.25, [6, 8].beat(), 12)::sound('sine')
|
||||
true,
|
||||
)}
|
||||
|
||||
## Logging values from the chain
|
||||
|
||||
You can use the <ic>log()</ic> function to print values from the current event. This can be useful to debug your code. Useful parameters to log could be **note**, **pitch**, **dur**, **octave** etc...
|
||||
|
||||
${makeExample(
|
||||
"Logging values from the chain",
|
||||
`
|
||||
beat(1) :: sound("sine").pitch(rI(1,6)).log("note").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Logging values from ziffers pattern",
|
||||
`
|
||||
z1("0 3 2 5").scale("rocritonic").sound("sine").log("pitch","note","key").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Conditional chaining
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
|
||||
export const functions = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
119
src/documentation/patterns/generators.ts
Normal file
119
src/documentation/patterns/generators.ts
Normal file
@ -0,0 +1,119 @@
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
|
||||
export const generators = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
return `
|
||||
# Generator functions
|
||||
|
||||
JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator" target="_blank">generators</a> are powerful functions for generating value sequences. They can be used to generate melodies, rhythms or control parameters.
|
||||
|
||||
In Topos generator functions should be called using the <ic>cache(key, function)</ic> function to store the current state of the generator. This function takes two arguments: the name for the cache and the generator instance.
|
||||
|
||||
Once the generator is cached the values will be returned from the named cache even if the generator function is modified. To clear the current cache and to re-evaluate the modified generator use the **Shift+Ctrl+Backspace** shortcut. Alternatively you can cache the modified generator using a different name.
|
||||
|
||||
The resulted values can be played using either <ic>pitch()</ic> or <ic>freq()</ic> or as Ziffers patterns. When playing the values using <ic>pitch()</ic> different scales and chained methods can be used to alter the result, for example <ic>mod(value: number)</ic> to limit the integer range or <ic>scale(name: string)</ic> etc. to change the resulting note.
|
||||
|
||||
${makeExample(
|
||||
"Simple looping generator function",
|
||||
`
|
||||
function* simple() {
|
||||
let x = 0;
|
||||
while (x < 12) {
|
||||
yield x+x;
|
||||
x+=1;
|
||||
}
|
||||
}
|
||||
|
||||
beat(.25) && sound("triangle").pitch(cache("simple",simple())).scale("minor").out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
${makeExample(
|
||||
"Infinite frequency generator",
|
||||
`
|
||||
function* poly(x=0) {
|
||||
while (true) {
|
||||
const s = Math.tan(x/10)+Math.sin(x/20);
|
||||
yield 2 * Math.pow(s, 3) - 6 * Math.pow(s, 2) + 5 * s + 200;
|
||||
x++;
|
||||
}
|
||||
}
|
||||
|
||||
beat(.125) && sound("triangle").freq(cache("mathyshit",poly())).out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
${makeExample(
|
||||
"Truly scale free chaos inspired by Lorentz attractor",
|
||||
`
|
||||
function* strange(x = 0.1, y = 0, z = 0, rho = 28, beta = 8 / 3, zeta = 10) {
|
||||
while (true) {
|
||||
const dx = 10 * (y - x);
|
||||
const dy = x * (rho - z) - y;
|
||||
const dz = x * y - beta * z;
|
||||
|
||||
x += dx * 0.01;
|
||||
y += dy * 0.01;
|
||||
z += dz * 0.01;
|
||||
|
||||
const value = 300 + 30 * (Math.sin(x) + Math.tan(y) + Math.cos(z))
|
||||
yield value;
|
||||
}
|
||||
}
|
||||
|
||||
beat(0.25) :: sound("triangle")
|
||||
.freq(cache("stranger",strange(3,5,2)))
|
||||
.adsr(.15,.1,.1,.1)
|
||||
.log("freq").out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
## OEIS integer sequences
|
||||
|
||||
To find some inspiration - or to enter into the void - one can visit <a href="https://oeis.org/" target="_blank">The On-Line Encyclopedia of Integer Sequences (OEIS)</a> to find some interesting integer sequences.
|
||||
|
||||
Many of the sequences are implemented by <a href="https://github.com/acerix/jisg/tree/main/src/oeis" target="_blank">JISG</a> (Javascript Integer Sequence Generators) project. Those sequences can be referenced directly with the identifiers using the cache function.
|
||||
|
||||
One of these implemented generators is the Inventory sequence <a href="https://github.com/acerix/jisg/blob/main/src/oeis/A342585.ts" target="_blank">A342585</a> made famous by <a href="https://www.youtube.com/watch?v=rBU9E-ZOZAI" target="_blank">Neil Sloane</a>.
|
||||
|
||||
${makeExample(
|
||||
"Inventory sequence",
|
||||
`
|
||||
rhythm(0.5,[8,7,5,6].bar(4),9) :: sound("triangle")
|
||||
.pitch(cache("Inventory",A342585))
|
||||
.mod(11).scale("minor")
|
||||
.adsr(.25,.05,.5,.5)
|
||||
.room(2.0).size(0.5)
|
||||
.gain(1).out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
## Using generators with Ziffers
|
||||
|
||||
Alternatively generators can be used with Ziffers to generate longer patterns. In this case the generator function should be passed as an argument to the ziffers function. Ziffers patterns are cached separately so there is no need for using **cache()** function. Ziffers expects values from the generators to be integers or strings in ziffers syntax.
|
||||
|
||||
${makeExample(
|
||||
"Ziffers patterns using a generator functions",
|
||||
`
|
||||
function* poly(x) {
|
||||
while (true) {
|
||||
yield 64 * Math.pow(x, 6) - 480 * Math.pow(x, 4) + 720 * Math.pow(x, 2);
|
||||
x++;
|
||||
}
|
||||
}
|
||||
|
||||
z0(poly(1)).noteLength(0.5).semitones(2,2,3,2,2,2).sound("sine").out()
|
||||
z1(poly(8)).noteLength(0.25).semitones(2,1,2,1,2,2).sound("sine").out()
|
||||
z2(poly(-3)).noteLength(1.0).semitones(2,2,2,1,3,2).sound("sine").out()
|
||||
`,
|
||||
true,
|
||||
)};
|
||||
|
||||
|
||||
`
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
|
||||
export const lfos = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
|
||||
export const patterns = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
@ -122,7 +122,6 @@ beat(1)::sound(['kick', 'fsnare'].dur(3, 1))
|
||||
|
||||
## Manipulating notes and scales
|
||||
|
||||
|
||||
- <ic>pitch()</ic>: convert a list of integers to pitch classes
|
||||
|
||||
${makeExample(
|
||||
@ -136,7 +135,62 @@ beat(0.25) :: snd('sine')
|
||||
true,
|
||||
)}
|
||||
|
||||
- <ic>scale(scale: string, base note: number)</ic>: Map each element of the list to the closest note of the slected scale. [0, 2, 3, 5 ].scale("major", 50) returns [50, 52, <ic>54</ic>, 55]. You can use western scale names like (Major, Minor, Minor pentatonic ...) or [zeitler](https://ianring.com/musictheory/scales/traditions/zeitler) scale names. Alternatively you can also use the integers as used by Ian Ring in his [study of scales](https://ianring.com/musictheory/scales/).
|
||||
- <ic>semitones(number[], ...args?)</ic>: Create scale from semitone intervals.
|
||||
|
||||
${makeExample(
|
||||
"Play pitches from scale created from semitone intervals",
|
||||
`
|
||||
beat(1) :: sound('gtr').pitch([0, 4, 3, 2].beat()).key(64)
|
||||
.semitones(1, 1, 3, 1, 1, 2, 3).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
- <ic>cents(number[], ...args?)</ic>: Create scale from cent intervals.
|
||||
|
||||
${makeExample(
|
||||
"Play pitches from scale created from cent intervals",
|
||||
`
|
||||
rhythm([0.5,0.25].beat(1),14,16) :: sound('pluck')
|
||||
.stretch(r(1,5)).pitch(r(0,6)).key(57)
|
||||
.cents(120,270,540,670,785,950,1215).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
- <ic>ratios(number[], ...args?)</ic>: Create scale from ratios.
|
||||
|
||||
${makeExample(
|
||||
"Play pitches from scale created from ratios",
|
||||
`
|
||||
rhythm([0.5,0.25].beat(0.25),5,7) :: sound('east:3')
|
||||
.pitch([0,1,2,3,4,5,6,7,8,9,10,11].beat(0.25)).key(67)
|
||||
.ratios(2/11,4/11,6/11,8/11,10/11,11/11).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
- <ic>edo(number, scale?: string|number[])</ic>: Create scale from equal divisions of the octave. Creates chromatic scale by default.
|
||||
|
||||
${makeExample(
|
||||
"Play pitches from scale created from equal divisions of the octave",
|
||||
`
|
||||
z0("e bd bd <bd bd [bd bd] [bd bd bd bd]>").sound().out()
|
||||
flipbar(1) :: rhythm(.25,14,16) :: sound("ST10:30").stretch(3).gain(0.5)
|
||||
.pitch([0,10,r(20,40),r(100,200),r(-200,200),r(200,300),200,r(3,666)].beat([1.0,0.5,0.25].bar(6)))
|
||||
.octave(r(-6,6))
|
||||
.edo(666,"rocritonic")
|
||||
.out()
|
||||
rhythm(2.0,26,32) :: sound("ST20").n([22,5,24,34,31,5,11,19].pick()).stretch(rI(1,6))
|
||||
.pitch(rI(127,300))
|
||||
.edo(666)
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
|
||||
- <ic>scale(scale: string, base note: number)</ic>: Map each element of the list to the closest note of the slected scale. [0, 2, 3, 5 ].scale("major", 50) returns [50, 52, <ic>54</ic>, 55]. You can use western scale names like (Major, Minor, Minor pentatonic ...) or [zeitler](https://ianring.com/musictheory/scales/traditions/zeitler) scale names. Alternatively you can also use the integers as used by Ian Ring in his [study of scales](https://ianring.com/musictheory/scales/).
|
||||
|
||||
${makeExample(
|
||||
"Mapping the note array to the E3 major scale",
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
|
||||
export const probabilities = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
@ -1,5 +1,5 @@
|
||||
import { type Editor } from "../main";
|
||||
import { makeExampleFactory } from "../Documentation";
|
||||
import { type Editor } from "../../main";
|
||||
import { makeExampleFactory } from "../../Documentation";
|
||||
|
||||
export const variables = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
@ -15,7 +15,7 @@ export const ziffers_algorithmic = (application: Editor): string => {
|
||||
`
|
||||
z1("1/8 _ 0 (0 1 3)+(1 2) 0 (2 3 5)-(1 2)").sound('sine')
|
||||
.scale('pentatonic').fmi([0.25,0.5].beat(2)).fmh([2,4].beat(2))
|
||||
.room(0.9).size(0.9).sustain(0.1).delay(0.5).delay(0.125)
|
||||
.room(0.9).size(0.9).sustain(0.1).delay(0.125)
|
||||
.delayfb(0.25).out();
|
||||
`,
|
||||
true,
|
||||
@ -24,9 +24,11 @@ export const ziffers_algorithmic = (application: Editor): string => {
|
||||
${makeExample(
|
||||
"List operations",
|
||||
`
|
||||
z1('q (0 3 1 5)+(2 5) e (0 5 2)*(2 3) (0 5 2)>>(2 3) (0 5 2)%(2 3)').sound('sine')
|
||||
.scale("Bebop major")
|
||||
.out()
|
||||
z1('q (0 3 1 5)+(2 5) e (0 5 2)*(2 1) (0 5 2)%(2 3)')
|
||||
.sound('sine')
|
||||
.room(.5).size(1.0).adsr(.15,.15,.25,.1)
|
||||
.scale("Bebop major")
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
@ -45,18 +47,39 @@ export const ziffers_algorithmic = (application: Editor): string => {
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Variables
|
||||
|
||||
* <ic>A=(0 2 3 (1,4))</ic> Assign pre-evaluated list to a variable
|
||||
* <ic>B~(0 2 3 (1,4))</ic> Assign list with operations to a variable
|
||||
|
||||
${makeExample(
|
||||
"Random numbers",
|
||||
"Assign lists to variables",
|
||||
`
|
||||
z1('q 0 (2,4) 4 (5,9)').sound('sine')
|
||||
.scale("Bebop minor")
|
||||
z1("s A=(0 (1,4)) B~(2 (3,8)) A B A B A")
|
||||
.scale("modimic")
|
||||
.sound("triangle")
|
||||
.adsr(0.01,0.15,0.25,0)
|
||||
.gain(0.5)
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
* **Variables:** <ic>A=(0 2 3 4)</ic> Assign a list to a variable
|
||||
|
||||
${makeExample(
|
||||
"Combine variables into lists and do operations",
|
||||
`
|
||||
z1("s A=(0 3) B=(3 8) C=(((A+B)+A)*B) D=(C-B) A A+C D")
|
||||
.sound("sawtooth")
|
||||
.ad(0.05,1.0)
|
||||
.gain(0.5)
|
||||
.out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
|
||||
|
||||
|
||||
`;
|
||||
};
|
||||
|
||||
@ -125,6 +125,26 @@ z1('w [0 [5 [3 7]]] h [0 4]')
|
||||
false,
|
||||
)}
|
||||
|
||||
## Rests
|
||||
|
||||
${makeExample(
|
||||
"Rest and octaves",
|
||||
`
|
||||
z1('q 0 ^ e0 r _ 0 _ r 4 ^4 4')
|
||||
.sound('sine').scale("godian").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Rests with durations",
|
||||
`
|
||||
z1('q 0 4 e^r 3 e3 0.5^r h4 1/4^r e 5 r 0.125^r 0')
|
||||
.sound('sine').scale("aeryptian").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Chords
|
||||
|
||||
Chords can be build by grouping pitches or using roman numeral notation, or by using named chords.
|
||||
@ -198,40 +218,38 @@ z1('w [0 [5 [3 7]]] h [0 4]')
|
||||
`,
|
||||
)}
|
||||
|
||||
## Synchronization
|
||||
## Arpeggios
|
||||
|
||||
Ziffers numbered methods **(z0-z16)** can be used to parse and play patterns. Each method is individually cached and can be used to play multiple patterns simultaneously. By default, each Ziffers expression can have a different duration. This system is thus necessary to make everything fit together in a loop-based environment like Topos.
|
||||
|
||||
Numbered methods are synced automatically to **z0** method if it exsists. Syncing can also be done manually by using either the <ic>wait</ic> method, which will always wait for the current pattern to finish before starting the next cycle, or the <ic>sync</ic> method will only wait for the synced pattern to finish on the first time.
|
||||
Chords can be arpeggiated using the @-character within the ziffers notation or by using <ic>arpeggio</ic> method.
|
||||
|
||||
${makeExample(
|
||||
"Automatic sync to z0",
|
||||
"Arpeggio using the mini-notation",
|
||||
`
|
||||
z0('w 0 8').sound('peri').out()
|
||||
z1('e 0 4 5 9').sound('bell').out()
|
||||
`,
|
||||
true,
|
||||
z1("(i v vi%-3 iv%-2)@(s 0 2 0 1 2 1 0 2)")
|
||||
.sound("sine").out()
|
||||
`,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Sync with wait",
|
||||
"Arpeggio from named chords with durations",
|
||||
`
|
||||
z1('w 0 5').sound('pluck').release(0.1).sustain(0.25).out()
|
||||
z2('q 6 3').wait(z1).sound('sine').release(0.16).sustain(0.55).out()
|
||||
`,
|
||||
true,
|
||||
z1("_ Gm7 ^ C9 D7 Gm7")
|
||||
.arpeggio("e 0 2 q 3 e 1 2")
|
||||
.sound("sine").out()
|
||||
`,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Sync on first run",
|
||||
"Arpeggio from roman chords with inversions",
|
||||
`
|
||||
z1('w __ 0 5 9 3').sound('bin').out()
|
||||
z2('q __ 4 2 e 6 3 q 6').sync(z1).sound('east').out()
|
||||
`,
|
||||
true,
|
||||
z1("i v%-1 vi%-1 iv%-2")
|
||||
.arpeggio(0,2,1,2)
|
||||
.noteLength(0.125)
|
||||
.sound("sine").out()
|
||||
`,
|
||||
)}
|
||||
|
||||
## Examples
|
||||
## Chaining
|
||||
|
||||
- Basic notation
|
||||
|
||||
@ -253,31 +271,13 @@ z1('0 1 2 3 4').key('G3').scale('minor').sound('sine').often(n => n.pitch+=3).ra
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Simple options",
|
||||
"Alternative way for inputting options",
|
||||
`
|
||||
z1('0 3 2 4',{key: 'D3', scale: 'minor pentatonic'}).sound('sine').out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Rest and octaves",
|
||||
`
|
||||
z1('q 0 ^ e0 r _ 0 _ r 4 ^4 4')
|
||||
.sound('sine').scale("godian").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Rests with durations",
|
||||
`
|
||||
z1('q 0 4 e^r 3 e3 0.5^r h4 1/4^r e 5 r 0.125^r 0')
|
||||
.sound('sine').scale("aeryptian").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## String prototypes
|
||||
|
||||
You can also use string prototypes as an alternative syntax for creating Ziffers patterns
|
||||
|
||||
@ -46,43 +46,43 @@ Ziffers maps the following duration characters to the corresponding note lengths
|
||||
| l.. | 7/1 | 7.0 | Double dotted long note | Double dotted longa |
|
||||
| l. | 6/1 | 6.0 | Long dotted note | Longa dotted |
|
||||
| l | 4/1 | 4.0 | Long | Longa |
|
||||
| p | 8/3 | 2.6666 | Triplet maxima | Triplet longa |
|
||||
| d.. | 7/2 | 3.5 | Double dotted long note | Double dotted breve |
|
||||
| d. | 3/3 | 3.0 | Double whole note | Double breve |
|
||||
| d. | 3/3 | 3.0 | Dotted whole note | Double breve |
|
||||
| n | 8/3 | 2.6666 | Triplet Long | Triplet longa |
|
||||
| d | 2/1 | 2.0 | Double whole note | Breve |
|
||||
| c | 4/3 | 1.3333 | Triplet long | Triplet breve |
|
||||
| w.. | 7/4 | 1.75 | Double dotted whole note | Double dotted breve |
|
||||
| w. | 3/2 | 1.5 | Dotted whole note | Dotted breve |
|
||||
| k | 4/3 | 1.3333 | Triplet double whole | Triplet breve |
|
||||
| w | 1/1 | 1.0 | Whole note | Semibreve |
|
||||
| y | 2/3 | 0.6666 | Triplet half | Triplet semibreve |
|
||||
| h.. | 7/8 | 0.875 | Double dotted half note | Double dotted minim |
|
||||
| h. | 3/4 | 0.75 | Dotted half note | Dotted minim |
|
||||
| c | 2/3 | 0.6666 | Triplet whole | Triplet semibreve |
|
||||
| h | 1/2 | 0.5 | Half note | Minim |
|
||||
| n | 1/3 | 0.3333 | Triplet whole | Triplet minim |
|
||||
| p | 1/3 | 0.3333 | Triplet half | Triplet minim |
|
||||
| q.. | 7/16 | 0.4375 | Double dotted quarter note | Double dotted crotchet |
|
||||
| q. | 3/8 | 0.375 | Dotted quarter note | Dotted crotchet |
|
||||
| q | 1/4 | 0.25 | Quarter note | Crotchet |
|
||||
| a | 1/6 | 0.1666 | Triplet quarter | Triplet crochet |
|
||||
| e.. | 7/32 | 0.2187 | Double dotted eighth note | Double dotted quaver |
|
||||
| e. | 3/16 | 0.1875 | Dotted eighth note | Dotted quaver |
|
||||
| e.. | 7/32 | 0.2187 | Double dotted 8th | Double dotted quaver |
|
||||
| e. | 3/16 | 0.1875 | Dotted 8th | Dotted quaver |
|
||||
| g | 1/6 | 0.1666 | Triplet quarter | Triplet crochet |
|
||||
| e | 1/8 | 0.125 | 8th note | Quaver |
|
||||
| f | 1/12 | 0.0833 | Triplet 8th | Triplet quaver |
|
||||
| s.. | 7/64 | 0.1093 | Double dotted sixteenth note | Double dotted semiquaver |
|
||||
| s. | 3/32 | 0.0937 | Dotted sixteenth note | Dotted semiquaver |
|
||||
| s.. | 7/64 | 0.1093 | Double dotted 16th | Double dotted semiquaver |
|
||||
| a | 1/12 | 0.0833 | Triplet 8th | Triplet quaver |
|
||||
| s. | 3/32 | 0.0937 | Dotted 16th | Dotted semiquaver |
|
||||
| s | 1/16 | 0.0625 | 16th note | Semiquaver |
|
||||
| x | 1/24 | 0.0416 | Triplet 16th | Triplet semiquaver |
|
||||
| t.. | 7/128 | 0.0546 | Double dotted thirty-second note | Double dotted demisemiquaver |
|
||||
| t. | 3/64 | 0.0468 | Dotted thirty-second note | Dotted demisemiquaver |
|
||||
| t.. | 7/128 | 0.0546 | Double dotted 32th | Double dotted demisemiquaver |
|
||||
| t. | 3/64 | 0.0468 | Dotted 32th | Dotted demisemiquaver |
|
||||
| f | 1/24 | 0.0416 | Triplet 16th | Triplet semiquaver |
|
||||
| t | 1/32 | 0.0312 | 32th note | Demisemiquaver |
|
||||
| g | 1/48 | 0.0208 | Triplet 32th | Triplet demi-semiquaver |
|
||||
| u.. | 7/256 | 0.0273 | Double dotted sixty-fourth note | Double dotted hemidemisemiquaver |
|
||||
| u. | 3/128 | 0.0234 | Dotted sixty-fourth note | Dotted hemidemisemiquaver |
|
||||
| u.. | 7/256 | 0.0273 | Double dotted 64th | Double dotted hemidemisemiquaver |
|
||||
| u. | 3/128 | 0.0234 | Dotted 64th | Dotted hemidemisemiquaver |
|
||||
| x | 1/48 | 0.0208 | Triplet 32th | Triplet demi-semiquaver |
|
||||
| u | 1/64 | 0.0156 | 64th note | Hemidemisemiquaver |
|
||||
| j | 1/96 | 0.0104 | Triplet 64th | Triplet hemidemisemiquaver |
|
||||
| o.. | 7/512 | 0.0136 | Double dotted 128th note | Double dotted semihemidemisemiquaver |
|
||||
| y | 1/96 | 0.0104 | Triplet 64th | Triplet hemidemisemiquaver |
|
||||
| o. | 3/256 | 0.0117 | Dotted 128th note | Dotted semihemidemisemiquaver |
|
||||
| o | 1/128 | 0.0078 | 128th note | Semihemidemisemiquaver |
|
||||
| k | 1/192 | 0.0052 | Triplet 128th | Triplet semihemidemisemiquaver |
|
||||
| j | 1/192 | 0.0052 | Triplet 128th | Triplet semihemidemisemiquaver |
|
||||
| z | 0/1 | 0.0 | No length | No length |
|
||||
|
||||
## Samples
|
||||
|
||||
@ -6,7 +6,7 @@ export const ziffers_scales = (application: Editor): string => {
|
||||
return `
|
||||
# Scales
|
||||
|
||||
Ziffers supports all the keys and scales. Keys can be defined by using [scientific pitch notation](https://en.wikipedia.org/wiki/Scientific_pitch_notation), for example <ic>F3</ic>. Western style (1490 scales) can be with scale names named after greek modes and extended by [William Zeitler](https://ianring.com/musictheory/scales/traditions/zeitler). You will never really run out of scales to play with using Ziffers. Here is a short list of some possible scales that you can play with:
|
||||
Ziffers supports all the keys and scales. Keys can be defined by using [scientific pitch notation](https://en.wikipedia.org/wiki/Scientific_pitch_notation), for example <ic>F3</ic>. Western style (1490 scales) can be with scale names named after greek modes and extended by <a href="https://allthescales.org/intro.php" target="_blank">William Zeitler</a>. You will never really run out of scales to play with using Ziffers. Here is a short list of some possible scales that you can play with:
|
||||
|
||||
| Scale name | Intervals |
|
||||
|------------|------------------------|
|
||||
@ -20,7 +20,7 @@ export const ziffers_scales = (application: Editor): string => {
|
||||
| Soryllic | <ic>11122122</ic>|
|
||||
| Modimic | <ic>412122</ic> |
|
||||
| Ionalian | <ic>1312122</ic> |
|
||||
| ... | And it goes on for **1490** scales |
|
||||
| ... | And it goes on for <a href="https://ianring.com/musictheory/scales/traditions/zeitler" target="_blank">**1490** scales (See full list here)</a>. |
|
||||
|
||||
${makeExample(
|
||||
"What the hell is the Modimic scale?",
|
||||
@ -33,7 +33,7 @@ export const ziffers_scales = (application: Editor): string => {
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
|
||||
You can also use more traditional <a href="https://ianring.com/musictheory/scales/traditions/western" target="_blank">western names</a>:
|
||||
|
||||
| Scale name | Intervals |
|
||||
|
||||
112
src/documentation/patterns/ziffers/ziffers_syncing.ts
Normal file
112
src/documentation/patterns/ziffers/ziffers_syncing.ts
Normal file
@ -0,0 +1,112 @@
|
||||
import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const ziffers_syncing = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
return `
|
||||
# Synchronization
|
||||
|
||||
Ziffers patterns can be synced to any event by using **cue**, **sync**, **wait** and **listen** methods.
|
||||
|
||||
## Sync with cue
|
||||
|
||||
The <ic>cue(name: string)</ic> methods can be used to send cue messages for ziffers patterns. The <ic>wait(name: string)</ic> method is used to wait for the cue message to be received before starting the next cycle.
|
||||
|
||||
${makeExample(
|
||||
"Sending cue from event and wait",
|
||||
`
|
||||
beat(4.0) :: sound("bd").cue("foo").out()
|
||||
z1("e 0 3 2 1 2 1").wait("foo").sound("sine").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
The <ic>sync(name: string)</ic> method is used to sync the ziffers pattern to the cue message.
|
||||
|
||||
${makeExample(
|
||||
"Delayed start using individual cue",
|
||||
`
|
||||
register('christmas', n=>n.room(0.25).size(2).speed([0.5, 0.25, 0.125])
|
||||
.delay(0.5).delayt(1/3).delayfb(0.5).bpf(200+usine(1/3)*500).out())
|
||||
onbar(1) :: cue("bar")
|
||||
onbar(2) :: cue('baz')
|
||||
z1("<0.25 0.125> 0 4 2 -2").sync("bar").sound("ST40:25").christmas()
|
||||
z2("<0.25 0.125> 0 6 4 -4").sync("baz").sound("ST40:25").christmas()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
The <ic>listen(name: string)</ic> method can be used to listen for the cue messages and play one event from the pattern for every cue.
|
||||
|
||||
${makeExample(
|
||||
"Delayed start using individual cue",
|
||||
`
|
||||
beat(1.0) :: cue("boom")
|
||||
|
||||
z1("bd <hh ho>").listen("boom")
|
||||
.sound().out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
|
||||
## Sync with beat
|
||||
|
||||
Patterns can also be synced using beat and setting the note length of events to zero using **z** duration character or <ic>noteLength(number)</ic> method.
|
||||
|
||||
${makeExample(
|
||||
"Syncing with beat",
|
||||
`
|
||||
beat(.5) :: z1("<bd sn:3> hh:5").noteLength(0)
|
||||
.sound().out()
|
||||
|
||||
beat([2.0,0.5,1.5].bar(1)) ::
|
||||
z2("z _ 0 0 <2 1>").sound("bass:5")
|
||||
.dur(0.5).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Automatic sync for ziffers patterns
|
||||
|
||||
Numbered methods **(z0-z16)** are synced automatically to **z0** method if it exsists. Syncing can also be done manually by using either the <ic>wait</ic> method, which will always wait for the current pattern to finish before starting the next cycle, or the <ic>sync</ic> method will only wait for the synced pattern to finish on the first time.
|
||||
|
||||
${makeExample(
|
||||
"Automatic sync to z0",
|
||||
`
|
||||
z0('w 0 8').sound('peri').out()
|
||||
z1('e 0 4 5 9').sound('bell').out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Syncing patterns to each other
|
||||
|
||||
Patterns can also be synced together using the <ic>sync(name: Function)</ic> method. This will sync the pattern to the start of the referenced pattern. Copy this example and first run z1 and then z2 at random position.
|
||||
|
||||
${makeExample(
|
||||
"Sync on first run",
|
||||
`
|
||||
z1('w __ 0 5 9 3').sound('bin').out()
|
||||
z2('q __ 4 2 e 6 3 q 6').sync(z1).sound('east').out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Sync with wait
|
||||
|
||||
Syncing can also be done using <ic>wait(name: Function)</ic> method. This will wait for the referenced pattern to finish before starting the next cycle.
|
||||
|
||||
${makeExample(
|
||||
"Sync with wait",
|
||||
`
|
||||
z1('w 0 5').sound('pluck').release(0.1).sustain(0.25).out()
|
||||
z2('q 6 3').wait(z1).sound('sine').release(0.16).sustain(0.55).out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
`;
|
||||
};
|
||||
|
||||
|
||||
@ -2,19 +2,282 @@ import { type Editor } from "../../../main";
|
||||
import { makeExampleFactory } from "../../../Documentation";
|
||||
|
||||
export const ziffers_tonnetz = (application: Editor): string => {
|
||||
const makeExample = makeExampleFactory(application);
|
||||
return `
|
||||
const makeExample = makeExampleFactory(application);
|
||||
return `
|
||||
# Tonnetz
|
||||
|
||||
* TBD
|
||||
|
||||
The Riemannian Tonnetz is a geometric representation of tonal relationships for applying mathematical operations to analyze harmonic and melodic relationships in tonal music. Ziffers includes an implementation of live coding tonnetz developed together with <a href="https://github.com/edelveart/TypeScriptTonnetz" target="_blank">Edgar Delgado Vega</a>. Live coding tonnetz implementation **combines 67 transformations** to **new explorative notation** that includes all of the traditional triad transformations (PLR functions), extended PLR* transformations, film music transformations and seventh transformations (PLRQ, PLRQ*, ST).
|
||||
|
||||
Tonnetz can be visualized as an <a href="https://numeric-tonnetz-ziffers-6f7c9299bb4e1292f6891b9aceba16d81409236.gitlab.io/" target="_blank">numeric lattice</a> that represents the twelve pitch classes of the chromatic scale. The numeric visualization is a fork of <a href="https://hal.science/hal-03250334/" target="_blank">Web tonnetz</a> by Corentin Guichaou et al. (2021). The lattice can be arranged into multiple tonal pitch spaces which are all supported in Ziffers implementation.
|
||||
|
||||
In addition, we have included common graphs and cycles in Neo-Riemmanian theory: HexaCycles (<ic>pl</ic>), OctaCycles (<ic>pr</ic>), Enneacycles (seventh chords), Weitzmann Regions (triad chords), Boretz Regions (triad chords) and OctaTowers (tetrachords). You can explore each of these graphs in great generality over different Tonnetz.
|
||||
|
||||
## Explorative notation
|
||||
|
||||
Ziffers implements explorative live coding notation that indexes all of the transformations for triad and seventh chords. For more detailed transformations see Triad and Tetra chapters.
|
||||
|
||||
Transformations are applied by grouping operations into a **parameter string** which applies the **transformations** to the chord. The parameter string is a **sequence** of transformations **separated by whitespace**, for example <ic>plr rl2 p3lr</ic>. The numbers after the characters defines the **index for the operation**, as there can be multiple operations of the same type.
|
||||
|
||||
Indexed transformations <ic>[plrfsntq][1-9]*</ic>:
|
||||
|
||||
* p: Parallel
|
||||
* l: Leading-tone exchange
|
||||
* r: Relative
|
||||
* f: Film transformation - Far-fifth
|
||||
* n: Film transformation - Near-fifth (Nebenverdwandt) or PLRQ* transformation
|
||||
* s: Film transformation - Slide
|
||||
* h: Film transformation - Hexatonic Pole
|
||||
* t: Film transformation - Tritone transposition
|
||||
* q: PLR* transformation or PLRQ* transformation
|
||||
|
||||
### Examples:
|
||||
|
||||
${makeExample(
|
||||
"Triad transformations",
|
||||
`
|
||||
z1('i').tonnetz("p l r").sound('wt_stereo')
|
||||
.adsr(0, .1, 0, 0).out()`,
|
||||
true,
|
||||
)}
|
||||
"Explorative transformations with roman chords",
|
||||
`
|
||||
z1('i i7').tonnetz("p1 p2 plr2")
|
||||
.sound('wt_stereo')
|
||||
.adsr(0, .1, 0, 0)
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Arpeggiated explorative transformations",
|
||||
`
|
||||
z1("i7")
|
||||
.tonnetz("p l2 r3 rp4l")
|
||||
.arpeggio("e _ 0 1 s ^ 0 2 1 3 h _ 012 s ^ 2 1")
|
||||
.sound("sine")
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Arpeggios and note lengths with parameters",
|
||||
`
|
||||
z1("024")
|
||||
.tonnetz("p lr rp lrp")
|
||||
.arpeggio(0,2,1,2)
|
||||
.noteLength(1/16,1/8)
|
||||
.sound("sine")
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Triad transformations
|
||||
|
||||
Triad transformations can be defined explicitly using the <ic>triadTonnetz(transformation: string, tonnetz: number[])</ic> method. This method will only apply specific transformations to triad chords.
|
||||
|
||||
In the table below, we write the transformations types available for triads followed by the **transposition in semitones (+/-)** that we must perform to the **root of the chord**: <ic>0,4,3,7,5,1,8,6</ic>.
|
||||
|
||||
Second, you should know that the numbers next to the names of the transformations represent the **chord types to be exchanged**: <ic>1 = major, 2 = minor, 3 = diminished, 4 = augmented</ic>.
|
||||
|
||||
In fact, the functions <ic>p,l,r</ic> and the so-called [**film music transformations**](https://alpof.wordpress.com/2021/10/09/neo-riemannian-examples-in-music/), could have the numbers <ic>p12, l12, r12, f12 </ic> and so on, since they transform major and minor chords with their respective root transpositions. It must be clarified that the <ic>t6</ic> function is the only one among all that maintains the same type of chord.
|
||||
|
||||
Therefore, you will see that paying attention to the examples will allow you to infer whether you should **raise or lower the root** depending on the **type of chord**.
|
||||
|
||||
| Function | Function type | Root transposition | Example |
|
||||
| :------: | :-------------------------------: | :----------------: | :-----------: |
|
||||
| p | Parallel | 0 | C <-> Cm |
|
||||
| l | Leading-tone | 4 | C <-> Em |
|
||||
| r | Relative | 3 | C <-> Am |
|
||||
| f | Film music: Far-fifth | 7 | C <-> Gm |
|
||||
| n | Film music: Near-fifth | 5 | C <-> Fm |
|
||||
| s | Film music: Slide | 1 | C <-> C#m |
|
||||
| h | Film music: Hexatonic pole | 8 | C <-> G#m |
|
||||
| t6 | Film music: Tritone Transposition | 6 | C <-> F# |
|
||||
| p32 | Parallel | 0 | Cdim <-> Cm |
|
||||
| p41 | Parallel | 0 | Caug <-> C |
|
||||
| lt13 | Leading-tone | 4 | C <-> Edim |
|
||||
| l41 | Leading-tone | 4 | Caug <-> Edim |
|
||||
| l14 | Leading-tone | 4 | C <-> Eaug |
|
||||
| rt23 | Relative | 3 | Cm <-> Adim |
|
||||
| rt42 | Relative | 3 | Caug <-> Am |
|
||||
| q13 | PLR* | 1 | C <-> C#dim |
|
||||
| q42 | PLR* | 1 | Caug <-> C#m |
|
||||
| n42 | PLR* | 5 | Caug <-> Fm |
|
||||
|
||||
* Remark A: We add <ic>t</ic> to <ic>l.13</ic>, <ic>r.23</ic>, <ic>r.42</ic> because we have similar syntax for sevenths transformations <ic>l13</ic>, <ic>r23</ic> and <ic>r42</ic>, although the meaning of the numbers (chord types) is different. See in the next section.
|
||||
* Remark B: For those curious about mathematics, what we have implemented at Ziffers is the group called **PLR\*** [(Cannas, 2018, pp. 93-100)](https://publication-theses.unistra.fr/public/theses_doctorat/2018/CANNAS_Sonia_2018_ED269.pdf).
|
||||
|
||||
### Examples:
|
||||
${makeExample(
|
||||
"Synthetic 'Morton'",
|
||||
`
|
||||
z0('3/4 0 _ q 6 h 4 3 w 2 0 3/4 ^^ 0 _q 6 h 4 3 3/4 2 5/4 0 w r')
|
||||
.scale("minor").sound('sawtooth').key("A")
|
||||
.room(0.9).size(9).phaser(0.25).phaserDepth(0.8)
|
||||
.vib(4).vibmod(0.15).out()
|
||||
|
||||
z1('w 904')
|
||||
.scale("chromatic")
|
||||
.tonnetz('o f l l o f l l o')
|
||||
.sound('sine').adsr(0.1, 1, 1, 1.9).out()
|
||||
|
||||
z2('w 904')
|
||||
.scale("chromatic")
|
||||
.tonnetz('o f l l o f l l o')
|
||||
.arpeggio('s 0 2 1 0 1 2 1 0 2 1 0 1 2 0 1 0')
|
||||
.sound('sine').pan(rand(1, 0)).adsr(0, 0.125, 0.15, 0.25).out()
|
||||
|
||||
z3('e __ 4 s 0 e 1 2 s')
|
||||
.sound('hat').delay(0.5).delayfb(0.35).out()`,
|
||||
)}
|
||||
|
||||
## Different Tonnetz
|
||||
|
||||
At Ziffers we have strived to have fun and inspire you by exploring new sounds that Neo-Riemannian functions can offer you by changing only one parameter: The Tonnetz in which your chords move. By default, the Tonnetz has this form: <ic>[3, 4, 5]</ic>. Let's try an example as it will clarify this idea for us.
|
||||
|
||||
The <ic>Cm</ic> chord has the tone classes: <ic>037</ic>. Notice that the distance between the third of the chord and the root of the chord is <ic>3</ic> <ic>(3-0)</ic>. In turn, the distance of the fifth from the third is <ic>4</ic> semitones <ic>(7-3)</ic>. Finally, the distance left to get from the fifth to the root is <ic>5</ic> <ic>(7+5=0)</ic>. These distances are known as **intervalic structure**. In this regard, the array <ic>[x = 3, y = 4, z = 5]</ic> of a Tonnetz tells us the intervallic structure of the chords to which we apply the Neo-Riemannian functions.
|
||||
|
||||
:warning: To have a geometric intuition of the chords that we are going to describe, we suggest you see the <a href="https://numeric-tonnetz-ziffers-6f7c9299bb4e1292f6891b9aceba16d81409236.gitlab.io/" target="_blank">numerical Tonnetz.</a>
|
||||
|
||||
In the next three Tonnetz we consider that we go from a minor chord to a major one by inversion (we change <ic>x</ic> and <ic>y</ic>).
|
||||
|
||||
* For the Tonnetz <ic>[3, 4, 5]</ic> we have minor chords <ic>037</ic> and major chords <ic>047</ic>
|
||||
* For a Tonnetz <ic>[2, 3, 7]</ic> we have the "minor" chords <ic>025</ic> and the "major" chords <ic>035</ic>
|
||||
* For a Tonnetz <ic>[1, 4, 7]</ic> we have the "minor" chords <ic>015</ic> and the "major" chords <ic>045</ic>
|
||||
|
||||
Are those all the Tonnetz? In fact, there are <ic>12</ic> spaces that comply with symmetries by **transposition and inversion**:
|
||||
|
||||
<ic>[3, 4, 5], [1, 1, 10], [1, 2, 9], [1, 3, 8], [1, 4, 7], [1, 5, 6], [ 2, 3, 7], [ 2, 5, 5]</ic>
|
||||
|
||||
<ic>[2, 4, 6], [2, 2, 8], [3, 3, 6], [4, 4, 4]</ic>
|
||||
|
||||
What do augmented chords or seventh chords sound like on a Tonnetz <ic>[1,5,6]</ic>? It is up to you to **explore all the transformations in different spaces**.
|
||||
|
||||
What if I want to place another type of Tonnetz that is not on the list? No problem, everyone is invited to the party.
|
||||
|
||||
* Remark C: If you want to know more about the topology and mathematics behind Tonnetz, you can refer to [Bigo (2013)](https://theses.hal.science/tel-01326827).
|
||||
|
||||
## Tetra transformations
|
||||
|
||||
Did you want to experiment with more functions? At Ziffers we have brought you Neo-Riemannian functions for seventh chords. The possibilities of sound exploration increase considerably, even more so if you **include different Tonnetz**.
|
||||
|
||||
Tetra transformations can be applied to seventh chords using the <ic>tetraTonnetz(transformation: string, tonnetz: number[])</ic> method. This method will apply specific transformations to certain type of chords. If the **chord is not the correct type**, the **transformation will not be applied**.
|
||||
|
||||
:warning: If you are here without having read the **triad chords transformations section**, we highly suggest you skip to it. The ideas and notation shown in this section are nothing more than an extension of what was developed above.
|
||||
|
||||
First, here we will deal with **9 interchangeable chord types** to which we will assign a number:
|
||||
|
||||
<ic>1 = 7, 2 = m7, 3 = hdim7, 4 = maj7, 5 = dim7, 6 = minMaj7, 7 = maj7#5, 8 = 7#5, 9 = 7b5</ic>.
|
||||
|
||||
Second, the **transpositions** that carry out the functions <ic>p = 0, l = 4, r = 3, q = 1, n = 5</ic>, raise or lower the **root of the chord** in semitones in equal measure. However, there are two new types of functions whose transpositions are the following: <ic>rr = 6</ic> and <ic>qq = 2</ic>.
|
||||
|
||||
You are ready, these have been all the requirements. Now a couple of examples will be enough for you to know how these functions operate.
|
||||
|
||||
* The <ic>p14</ic> function **does not move the root (0 semitones)** and changes a dominant 7th chord to a major 7th chord. For example: <ic>C7 <-> Cmaj7</ic>.
|
||||
* The <ic>rr39</ic> function **moves the root 6 semitones** and swaps an hdim7 chord for a 7b5 chord. For example: <ic>Cm7b5 <-> F#7b5</ic>.
|
||||
|
||||
So that you can incorporate this new musical machinery into your game, all the possible transformations according to the type of seventh chord are listed below. You already know what each one will do.
|
||||
|
||||
* Remark D: For those curious about the mathematics behind it, we have implemented a group called **PLRQ** and another group called **PLRQ\*** extended [(Cannas, 2018, pp. 71-92)](https://publication-theses.unistra.fr/public/theses_doctorat/2018/CANNAS_Sonia_2018_ED269.pdf).
|
||||
|
||||
| Chord type | P functions | L functions | R functions | Q functions | N functions |
|
||||
| :--------: | :----------------: | :-----------: | :----------------------------: | :---------: | :---------: |
|
||||
| 7 | p12, p14, p18, p19 | l13, l15, l71 | r12, rr19 | q15, qq51 | n51 |
|
||||
| m7 | p12, p23, p26 | l42 | r12, r23, r42 | q62 | |
|
||||
| hdim7 | p23, p35, p39 | l13 | r23, r35, r53, r63, rr35, rr39 | q43, qq38 | |
|
||||
| maj7 | p14, p47, p64 | l42 | r42 | q43 | |
|
||||
| dim7 | p35 | l15 | r35, r53 | q15, qq51 | n51 |
|
||||
| minMaj7 | p26, p64 | | r63, r76, r86 | q62, q76 | |
|
||||
| maj7#5 | p47, p87 | l71 | r76 | q76 | |
|
||||
| dom7#5 | p18, p87, p98 | l89 | r86, rr98 | qq38, qq98 | |
|
||||
| dom7b5 | p19, p39, p98 | l89 | rr19, rr39, rr98 | qq98 | |
|
||||
|
||||
### Examples
|
||||
|
||||
${makeExample(
|
||||
"Transform seventh chord from chromatic scale",
|
||||
`
|
||||
z1("1.0 047{10}")
|
||||
.scale('chromatic')
|
||||
.tetraTonnetz("o p18 q15 l13 n51 p19 q15")
|
||||
.sound("sawtooth")
|
||||
.cutoff(500 + usine(1/8) * 2000)
|
||||
.adsr(.5,0.05,0.25,0.5)
|
||||
.dur(2.0)
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Cyclic methods
|
||||
|
||||
In addition to the transformations, Ziffers implements cyclic methods that can be used to cycle through the tonnetz space. Cyclic methods turns individual pitch classes to chords using the tonnetz. The cyclic methods are:
|
||||
|
||||
* <ic>hexaCycle(tonnetz: number[], repeats: number = 3)</ic>: Cycles through chords in the hexa cycle
|
||||
* <ic>octaCycle(tonnetz: number[], repeats: number = 4)</ic>: Cycles through chords in the octa cycle
|
||||
* <ic>enneaCycle(tonnetz: number[], repeats: number = 3)</ic>: Cycles through chords in the ennea cycle
|
||||
|
||||
HexaCycles are sequences of major and minor triads generated by the <ic>p</ic> and <ic>l</ic> transformations . Let's take the following example starting with a <ic>C</ic> chord: <ic>C -> Cm -> Ab -> Abm -> E -> Em</ic>. You can start on the chord of your choice.
|
||||
|
||||
OctaCycles are sequences of major and minor triads generated using <ic>p</ic> and <ic>r</ic> transformations. Starting at <ic>C</ic>, we have the following sequence: <ic>C -> Cm -> Eb -> Ebm -> F# -> F#m -> A -> Am</ic>.
|
||||
|
||||
Unlike HexaCycles and OctaCycles, EnneaCycles are four-note chord sequences. Considering the functions implemented for tetrachords in Ziffers, we can interpret these sequences as generated by <ic>p12, p23, and l13</ic> transformations repeatedly: <ic>C7 -> Cm7 -> Cm7b5 -> Ab7 -> Abm7 -> Abm7b5 -> E7 -> Em7 -> Em7b5</ic>.
|
||||
|
||||
### Examples:
|
||||
|
||||
${makeExample(
|
||||
"Arpeggio with ennea cycle",
|
||||
`
|
||||
z1("0 2 -1 3")
|
||||
.enneaCycle()
|
||||
.arpeggio(0,2,1)
|
||||
.scale("modimic")
|
||||
.noteLength(0.15,0.05,0.05,0.25)
|
||||
.sound("sine")
|
||||
.adsr(0.1,0.15,0.25,0.1)
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Variating arpeggios",
|
||||
`
|
||||
z1("s 0 3 2 1")
|
||||
.octaCycle()
|
||||
.arpeggio([0,[0,2],[1,0],[0,1,2]].beat(0.15))
|
||||
.sound("triangle")
|
||||
.adsr(0.1,0.1,0.13,0.15)
|
||||
.out()`,
|
||||
true,
|
||||
)}
|
||||
|
||||
## Cycles with vitamins and repetitions
|
||||
|
||||
Finally, cyclic methods in Ziffers can also be vitaminized with doses of different Tonnetz. However, this opens the way to different behavior with cycles.
|
||||
|
||||
We have the Tonnetz <ic>[2, 3, 7]</ic>, so <ic>hexaCycle([2, 3, 7])</ic>. The generated chords we hear are:
|
||||
|
||||
<ic>035 -> 025 -> 902 -> 9{11}2 -> 69{11} -> 68{11} </ic>
|
||||
|
||||
Apparently, everything operates as we expect: six chords and we return to the first. However, here comes the unexpected and perhaps somewhat obscure question:
|
||||
|
||||
* If we look at the graphs of the [numeric Tonnetz](https://numeric-tonnetz-ziffers-6f7c9299bb4e1292f6891b9aceba16d81409236.gitlab.io/), our hexaCycle over <ic>[2, 3, 7]</ic> which starts with the chord <ic>035</ic> goes through all the intermediate chords generated by <ic>p</ic> and <ic>l</ic> functions until reaching <ic>035</ic> again?
|
||||
|
||||
As you can verify it manually, you will see that this is not the case. Upon reaching the <ic>68{11} </ic> chord, the cycle makes a jump of two chords (<ic>368 358</ic>) towards the <ic>035</ic> chord. This does not happen with the cycles in the Tonnetz <ic>[3, 4, 5]</ic>, since all the intermediate chords are played there.
|
||||
|
||||
To play the chords without jumps in our hexaCycle (although the prefix "hexa" would no longer have a precise meaning), we add a number of repetitions.
|
||||
|
||||
${makeExample(
|
||||
"HexaCycles with vitamins",
|
||||
`
|
||||
z1("0")
|
||||
.scale("chromatic")
|
||||
.hexaCycle([2,3,7],4)
|
||||
.sound("sine").out()
|
||||
`,
|
||||
true
|
||||
)}
|
||||
|
||||
By default hexaCycles and enneaCycles have <ic>3</ic> repetitions, while octaCycles has <ic>4</ic> repetitions. We have specified a **chromatic scale** although this is the **default scale**. Try changing the **repeats and scales** when playing with different Tonnetz.
|
||||
|
||||
* Remark E: These cycles in Tonnetz <ic>[3, 4, 5]</ic> are implemented based on the work of [Douthett & Steinbach (1998, pp. 245-247)](https://www.jstor.org/stable/843877)
|
||||
|
||||
## :construction: Regions and OctaTowers
|
||||
|
||||
TBD: Implement and write about Weitzmann Regions, Boretz Regions, OctaTowers
|
||||
|
||||
`;
|
||||
};
|
||||
|
||||
72
src/main.ts
72
src/main.ts
@ -5,6 +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 } from "./EditorSetup";
|
||||
import {
|
||||
initializeSelectedUniverse,
|
||||
AppSettings,
|
||||
@ -32,6 +33,7 @@ import { installWindowBehaviors } from "./WindowBehavior";
|
||||
import { makeNumberExtensions } from "./extensions/NumberExtensions";
|
||||
// @ts-ignore
|
||||
import { registerSW } from "virtual:pwa-register";
|
||||
import colors from "./colors.json";
|
||||
|
||||
if ("serviceWorker" in navigator) {
|
||||
registerSW();
|
||||
@ -51,6 +53,7 @@ export class Editor {
|
||||
hidden_interface: boolean = false;
|
||||
fontSize!: Compartment;
|
||||
withLineNumbers!: Compartment;
|
||||
themeCompartment!: Compartment;
|
||||
vimModeCompartment!: Compartment;
|
||||
hoveringCompartment!: Compartment;
|
||||
completionsCompartment!: Compartment;
|
||||
@ -68,6 +71,7 @@ export class Editor {
|
||||
public _mouseX: number = 0;
|
||||
public _mouseY: number = 0;
|
||||
show_error: boolean = false;
|
||||
currentThemeName: string = "Everblush";
|
||||
buttonElements: Record<string, HTMLButtonElement[]> = {};
|
||||
interface: ElementMap = {};
|
||||
blinkTimeouts: Record<number, number> = {};
|
||||
@ -205,6 +209,15 @@ export class Editor {
|
||||
|
||||
// Loading universe from URL (if needed)
|
||||
loadUniverserFromUrl(this);
|
||||
|
||||
// Set the color scheme for the application
|
||||
let available_themes = Object.keys(colors);
|
||||
if (this.settings.theme in available_themes) {
|
||||
this.readTheme(this.settings.theme);
|
||||
} else {
|
||||
this.settings.theme = "Everblush";
|
||||
this.readTheme(this.settings.theme);
|
||||
}
|
||||
}
|
||||
|
||||
private getBuffer(type: string): any {
|
||||
@ -260,7 +273,7 @@ export class Editor {
|
||||
|
||||
let list = document.createElement("ul");
|
||||
list.className =
|
||||
"lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800";
|
||||
"lg:h-80 lg:text-normal text-normal h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-brightwhite bg-background lg:mb-4 border rounded-lg";
|
||||
list.append(
|
||||
...Object.keys(this.universes).map((it) => {
|
||||
let item = itemTemplate.content.cloneNode(true) as DocumentFragment;
|
||||
@ -292,9 +305,9 @@ export class Editor {
|
||||
*/
|
||||
const tabs = document.querySelectorAll('[id^="tab-"]');
|
||||
const tab = tabs[i] as HTMLElement;
|
||||
tab.classList.add("bg-orange-300");
|
||||
tab.classList.add("bg-foreground");
|
||||
for (let j = 0; j < tabs.length; j++) {
|
||||
if (j != i) tabs[j].classList.remove("bg-orange-300");
|
||||
if (j != i) tabs[j].classList.remove("bg-foreground");
|
||||
}
|
||||
let tab_id = tab.id.split("-")[1];
|
||||
this.local_index = parseInt(tab_id);
|
||||
@ -317,15 +330,15 @@ export class Editor {
|
||||
let changeColor = (button: HTMLElement) => {
|
||||
interface_buttons.forEach((button) => {
|
||||
let svg = button.children[0] as HTMLElement;
|
||||
if (svg.classList.contains("text-orange-300")) {
|
||||
svg.classList.remove("text-orange-300");
|
||||
button.classList.remove("text-orange-300");
|
||||
if (svg.classList.contains("text-foreground_selection")) {
|
||||
svg.classList.remove("text-foreground_selection");
|
||||
button.classList.remove("text-foreground_selection");
|
||||
}
|
||||
});
|
||||
button.children[0].classList.remove("text-white");
|
||||
button.children[0].classList.add("text-orange-300");
|
||||
button.classList.add("text-orange-300");
|
||||
button.classList.add("fill-orange-300");
|
||||
button.children[0].classList.add("text-foreground_selection");
|
||||
button.classList.add("text-foreground_selection");
|
||||
button.classList.add("fill-foreground_selection");
|
||||
};
|
||||
|
||||
switch (mode) {
|
||||
@ -440,7 +453,7 @@ export class Editor {
|
||||
|
||||
unfocusPlayButtons() {
|
||||
document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
|
||||
button.children[0].classList.remove("fill-orange-300");
|
||||
button.children[0].classList.remove("fill-foreground_selection");
|
||||
button.children[0].classList.remove("animate-pulse");
|
||||
});
|
||||
}
|
||||
@ -569,6 +582,45 @@ export class Editor {
|
||||
ctx.scale(dpr, dpr);
|
||||
}
|
||||
}
|
||||
|
||||
private updateInterfaceTheme(selected_theme: {[key: string]: string}): void {
|
||||
function hexToRgb(hex: string): {r: number, g: number, b: number} | null {
|
||||
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
};
|
||||
for (const [key, value] of Object.entries(selected_theme)) {
|
||||
let color = hexToRgb(value);
|
||||
if (color) {
|
||||
let colorString = `${color.r} ${color.g} ${color.b}`
|
||||
document.documentElement.style.setProperty("--" + key, colorString);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getColorScheme(theme_name: string): {[key: string]: string} {
|
||||
// Check if the theme exists in colors.json
|
||||
let themes: Record<string, { [key: string]: any }> = colors;
|
||||
return themes[theme_name];
|
||||
}
|
||||
|
||||
readTheme(theme_name: string): void {
|
||||
// Check if the theme exists in colors.json
|
||||
let themes: Record<string, { [key: string]: any }> = colors;
|
||||
let selected_theme = themes[theme_name];
|
||||
if (selected_theme) {
|
||||
this.currentThemeName = theme_name;
|
||||
this.updateInterfaceTheme(selected_theme);
|
||||
let codeMirrorTheme = getCodeMirrorTheme(selected_theme);
|
||||
// Reconfigure the view with the new theme
|
||||
this.view.dispatch({
|
||||
effects: this.themeCompartment.reconfigure(codeMirrorTheme),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let app = new Editor();
|
||||
|
||||
2662
src/style.css
2662
src/style.css
File diff suppressed because it is too large
Load Diff
29
src/tailwind.css
Normal file
29
src/tailwind.css
Normal file
@ -0,0 +1,29 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--black: 40 42 54;
|
||||
--red: 68 71 90;
|
||||
--green: 248 248 242;
|
||||
--yellow: 98 114 164;
|
||||
--blue: 139 233 253;
|
||||
--magenta: 80 250 123;
|
||||
--cyan: 255 184 108;
|
||||
--white: 255 121 198;
|
||||
--brightblack: 189 147 249;
|
||||
--brightred: 255 85 85;
|
||||
--brightgreen: 241 250 140;
|
||||
--brightyellow: 139 233 253;
|
||||
--brightblue: 80 250 123;
|
||||
--brightmagenta: 255 184 108;
|
||||
--brightcyan: 255 121 198;
|
||||
--brightwhite: 189 147 249;
|
||||
--background: 40 42 54;
|
||||
--selection_foreground: 68 71 90;
|
||||
--cursor: 139 233 253;
|
||||
--foreground: 248 248 242;
|
||||
--selection_background: 189 147 249;
|
||||
}
|
||||
}
|
||||
@ -1,221 +0,0 @@
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { Extension } from "@codemirror/state";
|
||||
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
|
||||
import { tags as t } from "@lezer/highlight";
|
||||
|
||||
const base00 = "#262626",
|
||||
base01 = "#3B4252",
|
||||
base02 = "#BBBBBB",
|
||||
base03 = "#4C566A",
|
||||
base04 = "#D8DEE9",
|
||||
base05 = "#E5E9F0",
|
||||
base07 = "#8FBCBB",
|
||||
base_red = "#BF616A",
|
||||
base_deeporange = "#D08770",
|
||||
base_pink = "#B48EAD",
|
||||
base_cyan = "#FBCF8B",
|
||||
base_yellow = "#88C0D0",
|
||||
base_orange = "#D08770",
|
||||
base_indigo = "#5E81AC",
|
||||
base_purple = "#B48EAD",
|
||||
base_green = "#A3BE8C",
|
||||
base_lightgreen = "#A3BE8C";
|
||||
|
||||
const invalid = base_red,
|
||||
darkBackground = "#262626",
|
||||
highlightBackground = "#252525",
|
||||
// background = base00,
|
||||
tooltipBackground = base01,
|
||||
cursor = base04;
|
||||
|
||||
/// The editor theme styles for Material Dark.
|
||||
export const toposDarkTheme = EditorView.theme(
|
||||
{
|
||||
"&": {
|
||||
color: base05,
|
||||
// backgroundColor: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-content": {
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||
{
|
||||
backgroundColor: base00,
|
||||
border: `0.5px solid ${base00}`,
|
||||
},
|
||||
".cm-panels": {
|
||||
backgroundColor: darkBackground,
|
||||
color: base05,
|
||||
},
|
||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
||||
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
||||
".cm-searchMatch": {
|
||||
outline: `1px solid ${base_cyan}`,
|
||||
},
|
||||
".cm-searchMatch.cm-searchMatch-selected": {
|
||||
backgroundColor: highlightBackground,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
// backgroundColor: highlightBackground
|
||||
backgroundColor: "rgb(76,76,106, 0.1)",
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: base04,
|
||||
outline: `1px solid ${base_red}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: base02,
|
||||
// outline: `1px solid ${base02}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: base_red,
|
||||
},
|
||||
|
||||
".cm-gutters": {
|
||||
//backgroundColor: base00,
|
||||
backgroundColor: "transparent",
|
||||
color: base02,
|
||||
},
|
||||
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: highlightBackground,
|
||||
color: base02,
|
||||
},
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${base07}`,
|
||||
},
|
||||
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
backgroundColor: tooltipBackground,
|
||||
},
|
||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||
borderTopColor: tooltipBackground,
|
||||
borderBottomColor: tooltipBackground,
|
||||
},
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: highlightBackground,
|
||||
color: base03,
|
||||
},
|
||||
},
|
||||
},
|
||||
{ dark: true },
|
||||
);
|
||||
|
||||
/// The highlighting style for code in the Material Dark theme.
|
||||
export const toposDarkHighlightStyle = HighlightStyle.define([
|
||||
{ tag: t.keyword, color: base_purple },
|
||||
{
|
||||
tag: [t.name, t.deleted, t.character, t.macroName],
|
||||
color: base_cyan,
|
||||
},
|
||||
{ tag: [t.propertyName], color: base_yellow },
|
||||
{ tag: [t.variableName], color: base05 },
|
||||
{ tag: [t.function(t.variableName)], color: base_cyan },
|
||||
{ tag: [t.labelName], color: base_purple },
|
||||
{
|
||||
tag: [t.color, t.constant(t.name), t.standard(t.name)],
|
||||
color: base_yellow,
|
||||
},
|
||||
{ tag: [t.definition(t.name), t.separator], color: base_pink },
|
||||
{ tag: [t.brace], color: base_purple },
|
||||
{
|
||||
tag: [t.annotation],
|
||||
color: invalid,
|
||||
},
|
||||
{
|
||||
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
|
||||
color: base_orange,
|
||||
},
|
||||
{
|
||||
tag: [t.typeName, t.className],
|
||||
color: base_orange,
|
||||
},
|
||||
{
|
||||
tag: [t.operator, t.operatorKeyword],
|
||||
color: base_indigo,
|
||||
},
|
||||
{
|
||||
tag: [t.tagName],
|
||||
color: base_deeporange,
|
||||
},
|
||||
{
|
||||
tag: [t.squareBracket],
|
||||
color: base_red,
|
||||
},
|
||||
{
|
||||
tag: [t.angleBracket],
|
||||
color: base02,
|
||||
},
|
||||
{
|
||||
tag: [t.attributeName],
|
||||
color: base05,
|
||||
},
|
||||
{
|
||||
tag: [t.regexp],
|
||||
color: invalid,
|
||||
},
|
||||
{
|
||||
tag: [t.quote],
|
||||
color: base_green,
|
||||
},
|
||||
{ tag: [t.string], color: base_lightgreen },
|
||||
{
|
||||
tag: t.link,
|
||||
color: base_cyan,
|
||||
textDecoration: "underline",
|
||||
textUnderlinePosition: "under",
|
||||
},
|
||||
{
|
||||
tag: [t.url, t.escape, t.special(t.string)],
|
||||
color: base_yellow,
|
||||
},
|
||||
{ tag: [t.meta], color: base03 },
|
||||
{ tag: [t.comment], color: base02, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: base05 },
|
||||
{ tag: t.strong, fontWeight: "bold", color: base_red },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: base_lightgreen },
|
||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||
{ tag: t.heading, fontWeight: "bold", color: base_yellow },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: base_yellow },
|
||||
{
|
||||
tag: [t.heading2, t.heading3, t.heading4],
|
||||
fontWeight: "bold",
|
||||
color: base_yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: base_yellow,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: base_cyan },
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: base_red,
|
||||
},
|
||||
{
|
||||
tag: [t.contentSeparator],
|
||||
color: base_cyan,
|
||||
},
|
||||
{ tag: t.invalid, color: base02, borderBottom: `1px dotted ${base_red}` },
|
||||
]);
|
||||
|
||||
/// Extension to enable the Material Dark theme (both the editor theme and
|
||||
/// the highlight style).
|
||||
export const toposTheme: Extension = [
|
||||
toposDarkTheme,
|
||||
syntaxHighlighting(toposDarkHighlightStyle),
|
||||
];
|
||||
@ -1,21 +1,33 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
safelist: [
|
||||
{
|
||||
pattern: /hljs+/,
|
||||
},
|
||||
],
|
||||
content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
hljs: {
|
||||
theme: "nord",
|
||||
custom: {
|
||||
general: {
|
||||
comment: "#FEFEFE",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwind-highlightjs")],
|
||||
colors: {
|
||||
black: "rgb(var(--black) / <alpha-value>)",
|
||||
red: "rgb(var(--red) / <alpha-value>)",
|
||||
green: "rgb(var(--green) / <alpha-value>)",
|
||||
yellow: "rgb(var(--yellow) / <alpha-value>)",
|
||||
blue: "rgb(var(--blue) / <alpha-value>)",
|
||||
magenta: "rgb(var(--magenta) / <alpha-value>)",
|
||||
cyan: "rgb(var(--cyan) / <alpha-value>)",
|
||||
white: "rgb(var(--white) / <alpha-value>)",
|
||||
brightblack: "rgb(var(--brightblack) / <alpha-value>)",
|
||||
brightred: "rgb(var(--brightred) / <alpha-value>)",
|
||||
brightgreen: "rgb(var(--brightgreen) / <alpha-value>)",
|
||||
brightyellow: "rgb(var(--brightyellow) / <alpha-value>)",
|
||||
brightblue: "rgb(var(--brightblue) / <alpha-value>)",
|
||||
brightmagenta: "rgb(var(--brightmagenta) / <alpha-value>)",
|
||||
brightcyan: "rgb(var(--brightcyan) / <alpha-value>)",
|
||||
brightwhite: "rgb(var(--brightwhite) / <alpha-value>)",
|
||||
background: "rgb(var(--background) / <alpha-value>)",
|
||||
selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
|
||||
cursor: "rgb(var(--cursor) / <alpha-value>)",
|
||||
foreground: "rgb(var(--foreground) / <alpha-value>)",
|
||||
selection_background: "rgb(var(--selection_background) / <alpha-value>)",
|
||||
}
|
||||
},
|
||||
extend: {},
|
||||
safelist: [{
|
||||
pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
|
||||
}],
|
||||
};
|
||||
|
||||
@ -10,11 +10,10 @@ const vitePWAconfiguration = {
|
||||
|
||||
workbox: {
|
||||
sourcemap: false,
|
||||
cleanupOutdatedCaches: true,
|
||||
cleanupOutdatedCaches: false,
|
||||
globPatterns: [
|
||||
"**/*.{js,js.gz,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
|
||||
],
|
||||
// Thanks Froos :)
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: ({ url }) =>
|
||||
|
||||
21
yarn.lock
21
yarn.lock
@ -2476,6 +2476,11 @@ highlight.js@^11.5.0:
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
|
||||
integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
|
||||
|
||||
highlight.js@^11.9.0:
|
||||
version "11.9.0"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
|
||||
integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
|
||||
|
||||
html-encoder-decoder@^1.3.9:
|
||||
version "1.3.9"
|
||||
resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.9.tgz#d5ec7d249cd525709f7640ae9340f482cc86e94a"
|
||||
@ -3455,10 +3460,10 @@ sucrase@^3.32.0:
|
||||
pirates "^4.0.1"
|
||||
ts-interface-checker "^0.1.9"
|
||||
|
||||
superdough@^0.9.11:
|
||||
version "0.9.11"
|
||||
resolved "https://registry.yarnpkg.com/superdough/-/superdough-0.9.11.tgz#3a3842a47d6340477f77d39077303f05e15274dd"
|
||||
integrity sha512-s0SNSg/EJHwp2sUnE2A7pTZ0G2luiSEq9NVKJvodjJw11Tn0fOp9XcnegNXINYz3U6mAsUYRoeaj4NmuTL13fA==
|
||||
superdough@^0.9.12:
|
||||
version "0.9.12"
|
||||
resolved "https://registry.yarnpkg.com/superdough/-/superdough-0.9.12.tgz#455f8860bc13cffbe1d8f391919e8f1dba1ff0b5"
|
||||
integrity sha512-rsdCoYk5rLYster4tE5mSGjotf/TNP3gPpsuK4hxTZNxL92TkdEcbPFLnJfky5oMQJtpRY1XqAXUx3htLbHEZA==
|
||||
dependencies:
|
||||
nanostores "^0.8.1"
|
||||
|
||||
@ -4028,10 +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.47:
|
||||
version "0.0.47"
|
||||
resolved "https://registry.yarnpkg.com/zifferjs/-/zifferjs-0.0.47.tgz#393cfe235187e80e970b7281e29c9e4813184f07"
|
||||
integrity sha512-gc5H9QNuPysiB5zqjXkMfempDf08ydA+gVPPm9sQKifmoc7GtjJQ0mU7TNc1BAGPI2ipJcIop1a+r71y5SbQmQ==
|
||||
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