I had a little too much fun...<p><pre><code> x>0.2-abs(sin(t*2))*0.05&&x<0.8+abs(sin(t*2))*0.05?(i%2?(min((x-sin(t%1.57)*0.3-0.5)*tan(-t%1.57)+cos(t%1.57)*0.3+0.5,(x-sin(t%1.57-1.57)*0.3-0.5)*tan(-t%1.57-1.57)+cos(t%1.57-1.57)*0.3+0.5)*0.4+0.5):(1-(min((-x-sin(t%1.57)*0.3+0.5)*tan(-t%1.57)+cos(t%1.57)*0.3+0.5,(-x-sin(t%1.57-1.57)*0.3+0.5)*tan(-t%1.57-1.57)+cos(t%1.57-1.57)*0.3+0.5)*0.4+0.5))):0.5
</code></pre>
<a href="https://sliderland.blinry.org/#x%3E0.2-abs%28sin%28t*2%29%29*0.05%26%26x%3C0.8%2Babs%28sin%28t*2%29%29*0.05%3F%28i%252%3F%28min%28%28x-sin%28t%251.57%29*0.3-0.5%29*tan%28-t%251.57%29%2Bcos%28t%251.57%29*0.3%2B0.5%2C%28x-sin%28t%251.57-1.57%29*0.3-0.5%29*tan%28-t%251.57-1.57%29%2Bcos%28t%251.57-1.57%29*0.3%2B0.5%29*0.4%2B0.5%29%3A%281-%28min%28%28-x-sin%28t%251.57%29*0.3%2B0.5%29*tan%28-t%251.57%29%2Bcos%28t%251.57%29*0.3%2B0.5%2C%28-x-sin%28t%251.57-1.57%29*0.3%2B0.5%29*tan%28-t%251.57-1.57%29%2Bcos%28t%251.57-1.57%29*0.3%2B0.5%29*0.4%2B0.5%29%29%29%3A0.5" rel="nofollow">https://sliderland.blinry.org/#x%3E0.2-abs%28sin%28t*2%29%29...</a>
If you missed the link at the bottom to the music video, you missed out. <a href="https://www.youtube.com/watch?v=bUTPlQzfz1k" rel="nofollow">https://www.youtube.com/watch?v=bUTPlQzfz1k</a>
As someone's whose math(s) isn't up to scratch, I find the HTML sliders aspect of this the least interesting. But I love the demonstration of what you can do with a simple equation — it reminds me of some of the things I've seen people do with pico-8, for example. This demo right here absolutely destroys my cpu, tho...
Reminds me of an old Chrome Experiment post <a href="https://web.archive.org/web/20120103162101/http://toki-woki.net/p/scroll-clock/" rel="nofollow">https://web.archive.org/web/20120103162101/http://toki-woki....</a><p>Doesn't exactly work right on modern browsers anymore but the gist was a 7 segment clock display made out of scrollbars.
My attempt: <a href="https://sliderland.blinry.org/#i%252%20%3F%201-%280.5%2B%281-abs%28i-32%29%2F32%29*sin%28t*2%29%2F2%29%20%3A%200.5%2B%281-abs%28i-32%29%2F32%29*sin%28t%29%2F2" rel="nofollow">https://sliderland.blinry.org/#i%252%20%3F%201-%280.5%2B%281...</a>
So cool! What a fantastically well presented piece. The simple step-by-step explanations of how to interact with and control the various function inputs left me feeling like I actually knew how to do something with it, which is a far cry from most interactive software playgrounds.<p>Well done.
Fun and simple, nice. I'd love to see the raw values presented using something like dat.gui, as well as basic play/pause/step controls.<p><a href="https://github.com/dataarts/dat.gui" rel="nofollow">https://github.com/dataarts/dat.gui</a><p>You can see how it's used in this codepen:<p><a href="https://codepen.io/russellbeattie/pen/kGxaqM" rel="nofollow">https://codepen.io/russellbeattie/pen/kGxaqM</a>
It's like a minimalist version of Shadertoy (<a href="https://www.shadertoy.com" rel="nofollow">https://www.shadertoy.com</a>). Fun idea
This is really cool. Is the music video related to the slider or it's just visualization? Would be cool to convert the func into sound like this:<p><a href="https://glicol.org/tour#meta1" rel="nofollow">https://glicol.org/tour#meta1</a><p>Will look into the source code tomorrow.
<a href="https://sliderland.blinry.org/#sin%28t%2Bx%29*0.5%2B0.5" rel="nofollow">https://sliderland.blinry.org/#sin%28t%2Bx%29*0.5%2B0.5</a> is very relaxing
No sandboxing, so this is easy enough to do too :)<p><a href="https://sliderland.blinry.org/#document.body.style.backgroundColor%20%3D%20%28round%28t%29%20%25%202%20%3D%3D%3D%200%29%20%3F%20'red'%20%3A%20'white'" rel="nofollow">https://sliderland.blinry.org/#document.body.style.backgroun...</a>
Nice demo, but it pushes CPU usage from 1% to 17-20%, and could encourage the use of the wrong control for a given task. As an example, I've often seen on web pages check boxes (an input widget) used to represent read only boolean values where check marks would have been the correct choice.