Killing Characters while Making Art

Dwitter (https://www.dwitter.net) is a collaborative community where members create animated visuals called "dweets" on an HTML canvas element with just 140 or less characters of JavaScript. The boundaries of what can be done within 140 characters is constantly pushed with a mix of algorithm know-how, code sorcery, and creativity. It's one of those cases where constraints can be liberating.

I'll showcase some exemplary dweets and then talk about JavaScript minification techniques and canvas rendering techniques.

Transcript

1. Kil g C ac s w i m i g
2. Kil g C ac s w i m i g CreateInTO July 25, 2018 Ateş Göral aka magna @atesgoral magnetiq.ca
3. Par s o Ch e
4. When sky is the limit - “build a structure”
5. Con r s a Cr i t
6. You can only use sand
7. You can only use 140 280 characters https://twitter.com/googlearts/status/913334566710112256
8. You can only use 140 characters of JavaScript https://twitter.com/justecorruptio/status/950339502567911424
9. dwitter.net/d/5747 by corruptio for(i=h=432;i--;x.fillRect(h+(h/i-1)**.5*S(t- i)*i,i,9,44))x.fillStyle=R(v='㓀职뿽흟�巶涷溲疗 恋 ㆇന䁓 㒄␅ 先р蠂 '.charCodeAt(i/16)>>i%16&1,v*h,99,C(t-i)) 140
10. Dwi r - d i t .ne
11. Dwi r d i t .ne Dwitter is a social network for building and sharing visual JavaScript demos limited to 140 characters. Created by Andreas Løve Selvik aka lionleaf. Inspired by a concept by Sigve Sebastian Farstad aka sigveseb. Its first official launch was at the Solskogen Demoparty in 2016 where it won the wild compo.
12. The t Ru t
13. Dwitter runtime // Called 60 times per second function u(t) { } t // Elapsed time in seconds S // Shorthand for Math.sin C // Shorthand for Math.cos T // Shorthand for Math.tan R // Generates rgba strings e.g. R(255,255,255,.5) c // 1920x1080 canvas x // 2D context for that canvas
14. Sho s !
16. dwitter.net/d/7702 by jylikangas for(c.width=i=714;i--;F(t+i/714+(i>>7)/9,-9)) (F=(a,o)=>x.strokeRect(357+S(a)*290-o/(Z=C(a) +1+(t%6<3)),99+C(a*(t/6%4|0))*99/Z,o/=Z/2,o)) (i,4) 140
18. dwitter.net/d/4671 by joeytwiddle t?c.width=W=200:P=Z=0;for(i=36;i--;j==Z&&(X-9 9)**2<60?Z=9:Z?onclick=e=>Z--:P++)j=i>>2,x.fi llText(j?' ':' ',j?X=j%5*t/i*P/23%W:99,9*(j| |Z)) 140
20. dwitter.net/d/915 by sigveseb for(n=c.width=i=1e3,s=S(t),k=C(t);i--;x.lineT o(n*X/Z,n*Y/Z))F=S(i),U=C(i),V=(i&7)-3,_=V*s+ F*k,Z=V*k-F*s+15,X=_*k-U*s+7,Y=_*s+U*k+3;x.fi ll() 140
21. A lot more great examples at: https://www.dwitter.net/top
22. Def Dwe
24. Default dweet c.width=1920 // clear the canvas for(i=0;i<9;i++) x.fillRect(400+i*100+S(t)*300,400,50,200) // draw 50x200 rects 112
25. If I were coding at work c.width = 1920; // clear the canvas for (i = 0; i < 9; i++) { // draw 50x200 rects x.fillRect(400 + i * 100 + S(t) * 300, 400, 50, 200); } +31 143
26. Reg Cha t T im g
27. Remove comments c.width = 1920; for (i = 0; i < 9; i++) { x.fillRect(400 + i * 100 + S(t) * 300, 400, 50, 200); } -43 100
28. Remove white space c.width=1920; for(i=0;i<9;i++){ x.fillRect(400+i*100+S(t)*300,400,50,200); } -24 76
29. Remove semicolons and curlies c.width=1920 for(i=0;i<9;i++)x.fillRect(400+i*100+S(t)*300,400,50,200) -6 70
30. Let’s Go !
31. Reverse loop c.width=1920 for(i=9;i--;)x.fillRect(400+i*100+S(t)*300,400,50,200) // before : for(i=0;i<9;i++) // after : for(i=9;i--;) -3 67
32. Identity operation c.width|=0 for(i=9;i--;)x.fillRect(400+i*100+S(t)*300,400,50,200) // before : c.width=1920 // after : c.width|=0 // c.width^=0 // c.width+=0 // c.width*=1 -2 65
33. Compromise // 1920 or 1929. Who cares? for(c.width|=i=9;i--;)x.fillRect(400+i*100+S(t)*300,400,50,200) // before : c.width|=0⏎ // after : c.width|= -2 63
35. Failed attempt at avoiding repetition // before for(c.width|=i=9;i--;)x.fillRect(400+i*100+S(t)*300,400,50,200) // after for(c.width|=i=9,w=400;i--;)x.fillRect(w+i*100+S(t)*300,w,50,200) // need at least 4 repetitions to save characters +2 65
36. Pro : fo l
37. fork loop c.width|=0 fork(i=;i--;)x.fillRect(400+i*100+S(t)*300,400,50,200) // Prevent accidental infinite loops while live-editing code // by first changing the “for” loop to a “fork” loop. // Can’t infinite-loop with a syntax error.
38. “Jav p i g ”
39. Depends on who’s using it, how • Can write beautiful code by using the good parts • Can write ugly code • Can write FUGLY code
40. Fug d o K l g C a c s
41. Tagged template literals // before s.split('') // after s.split``
42. Cringy math // before x.arc(a,b,r,0,Math.PI*2) // after x.arc(a,b,r,0,7)
43. valueOf // before r=Math.random;x.arc(r(),r(),r(),r(),r(),r()) // after T.valueOf=Math.random;x.arc(T,T,T,T,T,T)
44. Browser resiliency // before x.filter='sepia(100%)' // after x.filter='sepia('
45. Som er T c iq
46. Canvas primitives x.fillRect(X,Y,W,H) x.arc(X,Y,r,0,7) https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
47. Direct pixel manipulation d=x.getImageData(X,Y,w,h) x.putImageData(d,X,Y,w,h)
48. Text/emoji x.fillText(' ',0,16)
49. Glitching c.style.background=`url(${c.toDataURL().replace('c','f')}) 0/100%`
50. A plethora of know-how • https://github.com/lionleaf/dwitter/wiki • https://github.com/jed/140bytes/wiki/Byte-saving-techniques Talk to people: • http://register.jsgolf.club • https://discord.gg/emHe6cP
51. Som y uf
52. dwitter.net/u/magna • dwitter.net/d/6494 • dwitter.net/d/2516 • dwitter.net/d/8740 • dwitter.net/d/2385 • dwitter.net/d/3271 • dwitter.net/d/5716 • dwitter.net/d/2177 • dwitter.net/d/2378
53. Tha s! @at ra I’ll attempt to do some live coding to create some new dweets. If you’re up for it, do some of your own and I’ll be around to help!
54. Bon : d e p er.ne