A crazy twister effect in 256bytes of DHTML
p01<i id=d><script>setInterval('for(x=_="in solid #",E=Math,o=99,--O;o--;x+="<hr style=\'width:0;margin:auto;border-right:"+E.abs(q?p:P)+_+(9-q)*36+";border-left:"+E.abs(q?P:p)+_+(8+q)*36+"\'>")q=0>(p=E.cos(O+=22))*(P=E.sin(O));d.innerHTML=x',O=9)</script>
Yes, pulling this one was not easy.
How does it work
The twisting bar is rendered using
<hr> elements whose border and color follow a curve. The borders are
solid and sized fraction of
in hence the subtitle of this intro.
q=0>(p=E.cos(O+=22))(P=E.sin(O)) hits three birds. It computes and stores the length of both visible sides of the twisting bar in
P and check and stores which one goes left by compairing
With this three values the
border-left of the
<hr> element can style properly, setting the width to according to the visible sides of the bar and setting the color by casting
q like this
(8+q)36. Combined with the subtitle of this intro, this gives the colors
Hope this answers any questions you had about this effect.
As usual you can this little production, Rubber in solid # on Pouet.net
Other recent projects
There are many experiments and projects like RUBBER IN SOLID # to discover other here.
- MUSIC FOR TINY AIRPORTS AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- THEY COME AT DUSK 👺 A survival horror game for JS1k 2018, where you run away from dead miners as you hear your heart beat. Turn around using the arrow keys until all you hear is beeeeeeeep.
- MICRO NOVA Quite possibly the smallest WebGL demo effect. Micro Nova clocks under 512bytes and shows supernova-like blasting colors.
- 256B.HTM The first edition of the 256B.HTM contest allowed 5 entries per author. Mine ranked 1st, 10th, 19th and 29th out of 63.
Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.