RUBBER IN SOLID #

A crazy twister effect in 256bytes of DHTML

Source code

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.

This calculation 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 P and check and stores which one goes left by compairing q=0>=pP.

With this three values the border-right and 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 (9-q)36 or (8+q)36. Combined with the subtitle of this intro, this gives the colors #288 and #324.

Hope this answers any questions you had about this effect.

Feedback

As usual you can this little production, Rubber in solid # on Pouet.net

Other recent experiments

There are many experiments and projects like RUBBER IN SOLID # to discover other here.

• FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
• VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
• BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks. on June 26th, 2017
• 10 PRINT THEREMIN AT WEB REBELS A lighting talk about labyrinth generation and theremin instrument using the Web Audio API in 219 bytes presented at Web Rebels 2016. on June 2nd, 2016
• MATRAKA DEMOJS 2012's winner 1k intro with 3D graphics and music, written in JavaScript and packaged into a self extracting PNG image. See and hear for yourself! Remember, everything you're about to see and hear fits in 1024 bytes. Watch out, the music is quite loud on June 30th, 2012
• JSPONGY Since Mentor^TBC released Spongy, an amazing 128b intro raymarching a Menger sponge, I wondered how far such effect could be size optimized in JavaScript while keeping complex camera path. The answer: 281 bytes. on October 23rd, 2009
• TUNNEX Ascii art tunnel + Scroll text: The first multi-effect 256b production in JavaScript on June 28th, 2008
• 3D TOMB II 3D TOMB II: The tomb of the 4096 mummies is a first person shooter in a fully textured environment done in less than 4KB of JavaScript. on July 1st, 2007

Let's talk

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.