elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-11 21:58:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

build

Browse Source
This commit is contained in:
Felix Roos 2022-03-12 21:44:07 +01:00
parent 78a2a47fbf
commit ffd6ab2cc9
12 changed files with 211 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
docs/dist/App.js vendored
View File

@ -34,6 +34,7 @@ function App() {
defaultSynth,
onDraw: useCallback(markEvent(editor), [editor])
});
const [uiHidden, setUiHidden] = useState(false);
const logBox = useRef();
useLayoutEffect(() => {
logBox.current.scrollTop = logBox.current?.scrollHeight;
@ -67,18 +68,40 @@ function App() {
return /* @__PURE__ */ React.createElement("div", {
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 z-[10]"
className: cx("flex-none w-full h-14 px-2 flex border-b border-gray-200 justify-between z-[10]", uiHidden ? "bg-transparent text-white" : "bg-white")
}, /* @__PURE__ */ React.createElement("div", {
className: "flex items-center space-x-2"
}, /* @__PURE__ */ React.createElement("img", {
src: logo,
className: "Tidal-logo w-16 h-16",
className: "Tidal-logo w-12 h-12",
alt: "logo"
}), /* @__PURE__ */ React.createElement("h1", {
className: "text-2xl"
}, "Strudel REPL")), /* @__PURE__ */ React.createElement("div", {
className: "flex space-x-4"
}, /* @__PURE__ */ React.createElement("button", {
onClick: () => togglePlay()
}, !pending ? /* @__PURE__ */ React.createElement("span", {
className: "flex items-center w-16"
}, cycle.started ? /* @__PURE__ */ React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
className: "h-5 w-5",
viewBox: "0 0 20 20",
fill: "currentColor"
}, /* @__PURE__ */ React.createElement("path", {
fillRule: "evenodd",
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z",
clipRule: "evenodd"
})) : /* @__PURE__ */ React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
className: "h-5 w-5",
viewBox: "0 0 20 20",
fill: "currentColor"
}, /* @__PURE__ */ React.createElement("path", {
fillRule: "evenodd",
d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
clipRule: "evenodd"
})), cycle.started ? "pause" : "play") : /* @__PURE__ */ React.createElement(React.Fragment, null, "loading...")), /* @__PURE__ */ React.createElement("button", {
onClick: async () => {
const _code = getRandomTune();
console.log("tune", _code);
@ -86,14 +109,16 @@ function App() {
const parsed = await evaluate(_code);
setPattern(parsed.pattern);
}
}, "🎲 random tune"), /* @__PURE__ */ React.createElement("button", null, /* @__PURE__ */ React.createElement("a", {
}, "🎲 random"), /* @__PURE__ */ React.createElement("button", null, /* @__PURE__ */ React.createElement("a", {
href: "./tutorial"
}, "📚 tutorial")))), /* @__PURE__ */ React.createElement("section", {
}, "📚 tutorial")), /* @__PURE__ */ React.createElement("button", {
onClick: () => setUiHidden((c) => !c)
}, "👀 ", uiHidden ? "show ui" : "hide ui"))), /* @__PURE__ */ React.createElement("section", {
className: "grow flex flex-col text-gray-100"
}, /* @__PURE__ */ React.createElement("div", {
className: "grow relative"
}, /* @__PURE__ */ React.createElement("div", {
className: cx("h-full", error ? "focus:ring-red-500" : "focus:ring-slate-800")
className: cx("h-full transition-opacity", error ? "focus:ring-red-500" : "focus:ring-slate-800", uiHidden ? "opacity-0" : "opacity-100")
}, /* @__PURE__ */ React.createElement(CodeMirror, {
value: code,
editorDidMount: setEditor,
@ -106,16 +131,13 @@ function App() {
},
onChange: (_2, __, value) => setCode(value)
}), /* @__PURE__ */ React.createElement("span", {
className: "p-4 absolute top-0 right-0 text-xs whitespace-pre text-right"
className: "p-4 absolute top-0 right-0 text-xs whitespace-pre text-right pointer-events-none"
}, !cycle.started ? `press ctrl+enter to play
` : dirty ? `ctrl+enter to update
` : "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: "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: "z-[10] grow border-0 text-xs min-h-[200px] bg-[transparent]",
}, error?.message || "unknown error")), /* @__PURE__ */ React.createElement("textarea", {
className: "z-[10] h-16 border-0 text-xs bg-[transparent] border-t border-slate-600 resize-none",
value: log,
readOnly: true,
ref: logBox,

36
docs/dist/draw.js vendored
View File

@ -1,4 +1,5 @@
import * as Tone from "../_snowpack/pkg/tone.js";
import {Pattern} from "../_snowpack/link/strudel.js";
export const getDrawContext = (id = "test-canvas") => {
let canvas = document.querySelector("#" + id);
if (!canvas) {
@ -11,31 +12,28 @@ export const getDrawContext = (id = "test-canvas") => {
}
return canvas.getContext("2d");
};
export const draw = (callback) => {
Pattern.prototype.draw = function(callback, queryDuration) {
if (window.strudelAnimation) {
cancelAnimationFrame(window.strudelAnimation);
}
const animate = (t) => {
callback(t);
const ctx = getDrawContext();
let cycle, events = [];
const animate = (time) => {
const t = Tone.getTransport().seconds;
if (queryDuration) {
const currentCycle = Math.floor(t / queryDuration);
if (cycle !== currentCycle) {
cycle = currentCycle;
const begin = currentCycle * queryDuration;
const end = (currentCycle + 1) * queryDuration;
events = this.add(0).query(new State(new TimeSpan(begin, end)));
}
}
callback(ctx, events, t, queryDuration, time);
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);
return this;
};
export const cleanup = () => {
const ctx = getDrawContext();

1
docs/dist/evaluate.js vendored
View File

@ -7,6 +7,7 @@ import "./xen.js";
import "./tune.js";
import "./tune.js";
import "./pianoroll.js";
import "./draw.js";
import * as drawHelpers from "./draw.js";
import gist from "./gist.js";
import shapeshifter from "./shapeshifter.js";

51
docs/dist/pianoroll.js vendored
View File

@ -1,34 +1,29 @@
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();
Pattern.prototype.pianoroll = function({
timeframe = 10,
inactive = "#C9E597",
active = "#FFCA28",
background = "#2A3236",
maxMidi = 90,
minMidi = 0
} = {}) {
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";
const midiRange = maxMidi - minMidi + 1;
const height = h / midiRange;
this.draw((ctx, events, t) => {
ctx.fillStyle = background;
ctx.fillRect(0, 0, w, h);
drawEvents(events);
});
events.forEach((event) => {
const isActive = event.whole.begin <= t && event.whole.end >= t;
ctx.fillStyle = isActive ? active : inactive;
const x = Math.round(event.whole.begin / timeframe * w);
const width = Math.round((event.whole.end - event.whole.begin) / timeframe * w);
const y = Math.round(h - (Number(event.value) - minMidi) / midiRange * h);
const offset = t / timeframe * w;
const margin = 0;
ctx.fillRect(x - offset + margin + 1, y + 1, width - 2, height - 2);
});
}, timeframe * 2);
return this;
};

12
docs/dist/tunejs.js vendored
View File

@ -143,10 +143,10 @@ Tune.prototype.loadScale = function(name){
}
/* visualize in console */
console.log(" ");
/* console.log(" ");
console.log("LOADED "+name);
console.log(TuningList[name].description);
console.log(this.scale);
console.log(this.scale); */
var vis = [];
for (var i=0;i<100;i++) {
vis[i] = " ";
@ -163,8 +163,8 @@ Tune.prototype.loadScale = function(name){
for (var i=0;i<vis.length;i++) {
textvis += vis[i];
}
console.log(name)
console.log(textvis)
/* console.log(name)
console.log(textvis) */
// ET scale vis
var vis = [];
for (var i=0;i<100;i++) {
@ -183,8 +183,8 @@ Tune.prototype.loadScale = function(name){
for (var i=0;i<vis.length;i++) {
textvis += vis[i];
}
console.log(textvis)
console.log("equal-tempered major (reference)")
/* console.log(textvis)
console.log("equal-tempered major (reference)") */
}

86
docs/global.css
View File

@ -927,6 +927,9 @@ select {
.prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 0;
}
.pointer-events-none {
pointer-events: none;
}
.static {
position: static;
}
@ -967,24 +970,30 @@ select {
.contents {
display: contents;
}
.h-16 {
height: 4rem;
.h-14 {
height: 3.5rem;
}
.h-full {
height: 100%;
.h-12 {
height: 3rem;
}
.h-5 {
height: 1.25rem;
}
.h-full {
height: 100%;
}
.h-16 {
height: 4rem;
}
.min-h-screen {
min-height: 100vh;
}
.min-h-\[200px\] {
min-height: 200px;
}
.w-full {
width: 100%;
}
.w-12 {
width: 3rem;
}
.w-16 {
width: 4rem;
}
@ -1022,6 +1031,9 @@ select {
.cursor-not-allowed {
cursor: not-allowed;
}
.resize-none {
resize: none;
}
.flex-col {
flex-direction: column;
}
@ -1066,12 +1078,12 @@ select {
.rounded-md {
border-radius: 0.375rem;
}
.border {
border-width: 1px;
}
.border-0 {
border-width: 0px;
}
.border {
border-width: 1px;
}
.border-b {
border-bottom-width: 1px;
}
@ -1085,25 +1097,28 @@ select {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-gray-700 {
.border-slate-600 {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity));
border-color: rgb(71 85 105 / var(--tw-border-opacity));
}
.border-slate-500 {
--tw-border-opacity: 1;
border-color: rgb(100 116 139 / var(--tw-border-opacity));
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-\[transparent\] {
background-color: transparent;
}
.bg-slate-700 {
--tw-bg-opacity: 1;
background-color: rgb(51 65 85 / 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));
@ -1111,9 +1126,6 @@ select {
.p-4 {
padding: 1rem;
}
.p-2 {
padding: 0.5rem;
}
.p-1 {
padding: 0.25rem;
}
@ -1139,6 +1151,10 @@ select {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
@ -1147,10 +1163,6 @@ select {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-slate-400 {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity));
@ -1159,9 +1171,20 @@ select {
--tw-text-opacity: 1;
color: rgb(254 202 202 / var(--tw-text-opacity));
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.filter {
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);
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
body {
background-color: #2a3236;
@ -1171,24 +1194,11 @@ body {
.CodeMirror {
height: 100% !important;
background-color: transparent !important;
//font-size: 15px;
font-size: 15px;
}
.CodeMirror-line span {
background-color: #2a323660;
}
.CodeMirror-code {
//padding: 10px;
}
.CodeMirror-linenumber {
background-color: transparent !important;
}
.hover\:bg-slate-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(100 116 139 / var(--tw-bg-opacity));
.CodeMirror-line > span {
background-color: #2a323690;
}
.hover\:bg-slate-600:hover {

55
docs/tutorial/index.9b9efe63.css → docs/tutorial/index.4949a046.css
View File

@ -674,6 +674,8 @@ Ensure the default browser behavior of the `hidden` attribute.
margin-top: 0;
}.prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 0;
}.pointer-events-none {
pointer-events: none;
}.static {
position: static;
}.absolute {
@ -701,18 +703,22 @@ Ensure the default browser behavior of the `hidden` attribute.
display: inline-flex;
}.contents {
display: contents;
}.h-16 {
height: 4rem;
}.h-full {
height: 100%;
}.h-14 {
height: 3.5rem;
}.h-12 {
height: 3rem;
}.h-5 {
height: 1.25rem;
}.h-full {
height: 100%;
}.h-16 {
height: 4rem;
}.min-h-screen {
min-height: 100vh;
}.min-h-\[200px\] {
min-height: 200px;
}.w-full {
width: 100%;
}.w-12 {
width: 3rem;
}.w-16 {
width: 4rem;
}.w-5 {
@ -740,6 +746,8 @@ Ensure the default browser behavior of the `hidden` attribute.
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}.cursor-not-allowed {
cursor: not-allowed;
}.resize-none {
resize: none;
}.flex-col {
flex-direction: column;
}.items-center {
@ -772,10 +780,10 @@ Ensure the default browser behavior of the `hidden` attribute.
white-space: pre;
}.rounded-md {
border-radius: 0.375rem;
}.border {
border-width: 1px;
}.border-0 {
border-width: 0px;
}.border {
border-width: 1px;
}.border-b {
border-bottom-width: 1px;
}.border-t {
@ -785,27 +793,27 @@ Ensure the default browser behavior of the `hidden` attribute.
}.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}.border-gray-700 {
}.border-slate-600 {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity));
border-color: rgb(71 85 105 / var(--tw-border-opacity));
}.border-slate-500 {
--tw-border-opacity: 1;
border-color: rgb(100 116 139 / var(--tw-border-opacity));
}.bg-transparent {
background-color: transparent;
}.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}.bg-\[transparent\] {
background-color: transparent;
}.bg-slate-700 {
--tw-bg-opacity: 1;
background-color: rgb(51 65 85 / 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));
}.p-4 {
padding: 1rem;
}.p-2 {
padding: 0.5rem;
}.p-1 {
padding: 0.25rem;
}.px-2 {
@ -824,32 +832,37 @@ Ensure the default browser behavior of the `hidden` attribute.
}.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}.text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}.text-slate-400 {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity));
}.text-red-200 {
--tw-text-opacity: 1;
color: rgb(254 202 202 / var(--tw-text-opacity));
}.opacity-0 {
opacity: 0;
}.opacity-100 {
opacity: 1;
}.filter {
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);
}.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}.react-codemirror2,
.CodeMirror {
width: 100% !important;
height: inherit !important;
}main {
margin: 0 auto;
}.hover\:bg-slate-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(100 116 139 / var(--tw-bg-opacity));
}.hover\:bg-slate-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@ -1348,4 +1361,4 @@ span.CodeMirror-selectedtext { background: none; }
color: white !important;
}
/*# sourceMappingURL=index.9b9efe63.css.map */
/*# sourceMappingURL=index.4949a046.css.map */

1
docs/tutorial/index.4949a046.css.map Normal file
View File

File diff suppressed because one or more lines are too long

113
docs/tutorial/index.dbbfddd8.js → docs/tutorial/index.9717dc33.js
View File

@ -64459,11 +64459,10 @@ exports.default = Tune;
/* load the scale */ var freqs = TuningList[name].frequencies;
this.scale = [];
for(var i = 0; i < freqs.length - 1; i++)this.scale.push(freqs[i] / freqs[0]);
/* visualize in console */ console.log(" ");
console.log("LOADED " + name);
console.log(TuningList[name].description);
console.log(this.scale);
var vis = [];
/* visualize in console */ /* console.log(" ");
console.log("LOADED "+name);
console.log(TuningList[name].description);
console.log(this.scale); */ var vis = [];
for(var i = 0; i < 100; i++)vis[i] = " ";
for(var i = 0; i < this.scale.length; i++){
var spot = Math.round(this.scale[i] * 100 - 100);
@ -64472,9 +64471,8 @@ exports.default = Tune;
}
var textvis = "";
for(var i = 0; i < vis.length; i++)textvis += vis[i];
console.log(name);
console.log(textvis);
// ET scale vis
/* console.log(name)
console.log(textvis) */ // ET scale vis
var vis = [];
for(var i = 0; i < 100; i++)vis[i] = " ";
for(var i = 0; i < this.etmajor.length; i++){
@ -64484,9 +64482,8 @@ exports.default = Tune;
}
var textvis = "";
for(var i = 0; i < vis.length; i++)textvis += vis[i];
console.log(textvis);
console.log("equal-tempered major (reference)");
};
/* console.log(textvis)
console.log("equal-tempered major (reference)") */ };
/* Search the names of tunings
Returns an array of names of tunings */ Tune.prototype.search = function(letters) {
var possible = [];
@ -136146,57 +136143,39 @@ Tune.prototype.isValidScale = function(name) {
};
},{"@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();
_strudelMjs.Pattern.prototype.pianoroll = function({ timeframe =10 , inactive ='#C9E597' , active ='#FFCA28' , background ='#2A3236' , maxMidi =90 , minMidi =0 , } = {
}) {
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';
const midiRange = maxMidi - minMidi + 1;
const height = h / midiRange;
this.draw((ctx, events, t)=>{
ctx.fillStyle = background;
ctx.fillRect(0, 0, w, h);
drawEvents(events1);
});
events.forEach((event)=>{
const isActive = event.whole.begin <= t && event.whole.end >= t;
ctx.fillStyle = isActive ? active : inactive;
const x = Math.round(event.whole.begin / timeframe * w);
const width = Math.round((event.whole.end - event.whole.begin) / timeframe * w);
const y = Math.round(h - (Number(event.value) - minMidi) / midiRange * h);
const offset = t / timeframe * w;
const margin = 0;
ctx.fillRect(x - offset + margin + 1, y + 1, width - 2, height - 2);
});
}, timeframe * 2);
return this;
};
},{"./draw.mjs":"dHJhg","../../strudel.mjs":"ggZqJ","tone":"2tCfN"}],"dHJhg":[function(require,module,exports) {
},{"../../strudel.mjs":"ggZqJ"}],"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");
var _strudelMjs = require("../../strudel.mjs");
const getDrawContext = (id = 'test-canvas')=>{
let canvas = document.querySelector('#' + id);
if (!canvas) {
@ -136209,28 +136188,26 @@ const getDrawContext = (id = 'test-canvas')=>{
}
return canvas.getContext('2d');
};
const draw = (callback)=>{
_strudelMjs.Pattern.prototype.draw = function(callback, queryDuration) {
if (window.strudelAnimation) cancelAnimationFrame(window.strudelAnimation);
const animate = (t)=>{
callback(t);
const ctx = getDrawContext();
let cycle, events = [];
const animate = (time)=>{
const t = _tone.getTransport().seconds;
if (queryDuration) {
const currentCycle = Math.floor(t / queryDuration);
if (cycle !== currentCycle) {
cycle = currentCycle;
const begin = currentCycle * queryDuration;
const end = (currentCycle + 1) * queryDuration;
events = this.add(0).query(new State(new TimeSpan(begin, end)));
}
}
callback(ctx, events, t, queryDuration, time);
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);
return this;
};
const cleanup = ()=>{
const ctx = getDrawContext();
@ -136239,7 +136216,7 @@ const cleanup = ()=>{
if (window.strudelScheduler) clearInterval(window.strudelScheduler);
};
},{"tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"fYZxP":[function(require,module,exports) {
},{"tone":"2tCfN","../../strudel.mjs":"ggZqJ","@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()
@ -183013,4 +182990,4 @@ exports.default = cx;
},{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}]},["3uVTb"], "3uVTb", "parcelRequire94c2")
//# sourceMappingURL=index.dbbfddd8.js.map
//# sourceMappingURL=index.9717dc33.js.map

2
docs/tutorial/index.dbbfddd8.js.map → docs/tutorial/index.9717dc33.js.map
View File

File diff suppressed because one or more lines are too long

1
docs/tutorial/index.9b9efe63.css.map
View File

File diff suppressed because one or more lines are too long

4
docs/tutorial/index.html
View File

@ -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.9b9efe63.css">
<link rel="stylesheet" type="text/css" href="/tutorial/index.4949a046.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.dbbfddd8.js" defer=""></script>
<script src="/tutorial/index.9717dc33.js" defer=""></script>
</body>
</html>