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: #Food

show FPS hide FPS share fullscreen

alien

function u(t) {

W=c.width=200;v=(X,Y,R)=>[S(Y+t)*C(X+t)*R+100,S(X+t)*C(Y+t*.5)*R+50]
for(i=0;i<130;i++)
x.lineTo(...v(144*i,5+i*.5,i))
x.stroke()

Aug 11 2017 7:44 AM UTC

}// 129/140

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

show FPS hide FPS share fullscreen

Xen

remix of d/3056 by u/Xen

function u(t) {

x.fillText(x.drawImage(c,480*(t%3|0),540*(t%3%2|0),960,540),9,9)

Aug 10 2017 11:59 PM UTC

}// 64/140

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

64b Sierpinski Triangle

u/kchplr

60bytes: x.fillText(x.drawImage(c,480*(V=t%3|0),V%2*540,960,540),9,9)
u/magna

Oh yeah? How about EXACTLY 140 bytes: 'use strict';function renderSierpinskyTriangle() { x.fillText(x.drawImage(c,480*(V=t%3|0),V%2*540,960,540),9,9) }renderSierpinskyTriangle();
u/Xen

58bytes: x.fillText(x.drawImage(c,(V=t%3|0)*99,V%2*99,960,540),9,9)
u/iverjo

#sierpinski

show FPS hide FPS share 1 remix fullscreen

Xen

function u(t) {

x.fillText(x.drawImage(c,480*(t*9%3|0),540*((t*9%3|0)%2),960,540),9,9)

Aug 10 2017 11:13 PM UTC

}// 70/140

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

-70Byte-Refix-

u/Xen

another 4 bytes can be shaved but it will take longer to draw ;-)
u/kchplr

62 bytes, same speed : x.fillText(x.drawImage(c,(V=t*9%3|0)*480,V%2*540,960,540),9,9)
u/kchplr

62 bytes and faster, but less interesting fade in: x.fillText(x.drawImage(c,(V=frame%3)*480,V%2*540,960,540),9,9)
u/iverjo

#sierpinski

show FPS hide FPS share fullscreen

yokljo

function u(t) {

t==0?w=c.width=100:d=x.getImageData(0,0,w,w);for(a=256;a--;d.data[a*~~(S(t*w/a)*w)]=a);x.putImageData(d,0,0)

Aug 12 2017 10:50 PM UTC

}// 108/140

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

This does some whack stuff on my desktop Chrome, which you may see if you attempt to edit the code (put a space at the end or something)

u/yokljo

Here is the minimum requirements for the weird Chrome bug to occur: t<.1?w=c.width=100:d=x.getImageData(0,0,w,w);x.putImageData(d,0,0)

show FPS hide FPS share fullscreen

Xen

function u(t) {

x.globalCompositeOperation='xor';t?x.drawImage(c,w/4*(t*9%3|0),h/2*(((t*9%3|0)+1)%2),w/2,h/2):x.fillRect(0,0,w=1920,h=1080)

Aug 10 2017 10:07 PM UTC

}// 123/140

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

making this gave me such a headache, can you spot a simple 4bytes to shave? ;-)

u/Xen

dont post here, you see it when you see it, let others use this as target practice.

show FPS hide FPS share 1 remix fullscreen

rybar

function u(t) {

for(i=2e3;i>-1;i--)x.fillStyle=R(255*C(i/5-t),255*S(i%8+t),255*C(i%8+t),1),x.fillRect(i%90*90,i/90*90,90,90)

Aug 9 2017 5:15 PM UTC

}// 108/140

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

u/jick

I like this a lot.
u/kimber

Very nice
u/Cindya

Try different pallets good start

show FPS hide FPS share 1 remix fullscreen

artfarnaa

function u(t) {

 for (c.width|=a=200;--a;x.arc(960+S(G+t)*400,
 540+C(t+G*1)*400,a%2*137*Math.abs(S(t))*4,0,
 6.2832))x.moveTo(G=a/2|0,0)
 x.fill('evenodd')

Aug 8 2017 1:52 AM UTC

}// 140/140

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

Show more comments…
u/kchplr

Great !
u/sigveseb

Awesome!
u/ninerdelta

stupid question, but why c.width|=a=200? I was tinkering with this code and just made it a=200 and the fps drops significantly.
u/kchplr

ninerdelta: I think that the reason is that c.width|=something is not only clearing the canvas but also the 2d context. Without it each iterations keeps adding arcs to the current path, by the 10th frames there are 2000 arcs to redraw, by the 50th frames there are 10000, etc. In a, err, "non-cold golfing codebase" you could avoid this by using beginPath and closePath.
u/kchplr

"cold golfing", superb. I meant code golfing...
u/ninerdelta

ah that makes sense, thanks!
u/donbright

now this is fine work

show FPS hide FPS share 1 remix fullscreen

leonarven

function u(t) {

for(c.width=i=127;j=127,i--;)while(j--)x.fillStyle=R(d=255*S(i*j+t),255*C(i*j+2*t),d),x.fillRect(j,i,1,1)

Aug 10 2017 5:37 PM UTC

}// 105/140

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

u/jick

Wow!

show FPS hide FPS share fullscreen

Xen

remix of d/3050 by u/leonarven

function u(t) {

for(c.width=i=99;j=99,i--;//Jah Bless!!
)while(j--)x.fillStyle=R(255*C(i*j-t),255*T(i*j+t)),x.fillRect(i,j,1,1)

Aug 10 2017 7:26 PM UTC

}// 111/140

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

show FPS hide FPS share fullscreen

Xen

function u(t) {

Y=c.width=99;for(i=1e4;i--;x.globalCompositeOperation='xor')x.fillRect(i%Y,i/Y,X=S(i+C(t)*Y)-1,X*S(X*t))

















//Shh! i'm hiding!

Aug 9 2017 10:04 PM UTC

}// 140/140

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

u/cantelope

cool effect
u/Xen

Thanks, only just fits in the 140bytes ;-)
u/sigveseb

Lol that sneaky comment ^^
u/Xen

what comment? :-D