mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 21:58:37 +00:00
build
This commit is contained in:
Felix Roos
parent
1d1d29a163
commit
cbd1bde7e6
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;
|
||||
};
|
||||
@ -952,6 +952,9 @@ select {
|
||||
.bottom-2 {
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
.z-\[10\] {
|
||||
z-index: 10;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@ -1090,10 +1093,6 @@ select {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(100 116 139 / var(--tw-border-opacity));
|
||||
}
|
||||
.bg-\[\#2A3236\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(42 50 54 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
@ -1102,9 +1101,8 @@ select {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[\#283237\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(40 50 55 / var(--tw-bg-opacity));
|
||||
.bg-\[transparent\] {
|
||||
background-color: transparent;
|
||||
}
|
||||
.bg-slate-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
@ -1165,9 +1163,27 @@ select {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #2a3236;
|
||||
}
|
||||
|
||||
.react-codemirror2,
|
||||
.CodeMirror {
|
||||
height: 100% !important;
|
||||
background-color: transparent !important;
|
||||
//font-size: 15px;
|
||||
}
|
||||
|
||||
.CodeMirror-line span {
|
||||
background-color: #2a323660;
|
||||
}
|
||||
|
||||
.CodeMirror-code {
|
||||
//padding: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.hover\:bg-slate-500:hover {
|
||||
|
||||
@ -691,6 +691,8 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
right: 0.5rem;
|
||||
}.bottom-2 {
|
||||
bottom: 0.5rem;
|
||||
}.z-\[10\] {
|
||||
z-index: 10;
|
||||
}.block {
|
||||
display: block;
|
||||
}.flex {
|
||||
@ -789,18 +791,14 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
}.border-slate-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(100 116 139 / var(--tw-border-opacity));
|
||||
}.bg-\[\#2A3236\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(42 50 54 / var(--tw-bg-opacity));
|
||||
}.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}.bg-slate-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
|
||||
}.bg-\[\#283237\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(40 50 55 / var(--tw-bg-opacity));
|
||||
}.bg-\[transparent\] {
|
||||
background-color: transparent;
|
||||
}.bg-slate-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(71 85 105 / var(--tw-bg-opacity));
|
||||
@ -1350,4 +1348,4 @@ span.CodeMirror-selectedtext { background: none; }
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.edd7bd0d.css.map */
|
||||
/*# sourceMappingURL=index.9b9efe63.css.map */
|
||||
1
docs/tutorial/index.9b9efe63.css.map
Normal file
1
docs/tutorial/index.9b9efe63.css.map
Normal file
File diff suppressed because one or more lines are too long
@ -41871,6 +41871,8 @@ var _voicings = require("./voicings");
|
||||
var _tonalMjs = require("./tonal.mjs");
|
||||
var _xenMjs = require("./xen.mjs");
|
||||
var _tuneMjs = require("./tune.mjs");
|
||||
var _pianorollMjs = require("./pianoroll.mjs");
|
||||
var _drawMjs = require("./draw.mjs");
|
||||
var _gistJs = require("./gist.js");
|
||||
var _gistJsDefault = parcelHelpers.interopDefault(_gistJs);
|
||||
var _shapeshifter = require("./shapeshifter");
|
||||
@ -41902,12 +41904,13 @@ hackLiteral(String, [
|
||||
'p'
|
||||
], bootstrapped.pure); // comment out this line if you panic
|
||||
// this will add everything to global scope, which is accessed by eval
|
||||
Object.assign(globalThis, bootstrapped, _tone1, _tone, {
|
||||
Object.assign(globalThis, bootstrapped, _tone1, _tone, _voicings, _drawMjs, {
|
||||
gist: _gistJsDefault.default
|
||||
});
|
||||
const evaluate = async (code)=>{
|
||||
const shapeshifted = _shapeshifterDefault.default(code); // transform syntactically correct js code to semantically usable code
|
||||
// console.log('shapeshifted', shapeshifted);
|
||||
_drawMjs.cleanup();
|
||||
let evaluated = await eval(shapeshifted);
|
||||
if (typeof evaluated === 'function') evaluated = evaluated();
|
||||
if (typeof evaluated === 'string') evaluated = _strudelMjs.withLocationOffset(_parse.minify(evaluated), {
|
||||
@ -41926,7 +41929,7 @@ const evaluate = async (code)=>{
|
||||
};
|
||||
};
|
||||
|
||||
},{"../../strudel.mjs":"ggZqJ","./tone":"aBpVm","./midi":"kToux","./voicings":"bexb4","./tonal.mjs":"j8DFK","./xen.mjs":"2MdCD","./tune.mjs":"ggPHE","./gist.js":"fYZxP","./shapeshifter":"67UCx","./parse":"dddDq","tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"ggZqJ":[function(require,module,exports) {
|
||||
},{"../../strudel.mjs":"ggZqJ","./tone":"aBpVm","./midi":"kToux","./voicings":"bexb4","./tonal.mjs":"j8DFK","./xen.mjs":"2MdCD","./tune.mjs":"ggPHE","./pianoroll.mjs":"6BZJ6","./draw.mjs":"dHJhg","./gist.js":"fYZxP","./shapeshifter":"67UCx","./parse":"dddDq","tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"ggZqJ":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "curry", ()=>curry
|
||||
@ -136142,7 +136145,101 @@ Tune.prototype.isValidScale = function(name) {
|
||||
}
|
||||
};
|
||||
|
||||
},{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"fYZxP":[function(require,module,exports) {
|
||||
},{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"6BZJ6":[function(require,module,exports) {
|
||||
var _drawMjs = require("./draw.mjs");
|
||||
var _strudelMjs = require("../../strudel.mjs");
|
||||
var _tone = require("tone");
|
||||
_strudelMjs.Pattern.prototype.pianoroll = function() {
|
||||
// draw stuff here with p.query
|
||||
const ctx = _drawMjs.getDrawContext();
|
||||
const w = window.innerWidth;
|
||||
const h = window.innerHeight;
|
||||
const s = 10; // 10s in viewport
|
||||
const maxMidi = 90;
|
||||
const height = h / maxMidi;
|
||||
let events1;
|
||||
_drawMjs.queryEvents(this, (_events)=>events1 = _events
|
||||
, s);
|
||||
const clear = ()=>ctx.clearRect(0, 0, w, h)
|
||||
;
|
||||
const drawEvents = (events)=>{
|
||||
events.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;
|
||||
// console.log(x, y, width, height)
|
||||
ctx.fillRect(x - offset + margin, y, width, height);
|
||||
});
|
||||
};
|
||||
_drawMjs.draw((t)=>{
|
||||
clear();
|
||||
ctx.fillStyle = '#2A3236';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
drawEvents(events1);
|
||||
});
|
||||
return this;
|
||||
};
|
||||
|
||||
},{"./draw.mjs":"dHJhg","../../strudel.mjs":"ggZqJ","tone":"2tCfN"}],"dHJhg":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "getDrawContext", ()=>getDrawContext
|
||||
);
|
||||
parcelHelpers.export(exports, "draw", ()=>draw
|
||||
);
|
||||
parcelHelpers.export(exports, "queryEvents", ()=>queryEvents
|
||||
);
|
||||
parcelHelpers.export(exports, "cleanup", ()=>cleanup
|
||||
);
|
||||
var _tone = require("tone");
|
||||
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');
|
||||
};
|
||||
const draw = (callback)=>{
|
||||
if (window.strudelAnimation) cancelAnimationFrame(window.strudelAnimation);
|
||||
const animate = (t)=>{
|
||||
callback(t);
|
||||
window.strudelAnimation = requestAnimationFrame(animate);
|
||||
};
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
const queryEvents = (pattern, callback, seconds)=>{
|
||||
const queryEvents1 = ()=>{
|
||||
const t = _tone.getTransport().seconds;
|
||||
const begin = Math.floor(t / seconds) * seconds;
|
||||
const end = begin + seconds * 4;
|
||||
// console.log('query', t, begin, end);
|
||||
const events = pattern.add(0).query(new State(new TimeSpan(begin, end)));
|
||||
callback(events);
|
||||
};
|
||||
queryEvents1();
|
||||
if (window.strudelScheduler) clearInterval(window.strudelScheduler);
|
||||
window.strudelScheduler = setInterval(()=>{
|
||||
queryEvents1();
|
||||
}, seconds * 1500);
|
||||
};
|
||||
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);
|
||||
};
|
||||
|
||||
},{"tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"fYZxP":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
exports.default = (route)=>fetch(`https://gist.githubusercontent.com/${route}?cachebust=${Date.now()}`).then((res)=>res.text()
|
||||
@ -182916,4 +183013,4 @@ exports.default = cx;
|
||||
|
||||
},{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}]},["3uVTb"], "3uVTb", "parcelRequire94c2")
|
||||
|
||||
//# sourceMappingURL=index.7a60a07f.js.map
|
||||
//# sourceMappingURL=index.dbbfddd8.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="/tutorial/favicon.e3ab9dd9.ico">
|
||||
<link rel="stylesheet" type="text/css" href="/tutorial/index.edd7bd0d.css">
|
||||
<link rel="stylesheet" type="text/css" href="/tutorial/index.9b9efe63.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Strudel REPL">
|
||||
<title>Strudel Tutorial</title>
|
||||
@ -11,6 +11,6 @@
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<script src="/tutorial/index.7a60a07f.js" defer=""></script>
|
||||
<script src="/tutorial/index.dbbfddd8.js" defer=""></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user