| name | dwitter-expert |
| description | Expert knowledge for creating, analyzing, and optimizing Dwitter (dwitter.net) visual JavaScript demos in 140 characters |
| tags | ["javascript","creative-coding","code-golf","canvas","demoscene"] |
Dwitter Expert Skill
What is Dwitter?
A social platform for creating visual JavaScript demos in 140 characters or fewer.
- Canvas: 1920×1080 HTML5 canvas
- Function:
u(t) called every frame at 60fps
t = elapsed time in seconds- Built-in shortcuts:
c (canvas), x (2D context), S (Math.sin), C (Math.cos), T (Math.tan), R(r,g,b,a) (rgba color helper)
frame variable available (integer frame count)
Dwitter API (No Auth Required)
GET https://www.dwitter.net/api/dweets/?limit=100 # list dweets (max 100 per page)
&offset=200 # pagination
&author=username # filter by author
&remix_of=123 # remixes of dweet 123
GET https://www.dwitter.net/api/dweets/123 # single dweet
GET https://www.dwitter.net/api/users/username # user info
Response: {count, next, previous, results: [{id, code, posted, author:{username}, link, awesome_count, remix_of}]}
Total dweets: ~25,457. Use for studying patterns, finding inspiration, analyzing techniques.
Top Authors
- KilledByAPixel (1,480 dweets) — Master of Unicode packing, 3D effects, creative concepts
- cantelope (260 dweets) — 3D math expert, clearRect techniques, highest-rated readable dweets
- lionleaf (59 dweets) — Platform creator, clean readable code
Highest-Rated Readable Dweet Patterns (by awesome_count)
1. 3D Torus (37 awesome) — cantelope d/24332
for(x.fillRect(0,0,w=2e3,w),h=i=540;i--;)x.clearRect(960+(S(p=i/35+S(t/2)*60)*S(q=(i/57|0)*h))/(Z=C(p)*S(q)+2+S(t))*h,h+C(q)/Z*h,s=20/Z,s)
2. Rotating Spiral (25 awesome) — lionleaf d/8651
c.width|=0
with(x)for(translate(900,500),i=9*t;i-->0;fill())fillStyle='hsl('+9*i+',99%,50%)',fillRect(5*i,0,a=40*S(i*.9)+60,a),rotate(-3.88)
3. Zooming Squares (23 awesome) — lionleaf d/18570
c.width=2e3;x.lineWidth=9;for(i=0;s=300,a=s/(s-(t+i*s/400)%s),i<400;i++){x.strokeRect(999-a*(1+S(t))/2,500-a*(1+C(t*2))/2,a,a)}
4. Starfield Tunnel (24 awesome) — cantelope d/28251
for(x.fillRect(0,0,i=c.width|=h=540,i*=9);i--;x.clearRect(960+(i**.9%1-.5)*S(t/2)*l/Z*h,h+(i**2.1%1-.5)*l/Z*h,s=l/Z,s))Z=(l=99)-(i+t*30)%98
5. Rotating 3D Sphere (22 awesome) — KilledByAPixel d/34411
for(r=500,i=1e4;i--;x.fillRect(960+r*X,540+r*Y,9,9))Z=i**.9%1,W=1-Z*Z,X=W*S(a=i*t),Y=W*C(a),x.fillStyle=R(v=(S(t)*Z-C(t)*X-Y/2)*400,v/2,30)
6. Scrolling Cityscape (22 awesome) — KilledByAPixel d/34603
for(c.width=A=99;A;R+=.1)(t+R*A/50-R^R)%5||x.fillRect(A--,28-22/R,R/5,44/R,R=1)
7. Piano Keys (19 awesome) — KilledByAPixel d/34900
c.width|=w=99
for(i=13;i--;)for(j=12;j--;)x.fillRect(i&&(2*i-4+j%2+(j%4<3?j%4:1)*t/3%2)*w,j*w,i?w:3e3,i?w:5)
8. XOR Pattern (19 awesome) — KilledByAPixel d/34900 style
c.width|=0;for(i=240*135;i--;){X=i%240,Y=i/240|0
v=((X^Y)+~~(t*9))%128
x.fillStyle=`hsl(${X*2+t*60} 99%${30+v/2}%)`;x.fillRect(X*8,Y*8,8,8)}
9. Optical Illusion Rectangles (18 awesome) — KilledByAPixel d/33896
for(c.width|=i=9;i--;)
x.rect(400+i*50+S(t)*300,400+S(i/2+t*9)*99*S(t)**9,450,200)
x.fill`evenodd`
10. Lissajous Curves (11 awesome) — KilledByAPixel d/34168
for(c.width|=j=16;j--;)for(i=500;i--;)x.fillRect(293+j%4*450+99*C(i*(j/3+1|0)+t/3)*S(i+t),160+(j>>2)*250+99*C(i*(j%3+1)+t/5)*C(i+t/2),9,9)
Critical Code Golf Techniques
Character Saving (most impactful)
c.width|=0 clears canvas (instead of clearRect) — 12 chars savedfor(i=N;i--;) reverse loop — saves i=0;i<N;i++- Comma operator in for:
for(;cond;a++,b++) — avoids semicolons
|0 instead of Math.floor() — 12 chars saved~~v double bitwise NOT = floor — 2 chars vs Math.floor1e3 = 1000, 2e3 = 2000, 1e4 = 10000with(x) drops x. prefix on all canvas calls- Template literals:
`hsl(${v} 99%50%)` — no concatenation needed
- Arrow in fillRect args:
x.fillRect(x,y,w,h) — abuse extra args ignored
x.fillStyle=R(r,g,b,a) — built-in rgba helper
Powerful Patterns
- Particle system:
for(i=N;i--;x.fillRect(expr,expr,s,s)) — draw in loop update
- 3D perspective:
screenX = 960 + X/Z * 540 (center + world/depth * halfHeight)
- Pseudo-random:
i**.9%1 or i**3.1%66 — deterministic random from index
- Color cycling:
`hsl(${i*t} 99%${i}%)` — time-based hue, index-based lightness
- Motion blur: Don't clear canvas, use
x.fillRect(0,0,2e3,2e3) with alpha: R(0,0,0,.1)
- White-on-black 3D:
fillRect black, then clearRect to carve out shapes
- Rotate + translate:
with(x) + translate(960,540) + rotate(angle) for kaleidoscopes
- Torus math:
p=azimuth, q=cross; X=S(p)*S(q), Y=C(q), Z=C(p)*S(q)+offset
- Sphere points:
Z=i/N*2-1, r=sqrt(1-Z*Z), X=r*C(a), Y=r*S(a)
- Wave:
S(i/freq + t*speed) * amplitude
- fillRect in loop condition:
for(;cond;x.fillRect(...)) — saves a line
Advanced Compression
- Unicode packing (KilledByAPixel's technique):
eval(unescape(escape\...`.replace(/u../g,'')))`
- Packs 2 ASCII chars per Unicode char, effectively doubling capacity to ~280 chars
- Used by top authors for complex demos that exceed 140 readable chars
- charCodeAt bitmap: Encode pixel data in string characters
- Reuse variables:
a=b=c=0 chained assignment
- Abuse function args: Extra args to fillRect are silently ignored — put side effects there
Creating Outstanding Dweets — Strategy
- Pick a strong visual concept: 3D shapes, particle effects, optical illusions, or recognizable objects
- Start with a working version (even if over 140 chars)
- Golf ruthlessly: Apply every char-saving trick above
- Optimize the math: Find elegant formulas that produce complex visuals
- Test timing: Use
t creatively — S(t), t%period, t*speed
- Color matters: HSL with time-modulated hue creates instant visual appeal
- The best dweets find one elegant mathematical relationship that produces unexpected complexity
Quality Checklist
