const anim = () => {
drawRipple();
requestAnimationFrame(anim);
}
anim();Now that I think of it, it might be worth adding an asterisk and footnote about requestAnimationFrame to the post.
Edit: I wonder why was this downvoted. Is setTimeout not more reliable time wise than setInterval?
Edit: looking into this some more, it seems like the recursive methods might not actually grow the call stack due to being asynchronous. Their only added baggage is the extra closure which would be negligible. Anyone know if this is actually the case?
<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)> 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);
}Quick GLSL tutorial: https://web.archive.org/web/20210119091116/http://www.bidoui...
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...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.
In a similar vein to the ripple, here’s[1] the Batman Curve in FormulaGraph.
You described generating a ripple still-frame then completely glossed over the “animation” part.
https://www.iquilezles.org/www/articles/distfunctions/distfu...