Dwitter - javascript demos in 140 characters

function u(t) {

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

} // 122/140

Please log in (or register) to post a dweet (copy-paste the code somewhere safe to save it meanwhile)


    u(t) is called 60 times per second.
    t: Elapsed time in seconds.
    S: Shorthand for Math.sin.
    C: Shorthand for Math.cos.
    T: Shorthand for Math.tan.
    R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5)
    c: A 1920x1080 canvas.
    x: A 2D context for that canvas.

Try the new frontend: beta.dwitter.net
Current theme challenge: #Opposites

show FPS hide FPS share fullscreen

cantelope

function u(t) {

eval(unescape(escape`𩡯𬠨𮀮𩡩𫁬𤡥𨱴𚀰𛀰𛁩🐳𩐴𛁩𚐻𪐭𛐻𮀮𨱬𩑡𬡒𩑣𭀨𪐥𞐪𚁨🐲𝐰𚐫𦀯𚁚👃𚁰𚐪𩀫𞐩𚡨𛀨𪐥𝐫𦐯𦠩𚡨𛀴𛀴𚐩𦀽𤰨𬀽𚁁👍𨑴𪀮𨑴𨑮𜠩𚁘👓𚁩𚐭𜰬𜀩𚱩𚡩𚐪𚁤🐨𢀽𣑡𭁨𛡨𮑰𫱴𚐨𦀬𜀩𚐬𦐽𤰨𬀽𠐨𦐽𠰨𪐩𛁚👃𚁰𚐪𩀩𚱴𚱩𙐹𚐪𚁤👈𚁙𛁚𚐩`.replace(/u../g,'')))

Oct 13 2024 11:13 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

torus 4

Show more comments…
u/lewdev

These donut things are great but are so slow on my computer. Anyone else have this problem?
u/cantelope

lewdev, there's known performance glitches with canvas in Firefox on Linux. Guessing that's your stack. Try Chromium?
u/tomxor

I actually always found Firefox canvas way faster than chrome, on Linux at least. Including this one, 30 FPS in chrome, but 60 FPS in Firefox, I got a new laptop this year so probably even slower in chrome on older computers.
u/tomxor

@cantelope You might be thinking of the subpixel aliasing issue on Firefox that appeared when they flipped hardware rendering on by default. That affected a lot of dweet rendering, I reported it a while back and it's been fixed in release since v128
u/cantelope

whatever causes the firefox+canvas+linux thing, somehow i always correctly guess the stack... whatever that means
u/lewdev

I was on win11 on my laptop, but it was slow on both Chrome & Firefox. It's smooth on my desktop Win11, which is much more powerful.
u/cantelope

well there you have it, bunk lappy

show FPS hide FPS share fullscreen

cantelope

function u(t) {

eval(unescape(escape`𩡯𬠨𪐽𜡥𝀬𨰮𭱩𩁴𪁼🐰𞱩𛐭𞱸𛡦𪑬𫁒𩑣𭀨𪐥𞐪𚁨🐲𝐰𚐫𦀯𚁚👃𚁰𚐪𩀫𞀩𚡨𛀨𪐥𝐫𦐯𦠩𚡨𛀹𛀹𚐩𦀽𤰨𬀽𚁁👍𨑴𪀮𨑴𨑮𜠩𚁘👓𚁩𚐭𜠬𜀩𚱩𛰶𚱴𚠴𚐪𚁤🐨𢀽𣑡𭁨𛡨𮑰𫱴𚐨𦀬𜀩𚐬𦐽𤰨𬀽𠐨𦐽𠰨𪐩𛁚👃𚁰𚐪𩀩𚱴𚱩𙐹𚐪𚁤👈𚁙𛁚𚐩`.replace(/u../g,'')))

Oct 13 2024 11:22 PM UTC

}// 138/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

torus 5

show FPS hide FPS share fullscreen

cantelope

function u(t) {

eval(unescape(escape`𩡯𬠨𮀮𩡩𫁬𤡥𨱴𚀰𛀰𛁩🐱𩐴𛁩𚐻𪐭𛐻𮀮𨱬𩑡𬡒𩑣𭀨𞐶𜀫𦀯𦠪𚁨🐵𝀰𚐬𪀫𦐯𦠪𪀬𬰽𜐶𛱚𛁳𚐩𦀽𤰨𬀽𚁁👍𨑴𪀮𨑴𨑮𜠩𚁘👓𚁩𚐭𜰬𜀩𚱩𚡩𚐪𚁤🐨𢀽𣑡𭁨𛡨𮑰𫱴𚐨𦀬𜀩𚐬𦐽𤰨𬀽𠐨𦐽𠰨𪐩𛁚👃𚁰𚐪𩀩𚱴𚠳𚐪𚁤👈𚁙𛁚𚐩𛁚👃𚁰𚐪𩀬𦠫🐶`.replace(/u../g,'')))

Oct 13 2024 9:56 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

torus 1

u/rodrigo.siqueira

Great perspective!
u/cantelope

a non-obvious trick here is the "sizing" of rects by distance, which creates a pleasing effect. the details matter more than some ppl think

show FPS hide FPS share fullscreen

cantelope

function u(t) {

eval(unescape(escape`𩡯𬠨𪐽𜡥𝀬𨰮𭱩𩁴𪁼🐰𛁨🐲𝀰𞱩𛐭𞱸𛡦𪑬𫁒𩑣𭀨𪀫𪐥𝰪𪀫𦀯𚁚👃𚁰𚐪𩀫𞐩𚡨𛀲𝰵𚰨𪐥𜰫𦐯𦠩𚡨𛀳𛀳𚐩𦀽𤰨𬀽𚁁👍𨑴𪀮𨑴𨑮𜠩𚁘👓𚁩𚐭𜰬𜀩𚱩𚡩𚐪𚁤🐨𢀽𣑡𭁨𛡨𮑰𫱴𚐨𦀬𜀩𚐬𦐽𤰨𬀽𠐨𦐽𠰨𪐩𛁚👃𚁰𚐪𩀩𚱴𚠸𚱩𙐷𚐪𚁤👈𚁙𛁚𚐩`.replace(/u../g,'')))

Oct 13 2024 11:09 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

torus 3

show FPS hide FPS share fullscreen

rodrigo.siqueira

remix of d/32578 by u/rodrigo.siqueira

function u(t) {

for(x.fillRect(0,0,i=2e4,i);i--;x.clearRect(360+j*400+99*S(i+t)+35*C(i*i),220+k*330+35*C(i+k*3-t*(j+3))-C(i)*80+S(i*i)*30,2,3))j=i%4,k=i%3

Oct 12 2024 12:21 AM UTC

}// 138/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Multiple torus choreography #torus

u/cantelope

impressive!
u/lewdev

#donuts #fpskiller
u/jpthinker

So cool!
u/jpthinker

Reading through the code, this is so clever! I like how you combined the black background fillrect with the i variable's initialization, and how you used clearRect to get away without doing any fillStyles.

show FPS hide FPS share fullscreen

cantelope

function u(t) {

eval(unescape(escape`𩡯𬠨𮀮𩡩𫁬𤡥𨱴𚀰𛀰𛁩🐲𩐴𛁩𚐻𪐭𛐻𮀮𨱬𩑡𬡒𩑣𭀨𪐥𞐪𚁨🐲𝐰𚐫𦀯𚁚👃𚁰𚐪𩀫𞀩𚡨𛀨𪐥𝐫𦐯𦠩𚡨𛀶𛀶𚐩𦀽𤰨𬀽𚁁👍𨑴𪀮𨑴𨑮𜠩𚁘👓𚁩𚐭𜠬𜀩𚱩𛰳𚱴𚐪𚁤🐨𢀽𣑡𭁨𛡨𮑰𫱴𚐨𦀬𜀩𚐬𦐽𤰨𬀽𠐨𦐽𠰨𪐩𛁚👃𚁰𚐪𩀩𚱴𙐹𚐪𚁤👈𚁙𛁚𚐩`.replace(/u../g,'')))

Oct 13 2024 11:28 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

torus 6

show FPS hide FPS share fullscreen

rodrigo.siqueira

remix of d/32575 by u/rodrigo.siqueira

function u(t) {

eval(unescape(escape`𩡯𬠨𨐽𛐮𜰻𨐼𜐻𨐫🐮𜀰𜐩𩡯𬠨𪐽𜠰𛁬👥🐮𝐻𪐭𛐻𬠽𪐥𜠿𨐪𠰨𨐪𜰩𚠹𞡓𚁴𛰲𛠷𛐮𜐩𚠳𛁥👲𚡥𚠪𠰨𪰽𜐭𩐩𛁬𛐽𜐫𝠪𣑡𭁨𛡬𫱧𚁫𚡫𚐩𮀮𩡩𫁬𤱴𮑬𩐽𤠨𫀪𭀯𞐬𫀯𜠬𫀩𛁸𛡦𪑬𫁒𩑣𭀨𜰸𝀫𨐪𜡥𜰬𭀪𜐲𜀬𜠬𞐹𞐩`.replace(/u../g,"")))

Oct 15 2024 10:05 PM UTC

}// 128/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Lyapunov's mask

show FPS hide FPS share fullscreen

zadgy5534

function u(t) {

c.width|=0
for(i=w=2e3;i--;){
x.fillStyle=R(-i/w,w/i,-w/i)
x.fillRect(i%C(t*.1%i)*w,i%S(t*.1%i)*w,35,55)}

Oct 14 2024 9:55 AM UTC

}// 105/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Outsiders increase

show FPS hide FPS share 1 remix fullscreen

rodrigo.siqueira

remix of d/32576 by u/HardlyProductive

function u(t) {

x.reset()
f=(a,b)=>{for(i=1e3;i--;)x.fillRect(j*235+75*C(z=a/b*i*8)*C(i+a),k*200+75*S(z+t*5)*C(i-b*a),2,2)}
for(j=8;j--;)for(k=5;--k;)f(k,j)

Oct 11 2024 7:58 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

pieces

u/vain

so cool ♥

show FPS hide FPS share fullscreen

lewdev

remix of d/32581 by u/jpthinker

function u(t) {

eval(unescape(escape`睩瑨⡸⥦潲⡮㴹㤬欽椽㈳〻椭ⴻ晩汬剥捴⠰ⰰⰲ攳Ɱ⨳⬨匨琩⨳簰⤪温⥦楬汓瑹汥㵒⠰ⰰⰨ椫琩┴⩮Ⱞ㔩ⱦ楬汒散琨椥㈱⩮Ⱘ匨琩⨳⭩⼲ㅼ〩⩮⭮⨳ⱮⱮ⤬晩汬却祬攽刨㈵㔬欬測⸰ㄩ`.replace(/u([^D].)/g,'$1%')))

Oct 13 2024 5:14 AM UTC

}// 131/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Pixelated Beach waves

u/jpthinker

Awesome! Thanks for the remix. I like how the wet sand came out.
u/lewdev

Thanks u/jpthinker! I appreciate that your dweet inspired me to make it.
u/magna

Awesome!