From 5b67fccb1b10fb7fd4edd25569c4b54e3fa156ad Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 5 May 2023 16:17:22 +0200
Subject: [PATCH] vanilla-repl-cm6: draw first frame

---
 .../examples/vite-vanilla-repl-cm6/main.js    | 42 +++++++++++++------
 .../examples/vite-vanilla-repl-cm6/strudel.js |  5 +--
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/core/examples/vite-vanilla-repl-cm6/main.js b/packages/core/examples/vite-vanilla-repl-cm6/main.js
index bede9161..a8a1c754 100644
--- a/packages/core/examples/vite-vanilla-repl-cm6/main.js
+++ b/packages/core/examples/vite-vanilla-repl-cm6/main.js
@@ -5,11 +5,9 @@ import { initStrudel } from './strudel';
 import { funk42 } from './tunes';
 import { pianoroll, getDrawOptions, Drawer } from '@strudel.cycles/core';
 import './style.css';
+import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
 
-const repl = initStrudel();
-const canvas = document.getElementById('roll');
-canvas.width = canvas.width * 2;
-canvas.height = canvas.height * 2;
+const initAudio = initAudioOnFirstClick();
 
 const editor = new StrudelMirror({
   root: document.getElementById('editor'),
@@ -18,8 +16,26 @@ const editor = new StrudelMirror({
   onStop,
 });
 
+async function drawFirstFrame(editor, repl) {
+  const { evaluate } = repl;
+  const pattern = await evaluate(editor.code, false);
+  const initialHaps = pattern.queryArc(0, drawTime[1]);
+  drawPianoroll(initialHaps, 0);
+  return repl;
+}
+
+const repl = initStrudel().then(async (repl) => {
+  await drawFirstFrame(editor, repl);
+  return repl;
+});
+
+const canvas = document.getElementById('roll');
+canvas.width = canvas.width * 2;
+canvas.height = canvas.height * 2;
+
 async function onEvaluate() {
   const { evaluate, scheduler } = await repl;
+  await initAudio;
   editor.flash();
   if (!scheduler.started) {
     scheduler.stop();
@@ -37,15 +53,17 @@ async function onStop() {
   drawer.stop();
 }
 
+const drawTime = [-2, 2];
+function drawPianoroll(haps, time) {
+  pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0 }) });
+}
+
 const ctx = canvas.getContext('2d');
-let drawer = new Drawer(
-  (haps, time, { drawTime }) => {
-    const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.whole.end);
-    editor.highlight(currentFrame);
-    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0 }) });
-  },
-  [-2, 2],
-);
+let drawer = new Drawer((haps, time) => {
+  const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.whole.end);
+  editor.highlight(currentFrame);
+  drawPianoroll(haps, time);
+}, drawTime);
 
 document.getElementById('play').addEventListener('click', () => onEvaluate());
 document.getElementById('stop').addEventListener('click', async () => onStop());
diff --git a/packages/core/examples/vite-vanilla-repl-cm6/strudel.js b/packages/core/examples/vite-vanilla-repl-cm6/strudel.js
index efd899ea..de9b2cd7 100644
--- a/packages/core/examples/vite-vanilla-repl-cm6/strudel.js
+++ b/packages/core/examples/vite-vanilla-repl-cm6/strudel.js
@@ -1,6 +1,5 @@
-import { getAudioContext, webaudioOutput, initAudioOnFirstClick, registerSynthSounds } from '@strudel.cycles/webaudio';
+import { getAudioContext, webaudioOutput, registerSynthSounds } from '@strudel.cycles/webaudio';
 
-const initAudio = initAudioOnFirstClick();
 const ctx = getAudioContext();
 
 export async function initStrudel(options = {}) {
@@ -18,7 +17,7 @@ export async function initStrudel(options = {}) {
     import('@strudel.cycles/webaudio'),
   );
 
-  await Promise.all([initAudio, loadModules, registerSynthSounds(), registerSoundfonts()]);
+  await Promise.all([loadModules, registerSynthSounds(), registerSoundfonts()]);
 
   return repl({
     defaultOutput: webaudioOutput,