Sliderland – Creative coding with 64 HTML sliders (opens in new tab)

(sliderland.blinry.org)

228 pointsbryanbraun4y ago38 comments

38 comments

35 comments · 23 top-level

oneeyedpigeon4y ago· 3 in thread

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...

brundolf4y ago

It'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

toqy4y ago

it also uses canvas, not actual html sliders

oneeyedpigeon4y ago

Oh 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.

1 more reply

squarefoot4y ago· 3 in thread

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.

panzerboiler4y ago

Relax. 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.

squarefoot4y ago

I 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.

2 more replies

have_faith4y ago

I think there's little risk of someone thinking this is a recommendation for a proper animation engine.

dylan6044y ago· 2 in thread

does the binary one going from left to right feel odd to anyone else?

rickdeveloper4y ago

Here's one that goes from right to left:

  (2**(64 - i)) & (t*10)

dylan6044y ago

Nicely done! My OCD says things are back to normal now.

1 more reply

bspammer4y ago· 1 in thread

My attempt: https://sliderland.blinry.org/#i%252%20%3F%201-%280.5%2B%281...

junon4y ago

https://sliderland.blinry.org/#%28%28cos%28i*0.1%2Bt*4%2Bsin...

DerekBickerton4y ago· 1 in thread

blinry4y ago

If you're into this, also check out @bryanbraun's "Checkboxland", which was a huge inspiration for this project! :) https://www.bryanbraun.com/checkboxland/

Marazan4y ago· 1 in thread

https://tixy.land/ seems to be the inspiration?

memorable4y ago

Yes, confirmed in the source code[0].

[0]: https://github.com/blinry/sliderland

justinsaccount4y ago· 1 in thread

https://sliderland.blinry.org/#sin%28t%2Bx%29*0.5%2B0.5 is very relaxing

Semiapies4y ago

I took it to this and found it even more so:

https://sliderland.blinry.org/#sin%280.25%20*%20t%2Bx%29*0.5...

slightknack4y ago

I 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...

NickBusey4y ago

If you missed the link at the bottom to the music video, you missed out. https://www.youtube.com/watch?v=bUTPlQzfz1k

zamadatix4y ago

Reminds me of an old Chrome Experiment post 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.

afry14y ago

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.

Well done.

russellbeattie4y ago

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.

https://github.com/dataarts/dat.gui

You can see how it's used in this codepen:

https://codepen.io/russellbeattie/pen/kGxaqM

brundolf4y ago

It's like a minimalist version of Shadertoy (https://www.shadertoy.com). Fun idea

PaulHoule4y ago

It's like a 1-d pixel shader!

Squarex4y ago

Nice reference to the Slint's Spiderland.

chaosprint4y ago

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:

https://glicol.org/tour#meta1

Will look into the source code tomorrow.

dillondoyle4y ago

So cool. I like how didn't try to style slider input, it's hellish to get it to look nice across browsers.

xhrpost4y ago

I really like these super simple but creative ideas. Lists.sh a few weeks ago landed there for me as well.

brikelly4y ago

Guess the creator was a big Slint fan :)

sgtnoodle4y ago

log(tx)/2sin(x*t)/4+0.5

Has some pleasant aliasing effects.

cheeseface4y ago

Oddly satisfying.

couchand4y ago

This is really neat! Also, please don't hijack the back button if you're not going to do anything useful with it!

1 more reply

aaronharnly4y ago

No sandboxing, so this is easy enough to do too :)

https://sliderland.blinry.org/#document.body.style.backgroun...

1 more reply

j / k navigate · click thread line to collapse

38 comments

35 comments · 23 top-level

oneeyedpigeon4y ago· 3 in thread

brundolf4y ago

It'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

toqy4y ago

it also uses canvas, not actual html sliders

oneeyedpigeon4y ago

Oh 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.

1 more reply

squarefoot4y ago· 3 in thread

panzerboiler4y ago

squarefoot4y ago

2 more replies

have_faith4y ago

I think there's little risk of someone thinking this is a recommendation for a proper animation engine.

dylan6044y ago· 2 in thread

does the binary one going from left to right feel odd to anyone else?

rickdeveloper4y ago

Here's one that goes from right to left:

  (2**(64 - i)) & (t*10)

dylan6044y ago

Nicely done! My OCD says things are back to normal now.

1 more reply

bspammer4y ago· 1 in thread

My attempt: https://sliderland.blinry.org/#i%252%20%3F%201-%280.5%2B%281...

junon4y ago

https://sliderland.blinry.org/#%28%28cos%28i*0.1%2Bt*4%2Bsin...

DerekBickerton4y ago· 1 in thread

blinry4y ago

If you're into this, also check out @bryanbraun's "Checkboxland", which was a huge inspiration for this project! :) https://www.bryanbraun.com/checkboxland/

Marazan4y ago· 1 in thread

https://tixy.land/ seems to be the inspiration?

memorable4y ago

Yes, confirmed in the source code[0].

[0]: https://github.com/blinry/sliderland

justinsaccount4y ago· 1 in thread

https://sliderland.blinry.org/#sin%28t%2Bx%29*0.5%2B0.5 is very relaxing

Semiapies4y ago

I took it to this and found it even more so:

https://sliderland.blinry.org/#sin%280.25%20*%20t%2Bx%29*0.5...

slightknack4y ago

I 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...

NickBusey4y ago

If you missed the link at the bottom to the music video, you missed out. https://www.youtube.com/watch?v=bUTPlQzfz1k

zamadatix4y ago

Reminds me of an old Chrome Experiment post 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.

afry14y ago

Well done.

russellbeattie4y ago

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.

https://github.com/dataarts/dat.gui

You can see how it's used in this codepen:

https://codepen.io/russellbeattie/pen/kGxaqM

brundolf4y ago

It's like a minimalist version of Shadertoy (https://www.shadertoy.com). Fun idea

PaulHoule4y ago

It's like a 1-d pixel shader!

Squarex4y ago

Nice reference to the Slint's Spiderland.

chaosprint4y ago

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:

https://glicol.org/tour#meta1

Will look into the source code tomorrow.

dillondoyle4y ago

So cool. I like how didn't try to style slider input, it's hellish to get it to look nice across browsers.

xhrpost4y ago

I really like these super simple but creative ideas. Lists.sh a few weeks ago landed there for me as well.

brikelly4y ago

Guess the creator was a big Slint fan :)

sgtnoodle4y ago

log(tx)/2sin(x*t)/4+0.5

Has some pleasant aliasing effects.

cheeseface4y ago

Oddly satisfying.

couchand4y ago

This is really neat! Also, please don't hijack the back button if you're not going to do anything useful with it!

1 more reply

aaronharnly4y ago

No sandboxing, so this is easy enough to do too :)

https://sliderland.blinry.org/#document.body.style.backgroun...

1 more reply

j / k navigate · click thread line to collapse