From 3b74c3a256e76eee958b3ef45e0a38f74541dddd Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 11 Sep 2022 10:44:13 -0700
Subject: [PATCH] Add a "narrow" railroad diagram to the audio scope post; add
 line numbers to the `samples` listing

---
 content/blog/2022/08/audio-scope-with-p5js/index.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/content/blog/2022/08/audio-scope-with-p5js/index.md b/content/blog/2022/08/audio-scope-with-p5js/index.md
index d6865b6..105e8a3 100644
--- a/content/blog/2022/08/audio-scope-with-p5js/index.md
+++ b/content/blog/2022/08/audio-scope-with-p5js/index.md
@@ -91,6 +91,14 @@ Our audio processing graph looks like this:
             rr.Terminal("destination")));
 {{< /figures/railroad >}}
 
+{{< figures/railroad id="audioContextDiagram" class="narrow-only" >}}
+    return rr.Diagram(
+        rr.Stack(
+            rr.Terminal("<audio>"),
+            rr.Terminal("Analyzer"),
+            rr.Terminal("destination")));
+{{< /figures/railroad >}}
+
 By itself the AudioContext doesn't actually play any audio. I'll tackle that
 next.
 
@@ -178,7 +186,7 @@ for (let i = 0; i < samples.length; i++) {
 
 The most interesting part of this function starts at line 66 where we get an array of samples from the analyzer node. The `samples` variable is a JavaScript `Float32Array`, with one element for each pixel of width.
 
-```js {linenos=false}
+```js {linenostart=30}
 samples = new Float32Array(p.width);
 ```