build
This commit is contained in:
Felix Roos
parent
1d1d29a163
commit
cbd1bde7e6
12 changed files with 379 additions and 30 deletions
12
docs/dist/App.js
vendored
12
docs/dist/App.js
vendored
|
|
@ -65,9 +65,9 @@ function App() {
|
|||
}, [])
|
||||
});
|
||||
return /* @__PURE__ */ React.createElement("div", {
|
||||
className: "min-h-screen bg-[#2A3236] flex flex-col"
|
||||
className: "min-h-screen flex flex-col"
|
||||
}, /* @__PURE__ */ React.createElement("header", {
|
||||
className: "flex-none w-full h-16 px-2 flex border-b border-gray-200 bg-white justify-between"
|
||||
className: "flex-none w-full h-16 px-2 flex border-b border-gray-200 bg-white justify-between z-[10]"
|
||||
}, /* @__PURE__ */ React.createElement("div", {
|
||||
className: "flex items-center space-x-2"
|
||||
}, /* @__PURE__ */ React.createElement("img", {
|
||||
|
|
@ -93,14 +93,14 @@ function App() {
|
|||
}, /* @__PURE__ */ React.createElement("div", {
|
||||
className: "grow relative"
|
||||
}, /* @__PURE__ */ React.createElement("div", {
|
||||
className: cx("h-full bg-[#2A3236]", error ? "focus:ring-red-500" : "focus:ring-slate-800")
|
||||
className: cx("h-full", error ? "focus:ring-red-500" : "focus:ring-slate-800")
|
||||
}, /* @__PURE__ */ React.createElement(CodeMirror, {
|
||||
value: code,
|
||||
editorDidMount: setEditor,
|
||||
options: {
|
||||
mode: "javascript",
|
||||
theme: "material",
|
||||
lineNumbers: true,
|
||||
lineNumbers: false,
|
||||
styleSelectedText: true,
|
||||
cursorBlinkRate: 0
|
||||
},
|
||||
|
|
@ -112,10 +112,10 @@ function App() {
|
|||
` : "no changes\n")), error && /* @__PURE__ */ React.createElement("div", {
|
||||
className: cx("absolute right-2 bottom-2 px-2", "text-red-500")
|
||||
}, error?.message || "unknown error")), /* @__PURE__ */ React.createElement("button", {
|
||||
className: "flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500",
|
||||
className: "z-[10] flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500",
|
||||
onClick: () => togglePlay()
|
||||
}, !pending ? /* @__PURE__ */ React.createElement(React.Fragment, null, cycle.started ? "pause" : "play") : /* @__PURE__ */ React.createElement(React.Fragment, null, "loading...")), /* @__PURE__ */ React.createElement("textarea", {
|
||||
className: "grow bg-[#283237] border-0 text-xs min-h-[200px]",
|
||||
className: "z-[10] grow border-0 text-xs min-h-[200px] bg-[transparent]",
|
||||
value: log,
|
||||
readOnly: true,
|
||||
ref: logBox,
|
||||
|
|
|
|||
49
docs/dist/draw.js
vendored
Normal file
49
docs/dist/draw.js
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import * as Tone from "../_snowpack/pkg/tone.js";
|
||||
export const getDrawContext = (id = "test-canvas") => {
|
||||
let canvas = document.querySelector("#" + id);
|
||||
if (!canvas) {
|
||||
canvas = document.createElement("canvas");
|
||||
canvas.id = id;
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
canvas.style = "pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0";
|
||||
document.body.prepend(canvas);
|
||||
}
|
||||
return canvas.getContext("2d");
|
||||
};
|
||||
export const draw = (callback) => {
|
||||
if (window.strudelAnimation) {
|
||||
cancelAnimationFrame(window.strudelAnimation);
|
||||
}
|
||||
const animate = (t) => {
|
||||
callback(t);
|
||||
window.strudelAnimation = requestAnimationFrame(animate);
|
||||
};
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
export const queryEvents = (pattern, callback, seconds) => {
|
||||
const queryEvents2 = () => {
|
||||
const t = Tone.getTransport().seconds;
|
||||
const begin = Math.floor(t / seconds) * seconds;
|
||||
const end = begin + seconds * 4;
|
||||
const events = pattern.add(0).query(new State(new TimeSpan(begin, end)));
|
||||
callback(events);
|
||||
};
|
||||
queryEvents2();
|
||||
if (window.strudelScheduler) {
|
||||
clearInterval(window.strudelScheduler);
|
||||
}
|
||||
window.strudelScheduler = setInterval(() => {
|
||||
queryEvents2();
|
||||
}, seconds * 1.5 * 1e3);
|
||||
};
|
||||
export const cleanup = () => {
|
||||
const ctx = getDrawContext();
|
||||
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
||||
if (window.strudelAnimation) {
|
||||
cancelAnimationFrame(window.strudelAnimation);
|
||||
}
|
||||
if (window.strudelScheduler) {
|
||||
clearInterval(window.strudelScheduler);
|
||||
}
|
||||
};
|
||||
8
docs/dist/evaluate.js
vendored
8
docs/dist/evaluate.js
vendored
|
|
@ -5,12 +5,15 @@ import "./voicings.js";
|
|||
import "./tonal.js";
|
||||
import "./xen.js";
|
||||
import "./tune.js";
|
||||
import "./tonal.js";
|
||||
import "./tune.js";
|
||||
import "./pianoroll.js";
|
||||
import * as drawHelpers from "./draw.js";
|
||||
import gist from "./gist.js";
|
||||
import shapeshifter from "./shapeshifter.js";
|
||||
import {minify} from "./parse.js";
|
||||
import * as Tone from "../_snowpack/pkg/tone.js";
|
||||
import * as toneHelpers from "./tone.js";
|
||||
import * as voicingHelpers from "./voicings.js";
|
||||
const bootstrapped = {...strudel, ...strudel.Pattern.prototype.bootstrap()};
|
||||
function hackLiteral(literal, names, func) {
|
||||
names.forEach((name) => {
|
||||
|
|
@ -23,9 +26,10 @@ function hackLiteral(literal, names, func) {
|
|||
}
|
||||
hackLiteral(String, ["mini", "m"], bootstrapped.mini);
|
||||
hackLiteral(String, ["pure", "p"], bootstrapped.pure);
|
||||
Object.assign(globalThis, bootstrapped, Tone, toneHelpers, {gist});
|
||||
Object.assign(globalThis, bootstrapped, Tone, toneHelpers, voicingHelpers, drawHelpers, {gist});
|
||||
export const evaluate = async (code) => {
|
||||
const shapeshifted = shapeshifter(code);
|
||||
drawHelpers.cleanup();
|
||||
let evaluated = await eval(shapeshifted);
|
||||
if (typeof evaluated === "function") {
|
||||
evaluated = evaluated();
|
||||
|
|
|
|||
151
docs/dist/oldtunes.js
vendored
Normal file
151
docs/dist/oldtunes.js
vendored
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
export const timeCatMini = `stack(
|
||||
"c3@3 [eb3, g3, [c4 d4]/2]",
|
||||
"c2 g2",
|
||||
"[eb4@5 [f4 eb4 d4]@3] [eb4 c4]/2".slow(8)
|
||||
)`;
|
||||
export const timeCat = `stack(
|
||||
timeCat([3, c3], [1, stack(eb3, g3, cat(c4, d4).slow(2))]),
|
||||
cat(c2, g2),
|
||||
sequence(
|
||||
timeCat([5, eb4], [3, cat(f4, eb4, d4)]),
|
||||
cat(eb4, c4).slow(2)
|
||||
).slow(4)
|
||||
)`;
|
||||
export const shapeShifted = `stack(
|
||||
sequence(
|
||||
e5, [b4, c5], d5, [c5, b4],
|
||||
a4, [a4, c5], e5, [d5, c5],
|
||||
b4, [r, c5], d5, e5,
|
||||
c5, a4, a4, r,
|
||||
[r, d5], [r, f5], a5, [g5, f5],
|
||||
e5, [r, c5], e5, [d5, c5],
|
||||
b4, [b4, c5], d5, e5,
|
||||
c5, a4, a4, r,
|
||||
).rev(),
|
||||
sequence(
|
||||
e2, e3, e2, e3, e2, e3, e2, e3,
|
||||
a2, a3, a2, a3, a2, a3, a2, a3,
|
||||
gs2, gs3, gs2, gs3, e2, e3, e2, e3,
|
||||
a2, a3, a2, a3, a2, a3, b1, c2,
|
||||
d2, d3, d2, d3, d2, d3, d2, d3,
|
||||
c2, c3, c2, c3, c2, c3, c2, c3,
|
||||
b1, b2, b1, b2, e2, e3, e2, e3,
|
||||
a1, a2, a1, a2, a1, a2, a1, a2,
|
||||
).rev()
|
||||
).slow(16)`;
|
||||
export const tetrisWithFunctions = `stack(sequence(
|
||||
'e5', sequence('b4', 'c5'), 'd5', sequence('c5', 'b4'),
|
||||
'a4', sequence('a4', 'c5'), 'e5', sequence('d5', 'c5'),
|
||||
'b4', sequence(silence, 'c5'), 'd5', 'e5',
|
||||
'c5', 'a4', 'a4', silence,
|
||||
sequence(silence, 'd5'), sequence(silence, 'f5'), 'a5', sequence('g5', 'f5'),
|
||||
'e5', sequence(silence, 'c5'), 'e5', sequence('d5', 'c5'),
|
||||
'b4', sequence('b4', 'c5'), 'd5', 'e5',
|
||||
'c5', 'a4', 'a4', silence),
|
||||
sequence(
|
||||
'e2', 'e3', 'e2', 'e3', 'e2', 'e3', 'e2', 'e3',
|
||||
'a2', 'a3', 'a2', 'a3', 'a2', 'a3', 'a2', 'a3',
|
||||
'g#2', 'g#3', 'g#2', 'g#3', 'e2', 'e3', 'e2', 'e3',
|
||||
'a2', 'a3', 'a2', 'a3', 'a2', 'a3', 'b1', 'c2',
|
||||
'd2', 'd3', 'd2', 'd3', 'd2', 'd3', 'd2', 'd3',
|
||||
'c2', 'c3', 'c2', 'c3', 'c2', 'c3', 'c2', 'c3',
|
||||
'b1', 'b2', 'b1', 'b2', 'e2', 'e3', 'e2', 'e3',
|
||||
'a1', 'a2', 'a1', 'a2', 'a1', 'a2', 'a1', 'a2',
|
||||
)
|
||||
).slow(16)`;
|
||||
export const tetris = `stack(
|
||||
cat(
|
||||
"e5 [b4 c5] d5 [c5 b4]",
|
||||
"a4 [a4 c5] e5 [d5 c5]",
|
||||
"b4 [~ c5] d5 e5",
|
||||
"c5 a4 a4 ~",
|
||||
"[~ d5] [~ f5] a5 [g5 f5]",
|
||||
"e5 [~ c5] e5 [d5 c5]",
|
||||
"b4 [b4 c5] d5 e5",
|
||||
"c5 a4 a4 ~"
|
||||
),
|
||||
cat(
|
||||
"e2 e3 e2 e3 e2 e3 e2 e3",
|
||||
"a2 a3 a2 a3 a2 a3 a2 a3",
|
||||
"g#2 g#3 g#2 g#3 e2 e3 e2 e3",
|
||||
"a2 a3 a2 a3 a2 a3 b1 c2",
|
||||
"d2 d3 d2 d3 d2 d3 d2 d3",
|
||||
"c2 c3 c2 c3 c2 c3 c2 c3",
|
||||
"b1 b2 b1 b2 e2 e3 e2 e3",
|
||||
"a1 a2 a1 a2 a1 a2 a1 a2",
|
||||
)
|
||||
).slow(16)`;
|
||||
export const tetrisMini = `\`[[e5 [b4 c5] d5 [c5 b4]]
|
||||
[a4 [a4 c5] e5 [d5 c5]]
|
||||
[b4 [~ c5] d5 e5]
|
||||
[c5 a4 a4 ~]
|
||||
[[~ d5] [~ f5] a5 [g5 f5]]
|
||||
[e5 [~ c5] e5 [d5 c5]]
|
||||
[b4 [b4 c5] d5 e5]
|
||||
[c5 a4 a4 ~]],
|
||||
[[e2 e3]*4]
|
||||
[[a2 a3]*4]
|
||||
[[g#2 g#3]*2 [e2 e3]*2]
|
||||
[a2 a3 a2 a3 a2 a3 b1 c2]
|
||||
[[d2 d3]*4]
|
||||
[[c2 c3]*4]
|
||||
[[b1 b2]*2 [e2 e3]*2]
|
||||
[[a1 a2]*4]\`.slow(16)
|
||||
`;
|
||||
export const whirlyStrudel = `sequence(e4, [b2, b3], c4)
|
||||
.every(4, fast(2))
|
||||
.every(3, slow(1.5))
|
||||
.fast(slowcat(1.25, 1, 1.5))
|
||||
.every(2, _ => sequence(e4, r, e3, d4, r))`;
|
||||
export const giantSteps = `stack(
|
||||
// melody
|
||||
cat(
|
||||
"[F#5 D5] [B4 G4] Bb4 [B4 A4]",
|
||||
"[D5 Bb4] [G4 Eb4] F#4 [G4 F4]",
|
||||
"Bb4 [B4 A4] D5 [D#5 C#5]",
|
||||
"F#5 [G5 F5] Bb5 [F#5 F#5]",
|
||||
),
|
||||
// chords
|
||||
cat(
|
||||
"[B^7 D7] [G^7 Bb7] Eb^7 [Am7 D7]",
|
||||
"[G^7 Bb7] [Eb^7 F#7] B^7 [Fm7 Bb7]",
|
||||
"Eb^7 [Am7 D7] G^7 [C#m7 F#7]",
|
||||
"B^7 [Fm7 Bb7] Eb^7 [C#m7 F#7]"
|
||||
).voicings(['E3', 'G4']),
|
||||
// bass
|
||||
cat(
|
||||
"[B2 D2] [G2 Bb2] [Eb2 Bb3] [A2 D2]",
|
||||
"[G2 Bb2] [Eb2 F#2] [B2 F#2] [F2 Bb2]",
|
||||
"[Eb2 Bb2] [A2 D2] [G2 D2] [C#2 F#2]",
|
||||
"[B2 F#2] [F2 Bb2] [Eb2 Bb3] [C#2 F#2]"
|
||||
)
|
||||
).slow(20);`;
|
||||
export const transposedChordsHacked = `stack(
|
||||
"c2 eb2 g2",
|
||||
"Cm7".voicings(['g2','c4']).slow(2)
|
||||
).transpose(
|
||||
slowcat(1, 2, 3, 2).slow(2)
|
||||
).transpose(5)`;
|
||||
export const scaleTranspose = `stack(f2, f3, c4, ab4)
|
||||
.scale(sequence('F minor', 'F harmonic minor').slow(4))
|
||||
.scaleTranspose(sequence(0, -1, -2, -3).slow(4))
|
||||
.transpose(sequence(0, 1).slow(16))`;
|
||||
export const struct = `stack(
|
||||
"c2 g2 a2 [e2@2 eb2] d2 a2 g2 [d2 ~ db2]",
|
||||
"[C^7 A7] [Dm7 G7]".struct("[x@2 x] [~@2 x] [~ x@2]@2 [x ~@2] ~ [~@2 x@4]@2")
|
||||
.voicings(['G3','A4'])
|
||||
).slow(4)`;
|
||||
export const magicSofa = `stack(
|
||||
"<C^7 F^7 ~> <Dm7 G7 A7 ~>"
|
||||
.every(2, fast(2))
|
||||
.voicings(),
|
||||
"<c2 f2 g2> <d2 g2 a2 e2>"
|
||||
).slow(1).transpose.slowcat(0, 2, 3, 4)`;
|
||||
export const primalEnemy = `()=>{
|
||||
const f = fast("<1 <2 [4 8]>>");
|
||||
return stack(
|
||||
"c3,g3,c4".struct("[x ~]*2").apply(f).transpose("<0 <3 [5 [7 [9 [11 13]]]]>>"),
|
||||
"c2 [c2 ~]*2".tone(synth(osc('sawtooth8')).chain(vol(0.8),out())),
|
||||
"c1*2".tone(membrane().chain(vol(0.8),out()))
|
||||
).slow(1)
|
||||
}`;
|
||||
34
docs/dist/pianoroll.js
vendored
Normal file
34
docs/dist/pianoroll.js
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import {draw, queryEvents, getDrawContext} from "./draw.js";
|
||||
import {Pattern} from "../_snowpack/link/strudel.js";
|
||||
import * as Tone from "../_snowpack/pkg/tone.js";
|
||||
Pattern.prototype.pianoroll = function() {
|
||||
const ctx = getDrawContext();
|
||||
const w = window.innerWidth;
|
||||
const h = window.innerHeight;
|
||||
const s = 10;
|
||||
const maxMidi = 90;
|
||||
const height = h / maxMidi;
|
||||
let events;
|
||||
queryEvents(this, (_events) => events = _events, s);
|
||||
const clear = () => ctx.clearRect(0, 0, w, h);
|
||||
const drawEvents = (events2) => {
|
||||
events2.forEach((event) => {
|
||||
const t = Tone.getTransport().seconds;
|
||||
const isActive = event.whole.begin <= t && event.whole.end >= t;
|
||||
ctx.fillStyle = isActive ? "#FFCA28" : "#88ABF8";
|
||||
const x = Math.round(event.whole.begin / s * w);
|
||||
const width = Math.round((event.whole.end - event.whole.begin) / s * w);
|
||||
const y = Math.round(h - Number(event.value) / maxMidi * h);
|
||||
const offset = t / s * w;
|
||||
const margin = 0;
|
||||
ctx.fillRect(x - offset + margin, y, width, height);
|
||||
});
|
||||
};
|
||||
draw((t) => {
|
||||
clear();
|
||||
ctx.fillStyle = "#2A3236";
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
drawEvents(events);
|
||||
});
|
||||
return this;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue