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 2 remixes fullscreen

CliffJonesJr

remix of d/1281 by u/iverjo

function u(t) {

c.width+=i=0
for(;i++<48;){x.font=(50+i*2)+'px A'
x.fillText(i<9?'🙂':i<18?'☺️':i<27?'😀':'😲',860+22*i*C(a=t*i/8),600+22*i*S(a))}

Dec 29 2017 7:50 PM UTC

}// 127/140

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

Happy vortex!

show FPS hide FPS share fullscreen

Curlip

function u(t) {

c.width^=0
w=940
h=520
p=6.3
a=b=t%p
d=S(t)+2
x.lineWidth=80
x.arc(w,h,300,-a,-a+d)
x.stroke()
x.beginPath()
x.arc(w,h,220,b,b+d)
x.fill()

Dec 27 2017 7:35 AM UTC

}// 138/140

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

u/sigveseb

Stylish
u/J2D28U

This is an amazing loading icon.

show FPS hide FPS share fullscreen

Flopster

function u(t) {

c.width|=0
s=1000
for(i=0;i<s;d=2*Math.PI/s*i,r=Math.max(0,S(t*(1+t*i*Math.PI/s)/5))*500,x.fillRect(r*C(d)+960,r*S(d)+540,10,10),i++);

Dec 28 2017 9:41 AM UTC

}// 134/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

trabbt

function u(t) {

w=c.width|=0;for(i=0;i<160;i++)s=S(t+i),x.strokeStyle=R(90*s,60*s*s,60,.8),x.lineWidth=8,x.strokeRect(w/2+200*s,9*i-80*T(t/2-s),40*s,40*s)

Dec 28 2017 9:28 AM UTC

}// 138/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

ThirdEstate

function u(t) {

c.width=1920;
for(i=0;i<8e2;i++){a=S(t+i*4);b=C(t+i*3);
x.fillStyle=R(0,200+a,150+90*b);
  x.fillRect(955+C(i)*a*800,580+b*900,200*b,900*b)}

Dec 27 2017 4:27 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/Xen

the motion feels right, demoscene style...

show FPS hide FPS share fullscreen

Simonster

function u(t) {

for(c.width=1920,m=43,d=255,o=C(t)/2+.5,i=0;i<m;i++)r=d*o,g=C(o)*d,b=i/44*d,x.fillStyle=R(r,g,b),l=550*C(C(t+i)),x.fillRect(m*i,l,99,l-10*m)

Dec 27 2017 10: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).

show FPS hide FPS share fullscreen

xem

remix of d/4844 by u/xem

function u(t) {

r=z=>Math.random()*255
y=z=>R(r(),r(),r(),r()/99)
if(t-~~t<.02)c.style=`transition:2s;background:${y()}linear-gradient(${[y(),R(0,0,0,0)]}`

Dec 31 2017 8:33 AM UTC

}// 139/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

Citiral

remix of d/4160 by u/Citiral

function u(t) {

i=new Image();i.src="http://tny.im/bwl";x.drawImage(i,0,1080-S(t-0.5)*230)
c.style=`transform:rotate(${~~(t/6.1415)*180}deg);`

Dec 27 2017 9:24 PM UTC

}// 126/140

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

I hope this works on all browsers :)

u/OlegSchwann

Unfortunately not. "The page’s settings blocked the loading of a resource."

show FPS hide FPS share 1 remix fullscreen

nyarmith

function u(t) {

for(i=0;i<15;i++){
x.fillStyle=R(255*S(t),255*C(t),155); //color
  x.fillRect(100+(i*100+S(t)*50), 400 + (i*i*15*S(t)) ,50,50) //draw
}

Dec 27 2017 12:29 AM UTC

}// 135/140

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

If you added canvas clearing at the beginning of the frame, then the title would be "waggle"

show FPS hide FPS share fullscreen

mnt

function u(t) {

with(x)font='44em Arial',fillStyle='#fff',fillText('🤔',800,C(t*3)*200+800),drawImage(c,-2,1),fillStyle=R(1,1,1,.01),fillRect(0,0,1999,999)

Dec 29 2017 5:44 PM UTC

}// 138/140

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