7 ms·

Breaking down a ripple animation in JavaScript

68 points by bryanbraun 5y ago

recursive 5y ago
If you're into this kind of stuff, you might like dwitter.net
- dcsan 5y ago
  That's a really cool site. Almost like demo scene in JS. Any other similar places?
rojobuffalo 5y ago
here's one that animates a CSS radial-gradient and centers it on the click location https://gist.github.com/rojobuffalo/3a4f108937ffcd318c70 https://gist.github.com/rojobuffalo/3a4f108937ffcd318c70
__ryan__ 5y ago
> 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 5y ago
  While setInterval works, requestAnimationFrame(time) is probably better suited for animation purposes.
- bryanbraun 5y ago
  That's a good callout. I just updated it to add more detail there.
TeeWEE 5y ago
While its cool drawing this iteratively is not really something that scales well. Better to use the GPU which most devices have today.
agys 5y ago
This is the basic building block for cool old-school plasma effects! Quick GLSL tutorial: https://web.archive.org/web/20210119091116/http://www.bidouille.org/prog/plasma https://web.archive.org/web/20210119091116/http://www.bidoui...
memalign 5y ago
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 https://memalign.github.io/m/formulagraph/index.html [1] https://memalign.github.io/p/batman-curve.html https://memalign.github.io/p/batman-curve.html
atum47 5y ago
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 https://github.com/victorqribeiro/rippleEffect
kroltan 5y ago
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!
- zokier 5y ago
  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); }
- tomxor 5y ago
  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.
- geuis 5y ago
  Good follow up article would be an intro to shaders, where you take the work from pixel looping and move it to shaders.
netgusto 5y ago
Cool, thank you! For a smoother animation, you may want to replace the setInterval() with: const anim = () => { drawRipple(); requestAnimationFrame(anim); } anim();
- beebeepka 5y ago
  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?
  - franciscop 5y ago
    Probably because requestAnimationFrame is much better than setTimeout, AND requestAnimationFrame is supported even by IE10 so there's absolutely no need for a fallback. Also no, setTimeout is not more reliable than setInterval in many situations.
    - qweqwweqwe-90i 5y ago
      No one should bother supporting IE now.
      - forgotmypw17 5y ago
        I strongly disagree. If you can't be bothered to write resilient code, that's your choice, but don't speak for me on what I should and shouldn't support.
        tomxor 5y ago
        Supporting IE !== "writing resilient code" If anything your code will be much worse for it and likely to contain more bugs.
        forgotmypw17 5y ago
nayuki 5y ago
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/Reference/Global_Objects/Math/hypot https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- wizzwizz4 5y ago
  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.
  - bryanbraun 5y ago
    Haha, yeah I discovered this after I wrote it. Probably worth going back and updating.
ktpsns 5y ago
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 5y ago
  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
onion2k 5y ago
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/distfunctions.htm https://www.iquilezles.org/www/articles/distfunctions/distfu...
tomxor 5y ago
Faster 125 FPS, 165B version <canvas id=c><svg onload=setInterval("for(c.width=64,i=4096;i--;)c.getContext('2d').fillRect(X=i&63,Y=i/64|0,1,Math.sin(Math.hypot(X-32,Y-32)/2-++t/4e4)/4+.5)",t=8)>

68 points by bryanbraun 5y ago

recursive 5y ago

If you're into this kind of stuff, you might like dwitter.net

dcsan 5y ago
That's a really cool site. Almost like demo scene in JS. Any other similar places?

rojobuffalo 5y ago

here's one that animates a CSS radial-gradient and centers it on the click location https://gist.github.com/rojobuffalo/3a4f108937ffcd318c70 https://gist.github.com/rojobuffalo/3a4f108937ffcd318c70

__ryan__ 5y ago

> 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 5y ago
While setInterval works, requestAnimationFrame(time) is probably better suited for animation purposes.
bryanbraun 5y ago
That's a good callout. I just updated it to add more detail there.

TeeWEE 5y ago

While its cool drawing this iteratively is not really something that scales well. Better to use the GPU which most devices have today.

agys 5y ago

This is the basic building block for cool old-school plasma effects! Quick GLSL tutorial: https://web.archive.org/web/20210119091116/http://www.bidouille.org/prog/plasma https://web.archive.org/web/20210119091116/http://www.bidoui...

memalign 5y ago

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 https://memalign.github.io/m/formulagraph/index.html [1] https://memalign.github.io/p/batman-curve.html https://memalign.github.io/p/batman-curve.html

atum47 5y ago

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 https://github.com/victorqribeiro/rippleEffect

kroltan 5y ago

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!

zokier 5y ago
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); }
tomxor 5y ago
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.
geuis 5y ago
Good follow up article would be an intro to shaders, where you take the work from pixel looping and move it to shaders.

netgusto 5y ago

Cool, thank you! For a smoother animation, you may want to replace the setInterval() with: const anim = () => { drawRipple(); requestAnimationFrame(anim); } anim();

beebeepka 5y ago
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?
- franciscop 5y ago
  Probably because requestAnimationFrame is much better than setTimeout, AND requestAnimationFrame is supported even by IE10 so there's absolutely no need for a fallback. Also no, setTimeout is not more reliable than setInterval in many situations.
  - qweqwweqwe-90i 5y ago
    No one should bother supporting IE now.
    - forgotmypw17 5y ago
      I strongly disagree. If you can't be bothered to write resilient code, that's your choice, but don't speak for me on what I should and shouldn't support.
      - tomxor 5y ago
        Supporting IE !== "writing resilient code" If anything your code will be much worse for it and likely to contain more bugs.
        forgotmypw17 5y ago

nayuki 5y ago

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/Reference/Global_Objects/Math/hypot https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

wizzwizz4 5y ago
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.
- bryanbraun 5y ago
  Haha, yeah I discovered this after I wrote it. Probably worth going back and updating.

ktpsns 5y ago

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 5y ago
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

onion2k 5y ago

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/distfunctions.htm https://www.iquilezles.org/www/articles/distfunctions/distfu...

tomxor 5y ago

Faster 125 FPS, 165B version <canvas id=c><svg onload=setInterval("for(c.width=64,i=4096;i--;)c.getContext('2d').fillRect(X=i&63,Y=i/64|0,1,Math.sin(Math.hypot(X-32,Y-32)/2-++t/4e4)/4+.5)",t=8)>