Skip to content

Commit

Permalink
various improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bubobubobubobubo
Bubobubobubobubo committed Oct 14, 2023
1 parent a7a38a4 commit ce7596a
Show file tree
Hide file tree
Showing 7 changed files with 193 additions and 74 deletions.
24 changes: 14 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,29 +199,32 @@ <h2 class="font-semibold lg:text-xl text-gray-400">More</h2>
</div>

<!-- This modal is used for settings -->
<div id="modal-settings" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div class="grid grid-col-3 w-full">
<div class="bg-white rounded-lg mx-48 my-48 space-y-8 px-8">
<div id="modal-settings" class="invisible
bg-neutral-900 bg-opacity-50 flex
absolute justify-center items-center
top-0 bottom-0 overflow-y-auto
overflow-x-auto w-screen">
<div class="grid lg:grid-col-3 grid-col-1">
<div class="bg-white rounded-lg lg:mx-48 mx-0 lg:my-48 my-0 lg:space-y-8 space-y-2 lg:px-8 px-2 mt-24">
<h1 class="mt-12 font-semibold rounded bg-gray-800 justify-center text-center text-white mx-4 text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>

<div class="flex flex-row mr-4 ml-4">
<div class="lg:flex lg:flex-row mr-4 ml-4">
<!-- Font Size Selection -->
<div class="bg-gray-200 rounded-lg w-full pt-2">
<div class="bg-gray-200 rounded-lg lg:w-full w-auto pt-2 pb-1 mb-2">
<p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">Font Settings</p>
<div class="mb-6 mx-4 font-semibold">
<label for="default-input" class="block mb-2 ml-1 font-normal">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">
</div>
<label for="font" class="block ml-5 mb-2 font-medium">Font:</label>
<select id="font-family" class="bg-gray-50 w-5/6 ml-4 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">
<select id="font-family" class="bg-gray-50 w-2/3 ml-4 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">
<option selected>Choose a font</option>
<option value="US">IBM Plex Mono</option>
<option value="CA">Victor Mono</option>
<option value="FR">Courier</option>
</select>
</div>
<!-- Editor mode selection -->
<div class="bg-gray-200 rounded-lg ml-4 w-full pt-2">
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-full w-auto pt-2 pb-1 mb-2">
<p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">Editor options</p>
<!-- Checkboxes -->
<div class="pr-4">
Expand All @@ -248,7 +251,7 @@ <h1 class="mt-12 font-semibold rounded bg-gray-800 justify-center text-center te
</div>
</div>

<div class="bg-gray-200 rounded-lg ml-4 w-full pt-2">
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-full w-auto pt-2 pb-1 mb-2">
<p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">File Management</p>
<div class="flex flex-col space-y-2">
<button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded-lg inline-flex items-center mx-4">
Expand Down Expand Up @@ -347,7 +350,7 @@ <h1 class="mt-12 font-semibold rounded bg-gray-800 justify-center text-center te

</div>

<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4">
<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-2">
<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>
</div>
</div>
Expand Down Expand Up @@ -454,4 +457,5 @@ <h1 class="mt-12 font-semibold rounded bg-gray-800 justify-center text-center te
</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>
</html>
15 changes: 15 additions & 0 deletions src/API.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1255,6 +1255,13 @@ export class UserAPI {

denominator = this.meter;


// =============================================================
// Fill
// =============================================================

public fill = (): boolean => this.app.fill;

// =============================================================
// Time Filters
// =============================================================
Expand Down Expand Up @@ -1308,6 +1315,14 @@ export class UserAPI {
};
p = this.pulse;

public tick = (tick: number | number[], offset: number = 0): boolean => {
const nArray = Array.isArray(tick) ? tick : [tick];
const results: boolean[] = nArray.map(
(value) => (this.app.clock.time_position.pulse === value + offset)
);
return results.some((value) => value === true)
}


// =============================================================
// Modulo based time filters
Expand Down
18 changes: 18 additions & 0 deletions src/Clock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,24 @@ export class Clock {
}
}

public nextTickFrom(time: number, nudge: number): number {
/**
* Compute the time remaining before the next clock tick.
* @param time - audio context currentTime
* @param nudge - nudge in the future (in seconds)
* @returns remainingTime
*/
const pulseDuration = this.pulse_duration;
const nudgedTime = time + nudge;
const nextTickTime = Math.ceil(nudgedTime /
pulseDuration) * pulseDuration;
const remainingTime = nextTickTime - nudgedTime;

return remainingTime;
}



public convertPulseToSecond(n: number): number {
/**
* Converts a pulse to a second.
Expand Down
8 changes: 8 additions & 0 deletions src/classes/SoundEvent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export class SoundEvent extends AudibleEvent {
this.updateValue("pitchJumpTime", value);
public pjt = this.pitchJumpTime;
public lfo = (value: number) => this.updateValue("lfo", value);
public znoise = (value: number) => this.updateValue("znoise", value);
public noise = (value: number) => this.updateValue("noise", value);
public zmod = (value: number) => this.updateValue("zmod", value);
public zcrush = (value: number) => this.updateValue("zcrush", value);
Expand Down Expand Up @@ -109,6 +110,13 @@ export class SoundEvent extends AudibleEvent {
this.release(r);
return this;
};
public ad = (a: number, d: number) => {
this.attack(a);
this.decay(d);
this.sustain(0.0);
this.release(0.0);
return this;
}

// Lowpass filter
public lpenv = (value: number) => this.updateValue("lpenv", value);
Expand Down
101 changes: 56 additions & 45 deletions src/documentation/interaction.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { type Editor } from "../main";
import { makeExampleFactory } from "../Documentation";
import { key_shortcut, makeExampleFactory } from "../Documentation";

// @ts-ignore
export const interaction = (application: Editor): string => {
Expand All @@ -9,6 +9,17 @@ export const interaction = (application: Editor): string => {
Topos can interact with the physical world or react to events coming from outside the system (_MIDI_, physical control, etc).
## Fill
By pressing the ${key_shortcut('Alt')} key, you can trigger the <ic>Fill</ic> mode which can either be <ic>true</ic> or <ic>false</ic>. The fill will be set to <ic>true</ic> as long as the key is held. Try pressing ${key_shortcut('Alt')} when playing this example:
${makeExample(
"Claping twice as fast with fill",
`
beat(fill() ? 1/4 : 1/2)::sound('cp').out()
`, true)
}
## MIDI input
Topos can use MIDI input to estimate the BPM from incoming Clock messages and to control sounds with incoming note and CC messages. Sending MIDI messages to Topos is like sending messages to a far away universe; you can't expect a quick response, but the messages will be received and processed eventually.
Expand All @@ -23,49 +34,49 @@ MIDI input can be enabled in the settings panel. Once you have done that, you ca
* <ic>buffer_note(channel?: number)</ic>: returns last unread note that has been received. Note is fetched and removed from start of the buffer once this is called. Returns undefined if no notes have been received.
${makeExample(
"Play active notes as chords",
`
"Play active notes as chords",
`
beat(1) && active_notes() && sound('sine').chord(active_notes()).out()
`,
true
)}
true
)}
${makeExample(
"Play active notes as arpeggios",
`
"Play active notes as arpeggios",
`
beat(0.25) && active_notes() && sound('juno').note(
active_notes().beat(0.5)+[12,24].beat(0.25)
).cutoff(300 + usine(1/4) * 2000).out()
`,
false
)}
false
)}
${makeExample(
"Play continous arpeggio with sticky notes",
`
"Play continous arpeggio with sticky notes",
`
beat(0.25) && sticky_notes() && sound('arp')
.note(sticky_notes().palindrome().beat(0.25)).out()
`,
false
)}
false
)}
${makeExample(
"Play last note",
`
"Play last note",
`
beat(0.5) && sound('sawtooth').note(last_note())
.vib([1, 3, 5].beat(1))
.vibmod([1,3,2,4].beat(2)).out()
`,
false
)}
false
)}
${makeExample(
"Play buffered note",
`
"Play buffered note",
`
beat(1) && buffer() && sound('sine').note(buffer_note()).out()
`,
false
)}
false
)}
### MIDI CC Input
Expand All @@ -75,16 +86,16 @@ Currently supported methods for CC input are:
* <ic>last_cc(control: number, channel?: number): Returns last received CC value for given control number (and optional channel). By default last CC value is last value from ANY channel or 64 if no CC messages have been received.
${makeExample(
"Play notes with cc",
`
"Play notes with cc",
`
beat(0.5) && sound('arp').note(last_cc(74)).out()
`,
true
)}
true
)}
${makeExample(
"Control everything with CCs",
`
"Control everything with CCs",
`
beat(0.5) :: sound('sine')
.freq(last_cc(75)*3)
.cutoff(last_cc(76)*2*usine())
Expand All @@ -97,8 +108,8 @@ beat(last_cc(74)/127*.5) :: sound('sine')
.sustain(last_cc(74)/127*.25)
.out()
`,
false
)}
false
)}
### Run scripts with MIDI
Expand All @@ -120,16 +131,16 @@ You can get the current position of the mouse on the screen by using the followi
- <ic>mouseY()</ic>: the vertical position of the mouse on the screen (as a floating point number).
${makeExample(
"FM Synthesizer controlled using the mouse",
`
"FM Synthesizer controlled using the mouse",
`
beat(.25) :: sound('sine')
.fmi(mouseX() / 100)
.fmh(mouseY() / 100)
.vel(0.2)
.room(0.9).out()
`,
true
)}
true
)}
Current mouse position can also be used to generate notes:
Expand All @@ -138,17 +149,17 @@ Current mouse position can also be used to generate notes:
${makeExample(
"The same synthesizer, with note control!",
`
"The same synthesizer, with note control!",
`
beat(.25) :: sound('sine')
.fmi(mouseX() / 100)
.note(noteX())
.fmh(mouseY() / 100)
.vel(0.2)
.room(0.9).out()
`,
true
)}
true
)}
## Scale output for lighted keys
Expand All @@ -157,16 +168,16 @@ Topos can output scales to external keyboards lighted keys using the following f
- <ic>show_scale(key: string, scale: string|int, channel?: number, port?: string|number, soundOff?: boolean): void</ic>: sends the scale as midi on messages to specified port and channel to light the keys of external keyboard. If soundOff is true, all sound off message will be sent after every note on message. This can be useful with some keyboards not supporting external channel for lightning or routing for the midi in to suppress the sound from incoming note on messages.
${makeExample(
"Show scale on external keyboard",
`show_scale("F","aeolian",0,4)`,
true
)}
"Show scale on external keyboard",
`show_scale("F","aeolian",0,4)`,
true
)}
${makeExample(
"Hide scale",
`hide_scale("F","aeolian",0,4)`,
true
)}
"Hide scale",
`hide_scale("F","aeolian",0,4)`,
true
)}
`
Expand Down
Loading

0 comments on commit ce7596a

Please sign in to comment.