10 ms·

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

183 points by pajtai 8y ago

ghthor 8y ago
Where is the Javascript running, the backend or the in my browser?
- pajtai 8y ago
  It's running in the browser. Right click inspect to see it.
twiceaday 8y ago
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.
- tokyodude 8y ago
  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
  - gregschlom 8y ago
    You know, the 140 chars limit or even the fact that there should be a limit at all is arbitrary too :)
  - exikyut 8y ago
    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.
dsamarin 8y ago
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);
- deleted 8y ago
  [deleted]
- deleted 8y ago
  [deleted]
- Forge36 8y ago
  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)
  - Forge36 8y ago
    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)
    - Forge36 8y ago
      140 :) https://www.dwitter.net/d/10398 https://www.dwitter.net/d/10398
- twiceaday 8y ago
  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 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 https://www.dwitter.net/d/10356
deleted 8y ago
[deleted]
hsavit1 8y ago
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
dang 8y ago
Discussed in 2017: https://news.ycombinator.com/item?id=13700698 https://news.ycombinator.com/item?id=13700698
singularity2001 8y ago
> function u(t) { why does he not use u=t=>
- winrid 8y ago
  Method signature is not included in the count.
- sigvef 8y ago
  I hadn't learned about arrow functions yet when it was written in 2015 :)
n-gauge 8y ago
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>
thomasfl 8y ago
So happy to see some fellow norwegian developers mentioned here.
aw3c2 8y ago
Are there any tutorials for getting started with this?
- pjmlp 8y ago
  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.
- zzzzzzzzzzz 8y ago
  wiki: https://github.com/lionleaf/dwitter/wiki https://github.com/lionleaf/dwitter/wiki some write-ups: http://jsriffs.blogspot.com/ http://jsriffs.blogspot.com/ http://zozuar.org/txt/chalice/ http://zozuar.org/txt/chalice/ http://zozuar.org/txt/sc/ http://zozuar.org/txt/sc/
tomxor 8y ago
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.
datlife 8y ago
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.
catacombs 8y ago
More validation that I'm a shitty JS developer.

183 points by pajtai 8y ago

ghthor 8y ago

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

pajtai 8y ago
It's running in the browser. Right click inspect to see it.

twiceaday 8y ago

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.

tokyodude 8y ago
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
- gregschlom 8y ago
  You know, the 140 chars limit or even the fact that there should be a limit at all is arbitrary too :)
- exikyut 8y ago
  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.

dsamarin 8y ago

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);

deleted 8y ago
[deleted]
deleted 8y ago
[deleted]
Forge36 8y ago
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)
- Forge36 8y ago
  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)
  - Forge36 8y ago
    140 :) https://www.dwitter.net/d/10398 https://www.dwitter.net/d/10398
twiceaday 8y ago
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 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 https://www.dwitter.net/d/10356

deleted 8y ago

[deleted]

hsavit1 8y ago

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

dang 8y ago

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

singularity2001 8y ago

> function u(t) { why does he not use u=t=>

winrid 8y ago
Method signature is not included in the count.
sigvef 8y ago
I hadn't learned about arrow functions yet when it was written in 2015 :)

n-gauge 8y ago

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>

thomasfl 8y ago

So happy to see some fellow norwegian developers mentioned here.

aw3c2 8y ago

Are there any tutorials for getting started with this?

pjmlp 8y ago
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.
zzzzzzzzzzz 8y ago
wiki: https://github.com/lionleaf/dwitter/wiki https://github.com/lionleaf/dwitter/wiki some write-ups: http://jsriffs.blogspot.com/ http://jsriffs.blogspot.com/ http://zozuar.org/txt/chalice/ http://zozuar.org/txt/chalice/ http://zozuar.org/txt/sc/ http://zozuar.org/txt/sc/

tomxor 8y ago

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.

datlife 8y ago

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.

catacombs 8y ago

More validation that I'm a shitty JS developer.