move stuff around, add flow charts

iclc2023/slides/src/MiniComparison.jsx

@@ -14,7 +14,7 @@ function MiniComparison() {
   return (
     <>
       <h1>
-        Mini Notation -&gt; JavaScript
+        User Code: Mini Notation -&gt; JavaScript
         <br />
         <small>External DSL</small>
       </h1>

iclc2023/slides/src/QueryDemo.jsx

@@ -3,7 +3,13 @@ import Highlight from './Highlight.jsx';
 import Stepper from './Stepper.jsx';
 
 const snippets = [
-  [<SlideRepl tune={`s("bd [hh sd]").crush(4).log()`} hideHeader />, 'Logging Events'],
+  [
+    <>
+      {' '}
+      <SlideRepl tune={`s("bd [hh sd]").crush(4).log()`} hideHeader />
+    </>,
+    'Logging Events',
+  ],
   [
     <>
       <Highlight
@@ -27,14 +33,17 @@ console.log(events.map(e => e.show()))`}
 
 function QueryDemo() {
   return (
-    <Stepper
-      steps={snippets.map(([snippet, label]) => (
-        <div className="py-4 space-y-4">
-          <h3>{label}</h3>
-          {snippet}
-        </div>
-      ))}
-    />
+    <>
+      <img src="./img/queryflow.png" className="w-[800px]" />
+      <Stepper
+        steps={snippets.map(([snippet, label]) => (
+          <div className="py-4 space-y-4">
+            <h3>{label}</h3>
+            {snippet}
+          </div>
+        ))}
+      />
+    </>
   );
 }
 

iclc2023/slides/src/Slides.jsx

@@ -27,15 +27,19 @@ const order = [
   'repl-features',
   'viz',
 
-  'patterns-events',
-  'events-audio', // outputs
-  'outputs',
-  //
   'replflow',
+
+  // User Code
   'transpilation',
   'mininotation',
   'mini-comparison',
-  // scheduling?
+  // Patterns
+  'patterns-events',
+  // scheduler?
+  // Output
+  'events-audio',
+  'outputs',
+  //
   // pattern alignment?
   // flexible typing?
   // future outlook?

iclc2023/slides/src/TranspilationDemo.jsx

@@ -66,11 +66,14 @@ function TranspilationDemo() {
     <div className="not-prose space-y-8">
       <Stepper
         steps={[
-          <ul className="list-decimal pl-8">
-            <li>Parse JS Code with acorn to get AST</li>
-            <li>Modify AST with estree-walker</li>
-            <li>Convert modified AST back to JS with escodegen</li>
-          </ul>,
+          <>
+            <img src="./img/transpileflow.png" className="h-[500px]" />
+            <ul className="list-decimal pl-8">
+              <li>Parse JS Code with acorn to get AST</li>
+              <li>Modify AST with estree-walker</li>
+              <li>Convert modified AST back to JS with escodegen</li>
+            </ul>
+          </>,
           <TranspilationEditor code={`"bd [hh sd]"`} />,
         ]}
       />

iclc2023/slides/src/slides/mininotation.mdx

@@ -3,6 +3,8 @@ import Stepper from '../Stepper';
 
 # User Code: Mini Notation
 
+<img src="./img/pegflow.png" />
+
 <Stepper
   steps={[
     <ul className="list-decimal pl-8">

iclc2023/slides/src/slides/patterns-events.mdx

@@ -1,5 +1,5 @@
 import QueryDemo from '../QueryDemo.jsx';
 
-# Patterns -> Events
+# Querying: From Patterns to Events
 
 <QueryDemo />

iclc2023/slides/src/slides/repl-features.mdx

@@ -1,13 +1,13 @@
 # Strudel REPL: Features
 
-- Visual Feedback
-- Offline Support (+ installable PWA)
 - Outputs: Web Audio, MIDI, OSC, CSound, Serial, ..
+- Visual Feedback
 - Examples to shuffle through
 - Sharable URLs
 - Sound Browser
 - Console
 - Reference
+- Offline Support (+ installable PWA)
 - Themable + Custom Fonts
 
 ![illegible](./img/illegible.png)

iclc2023/slides/src/slides/replflow.mdx

@@ -1,4 +1,4 @@
-# REPL
+# Strudel REPL: System Overview
 
 <center>
   <img src="./img/strudelflow.png" className="w-[900px]" />

iclc2023/slides/src/slides/usage.mdx

@@ -2,10 +2,10 @@ import Highlight from '../Highlight.jsx';
 
 # Ways to use Strudel
 
-- REPL at [strudel.tidalcycles.org](https://strudel.tidalcycles.org)
+- "Strudel REPL" at [strudel.tidalcycles.org](https://strudel.tidalcycles.org)
+- `@strudel.cycles/*` npm packages for your own projects
 - Embeddable [Web Component](https://github.com/tidalcycles/strudel/tree/main/packages/embed#strudelcyclesembed)
-- 16 npm packages for granular use
-- Plugins for [Mastodon](https://github.com/mortuosplango/topfenstrudel) and Discourse:
+- Browser Plugin for [Mastodon](https://github.com/mortuosplango/topfenstrudel) + Discourse Plugin:
 
 <div className="flex">
   <img src="./img/topfenstrudel.png" />

iclc2023/slides/src/slides/viz.mdx

@@ -2,6 +2,8 @@ import { SlideRepl } from '../SlideRepl.jsx';
 
 # Visual Feedback
 
+Highlighting + Piano Roll
+
 <SlideRepl
   hideHeader
   punchcard

iclc2023/slides/src/slides/whatIsStrudel.mdx

@@ -3,7 +3,7 @@ import { SlideRepl } from '../SlideRepl.jsx';
 # What is Strudel
 
 - Tidal Cycles ported to JavaScript
-- zero-install live coding for the browser
+- zero-install live coding environment for the browser
 - free & open source, hackable, sharable, embeddable:
 
 <SlideRepl