Dweets awesomed by u/joeytwiddle

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

mxfh

function u(t) {

for(x.drawImage(c,b=n=0,-16),i=w=960;a=C(i/w*4),b=!b,i-->-w;n+=C(t*i*i),x.fillStyle=R(e=b*w,e,e))x.fillRect(i+b+w,a>0?w+a*a*n*2+b*4:w,2,w)

Mar 13 2017 10:35 PM UTC

}// 138/140

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

dwitter Album Cover Art https://blogs.scientificamerican.com/sa-visu… (deleted the prior version)

Show more comments…
u/donbright

wonderful
u/SpecialAgent

Nice homage to a great band :)
u/p01

Super smart implementation! Wish I saw it before I did https://www.dwitter.net/d/2958
u/zanella

I saw i--> and thought it was a new JS operator. :)
u/lionleaf

#album #album_cover
u/mxfh

#unknownpleasures #joydivision
u/rodrigo.siqueira

Here is the original Ph.D. dissertation page where this were published: https://twitter.com/ChristiansenJen/status/1…

show FPS hide FPS share 1 remix fullscreen

mxfh

function u(t) {

for(x.setTransform(f=51,0,i=7,f,h=360,h);i--;x.fillRect(i==3?-f:9+i*.6,i,99,1))x.fillStyle=`hsl(${(t+i)*f%h},99%,50%)`;x.strokeText('▲',4,7)

Mar 13 2017 7:50 PM UTC

}// 140/140

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

Dwitter Album Covers

show FPS hide FPS share fullscreen

recursive

function u(t) {

t||(g=h=[])
for(n=i=960;--i+n;x.fillRect(i/d+n,(4-g)*99/d,9,99))h[i]=g=(g+h[i-1]+S(n*g)/9)/2||1,x.fillStyle=R(q=3*(t+9)*g,q,q*q>>7),d=1-t/30

Mar 13 2017 4:23 AM UTC

}// 140/140

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

Rough surface

u/IV

It's like watching Bob Ross: 'happy little trees; anywhere you feel like...'

show FPS hide FPS share fullscreen

mxfh

function u(t) {

b=1;h=1080;w=960;for(i=l=2*w;i--;b=!b,x.fillStyle=b?"#000":"#FFF"){x.fillRect(i+b,l,2,C(i/w-1)**2**S(i/w+t)*-h+b)}x.drawImage(c,0,-1,l,h)

Mar 13 2017 4:03 AM UTC

}// 137/140

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

u/recursive

Looks really good in fullscreen

show FPS hide FPS share fullscreen

hypothete

function u(t) {

j=t*t%256;l=1920;m=1080;z=new Date;for(i=0;i<j;i++){
b=(i%j)*l/j;y=z*S(t+i);
x.fillStyle=R(y,y);x.fillRect(b,0,l/j,10);}
x.drawImage(c,0,10)

Mar 12 2017 8:08 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 FPS hide FPS share fullscreen

aemkei

remix of d/2008 by u/RavenWorks

function u(t) {

t||(w=z=a=i=0);for(I=4;I--;)i+=.005,x.fillRect(w*4+1150,z*4+450,4,4),w+=C(a+=S(i%50*C(i%100))),z+=S(a);x.fillStyle=`hsl(${t*99},100%,50%)`

Mar 11 2017 8:40 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/sfz

This is great, and what a luxurious use of 100's instead of 99's :P

show FPS hide FPS share 1 remix fullscreen

xem

remix of d/2050 by u/xem

function u(t) {

c.style=`background:radial-gradient(#FF0,red,blue,#fff 50%);transform:rotateX(${t*9}deg)rotateY(${t*99}deg)rotateZ(${t/5}rad)scale(${T(t)})`

Mar 11 2017 12:29 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/sfz

css masta!

show FPS hide FPS share 1 remix fullscreen

xem

function u(t) {

c.style='background:radial-gradient(red,blue);position:absolute;transform:rotateX('+t*99+'deg)rotateY('+t*50+'deg)rotateZ('+t*10+'deg)';

Mar 11 2017 11:13 AM UTC

}// 136/140

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

#thinkoutsidethecanvas

u/hypothete

Definitely a lot terser than gradients in the canvas. Color stop stuff gets wordy.

show FPS hide FPS share 1 remix fullscreen

donbright

remix of d/1863 by u/SpecialAgent

function u(t) {

c.width=1024;w=64;for(i=w*w;i--;)X=i%w,Y=i/w>>0,P=128*((1-t*t)*X*X/(1+t*t)+2*t*Y*Y/(1+t*t)),x.fillRect(200+X*10,Y*10,P%11,P%11)

Mar 11 2017 2:03 AM UTC

}// 129/140

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

No Sine or Cosine were harmed in the making of this demo. It is not random - and if it runs long enough it should theoretically become a still image

u/sfz

Those ripples are tripping me out
u/donbright

note to future self - this varies from x*x + y*Y to x*x-y*y (circle to hyperbola) by using the rational parameterization of the circle with one variable parameter, where (1-t**2)/(1+t**2) is an alternate to cosine and 2t/(1+t**2) is an alternate to sine. (or vice versa i forget lol)
u/magna

Awesome!
u/z3vin

So cool

show FPS hide FPS share fullscreen

donbright

remix of d/2033 by u/recursive

function u(t) {

t||(a=0)
x.drawImage(c,C(a+=S(t/155*C(t)))*20,S(a)*20)
x.fillRect(1e3,500,20,20);
x.fillStyle=R(128*S(a)+128,(C(a)*256)%256,(250-a)%250)

Mar 11 2017 1:17 AM UTC

}// 137/140

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

actually a remix of two... recursive's 2033 and https://www.dwitter.net/d/2008 by RavenWorks

u/sfz

wowweewowowo
u/RavenWorks

this is great!!
u/recursive

Whoa, you went in a totally different direction with this.

dwitter.net | joeytwiddle (61494)