See what you can create with 140 characters of JavaScript and a canvas | Hacker News Reader

See what you can create with 140 characters of JavaScript and a canvas

dwitter.net

183 pointspajtai24 comments

Open articleView on HN

These all assume certain variables are pre-defined but nowhere does it say what they are.

Edit: If you hit "New dweet" it tells you.

u(t) is called 60 times per second.

t: Elapsed time in seconds.

S: Shorthand for Math.sin.

C: Shorthand for Math.cos.

T: Shorthand for Math.tan.

R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5)

c: A 1920x1080 canvas.

x: A 2D context for that canvas.

I've always wished they'd have totally embraced their shortcuts and added as many as possible.

they could shorten every setter and function so c.width could just be w() or c.w= and c.fillStyle could just be fs(style) or c.fs=

They arbitrary shorten somethings but not others seems well... arbitrary

You know, the 140 chars limit or even the fact that there should be a limit at all is arbitrary too :)

Hmm, a Short JS or Golfed JS standard should be ratified.

Like jQuery.

"But that's cheating!", people will say. I disagree; JS is verbose, but it's so widespread that if we can shorten it will result in new levels of compact creativity that we are missing out on. And JS is so full of frameworks, something like this wouldn't set that much precedent.

Well, I have done just about all I can to do to make the Matrix digital rain, but I am sadly 100 bytes over. I am out of time to kill, but if you aren't, please take this off of my hands. :)

  with(x)for(fillStyle="#000",fillRect(0,0,1e4,1e4),font="32px m",i=0;1920>i;i+=32)for(j=0,a=((2166136261*i^16777619)+960*t)%2160;b=255*(32>a-j),1080>j&&j<a;j+=42)fillStyle=R(b,765+j-a+b,b,1),fillText(String.fromCharCode((i+j)%85+12353),i,j);

174 it feels close. I dropped the text and went with numbers. (sorry for any duplicate notification spam)

   with(x)for(fillStyle="#000",font="2em m",fillRect(i=0,o=32,n=1920,n);n>i;i+=o)for(j=0,a=((2e7*i^1e9)+n*t)%n;n>j&&j<a;j+=o)fillStyle=R(b=n*(o>a-j),n/2+j-a,b),fillText(j%9,i,j)

145

   for(x.fillRect(i=0,0,n=c.width=540,n);n>i;i+=o)for(o=12,j=0,a=((n*i^1e7)+n*t)%n;j<a;j+=o)x.fillStyle=R(b=n*(o>a-j),n/2+j-a,b),x.fillText(j%9,i,j)

140 :)

https://www.dwitter.net/d/10398

This is how far I got starting from yours. I've no idea how the code works I just kept bashing on it.

https://www.dwitter.net/d/10354

Edit:

Here is a much nicer version with white droplets. I think I'm done for today

https://www.dwitter.net/d/10356

This is great, I've been tempted by js1k a number of times but the concept of a deadline and 1k limit is actually quite procrastonation inducing for me... 140 bytes forces me to experiment and not over think.

So happy to see some fellow norwegian developers mentioned here.

Discussed in 2017: https://news.ycombinator.com/item?id=13700698

Where is the Javascript running, the backend or the in my browser?

It's running in the browser. Right click inspect to see it.

Truly amazing website. Being transition to learn JS/Typescript lately, I come to understand how powerful this scripting language is to power the whole Internet.

I think this idea is cool, but I cant read this inline javascript. To the creators of this site, please add an option to view the code formatted with prettier

you could probably golf this classic one with your method:

<div id=B text=snow bgColor=0><script>Ô=setInterval("m='';c=Math.cos;for(ô=0;ô<65;)m+='<p style=position:absolute;top:'+(42+(z=399/(73-(++ô+Ô++&63)))c(ô.9))+'%;left:'+(50+z*c(ô))+(z>>3?'%>.':'%;color:#456>.');B.innerHTML=m",49)</script>

Are there any tutorials for getting started with this?

Demoscene competitions.

Check tutorials for 64 KB, 4 KB and such.

Think of 140 characters as trying to do 140 byte executables.

The basic idea is to first create whatever you want to achieve, without thinking too much about the size.

Then you iterate the algorithm, reducing the size until it achieves the desired goal.

In the process it helps to make use of typical demoscene technics, namely packers/minifiers, procedural generation.

wiki:

https://github.com/lionleaf/dwitter/wiki

some write-ups:

http://jsriffs.blogspot.com/

http://zozuar.org/txt/chalice/