17 files changed, 65 insertions, 16 deletions

diff --git a/guide-src/ex-hue-shift-time.png b/guide-src/ex-hue-shift-time.png
new file mode 100644
index 0000000..931403c
--- /dev/null
+++ b/guide-src/ex-hue-shift-time.png
diff --git a/guide-src/ex-hue-shift.png b/guide-src/ex-hue-shift.png
new file mode 100644
index 0000000..ff573a0
--- /dev/null
+++ b/guide-src/ex-hue-shift.png
diff --git a/guide-src/ex-last-frame.png b/guide-src/ex-last-frame.png
new file mode 100644
index 0000000..5082d9c
--- /dev/null
+++ b/guide-src/ex-last-frame.png
diff --git a/guide-src/ex-multiply-add.png b/guide-src/ex-multiply-add.png
index 1b826ad..050c7e9 100644
--- a/guide-src/ex-multiply-add.png
+++ b/guide-src/ex-multiply-add.png
diff --git a/guide-src/ex-multiply-vector.png b/guide-src/ex-multiply-vector.png
index e25ea1d..97b1fa5 100644
--- a/guide-src/ex-multiply-vector.png
+++ b/guide-src/ex-multiply-vector.png
diff --git a/guide-src/ex-multiply.png b/guide-src/ex-multiply.png
index 1f3260d..5b9d635 100644
--- a/guide-src/ex-multiply.png
+++ b/guide-src/ex-multiply.png
diff --git a/guide-src/ex-posx.png b/guide-src/ex-posx.png
index 52c4375..143ab32 100644
--- a/guide-src/ex-posx.png
+++ b/guide-src/ex-posx.png
diff --git a/guide-src/ex-rotate-2d.png b/guide-src/ex-rotate-2d.png
new file mode 100644
index 0000000..d5bae7e
--- /dev/null
+++ b/guide-src/ex-rotate-2d.png
diff --git a/guide-src/ex-vector.png b/guide-src/ex-vector.png
index 681c6fe..acda92c 100644
--- a/guide-src/ex-vector.png
+++ b/guide-src/ex-vector.png
diff --git a/guide-src/ex-weighted-sum.png b/guide-src/ex-weighted-sum.png
new file mode 100644
index 0000000..4d58a8c
--- /dev/null
+++ b/guide-src/ex-weighted-sum.png
diff --git a/guide-src/index.html b/guide-src/index.html
index 7b5de8f..c4f0869 100644
--- a/guide-src/index.html
+++ b/guide-src/index.html
@@ -2,22 +2,22 @@
 
 <h3>your first pugl</h3>
 <p>
-when you load up pugl for the first time, you should be greeted with a "Buffer" widget.
-try changing its "input" value to <code>.pos.x</code>.
+when you load up pugl for the first time, you should be greeted with a “Buffer” widget.
+try changing its “input” value to <code>.pos.x</code>.
 <div>
 	<img src="ex-posx.png" alt="">
 </div>
 you should see a nice gradient like this: <span style="display:inline-block;margin-right:1em;width:2em;height:1em;background-image:linear-gradient(90deg, #000,#000,#000,#fff);"></span>
 here the color of each pixel is directly determined by its x coordinate.
 specifically: <code>.pos.x</code> is −1 at the left side of the screen and +1 at the right side of the screen.
-since the "Buffer" widget's title is in <span style="color:yellow;font-weight:bold;">yellow</span>,
+since the “Buffer” widget’s title is in <span style="color:yellow;font-weight:bold;">yellow</span>,
 the pixel values will be drawn from it. 0 (or anything below 0) is black and 1 (or anything above 1) is white,
 so we see a gradient from black to white starting from the center of the screen.
 </p>
 <p>
-now let's try something a little more interesting. try adding a "Multiply" widget (by searching for it or
-selecting it from the "math" section). set the "a" input to <code>.pos.x</code> and the "b" input to
-<code>.pos.y</code>. then click on the "Multiply" text to set it as the active widget.
+now let’s try something a little more interesting. try adding a “Multiply” widget (by searching for it or
+selecting it from the “math” section). set the “a” input to <code>.pos.x</code> and the “b” input to
+<code>.pos.y</code>. then click on the “Multiply” text to set it as the active widget.
 <div>
 	<img src="ex-multiply.png" alt="">
 </div>
@@ -28,20 +28,20 @@ white, and the other two corners are black: <img src="output-multiply.png" style
 <h3>vectors</h3>
 
 <p>
-well, black and white is pretty boring. let's try making some colors!
-one of the nice things about shaders is that they're very good at dealing with <a href="https://en.wikipedia.org/wiki/Vector_%28mathematics_and_physics%29" target="_blank">vectors</a>.
-there's a lot of mathematical theory behind vectors, but for simple shader programming all that really matters is that a vector is a list of numbers (called <em>components</em>),
-&amp; in shaders you basically only deal with vectors with 2 to 4 components (labelled x, y, z, w).
+well, black &amp; white is pretty boring. let’s try making some colors!
+one of the nice things about shaders is that they’re very good at dealing with <a href="https://en.wikipedia.org/wiki/Vector_%28mathematics_and_physics%29" target="_blank">vectors</a>.
+there’s a lot of mathematical theory behind vectors, but for our purposes all that really matters is that a vector is a list of numbers (called <em>components</em>).
+in shaders you basically only deal with vectors with 2 to 4 components (referred to as x, y, z, w).
 in graphics programming, colors are represented as vectors with 3 components, <span style="color:#f00;">red</span>,
 <span style="color:#0f0;">green</span>, and <span style="color:#22f;">blue</span>, which go from 0 to 1.
-try putting <code>0,0.8,1</code> in a "Buffer" widget and making it active.
+try putting <code>0,0.8,1</code> in a “Buffer” widget and making it active.
 now the widget is outputting a vector with x=0, y=0.8, and z=1, so
-you'll get a nice <span style="color:#0cf">greenish blue</span> color!
+you’ll get a nice <span style="color:#0cf">greenish blue</span> color!
 </p>
 
 <p>
 <code>.pos</code> is itself a vector, so you can just throw it into the Buffer input:
-<div><img src="ex-vector.png" alt=""></div>
+<div><img src="ex-vector.png" alt=""> <img src="output-pos.png" alt="" height="32"></div>
 notice how the output is red on the right side of the screen (where the x component of <code>.pos</code> is high)
 and green at the top of the screen (where the y component of <code>.pos</code> is high).
 </p>
@@ -58,12 +58,61 @@ so the top-left corner is red, because (−1, 1) × −1 = (1, −1), so the top
 
 <p>
 you can use the output of one widget to specify the input of another widget using its name.
-try creating an "Add" widget with inputs <code>mul1,0</code> and <code>0,0,.pos.x</code> (assuming
-your Multiply widget from the last section was called "mul1").
+try creating an “Add” widget with inputs <code>mul1,0</code> and <code>0,0,.pos.x</code> (assuming
+your Multiply widget from the last section was called mul1).
 <div><img src="ex-multiply-add.png" alt=""> <img src="output-multiply-add.png" alt="" height="32"></div>
 now the left side looks the same as before, but the right side (where <code>.pos.x</code> is 1) is bluer!
 </p>
 
 <h3>putting everything together</h3>
 
-<h1 style="color:red">TODO</h1>
+<p>
+alright let's use all this to make something cool.
+we'll start by making a rainbow.
+the “Hue shift” widget shifts the hue of a color through the rainbow.
+so if we start with a color of red, and shift it by <code>.pos.x</code>,
+we'll get a rainbow across the screen:
+<div>
+<img src="ex-hue-shift.png" alt=""> <img src="output-hue-shift.png" alt="" height="32">
+</div>
+</p>
+
+<p>
+now let's animate this rainbow: create a new “Add” widget,
+and set a=<code>.pos.x</code>, b=<code>.time</code>,
+and use that as the shift instead of <code>.pos.x</code>:
+<div><img src="ex-hue-shift-time.png" alt=""></div>
+now the rainbow moves across the screen over time!
+</p>
+
+<p>
+next we’ll use the widget that makes pugl unique ☺
+“Last frame”. this lets you grab pixel values from the previous frame
+to use in the current frame. add a “Last frame” widget,
+and set it as the active widget. notice how the rainbow freezes in place —
+that’s because each pixel value is just being determined by what it was 
+on the last frame.
+<div><img src="ex-last-frame.png" alt=""></div>
+</p>
+<p>
+now add a “Weighted sum” widget, set “a weight” to 0.95, “b weight” to 0.05,
+”a” to your last frame widget's output, and “b” to the hue shift's output.
+this will output a value which is 95% like the previous frame's value,
+and 5% like the shifting rainbow.
+<div><img src="ex-weighted-sum.png" alt=""></div>
+try switching between the “Hue shift” and “Weighted sum” widgets
+and note how the weighted sum is blurrier, because it's averaging
+with the previous pixel value.
+</p>
+<p>
+now, we don’t have to use <code>.pos</code> as the position for getting
+pixel values from the last frame. instead, let’s rotate <code>.pos</code>
+by a small amount and use that as the position for the “Last frame” widget:
+<div><img src="ex-rotate-2d.png" alt=""> <img src="output-rotate-2d.png" alt=""></div>
+now we’re getting something interesting!
+</p>
+
+<p>
+be sure to check out the rest of this guide to learn all the things
+you can do with pugl. have fun! 🐱
+</p>
diff --git a/guide-src/output-hue-shift.png b/guide-src/output-hue-shift.png
new file mode 100644
index 0000000..8e1efbd
--- /dev/null
+++ b/guide-src/output-hue-shift.png
diff --git a/guide-src/output-multiply-add.png b/guide-src/output-multiply-add.png
index 6bcb4f6..1d35a40 100644
--- a/guide-src/output-multiply-add.png
+++ b/guide-src/output-multiply-add.png
diff --git a/guide-src/output-multiply-vector.png b/guide-src/output-multiply-vector.png
index f1c2da1..5f6fbb9 100644
--- a/guide-src/output-multiply-vector.png
+++ b/guide-src/output-multiply-vector.png
diff --git a/guide-src/output-multiply.png b/guide-src/output-multiply.png
index 3fb3fe6..cd65db7 100644
--- a/guide-src/output-multiply.png
+++ b/guide-src/output-multiply.png
diff --git a/guide-src/output-rotate-2d.png b/guide-src/output-rotate-2d.png
new file mode 100644
index 0000000..410a224
--- /dev/null
+++ b/guide-src/output-rotate-2d.png
diff --git a/guide-src/output-vector.png b/guide-src/output-vector.png
new file mode 100644
index 0000000..d76df71
--- /dev/null
+++ b/guide-src/output-vector.png