diff options
| -rw-r--r-- | Shaders/index.md | 26 | ||||
| -rw-r--r-- | Shaders/node5_landing_page_grid_tunnel.gif | bin | 0 -> 241159 bytes | |||
| -rw-r--r-- | Shaders/transfer.png | bin | 0 -> 10491 bytes |
3 files changed, 25 insertions, 1 deletions
diff --git a/Shaders/index.md b/Shaders/index.md index 6f0f8a3..83ff1dc 100644 --- a/Shaders/index.md +++ b/Shaders/index.md @@ -37,7 +37,31 @@ and i still am not able to bring all my ideas to fruition. You'll often times find that you accidentally create something interesting, just by faffing about with mathematical functions. -On that not you can [view my shaders here](https://node5.net/shader_indexes/my_shaders/) +On that note, you can +## --> [view my shaders here](https://node5.net/shader_indexes/my_shaders/) <-- + +## Embed on page + +I use the JS libary [shader-web-background by xemantic - github.com](https://github.com/xemantic/shader-web-background) +to embed shaders on my website [as seen above](#my-canvas). +It's also utilized on my landing page in the background [node5.net](https://node5.net/). +So masive shout out to [xemantic](https://xemantic.com/), [go buy them a tea](https://buymeacoffee.com/kazik) + + + + +As xemantic also points out, one of the awesome things about shaders instead of e.g. video is the miniscule file size. +To put it into perspective the gif shown above is `236 kilo bytes` +While the HTML, CSS, and JS and shader reuqired to produce said page is a mere `16.08 kilo bytes` +That's a 14.67x difference. This arguably just shows how horrible the GIF format is for anything but the simplest +of things, given it's lack of interframe compression. A GIF meerly consists of sequential images, as opposed to video +that uses advanced <b style="font-size: 1.2em; color: #f88" class="wavy-text">math</b> to bring down the file size. +Shaders on the otherhand scale to be crisp on any device. Furthermore they can be interactive, morphing with user input. + + + + + <style> #my-canvas { diff --git a/Shaders/node5_landing_page_grid_tunnel.gif b/Shaders/node5_landing_page_grid_tunnel.gif new file mode 100644 index 0000000..4b3f836 --- /dev/null +++ b/Shaders/node5_landing_page_grid_tunnel.gif Binary files differdiff --git a/Shaders/transfer.png b/Shaders/transfer.png new file mode 100644 index 0000000..a6f6f98 --- /dev/null +++ b/Shaders/transfer.png Binary files differ |
