Here's my new minimalist creative coding playground!
➡️ https://sliderland.blinry.org ⬅️
What animations can YOU make using JavaScript and 64 sliders? 🎚️✨
I originally wrote this tool for the music video "Tides", which won first place in @revision_party@twitter.com's Wild competition this year! https://www.youtube.com/watch?v=bUTPlQzfz1k
The interactive version takes huge inspiration from @aemkei@twitter.com's "tixy", which has around 0.5 dimensions more, and uses a 16x16 dot grid! https://tixy.land
Another inspiration was "Checkboxland", which @BryanEBraun@twitter.com made at the @recursecenter@twitter.com in 2020! https://www.bryanbraun.com/checkboxland/
I'm especially amazed by this animation that @daniel_bohrer made!
https://sliderland.blinry.org/#%28i%5E%28t*20%29%2564%29%2F63
Such a simple expression: (i^(t*20)%64)/63
But so much recursive complexity!
@blinry did I make this? I don't remember 😅
@blinry @daniel_bohrer follow for more recursive algorithm art ! @bitartbot
@blinry Hah, I already wondered whether you were inspired by that 🙂
@blinry great! Really cool and creative what you can do.
Except the Google promotion - it hurts. Honestly. Please don't! https://contrachrome.com/
@SeeHorst Thanks for pointing that out! I'm also unhappy with the situation that the're only a good technical solution for recording MP4s in some of the browsers. :/
@blinry awesome, but now I really need to find my #Formelsammlung (booklet with collection of mathematical formulas) from back in school an remember all this formulas again
@blinry awesome! thank you for this, tides was beautiful and this is super playful
@blinry I love the playground and the video - very cool!
@axwax Thanks!! :)
@marc_michalsky Pretty! :)
@blinry This is really cool
@blinry the music Video is awesome, too. I can't stop watching. Like hypnosis. Very nice!
My favourite so far switches between seeming chaotic and ordered: https://sliderland.blinry.org/#tan%28t*x%29*sin%28x*10%2Bt%29*0.1%2B0.5
@blinry Maybe I'm more creative at another time, for now I have a decimal counter:
https://sliderland.blinry.org/#%28floor%28t%2F%2810**%2863-i%29%29%29%2510%29%2F10
@tian Cool!! The same technique could be used for a real clock, I guess! :O
@blinry @tian this looks hectic… also some sliders seem to move at the same time🤔
https://sliderland.blinry.org/#%28floor%28Date.now%28%29%2F%282**%2863-i%29%29%29%2510%29%2F9
@blinry Using a different technique, and having hours with only six minutes for more watching fun:
https://sliderland.blinry.org/#max%28%28abs%28sin%28t%29-2.2*%28x-0.5%29%29%3C1%2F64%29*%28%28cos%28t%29%29%2F2.2%2B0.5%29%2C%28abs%28sin%28t%2F6%29-3.3*%28x-0.5%29%29%3C1%2F40%29*%28%28cos%28t%2F6%29%29%2F3.3%2B0.5%29%29
@tian Love it!! Inspired by your clock, I made this! Can certainly be minimized more! https://sliderland.blinry.org/#%7B%0A%20%20s%20%3D%20-new%20Date%28%29.getSeconds%28%29%2F30*PI%2BPI%2F2%0A%20%20m%20%3D%20-new%20Date%28%29.getMinutes%28%29%2F30*PI%2BPI%2F2%0A%20%20h%20%3D%20-new%20Date%28%29.getHours%28%29%2F6*PI%2BPI%2F2%0A%20%20return%20%5B%0A%20%20%20%20max%280%2C-sign%28%280.5-x%29*%28%280.5%2Bcos%28s%29*0.5%29-x%29%29%29%20*%20%28%28x-0.5%29*tan%28s%29%2B0.5%29%2C%0A%20%20%20%20max%280%2C-sign%28%280.5-x%29*%28%280.5%2Bcos%28h%29*0.3%29-x%29%29%29%20*%20%28%28x-0.5%29*tan%28h%29%2B0.5%29%2C%0A%20%20%20%20max%280%2C-sign%28%280.5-x%29*%28%280.5%2Bcos%28m%29*0.45%29-x%29%29%29%20*%20%28%28x-0.5%29*tan%28m%29%2B0.5%29%0A%20%20%5D%5Bi%253%5D%0A%7D
@tian More code golfing: https://sliderland.blinry.org/#%7B%0A%20%20p%20%3D%20-new%20Date%28%29%5B%22get%22%2B%5B%22Seconds%22%2C%22Minutes%22%2C%22Hours%22%5D%5Bi%253%5D%5D%28%29%2F%5B30%2C30%2C6%5D%5Bi%253%5D*PI%20%2B%20PI%2F2%0A%20%20return%20%2B%28%28%280.5-x%29*%28%280.5%2Bcos%28p%29*%280.5-%28i%253%29*0.05%29%29-x%29%29%20%3C%3D%200%29%20*%20%28%28x-0.5%29*tan%28p%29%2B0.5%29%0A%7D
@blinry Great! I had a similar idea. Now I don't have to do it!
Click the blue arrow to get detailed instructions. Everything you type is saved in the URL, make sure to share your creations in the comments!
In Chrome, there's also a "record" button that saves your animation as an MP4! 🎥