From 64c42098c549182d8a260194412fe3a44b5b5889 Mon Sep 17 00:00:00 2001 From: pommicket Date: Tue, 29 Aug 2023 15:02:21 -0400 Subject: more guide --- guide-src/ex-hue-shift-time.png | Bin 0 -> 6416 bytes guide-src/ex-hue-shift.png | Bin 0 -> 3975 bytes guide-src/ex-last-frame.png | Bin 0 -> 15422 bytes guide-src/ex-multiply-add.png | Bin 6404 -> 6343 bytes guide-src/ex-multiply-vector.png | Bin 3176 -> 3145 bytes guide-src/ex-multiply.png | Bin 3410 -> 3361 bytes guide-src/ex-posx.png | Bin 2804 -> 2760 bytes guide-src/ex-rotate-2d.png | Bin 0 -> 32993 bytes guide-src/ex-vector.png | Bin 2609 -> 2582 bytes guide-src/ex-weighted-sum.png | Bin 0 -> 21946 bytes guide-src/index.html | 81 ++++++++++++++++++++++++++++------- guide-src/output-hue-shift.png | Bin 0 -> 214 bytes guide-src/output-multiply-add.png | Bin 1203 -> 1221 bytes guide-src/output-multiply-vector.png | Bin 1124 -> 1146 bytes guide-src/output-multiply.png | Bin 1059 -> 2389 bytes guide-src/output-rotate-2d.png | Bin 0 -> 5716 bytes guide-src/output-vector.png | Bin 0 -> 258 bytes pugl.js | 7 ++- things.txt | 4 +- 19 files changed, 73 insertions(+), 19 deletions(-) create mode 100644 guide-src/ex-hue-shift-time.png create mode 100644 guide-src/ex-hue-shift.png create mode 100644 guide-src/ex-last-frame.png create mode 100644 guide-src/ex-rotate-2d.png create mode 100644 guide-src/ex-weighted-sum.png create mode 100644 guide-src/output-hue-shift.png create mode 100644 guide-src/output-rotate-2d.png create mode 100644 guide-src/output-vector.png 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 Binary files /dev/null and b/guide-src/ex-hue-shift-time.png differ diff --git a/guide-src/ex-hue-shift.png b/guide-src/ex-hue-shift.png new file mode 100644 index 0000000..ff573a0 Binary files /dev/null and b/guide-src/ex-hue-shift.png differ diff --git a/guide-src/ex-last-frame.png b/guide-src/ex-last-frame.png new file mode 100644 index 0000000..5082d9c Binary files /dev/null and b/guide-src/ex-last-frame.png differ diff --git a/guide-src/ex-multiply-add.png b/guide-src/ex-multiply-add.png index 1b826ad..050c7e9 100644 Binary files a/guide-src/ex-multiply-add.png and b/guide-src/ex-multiply-add.png differ diff --git a/guide-src/ex-multiply-vector.png b/guide-src/ex-multiply-vector.png index e25ea1d..97b1fa5 100644 Binary files a/guide-src/ex-multiply-vector.png and b/guide-src/ex-multiply-vector.png differ diff --git a/guide-src/ex-multiply.png b/guide-src/ex-multiply.png index 1f3260d..5b9d635 100644 Binary files a/guide-src/ex-multiply.png and b/guide-src/ex-multiply.png differ diff --git a/guide-src/ex-posx.png b/guide-src/ex-posx.png index 52c4375..143ab32 100644 Binary files a/guide-src/ex-posx.png and b/guide-src/ex-posx.png differ diff --git a/guide-src/ex-rotate-2d.png b/guide-src/ex-rotate-2d.png new file mode 100644 index 0000000..d5bae7e Binary files /dev/null and b/guide-src/ex-rotate-2d.png differ diff --git a/guide-src/ex-vector.png b/guide-src/ex-vector.png index 681c6fe..acda92c 100644 Binary files a/guide-src/ex-vector.png and b/guide-src/ex-vector.png differ diff --git a/guide-src/ex-weighted-sum.png b/guide-src/ex-weighted-sum.png new file mode 100644 index 0000000..4d58a8c Binary files /dev/null and b/guide-src/ex-weighted-sum.png differ 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 @@

your first pugl

-when you load up pugl for the first time, you should be greeted with a "Buffer" widget. -try changing its "input" value to .pos.x. +when you load up pugl for the first time, you should be greeted with a “Buffer” widget. +try changing its “input” value to .pos.x.

you should see a nice gradient like this: here the color of each pixel is directly determined by its x coordinate. specifically: .pos.x 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 yellow, +since the “Buffer” widget’s title is in yellow, 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.

-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 .pos.x and the "b" input to -.pos.y. 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 .pos.x and the “b” input to +.pos.y. then click on the “Multiply” text to set it as the active widget.

@@ -28,20 +28,20 @@ white, and the other two corners are black: vectors

-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 vectors. -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 components), -& 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 vectors. +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 components). +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, red, green, and blue, which go from 0 to 1. -try putting 0,0.8,1 in a "Buffer" widget and making it active. +try putting 0,0.8,1 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 greenish blue color! +you’ll get a nice greenish blue color!

.pos is itself a vector, so you can just throw it into the Buffer input: -

+
notice how the output is red on the right side of the screen (where the x component of .pos is high) and green at the top of the screen (where the y component of .pos is high).

@@ -58,12 +58,61 @@ so the top-left corner is red, because (−1, 1) × −1 = (1, −1), so the top

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 mul1,0 and 0,0,.pos.x (assuming -your Multiply widget from the last section was called "mul1"). +try creating an “Add” widget with inputs mul1,0 and 0,0,.pos.x (assuming +your Multiply widget from the last section was called mul1).

now the left side looks the same as before, but the right side (where .pos.x is 1) is bluer!

putting everything together

-

TODO

+

+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 .pos.x, +we'll get a rainbow across the screen: +

+ +
+

+ +

+now let's animate this rainbow: create a new “Add” widget, +and set a=.pos.x, b=.time, +and use that as the shift instead of .pos.x: +

+now the rainbow moves across the screen over time! +

+ +

+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. +

+

+

+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. +

+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. +

+

+now, we don’t have to use .pos as the position for getting +pixel values from the last frame. instead, let’s rotate .pos +by a small amount and use that as the position for the “Last frame” widget: +

+now we’re getting something interesting! +

+ +

+be sure to check out the rest of this guide to learn all the things +you can do with pugl. have fun! 🐱 +

diff --git a/guide-src/output-hue-shift.png b/guide-src/output-hue-shift.png new file mode 100644 index 0000000..8e1efbd Binary files /dev/null and b/guide-src/output-hue-shift.png differ diff --git a/guide-src/output-multiply-add.png b/guide-src/output-multiply-add.png index 6bcb4f6..1d35a40 100644 Binary files a/guide-src/output-multiply-add.png and b/guide-src/output-multiply-add.png differ diff --git a/guide-src/output-multiply-vector.png b/guide-src/output-multiply-vector.png index f1c2da1..5f6fbb9 100644 Binary files a/guide-src/output-multiply-vector.png and b/guide-src/output-multiply-vector.png differ diff --git a/guide-src/output-multiply.png b/guide-src/output-multiply.png index 3fb3fe6..cd65db7 100644 Binary files a/guide-src/output-multiply.png and b/guide-src/output-multiply.png differ diff --git a/guide-src/output-rotate-2d.png b/guide-src/output-rotate-2d.png new file mode 100644 index 0000000..410a224 Binary files /dev/null and b/guide-src/output-rotate-2d.png differ diff --git a/guide-src/output-vector.png b/guide-src/output-vector.png new file mode 100644 index 0000000..d76df71 Binary files /dev/null and b/guide-src/output-vector.png differ diff --git a/pugl.js b/pugl.js index d10c00d..b182480 100644 --- a/pugl.js +++ b/pugl.js @@ -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; diff --git a/things.txt b/things.txt index bdebb0e..e27e313 100644 --- a/things.txt +++ b/things.txt @@ -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 -- cgit v1.2.3