FRESH

Hacker News

Home

A flowing WebGL gradient, deconstructed

221 points by alexharri

by mwkaufma

4 subcomments

>> The mix function is an interpolation function that linearly interpolates between the two input colors using a blend factor between and ( in our case).
>> A mix function for two colors works the same way, except we mix the color components. To mix two RGB colors, for example, we’d mix the red, green, and blue channels.
Colorspace alert! mix != lerp in sRGB

by sly010

3 subcomments

Very cool, but by css-rotating (skewY(-6deg)) the canvas at the last moment, you introduced aliasing on the border between the canvas and the rest of the page which kills the vibe. The browser can't automatically blend the canvas with the rest of the page. It's noticeable even on a brand new retina display. Maybe you could keep your canvas square and introduce the skew in the shader.

by herpdyderp

1 subcomments

The linked source code [0] doesn't seem to have any license attached to it. So how could I actually use this? Is it published as a package somewhere, like npm?
0. https://github.com/alexharri/website/blob/eb9551dd7312685704...

by grishka

0 subcomment

This effect kinda reminds me of the PSP menu background

by mrmagoo17

1 subcomments

We need more articles as polished as this one. WebGL is a topic I wanted to get into for a while now but it's really difficult to find good content about it. Please keep sharing more experiments!

by ikesau

1 subcomments

Jesus christ, this is such a polished article. Writing it must have taken at least 5 times as long as the shader!
Have reblogged it and will refer back to it if ever I have some time to learn how to write them :)

by smjburton

0 subcomment

This is so cool. These flowing gradients have a mesmerizing effect (almost like watching a lava lamp), and seem like a great way to add visual interest to a page. I'll have to play around with this and see if I can incorporate these flowing gradients into some of my web projects. Awesome job detailing the design process for this post.

by tomaskafka

1 subcomments

The whole time I was expecting just a 2d height field ("terrain") with animated noise as z, overlooked from an angle by an isometric camera, it could imo produce a same effect in a much simpler way (and without need for expensive blur), right?

by qiqitori

0 subcomment

Nice, it's a bit like an extremely modern version of the oldskool plasma effect!

by kookamamie

0 subcomment

Looks pretty nice. I think there'd be a way of computing the blurriness without the iterative approach and without the aliasing produced in the process.

by heinternets

0 subcomment

This looks very smooth. Would this be in 10 bit colour if the display supports it? I can't see any banding even when zoomed in Safari or Brave on a MBP with HDR display.

by zparky

0 subcomment

This is an exemplary post and what I come to HN for.

by fallinditch

0 subcomment

Great post Alex, the gradients are lovely, I'm just starting to play around with webgl so the timing is perfect ...

by ww520

0 subcomment

This is a great read. Very instructional. Build from simple concepts and explain clearly. Kudos for the work.

by blabus

0 subcomment

Fantastic article but it'd at least be nice to credit Stripe for the original design.

by asdopf

0 subcomment

It is rare to see such detailed articles. And the result is very cool. Thanks

by polygot

0 subcomment

Reminds me of the JetBrains installer--not a bad reminder, I like the animations.

by nyarlathotep_

0 subcomment

This is an excellent article. Thanks for this.

by cloogshicer

0 subcomment

Fantastic post, very well written.

by kemuri

0 subcomment

Amazing writeup, very inspiring!