diff options
| -rw-r--r-- | guide-src/ex-hue-shift-time.png | bin | 0 -> 6416 bytes | |||
| -rw-r--r-- | guide-src/ex-hue-shift.png | bin | 0 -> 3975 bytes | |||
| -rw-r--r-- | guide-src/ex-last-frame.png | bin | 0 -> 15422 bytes | |||
| -rw-r--r-- | guide-src/ex-multiply-add.png | bin | 6404 -> 6343 bytes | |||
| -rw-r--r-- | guide-src/ex-multiply-vector.png | bin | 3176 -> 3145 bytes | |||
| -rw-r--r-- | guide-src/ex-multiply.png | bin | 3410 -> 3361 bytes | |||
| -rw-r--r-- | guide-src/ex-posx.png | bin | 2804 -> 2760 bytes | |||
| -rw-r--r-- | guide-src/ex-rotate-2d.png | bin | 0 -> 32993 bytes | |||
| -rw-r--r-- | guide-src/ex-vector.png | bin | 2609 -> 2582 bytes | |||
| -rw-r--r-- | guide-src/ex-weighted-sum.png | bin | 0 -> 21946 bytes | |||
| -rw-r--r-- | guide-src/index.html | 81 | ||||
| -rw-r--r-- | guide-src/output-hue-shift.png | bin | 0 -> 214 bytes | |||
| -rw-r--r-- | guide-src/output-multiply-add.png | bin | 1203 -> 1221 bytes | |||
| -rw-r--r-- | guide-src/output-multiply-vector.png | bin | 1124 -> 1146 bytes | |||
| -rw-r--r-- | guide-src/output-multiply.png | bin | 1059 -> 2389 bytes | |||
| -rw-r--r-- | guide-src/output-rotate-2d.png | bin | 0 -> 5716 bytes | |||
| -rw-r--r-- | guide-src/output-vector.png | bin | 0 -> 258 bytes | |||
| -rw-r--r-- | pugl.js | 7 | ||||
| -rw-r--r-- | things.txt | 4 |
19 files changed, 73 insertions, 19 deletions
diff --git a/guide-src/ex-hue-shift-time.png b/guide-src/ex-hue-shift-time.png Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differindex 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 Binary files differindex 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 Binary files differindex 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 Binary files differindex 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 Binary files differnew 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 Binary files differindex 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 Binary files differnew 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>), -& in shaders you basically only deal with vectors with 2 to 4 components (labelled x, y, z, w). +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. +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 Binary files differnew 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 Binary files differindex 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 Binary files differindex 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 Binary files differindex 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 Binary files differnew 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 Binary files differnew file mode 100644 index 0000000..d76df71 --- /dev/null +++ b/guide-src/output-vector.png @@ -103,6 +103,7 @@ ${type} mix_(${type} a, ${type} b, ${type} x, int c) { //! .id: prev //! .description: sample from the previous frame //! pos.description: position to sample — bottom-left corner is (−1, −1), top-right corner is (1, 1) +//! pos.default: .pos //! wrap.name: wrap mode //! wrap.control: select:clamp|wrap //! wrap.description: how to deal with the input components if they go outside [−1, 1] @@ -123,7 +124,8 @@ vec3 last_frame(vec2 pos, int wrap, int samp) { } `, ` -//! .name: Weighted add +//! .name: Weighted sum +//! .alt: weighted add //! .category: math //! .description: add two numbers or vectors with weights //! aw.name: a weight @@ -1328,8 +1330,11 @@ function color_hex_to_float(hex) { let g; let b; let a; + hex = hex.trim(); + if (!hex || hex[0] !== '#') return null; + if (hex.length === 7 || hex.length === 9) { // #rrggbb or #rrggbbaa r = parseInt(hex.substring(1, 3), 16) / 255; @@ -2,8 +2,8 @@ cool: rot2;n:rot21;iv:mul1;itheta:angle;cdir:0;;mul;n:mul1;ia:.pos;ib:r;;prev;n:prev1;ipos:rot21;cwrap:0;csample:0;;square;n:square1;ipos:.pos;iinside:hue2;ioutside:mul3;isize:0.995;;wtadd;n:wtadd2;iaw:1;ibw:1;ia:.pos.x;ib:.pos.y;;hue;n:hue1;icolor:#00f;ishift:hshift;;wtadd;n:wtadd3;iaw:1;ibw:1;ia:wtadd2;ib:.time;;sin;n:sin1;it:wtadd3;iperiod:1;iamp:1;iphase:0;icenter:0;ctype:0;cnonneg:1;;pow;n:pow1;ia:sin1;ib:1;;mul;n:hshift;ia:pow1;ib:0.3333;;sin;n:angle;it:.time;iperiod:2;iamp:0.01;iphase:0;icenter:0.01;ctype:0;cnonneg:1;;sin;n:r;it:.time;iperiod:1.618;iamp:0.01;iphase:0;icenter:1;ctype:0;cnonneg:1;;mul;n:mul3;ia:2;ib:hue1;;clamp;n:clamp1;ival:mul3;imin:0;imax:1;;mul;n:mul2;ia:clamp1.x;ib:clamp1.z;;wtadd;n:wtadd4;iaw:1;ibw:-0.2;ia:1;ib:mul2;;mul;n:mul4;ia:clamp1;ib:wtadd4;;hue;n:hue2;icolor:prev1;ishift:0.01;;_out=square1 circle;n:circle1;ipos:.pos;iinside:hue1;ioutside:#a00;isize:0.99;;prev;n:prev1;ipos:rot21;cwrap:1;csample:0;;mul;n:mul1;ia:.pos;ib:sin1;;hue;n:hue1;icolor:prev1;ishift:0.2;;rot2;n:rot21;iv:mul1;itheta:mul2;cdir:0;;mul;n:mul2;ia:.time;ib:0.1;;sin;n:sin1;it:.time;iperiod:4;iamp:0.05;iphase:0;icenter:1.5;cnonneg:0;;_out=circle1 -simple worley noise: -worley;n:worley1;ix:.pos,.time;ifreq:8,8,1;;buffer;n:buffer1;iinput:pow1;;pow;n:pow1;ia:worley1;ib:1,3,0.7;;_out=buffer1 +worley noise: +worley;n:worley1;ix:.pos,.time;ifreq:8,8,1;;pow;n:pow1;ia:worley1;ib:1,8,8;;worley;n:worley2;ix:.pos,.time;ifreq:12,12,1;;pow;n:pow2;ia:worley2;ib:2,8,2;;clamp;n:clamp1;ival:pow1;imin:pow2;imax:1;;_out=clamp1 simple fun with floor: floor;n:floor1;ix:.pos01.x;istepw:0.1;isteph:0.1,0.1,0.2;iphase:0;;_out=floor1 |
