[HN Gopher] Breaking down a ripple animation in JavaScript
___________________________________________________________________
Breaking down a ripple animation in JavaScript
Author : bryanbraun
Score : 41 points
Date : 2021-08-19 15:06 UTC (7 hours ago)
(HTM) web link (www.bryanbraun.com)
(TXT) w3m dump (www.bryanbraun.com)
| atum47 wrote:
| I once wrote something similar on a jsfiddle but can't find it
| now. Later in I found an article and a YouTube video that
| proposed a different approach to do ripples, which I followed:
|
| https://github.com/victorqribeiro/rippleEffect
| recursive wrote:
| If you're into this kind of stuff, you might like dwitter.net
| kroltan wrote:
| A plea to anyone who wants to do that, I would highly recommend
| running that kind of thing on the GPU! Looping through all those
| pixels every frame is ought to hog a lot of UI thread time
| otherwise, especially with big resolutions!
| tomxor wrote:
| It's also not necessary to do such high resolutions to get
| smooth result with this animation due to the nature of the
| image. Interpolation is much faster based on a low res version,
| especially the hardware accelerated smooth interpolation built
| into the browser for canvas. My example in this thread is only
| 64x64 pixels but you can zoom in as much as you like and it
| remains fast and smooth.
| zokier wrote:
| very basic shadertoy shader in the spirit of the article:
| void mainImage( out vec4 fragColor, in vec2 fragCoord )
| { vec2 center = iMouse.xy/iResolution.xy;
| float aspect = iResolution.x/iResolution.y; vec2 uv
| = fragCoord/iResolution.xy; uv.x *= aspect;
| center.x *= aspect; float r = distance(uv, center);
| float h = (sin((r*50.0)-(iTime*2.0))+1.0)/2.0; h *=
| 1.0 - min(1.0, r); fragColor = vec4(h,h,h,1.0);
| }
| onion2k wrote:
| This is a naive, but very fun, implementation of a 2D signed
| distance field. It's the same principle that artists like iq use
| to make amazing shader animations.
|
| https://www.iquilezles.org/www/articles/distfunctions/distfu...
| netgusto wrote:
| Cool, thank you! For a smoother animation, you may want to
| replace the setInterval() with: const anim = ()
| => { drawRipple(); requestAnimationFrame(anim);
| } anim();
| beebeepka wrote:
| Also, setTimeout is more reliable for loops and such. As a
| fallback to requestAnimationFrame
|
| Edit: I wonder why was this downvoted. Is setTimeout not more
| reliable time wise than setInterval?
| nayuki wrote:
| let distance = hypotenuseLength(reIndexedX, reIndexedY);
| function hypotenuseLength(x, y) { return
| Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); }
|
| The above can be replaced with: let distance =
| Math.hypot(reIndexedX, reIndexedY);
|
| See https://developer.mozilla.org/en-
| US/docs/Web/JavaScript/Refe...
| wizzwizz4 wrote:
| It's a tutorial, so there's a benefit to writing out the
| separate function in the article, but given that it's "in
| JavaScript" I agree with your suggestion.
| rojobuffalo wrote:
| here's one that animates a CSS radial-gradient and centers it on
| the click location
| https://gist.github.com/rojobuffalo/3a4f108937ffcd318c70
| ktpsns wrote:
| Story time! When I was around 12 years old, I've tried so hard to
| understand the JavaScript code to render an analog clock within
| HTML. I did not learn yet about sine and cosine and it was really
| a miracle how the code could determine the positions of the clock
| elements.
|
| First learning how to code, then learning the math was a hard way
| to do the interesting stuff with computers. The other way around
| is much more straight forward.
| atum47 wrote:
| You just described my whole career, haha. I learned JavaScript
| by inspecting other's people code. I remember this cool effect
| I saw on the website for the matrix (the movie), it blew my
| mind back then, now I know is just image replacement on the
| mouse hover. The effects was a bunch of out of air tvs and when
| you position the mouse the tv would show a channel
| __ryan__ wrote:
| > To animate the wave in JavaScript, we can use setInterval to
| repeatedly call our drawRipple() function, and pass in a
| timestamp to adjust the wave position.
|
| You described generating a ripple still-frame then completely
| glossed over the "animation" part.
| agys wrote:
| While setInterval works, requestAnimationFrame(time) is
| probably better suited for animation purposes.
| memalign wrote:
| Desmos (the graphing calculator tool used by the author) is
| really great! One thing that's inconvenient about it is not being
| able to copy/paste formulas in. I ended up making my own graphing
| calculator web app to make drawing with math easier:
| FormulaGraph[0].
|
| In a similar vein to the ripple, here's[1] the Batman Curve in
| FormulaGraph.
|
| [0] https://memalign.github.io/m/formulagraph/index.html
|
| [1] https://memalign.github.io/p/batman-curve.html
| agys wrote:
| This is the basic building block for cool old-school plasma
| effects!
|
| Quick GLSL tutorial:
| https://web.archive.org/web/20210119091116/http://www.bidoui...
| TeeWEE wrote:
| While its cool drawing this iteratively is not really something
| that scales well. Better to use the GPU which most devices have
| today.
| tomxor wrote:
| Faster 125 FPS, 165B version <canvas id=c><svg on
| load=setInterval("for(c.width=64,i=4096;i--;)c.getContext('2d').f
| illRect(X=i&63,Y=i/64|0,1,Math.sin(Math.hypot(X-32,Y-32)/2-++t/4e
| 4)/4+.5)",t=8)>
___________________________________________________________________
(page generated 2021-08-19 23:01 UTC)