dwitter-expert - SKILL.md Agent Skill

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 saved
for(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.floor
1e3 = 1000, 2e3 = 2000, 1e4 = 10000
with(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

Under 140 characters (count carefully, \r\n = 2 chars on dwitter)
Visually interesting and animated
Smooth animation (no flicker unless intentional)
Works at 60fps without lag
Uses canvas center (960, 540) as reference point
Has color variation or interesting contrast