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

FireFly

function u(t) {

X=0;X||(c.onmousemove=(e)=>(x.lineTo(X=e.offsetX/c.offsetWidth*1920,Y=e.offsetY/c.offsetHeight*1080),x.beginPath(x.stroke()),x.moveTo(X,Y)))

Feb 28 2017 3: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).

Paint! Works best in fullscreen, unfortunately I can't fit detection of mouse button to toggle painting (also not sure how, without two more event handlers…)

u/Kalanchoe

Nice! moveTo is unnecessary if you already have beginPath and lineTo; c.offsetWidth/1920 and c.offsetHeight/1080 are both equal to about .2958 (at least on the desktop): https://www.dwitter.net/d/809
u/FireFly

Won't c.offsetWidth and c.offsetHeight change when the user goes fullscreen? I wanted to support both not-fullscreen and fullscreen equally well. Good point about moveTo!

show FPS hide FPS share 2 remixes fullscreen

lionleaf

remix of d/431 by u/lionleaf

function u(t) {

c.width=2e3;v='Avatars from gravatar!';for(i=v.length;i--;)x.font=130+S(t*5)*30+'px Arial',x.fillText(v[i],i*89,540+S(t*9+i)*20)

Feb 28 2017 12:06 AM UTC

}// 128/140

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

Avatars have been added! They are fetched from gravatar.com based on your email, so register there to get one. Thanks to u/sigveseb for the implementation :)

u/lionleaf

#feature

show FPS hide FPS share fullscreen

SpecialAgent

remix of d/1727 by u/SpecialAgent

function u(t) {

w=1920,h=1080,Ψ=[[9,h-9],[w-9,h-9],[w/2,9]],α=9,β=h-10;for(n=1000;n--;)x.fillRect(α,β,1,1),Δ=Ψ[Math.random()*3>>0],α=(α+Δ[0])/2,β=(β+Δ[1])/2

Mar 2 2017 5:26 AM UTC

}// 140/140

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

Another Sierpinski fractal, this time generated via a RNG method.

u/donbright

cool

show FPS hide FPS share fullscreen

sfz

remix of d/1479 by u/sfz

function u(t) {

c.width=w=2e3
d=new Date
t?!(d&9)&&o.push([d%w,0,0,d%9]):o=[]
o.map(a=>(x.font=a[3]+'em ø',x.fillText('❄',a[0],a[1]+=a[2]+=a[3]*a[3]/w)))

Feb 27 2017 11:03 PM UTC

}// 137/140

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

Snowflakes with gravity acceleration and parallax

u/sfz

err, depth that is, small ones fall slower as if they're further away :P
u/joeytwiddle

#snow I think it's fair to call that parallax, just vertical

show FPS hide FPS share 1 remix fullscreen

sawaxon

remix of d/1668 by u/sawaxon

function u(t) {

c.width|=0;for(j=1;j<40;j++)for(i=1;i<40;i++)x.fillRect(900+S(10+i/(S(i/j/t)*10))*j*40,500+C(i/((t+142)/10))*j*20, 4, 4)

Mar 1 2017 10:22 AM UTC

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

Run

function u(t) {

for(i=0;i<1050;i++){
x.fillRect(X=i+S(t+i)*300,400+200*C(t+i)+200*S(X/300),50,50);
x.fillStyle=`hsl(`+(X/7+t*30)+`,80%,50%)`;
}

Mar 2 2017 6:04 PM UTC

}// 127/140

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

A series of tubes #bartjs

u/Run

The internet is a series of tubes. This is the opening of just one of them.

show FPS hide FPS share fullscreen

robot0001

remix of d/1743 by u/pstefanlarsson

function u(t) {

c.width=1920;
for(i=0;i<1920;i+=20){
h = 400*C(t+i/100)+100*T(3*t-i/300)-100*T(i/300-t);
x.fillRect(i,540-h, 5, h)
}

Mar 2 2017 5:43 PM UTC

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

metaa

function u(t) {

c.width=1920; 
for(i=1;i<100;i++)
x.fillRect(960+(i*5)*C(t*(1+i/10)),460+(i*5)*S(t*(1+i/10)),20,20)

Mar 1 2017 3:25 AM UTC

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

SpecialAgent

function u(t) {

π=Math.PI;h=540;q=S(t)
x.beginPath()
x.arc(960,h,q*q*h,1*π,3*π)
x.stroke()

Feb 28 2017 5:13 PM UTC

}// 74/140

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

u/iverjo

Some interesting moirè patterns there
u/donbright

resembles 'circles and squares' fractal a little bit

show FPS hide FPS share fullscreen

LAGENT

function u(t) {

for(c.width=192,x.font="40px A",_=["▼","▲"],i=0;i<6;i++)for(j=0;j<3;j++)Math.random()>.02&&x.fillText(_[(i+j)%2],40+20*C(t)+15*i,37+28*j);

Mar 1 2017 5:04 PM UTC

}// 138/140

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

u/donbright

super