Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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.

Ates Goral

July 25, 2018
Tweet

More Decks by Ates Goral

Other Decks in Programming

Transcript

  1. Kil g C ac s w i m i g

    CreateInTO July 25, 2018 Ateş Göral aka magna @atesgoral magnetiq.ca
  2. 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.
  3. 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
  4. 112

  5. 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
  6. Remove comments c.width = 1920; for (i = 0; i

    < 9; i++) { x.fillRect(400 + i * 100 + S(t) * 300, 400, 50, 200); } -43 100
  7. 63

  8. 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
  9. 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.
  10. Depends on who’s using it, how • Can write beautiful

    code by using the good parts • Can write ugly code • Can write FUGLY code
  11. 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
  12. 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!