7 ms·
Sliderland – Creative coding with 64 HTML sliders
- PaulHoule 4y agoIt's like a 1-d pixel shader!
- zamadatix 4y agoReminds me of an old Chrome Experiment post https://web.archive.org/web/20120103162101/http://toki-woki.net/p/scroll-clock/ https://web.archive.org/web/20120103162101/http://toki-woki.... Doesn't exactly work right on modern browsers anymore but the gist was a 7 segment clock display made out of scrollbars.
- afry1 4y agoSo 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. Well done.
- couchand 4y agoThis is really neat! Also, please don't hijack the back button if you're not going to do anything useful with it!
- deleted 4y ago[deleted]
- xhrpost 4y agoI really like these super simple but creative ideas. Lists.sh a few weeks ago landed there for me as well.
- DerekBickerton 4y agoSomething similar: https://mrdoob.com/lab/javascript/checkbox_painter/ https://mrdoob.com/lab/javascript/checkbox_painter/
- blinry 4y agoIf you're into this, also check out @bryanbraun's "Checkboxland", which was a huge inspiration for this project! :) https://www.bryanbraun.com/checkboxland/ https://www.bryanbraun.com/checkboxland/
- dylan604 4y agodoes the binary one going from left to right feel odd to anyone else?
- rickdeveloper 4y agoHere's one that goes from right to left: (2**(64 - i)) & (t*10)
- dylan604 4y agoNicely done! My OCD says things are back to normal now.
- deleted 4y ago[deleted]
- NickBusey 4y agoIf you missed the link at the bottom to the music video, you missed out. https://www.youtube.com/watch?v=bUTPlQzfz1k https://www.youtube.com/watch?v=bUTPlQzfz1k
- russellbeattie 4y agoFun 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. https://github.com/dataarts/dat.gui https://github.com/dataarts/dat.gui You can see how it's used in this codepen: https://codepen.io/russellbeattie/pen/kGxaqM https://codepen.io/russellbeattie/pen/kGxaqM
- oneeyedpigeon 4y agoAs 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...
- toqy 4y agoit also uses canvas, not actual html sliders
- oneeyedpigeon 4y agoOh yes — I see this comment in the source: > in case you're wondering, i use a canvas instead of HTML sliders for consistent display across browsers which makes the emphasis on sliders even stranger, to me.
- a9h74j 4y agoDarn, I thought this was going to be my solution to outliers in scientific data plots.
- brundolf 4y agoIt's very similar to writing shaders. Check out this video for some crazy stuff you can do with equations: https://www.youtube.com/watch?v=8--5LwHRhjk https://www.youtube.com/watch?v=8--5LwHRhjk
- Marazan 4y agohttps://tixy.land/ https://tixy.land/ seems to be the inspiration?
- deleted 4y ago[deleted]
- memorable 4y agoYes, confirmed in the source code[0]. [0]: https://github.com/blinry/sliderland https://github.com/blinry/sliderland
- squarefoot 4y agoNice 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.
- have_faith 4y agoI think there's little risk of someone thinking this is a recommendation for a proper animation engine.
- panzerboiler 4y agoRelax. It's a web toy inspired by another web toy. Nothing serious and nothing to be worried about. If you want to change the world for the better, fight against google, twitter, facebook, and their tracking ads networks. Those are the places where a serious amount of CPU cycles are wasted every second producing toxic matter. We need more creative (mis)uses of the web, not less.
- squarefoot 4y agoI wasn't bashing the creativity, however it should be noted somewhere that it's not the optimal way to use those controls. Although it seem obvious to most of us, people looking for programming examples might take it more seriously. I recall a colleague back in the day (late 90s to early 2k, VB or possibly Delphi) telling me: "heh, I didn't know where to find a sorting function for this and that, so I dragged on the app form a visual component (grid, list etc) having a similar method, made it invisible, then copied data back and forth using its cell/list/array sorting method: problem solved". Different context as my colleague knew it wasn't an optimal solution, but you get the point. I'd also encourage more creative (mis)uses of the web, but possibly with some warnings attached just in case.
- sph 4y agoThis is not an app, it's not encouraging anything. Art isn't as interesting if you only do things the optimal way.
- Squarex 4y agoNice reference to the Slint's Spiderland.
- justinsaccount 4y agohttps://sliderland.blinry.org/#sin%28t%2Bx%29*0.5%2B0.5 https://sliderland.blinry.org/#sin%28t%2Bx%29*0.5%2B0.5 is very relaxing
- Semiapies 4y agoI took it to this and found it even more so: https://sliderland.blinry.org/#sin%280.25%20*%20t%2Bx%29*0.5%2B0.5 https://sliderland.blinry.org/#sin%280.25%20*%20t%2Bx%29*0.5...
- cheeseface 4y agoOddly satisfying.
- brikelly 4y agoGuess the creator was a big Slint fan :)
- dillondoyle 4y agoSo cool. I like how didn't try to style slider input, it's hellish to get it to look nice across browsers.
- aaronharnly 4y agoNo sandboxing, so this is easy enough to do too :) 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' https://sliderland.blinry.org/#document.body.style.backgroun...
- deleted 4y ago[deleted]
- deleted 4y ago[deleted]
- chaosprint 4y agoThis 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: https://glicol.org/tour#meta1 https://glicol.org/tour#meta1 Will look into the source code tomorrow.
- bspammer 4y agoMy attempt: 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 https://sliderland.blinry.org/#i%252%20%3F%201-%280.5%2B%281...
- junon 4y agohttps://sliderland.blinry.org/#%28%28cos%28i*0.1%2Bt*4%2Bsin%28t*4%29%29%2B1%29%2F2%29%2B%28sin%28i%2Bt*2%2Bcos%28t*7%29%29%2F2*.2%2B.4%29-.5 https://sliderland.blinry.org/#%28%28cos%28i*0.1%2Bt*4%2Bsin... :D
- deleted 4y ago[deleted]
- brundolf 4y agoIt's like a minimalist version of Shadertoy (https://www.shadertoy.com https://www.shadertoy.com). Fun idea
- deleted 4y ago[deleted]
- slightknack 4y agoI had a little too much fun... 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 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 https://sliderland.blinry.org/#x%3E0.2-abs%28sin%28t*2%29%29...
- sgtnoodle 4y agolog(tx)/2sin(x*t)/4+0.5 Has some pleasant aliasing effects.