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.
Slide 12
Slide 12 text
The t Ru t
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Sho s !
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
A lot more great examples at:
https://www.dwitter.net/top
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
Slide 26
Slide 26 text
Reg Cha t T im g
Slide 27
Slide 27 text
Remove comments
c.width = 1920;
for (i = 0; i < 9; i++) {
x.fillRect(400 + i * 100 + S(t) * 300, 400, 50, 200);
}
-43
100
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
Let’s Go !
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
63
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
Pro : fo l
Slide 37
Slide 37 text
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.
Slide 38
Slide 38 text
“Jav p i g ”
Slide 39
Slide 39 text
Depends on who’s using it, how
● Can write beautiful code by using the good parts
● Can write ugly code
● Can write FUGLY code
Slide 40
Slide 40 text
Fug d o K l g C a c s
Slide 41
Slide 41 text
Tagged template literals
// before
s.split('')
// after
s.split``
Slide 42
Slide 42 text
Cringy math
// before
x.arc(a,b,r,0,Math.PI*2)
// after
x.arc(a,b,r,0,7)
Slide 43
Slide 43 text
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)
Slide 44
Slide 44 text
Browser resiliency
// before
x.filter='sepia(100%)'
// after
x.filter='sepia('
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