Dwitter On The JavaScript Demoscene

Written by Nikos Vaggalis

Monday, 13 April 2020

How much awesomeness can you fit in only 140 characters of JavaScript and a (HTML) canvas? Part of the demoscene, Dwitter hosts small but powerful user-contributed JavaScript snippets that run in the browser and do amazing things.

First, what is a demoscene? According to Wikipedia:

The demoscene is an international computer art subculture focused on producing demos: self-contained, sometimes extremely small, computer programs that produce audio-visual presentations.

The purpose of a demo is to show off programming, visual art, and musical skills. Demos and other demoscene productions are shared at festivals known as demoparties, voted on by those who attend, and released online

One such party was js13kGames, which we covered back in 2017, where you had to write a full game within a 13K limit. We found that 13K was sufficient enough to pack both gameplay and cool graphics, due to the advanced browser engines and HTML5.

[画像:dwitterbanner]

Dwitter is not about games, though, but instead a showcase of graphics and animations generated in 140 chars of Javascript, the same length of a tweet, hence the "witter" part in the name with D for Demo. It's more like the challenge to write a JavaScript program with a max size of 1k, which we covered back in 2013.

On the Dwitter site you can find some pretty spectacular demos given that short amount of code. For example:

[フレーム]

Of course, as code is so short it's bound to look obfuscated, like:

function u(t) {
x.shadowColor="#0af",x.shadowBlur=99-C(t)*50
for(i=0;i++<40;x.fillRect(960-z-j/2,1070-i*5,z*2+j,-z*4))z=2e3/(i-t%32),j=i%3*z
M}

or

function u(t) {
c.width|=f=(X,Y,d,z=2+X*S(a=Y-4*t))=>d>>8?x.fillRect(960+1e3*X*C(a)/z,540+1e3*Y/z,6,6):[t,t+2,t+4].map(i=>f(X+C(i)/d,Y+S(i)/d,2*d));f(0,0,2)}

or even resemble malware programs, such as:

[フレーム]

but in fact all the snippets are perfectly valid code!

Dwitter is community sourced and anyone can post his/her creations on the site for others to enjoy, comment, rate or even experiment with, since under each demo you'll find its code which you can tweak on site and at real time!

There's also a spinoff, Dwitter-Son1k which couples audio as well. You have 140 characters to write the Audio update function, and another 140 to write the Visual update function.The site allows you to tweak the clip and share it on Twitter and other social media!

[画像:dwittersq]

More Information

Dwitter

Dwitter-Son1k

Pouet Demoscene board

Comments

or email your comment to: comments@i-programmer.info

Last Updated ( Monday, 13 April 2020 )

Dwitter On The JavaScript Demoscene

More Information

Related Articles

Comments