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

MatchaMaze

function u(t) {

c.width|=0,r=960,F=(x)=>(x*r)/2+r/2
for(i=0;i<r;x.fillStyle=R(i%255,0,0,0.8),y=i++/r*3.14,x.fillRect(F(S(i*.0981+t)*S(y)),F(C(y)),10,10));

Aug 9 2018 10:18 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/f8f82804

#spiral #sphere

show FPS hide FPS share fullscreen

yonatan

function u(t) {

eval(unescape(escape`景爨瀠楮⁸⥴桩獛灛そ⭰嬶嵝㵰㭸学捝⠰ⰰⱱ㵣⹷楤瑨㵣⹨敩杨琽㤸ⱱ⤻景爨硛权崽❬楧桴敲✬椽㈰㭩ⴭ㭳㴲⨪椩椾㔿硛晣崨匨琩⨵㔫椪㘬㐰ⰴⰹⱸ学祝㵠桳氨⑻椪㌹紬㌹┬㈥怩㩸孤慝⡣Ⱝ猬⵳Ɫ㵱⭳⨲Ɫ⤠`.replace(/u(..)/g,"$1%")))

Aug 6 2018 12:12 AM UTC

}// 139/140

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

uncompressed: for(p in x)this[p[0]+p[6]]=p;x[fc](0,0,q=c.width=c.height=98,q);for(x[gC]='lighter',i=20;i--;s=2**i)i>5?x[fc](S(t)*55+i*6,40,4,9,x[fy]=hsl(${i*39},39%,2%):x[da](c,-s,-s,b=q+s*2,b)

Show more comments…
u/magna

Wow!
u/CliffJonesJr

This is basically cheating. I love it!!!
u/fujimotos

Nice! #light #color
u/Lazy1337

#compressed
u/LoisoCrow

What is x?
u/whitecube-void

what
u/fujimotos

x is CanvasRenderingContext2D (something you can get by calling canvas.getContext()). It is one of the shorthand variables predefined in dwitter.

show FPS hide FPS share fullscreen

Agnes

remix of d/8422 by u/Agnes

function u(t) {

i=new Image();d=[...c.toDataURL()];for(j=1+~~t*100;j--;d[~~(Math.random()*d.length)]="a");i.src=d.join("");i.onload=()=>x.drawImage(i,0,0);

Aug 10 2018 9:56 AM UTC

}// 139/140

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

Re-make of d/8422 with the "u" variable re-named "d" (having a variable named "u" breaks your dweet in most views)... interestingly, this violates the new cross-domain content policy!

u/BirdsTweetCodersDweet

Could it be the toDataURL() ?
u/Agnes

I think we realised it's not actually the cross-domain policy breaking it but something else. The console errors are when you try to load corrupted PNG data, which this produces pretty often.

show FPS hide FPS share fullscreen

Agnes

function u(t) {

for(i=25,G=x.createRadialGradient(Q=960,M=540,Q,Q,M,1);i--;x.fillRect(0,0,2e3,2e3))G.addColorStop(i/25,R(F=(i*t)%255,0,F,.05)),x.fillStyle=G

Aug 9 2018 9:22 AM UTC

}// 140/140

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

Demonstrating the power of radial gradients.

u/d0n.key

#satisfying
u/joeytwiddle

This works well in my Firefox and Safari. In Chrome it's smooth but so slow.

show FPS hide FPS share fullscreen

f8f82804

remix of d/9154 by u/f8f82804

function u(t) {

for(β=s=314;β--;x.fillStyle=`hsl(${β+t}rad 90%${30*(1-(γ=C(α-1)*C(β))-γ**9)}%/${β/a}`)x.fillRect(s*S(α=β/200)*S(β)+960,s*S(α)*C(β)+s,a=53,a)

Aug 9 2018 6: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).

Tweaked #sphere parameterization with occlusion, z-buffer and #phong #shading -- #rainbow #d3 #pbr

u/f8f82804

#blending

show FPS hide FPS share fullscreen

f8f82804

remix of d/9163 by u/f8f82804

function u(t) {

X=frame%240;for(Y=64;Y--;)x.fillStyle=`hsl(${90*S(t)*Y/(k=Y-72)} 90%${50*((X-120)/k+9+(frame/240|0)&1^Y/k&1)}%`,x.fillRect(X*8,1080-Y*8,8,8)

Aug 8 2018 11:39 PM UTC

}// 140/140

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

#rainbow #checkerboard -- #d3 #raytrace #scanline #smooth

u/katkip

This is less laggy

show FPS hide FPS share 1 remix fullscreen

Xen

remix of d/9171 by u/New_Core

function u(t) {

for(x.fillRect(0,0,i=Z=2e3,Z);i--;x.fillRect(960+Z*S(i+t/99),Y=750-750*C((i/.6+t)%2.73),T=20-Y/99,T))x.fillStyle=R(0,i<1?a=.1:a=Z,a,a)

Aug 8 2018 10:44 PM UTC

}// 134/140

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

u/richev

hypnotic!

show FPS hide FPS share 1 remix fullscreen

Xen

remix of d/9195 by u/katkip

function u(t) {

x.drawImage(c,1e3*C(t*9),1e3*S(t*8))
for(Z=i=1e3;i--;x.fillRect(i,i,99,99))x.fillStyle=`hsla(${i*t},99%,50%,.1)`

Aug 11 2018 12:38 AM UTC

}// 112/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 1 remix fullscreen

f8f82804

remix of d/9160 by u/f8f82804

function u(t) {

c.width=100
for(i=314;i--;)x.fillRect(10*S(α=i/100)*S(β=t+i)+50,4*((a=S(α)*C(β))-2*C(α)+6),2,4),x.fillStyle=`hsl(${t*i} 90%${45*(a+a**9)}%`

Aug 7 2018 7:33 PM UTC

}// 139/140

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

Rainbow marble with Phong lighting #3d #pbr

u/f8f82804

#phong
u/yonatan

Really nice! both of them.
u/f8f82804

@yonatan Thanks! I'm enjoying getting into this, and a Phong shader seemed like a good goal.
u/lionleaf

u/f8f82804 Welcome to dwitter! Nice dweet! #shading
u/aleamb

really stunning

show FPS hide FPS share fullscreen

DataMeta

remix of d/9165 by u/DataMeta

function u(t) {

for(i=1920;i--;)v=(t*60)%1080,l=((S(T(i^v))*9)*(i+t*9)%(i*v))%256,
x.fillStyle=R(l,l,l),x.fillRect(i,v,1,1)

Aug 8 2018 11:34 PM UTC

}// 107/140

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

endless urbanscape

u/zanella

Replace v with v%1080 in the fillRect call and it will redraw itself over and over again. ;)
u/DataMeta

Not sure what you mean - it already re-draws. Hence the 'endless' :P
u/zanella

Weird, the first time I saw this it didn't redraw itself - it seemed to stop once the scanline hit the bottom of the canvas. Didn't notice that it already had a %1080. So yeah, my comment is pretty useless. :)
u/zanella

Weird, the first time I saw this it didn't redraw itself - it seemed to stop once the scanline hit the bottom of the canvas. Didn't notice that it already had a %1080. So yeah, my comment is pretty useless. :)
u/DataMeta

No worries :]