Killing Characters while Making Art

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.

C7f65a2f291636c0bd19920b2b6d525b?s=128

Ates Goral

July 25, 2018
Tweet

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 !

  15. None
  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

  17. None
  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

  19. None
  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

  23. 112

  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
  34. 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