To understand what a dweet is, you first have to know about creative coding and code golfing.
Creative coding is about making art with code. It usually involves some kind of output where the final art can be appreciated. In Javascript this output is usually the HTML canvas (using either 2d or webgl), but nothing prevents you from trying any other kind of media. And not just in the HTML/Javascript realm (using svg, divs, tables, etc), but also via native applications coded in C or any other language, really.
I was introduced to creative coding by this cool fella named Daniel Shiffman, professor at NYU's Tisch School of the Arts. He has a YouTube channel called The Coding Train in which he teaches all kinds of cool visual stuff. I am one of his patrons, by the way.
Code golfing is the art of implementing some algorithm with the shortest source code possible, usually by abusing the language in some way. Here's one example:
And this is the code that makes it happen:
c.width|=z=4+C(t);r=89;f=a=>x.lineTo(250*z+r*C(q=a-S(t+a)/3)*z,99*S(2*t)+r*z*(1+S(q)));f(0);f(1.3);f(2);f(2.5);f(0);f(2);r=99;f(2);x.fill()
Mind-blowing, isn't it?
My introduction to code golfing came with Mathieu Henri's talks, with whom I learned that the demoscene is still alive and kicking, and now there's people doing cool stuff in Javascript as well.
Demoscene? This is the name given to an artistic subculture movement focused on creating demos, small pieces of code to generate cool audiovisual presentations. It's something that started decades ago. I was always surprised and intrigued as to how such amazing stuff was created. Now with the canvas and specially with WebGL, making demos became something much more accessible, although producing good pieces of art will be always a challenge that few will able to tackle.
Dwitter is a social platform for sharing Javascript art. The cool part is that you are constrained to only 140 characters. Some say that imposing limits to art makes everything much easier, since you stay focused on simpler ideas, and the simplest things are generally the most beautiful.
But how that tiny piece of code can produce art in a canvas? It seems so cryptic! Well, you don't start with nothing. Dwitter provides you with basic variables to help you stay focused. Those are:
c = document.querySelector("canvas");
x = c.getContext("2d");
R = (r, g, b, a) => `rgba(${r},${g},${b},${a})`;
T = Math.tan;
C = Math.cos;
S = Math.sin;
c is a reference to the canvas. It's 1920x1080 by the default. x is the 2D context of that canvas. R is a function to convert RGBA data to string. T, C and S are shortcuts to Math.tan, Math.cos and Math.sin, respectively. Finally there's this function u(t) which is called 60 times per second, where t is time in seconds since the animation started.
Enough with introductions. Let's see some code. I invite you to continue to part 2, where I dissect one of Mathieu Henri's coolest dweets.