New #dithering dweets

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

show FPS hide FPS share 2 remixes fullscreen

f8f82804

remix of d/9542 by u/f8f82804

function u(t) {

z=256;for(i=z*z;i--;x.fillRect(i%z*4+448,j*4,4,4))b=t&1||(U=V=0),U+=i%z,V+=j=i/z%z|0,x.fillStyle=R(b?U>z?(U-=z,z):0:U,0,b?V>z?(V-=z,z):0:V)

Aug 30 2018 11:01 PM UTC

}// 139/140

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

2D palette and approximation with 4 color #dithering; 1D error diffusion gives different patterns for vertical gradients (red channel) and horizonal (blue channel) #slow #waitforit

show FPS hide FPS share 2 remixes fullscreen

f8f82804

function u(t) {

s=S(t);for(U=V=0,z=i=128;i--;)for(j=z;j--;x.fillRect(8*i+450,8*j,8,8))U+=z+i+s,V+=z+j+s,x.fillStyle=R(z*(U>z&&(U-=256)),0,z*(V>z&&(V-=256)))

Aug 30 2018 2:00 AM UTC

}// 140/140

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

2D palette rendered with 4 colors via error diffusion dithering

u/f8f82804

#dithering

show FPS hide FPS share 1 remix fullscreen

f8f82804

remix of d/9489 by u/f8f82804

function u(t) {

eval(unescape(escape`攽孝㭦潲⡡㴶〻愭ⴻ⥦潲⡢㵳㴳㐬䔽敛戭ㅝ簰㭢ⴭ㭸⹦楬汒散琨猪愬截猬猬猩⥰㴹㤫愪截匨琩⼲⭅ⱸ⹦楬汓瑹汥㵒⡱㵳⨨瀯獼〩ⱱ⼷ⱱ⼲⤬䔽敛戭ㅝ簰Ᵽ㵰⵱ⱥ孢ⴱ崽振㴱㘬敛扝⬽挪㔬敛戫ㅝ⬽挪㌬䔫㵣⨷`.replace(/u(..)/g,"$1%")))

Aug 28 2018 3:59 AM UTC

}// 138/140

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

Floyd-Steinberg #dithering #compressed

u/f8f82804

e=[];for(a=60;a--;)for(b=s=34,E=e[b-1]|0;b--;x.fillRect(s*a,b*s,s,s))p=99+a*b*S(t)/2+E,x.fillStyle=R(q=s*(p/s|0),q/7,q/2),E=e[b-1]|0,c=p-q,e[b-1]=c/=16,e[b]+=c*5,e[b+1]+=c*3,E+=c*7

show FPS hide FPS share 1 remix fullscreen

f8f82804

function u(t) {

for(a=1920;a-=s=15;)for(b=1080,e=0;b-=s;x.fillRect(a,b,s,s))p=127+(3+S(t/8))*a*b/2e4+e,x.fillStyle=R(q=32*(p/32|0),q/2,(q**2)/8),e=p-q

Aug 27 2018 8:19 PM UTC

}// 134/140

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

artistic #dithering with 1D error diffusion

show FPS hide FPS share 1 remix fullscreen

FireFly

function u(t) {

for(c.width|=M=Math,i=2e4;i--;x.fillRect(A*8,B*8,W=9+M.atan2(M.sqrt(1-X*X-Y*Y),X)*3-t*4&7^4-M.asin(Y)*3,W))X=(A=i%135)/67-1,Y=(B=i/135)/67-1

Mar 4 2017 6:26 PM UTC

}// 140/140

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

Raycasted rotating sphere with UV-mapping!

Show more comments…
u/sfz

... ??? !!!
u/iverjo

Impressive! I like the c.width|=M=Math hack. Apparently Math is evaluated to NaN in the process.
u/iverjo

http://stackoverflow.com/a/11037887/2319697
u/alien

god... i can't understand this yet but is awesome...
u/sigveseb

So good!
u/donbright

standing ovation
u/tomkh

great job! some tricks here really opens new possibilities
u/mxfh

you can do M.sqrt() with ES6 power operator as **.5 should yield a net gain of 2 chars
u/FireFly

Oh right! I haven't gotten used to it yet since I'm on Fx51, which doesn't seem to support ** yet. Thanks!
u/FireFly

Oh, and also thanks for all the positive responses, everyone :)
u/iverjo

#sphere
u/lionleaf

#disco
u/f8f82804

#halftone #dithering #shading

You've reached the end.

dwitter.net | #dithering