moving more files around

src/documentation/more/about.ts

@@ -0,0 +1,30 @@
+export const about = (): string => {
+  return `
+# About Topos
+	
+## The Topos Project
+	
+Topos is an experimental web based algorithmic sequencer programmed by **BuboBubo** ([Raphaël Forment](https://raphaelforment.fr)) and **Amiika** ([Miika Alonen](https//github.com/amiika)). It is written using [TypeScript](https://google.fr) and [Vite](https://google.fr). Many thanks to Felix Roos for making the [Superdough](https://www.npmjs.com/package/superdough) audio backend available for experimentation. This project is based on the [Monome Teletype](https://monome.org) by [Brian Crabtree](https://nnnnnnnn.co/) and [Kelli Cain](https://kellicain.com/). We hope to follow and honor the same spirit of sharing and experimentation. How much can the Teletype be extended while staying accessible and installation-free?
+	
+## About Live Coding
+	
+**Amiika** and I are both very involved in the [TOPLAP](https://toplap.org) and [Algorave](https://algorave.com) scenes. We previously worked on the [Sardine](https://sardine.raphaelforment.fr) live coding environment for Python. **Amiika** has been working hard on its own algorithmic pattern language called [Ziffers](https://github.com/amiika/ziffers). A version of it is available in Topos! **Raphaël** is doing live coding with other folks from the [Cookie Collective](https://cookie.paris) and from the city of Lyon (France).
+
+## Free and open-source software
+
+Topos is a free and open-source software distributed under [GPL-3.0](https://github.com/Bubobubobubobubo/Topos/blob/main/LICENSE) licence. We welcome all contributions and ideas. You can find the source code on [GitHub](https://github.com/Bubobubobubobubo/topos). You can also join us on [Discord](https://discord.gg/dnUTPbu6bN) to discuss about the project and live coding in general.
+	 
+## Credits
+
+- Felix Roos for the [SuperDough](https://www.npmjs.com/package/superdough) audio engine.
+- Frank Force for the [ZzFX](https://github.com/KilledByAPixel/ZzFX) synthesizer.
+- Kristoffer Ekstrand for the [AKWF](https://www.adventurekid.se/akrt/waveforms/adventure-kid-waveforms/) waveforms.
+- Ryan Kirkbride for some of the audio samples in the [Dough-Fox](https://github.com/Bubobubobubobubo/Dough-Fox) sample pack, taken from [here](https://github.com/Qirky/FoxDot/tree/master/FoxDot/snd).
+- Adel Faure for the [JGS](https://adelfaure.net/https://adelfaure.net/) font.
+- Raphaël Bastide for the [Steps Mono](https://github.com/raphaelbastide/steps-mono/) font.
+
+- All the [Topos](https//github.com/Bubobubobubobubo/Topos) contributors!
+
+**Have fun!**
+`;
+};

src/documentation/more/bonus.ts

@@ -0,0 +1,69 @@
+import { type Editor } from "../../main";
+import { key_shortcut, makeExampleFactory } from "../../Documentation";
+
+export const bonus = (application: Editor): string => {
+  const makeExample = makeExampleFactory(application);
+
+  return `
+# Bonus features
+
+Some features are here "just for fun" or "just because I can". They are not very interesting per se but are still available nonetheless. They mostly gravitate towards manipulating visuals or patterning other multimedia formats.
+
+## Hydra Visual Live Coding
+
+<div class="mx-12 bg-neutral-600 rounded-lg flex flex-col items-center justify-center">
+<warning>⚠️ This feature can generate flashing images that could trigger photosensitivity or epileptic seizures. ⚠️ </warning>
+</div>
+
+[Hydra](https://hydra.ojack.xyz/?sketch_id=mahalia_1) is a popular live-codable video synthesizer developed by [Olivia Jack](https://ojack.xyz/) and other contributors. It follows the metaphor of analog synthesizer patching to allow its user to create complex live visuals from a web browser window. Being very easy to use, extremely powerful and also very rewarding to use, Hydra has become a popular choice for adding visuals into a live code performance. Topos provides a simple way to integrate Hydra into a live coding session and to blend it with regular Topos code.
+
+${makeExample(
+    "Hydra integration",
+    `beat(4) :: app.hydra.osc(3, 0.5, 2).out()`,
+    true
+  )}
+
+You may feel like it's doing nothing! Press ${key_shortcut(
+    "Ctrl+D"
+  )} to close the documentation. **Boom, all shiny!**
+
+Be careful not to call <ic>app.hydra</ic> too often as it can impact performances. You can use any rhythmical function like <ic>mod()</ic> function to limit the number of function calls. You can write any Topos code like <ic>[1,2,3].beat()</ic> to bring some life and movement in your Hydra sketches.
+
+Stopping **Hydra** is simple:
+
+${makeExample(
+    "Stopping Hydra",
+    `
+beat(4) :: stop_hydra()     // this one
+beat(4) :: app.hydra.hush() // or this one
+`,
+    true
+  )}
+
+I won't teach you how to play with Hydra. You can find some great resources on the [Hydra website](https://hydra.ojack.xyz/):
+  - [Hydra interactive documentation](https://hydra.ojack.xyz/docs/)
+  - [List of Hydra Functions](https://hydra.ojack.xyz/api/)
+  - [Source code on GitHub](https://github.com/hydra-synth/hydra)
+
+## GIF player
+
+Topos embeds a small <ic>.gif</ic> picture player with a small API. GIFs are automatically fading out after the given duration. Look at the following example:
+
+${makeExample(
+    "Playing many gifs",
+    `
+beat(0.25)::gif({
+  url:v('gif')[$(1)%6], // Any URL will do!
+  opacity: r(0.5, 1), // Opacity (0-1)
+  size:"300px", // CSS size property
+  center:false, // Centering on the screen?
+  filter:'none', // CSS Filter
+  dur: 2, // In beats (Topos unit)
+  rotation: ir(1, 360), // Rotation (in degrees)
+  posX: ir(1,1200), // CSS Horizontal Position
+  posY: ir(1, 800), // CSS Vertical Position
+`, true
+  )}
+`;
+};
+

src/documentation/more/oscilloscope.ts

@@ -0,0 +1,53 @@
+import { type Editor } from "../../main";
+import { makeExampleFactory } from "../../Documentation";
+
+export const oscilloscope = (application: Editor): string => {
+  const makeExample = makeExampleFactory(application);
+  return `# Oscilloscope
+
+You can turn on the oscilloscope to generate interesting visuals or to inspect audio. Use the <ic>scope()</ic> function to turn it on and off. The oscilloscope is off by default.
+
+${makeExample(
+    "Oscilloscope configuration",
+    `
+scope({
+    enabled: true, // off by default
+    color: "#fdba74", // any valid CSS color or "random"
+    thickness: 4, // stroke thickness
+    offsetY: 0, // Horizontal offset
+    offsetX: 0, // Vertical offset
+    fftSize: 256, // multiples of 128
+    orientation: "horizontal", // "vertical" or "horizontal"
+    mode: "scope" | "3D" | "freqscope", // scope mode
+    size: 1, // size of the oscilloscope
+    refresh: 1 // refresh rate (in pulses)
+})
+  `,
+    true
+  )}
+
+${makeExample(
+    "Demo with multiple scope mode",
+    `
+rhythm(.5, [4,5].dur(4*3, 4*1), 8)::sound('fhardkick').out()
+beat(0.25)::sound('square').freq([
+  [250, 250/2, 250/4].pick(),
+  [250, 250/2, 250/4].beat() / 2 * 4,
+  ])
+  .fmi([1,2,3,4].bar()).fmh(fill()? 0 : 4)
+  .lpf(100+usine(1/4)*1200).lpad(4, 0, .5)
+  .room(0.5).size(8).vib(0.5).vibmod(0.125)
+  .ad(0, .125).out()
+beat(2)::sound('fsoftsnare').shape(0.5).out()
+scope({enabled: true, thickness: 8,
+  mode: ['freqscope', 'scope', '3D'].beat(),
+  color: ['purple', 'green', 'random'].beat(), 
+  size: 0.5, fftSize: 2048}) 
+    `,
+    true
+  )}
+
+Note that these values can be patterned as well! You can transform the oscilloscope into its own light show if you want. The picture is not stable anyway so you won't have much use of it for precision work :)
+
+  `;
+};

src/documentation/more/synchronisation.ts

@@ -0,0 +1,30 @@
+import { type Editor } from "../../main";
+import { makeExampleFactory } from "../../Documentation";
+
+export const synchronisation = (app: Editor): string => {
+  // @ts-ignore
+  let makeExample = makeExampleFactory(app);
+  return `
+# Synchronisation
+
+Synchronisation is currently a work in progress. If you are a programmer and if you know something about the topic, please help us to make it work! In the meantime, Topos can already be synchronised but it takes some getting used to.
+
+## MIDI clock Synchronisation
+
+Topos can be controlled from external hadware or software using MIDI clock messages. The options to do so are located in the settings menu. You will need to connect an external MIDI controller or to ready virtual MIDI port.
+
+1) Connect a MIDI input as MIDI Clock in the settings panel. 
+2) Topos will listen to incoming Clock messages and will use them to estimate the current BPM. 
+3) Topos will also listen to <ic>Start</ic>, <ic>Stop</ic> and <ic>Continue</ic> messages.
+
+Different MIDI devices can send clock at different resolution, define Clock PPQN in settings to match the resolution of your device. 
+
+## Clock nudge
+
+In the settings menu, you will find two ways to _nudge_ the clock, allowing you to finetune synchronisation:
+- **clock nudge**: nudge the event clock backwards or forward in time (in milliseconds).
+- **audio nudge**: nudge the **synths** and **sampler** forward (in milliseconds).
+  - note that you need to give some time to the system (2ms+) in order to give it enough time to load and play sounds.
+
+  `;
+};