diff options
Diffstat (limited to 'guide-src')
-rw-r--r-- | guide-src/index.html | 122 | ||||
-rw-r--r-- | guide-src/introduction.html | 118 | ||||
-rw-r--r-- | guide-src/outline.txt | 1 | ||||
-rw-r--r-- | guide-src/widget-inputs.html | 3 |
4 files changed, 133 insertions, 111 deletions
diff --git a/guide-src/index.html b/guide-src/index.html index 0e765b4..e590fc7 100644 --- a/guide-src/index.html +++ b/guide-src/index.html @@ -1,118 +1,20 @@ ---- introduction +--- about -<h3>your first pugl</h3> +<h2>pugl</h2> +<i><b>p</b>ommicket's <b>u</b>tility for <b>gl</b> shaders</i> +<hr> <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>. -<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>, -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. + pugl is a tool that lets you create & share shaders without writing any code. </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. -<div> - <img src="ex-multiply.png" alt=""> -</div> -you should now see a more interesting pattern where two of the corners of the screen are -white, and the other two corners are black: <img src="output-multiply.png" style="height:1em;" alt=""> -</p> - -<h3>vectors</h3> - -<p> -well, black & 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. -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! -</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=""> <img src="output-vector.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> - -<p> -most widgets like Multiply work on both numbers and vectors. try multiplying together -<code>.pos</code> and <code>.pos.x</code>: -<div><img src="ex-multiply-vector.png" alt=""> <img src="output-multiply-vector.png" alt="" height="32"></div> -this multiplies each of the components of <code>.pos</code> by <code>.pos.x</code>. -so the top-left corner is red, because (−1, 1) × −1 = (1, −1), so the top-left pixel gets a red value of 1 and a green value of −1. -</p> - -<h3>multiple widgets</h3> - -<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). -<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> - -<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> + to learn how to use pugl, check out <a href="introduction.html">the next section</a>. </p> +<h3>credits</h3> +<hr> <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. +icon based on +<a href="https://commons.wikimedia.org/wiki/File:Long-beakedEchidna.jpg" target="_blank">Long-beakedEchidna.jpg from WikiMedia</a> +CC BY-SA 3.0. </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> +everything else is licensed under WTFPLv2. diff --git a/guide-src/introduction.html b/guide-src/introduction.html new file mode 100644 index 0000000..5dd2bdc --- /dev/null +++ b/guide-src/introduction.html @@ -0,0 +1,118 @@ +--- introduction + +<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>. +<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>, +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. +<div> + <img src="ex-multiply.png" alt=""> +</div> +you should now see a more interesting pattern where two of the corners of the screen are +white, and the other two corners are black: <img src="output-multiply.png" style="height:1em;" alt=""> +</p> + +<h3>vectors</h3> + +<p> +well, black & 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. +now the widget is outputting a 3D vector with x=0, y=0.8, and z=1, so +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=""> <img src="output-vector.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> + +<p> +most widgets like Multiply work on both numbers and vectors. try multiplying together +<code>.pos</code> and <code>.pos.x</code>: +<div><img src="ex-multiply-vector.png" alt=""> <img src="output-multiply-vector.png" alt="" height="32"></div> +this multiplies each of the components of <code>.pos</code> by <code>.pos.x</code>. +so the top-left corner is red, because (−1, 1) × −1 = (1, −1), so the top-left pixel gets a red value of 1 and a green value of −1. +</p> + +<h3>multiple widgets</h3> + +<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). +<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> + +<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/outline.txt b/guide-src/outline.txt index df12f5d..a2d8357 100644 --- a/guide-src/outline.txt +++ b/guide-src/outline.txt @@ -1,4 +1,5 @@ index.html +introduction.html widget-inputs.html development: development /index.html diff --git a/guide-src/widget-inputs.html b/guide-src/widget-inputs.html index f0e8bdb..048c75f 100644 --- a/guide-src/widget-inputs.html +++ b/guide-src/widget-inputs.html @@ -25,7 +25,7 @@ all of pugl's built-in values begin with a <code>.</code> to distinguish them from your widgets. here they all are. below, <code>float</code> refers to a plain old number, -<code>vec2</code> is a 2-component vector, etc. +<code>vec2</code> is a 2D vector, etc. <table> <tbody> @@ -37,5 +37,6 @@ below, <code>float</code> refers to a plain old number, <tr><td><code>.mouse01</code></td><td><code>vec2</code><td>the position of the mouse ranging from (0, 0) to (+1, +1).</td></tr> <tr><td><code>.pi</code></td><td><code>float</code><td>π (3.1415…).</td></tr> <tr><td><code>.2pi</code></td><td><code>float</code><td>2π (6.2831…).</td></tr> +<tr><td><code>.e</code></td><td><code>float</code><td>𝑒 (2.7182…).</td></tr> </tbody> </table> |