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 1 remix fullscreen

iverjo

remix of d/1791 by u/Run

function u(t) {

t*=4;c.width*=1;for(i=0;i<1550;i++)x.fillRect(X=i+S(t+i)*300,400+200*C(t+i)+200*S(X/300+t),50,50),x.fillStyle=`hsl(${X/7+t*90},80%,50%)`

Mar 2 2017 10:53 PM UTC

}// 136/140

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

u/donbright

the happiest sandworm on dune
u/iverjo

#worm
u/iverjo

#colors #rainbow
u/iverjo

#sine

show FPS hide FPS share fullscreen

farter

function u(t) {

c.width=16;c.height=9;s=n=>(S(n)+1)/2*255;for(i=16;i--;)for(j=9;j--;){x.fillStyle=R((s(t+i)),(s(t+j)),s(t));x.fillRect(i,j,1,1)}

Mar 4 2017 8:22 AM UTC

}// 128/140

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

play with zooming artifact depending on browser canvas implementations

show FPS hide FPS share 1 remix fullscreen

joseprio

remix of d/1865 by u/joseprio

function u(t) {

s=0;for(i=1e6;t>0&&i--;)x.fillStyle=s?"#fff":"#000",x.fillRect(s?960+S(s)*t*t*t*80:0,s?540+C(s)*t*t*t*80:0,s?t*4:2e3,s?t*4:2e3),t-=.01,s+=i

Mar 4 2017 1:40 PM 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

shoguning

function u(t) {

c.width=1920;
for(i=0;i<10;i++)
x.fillRect(800+C(2*t-i/5)*600, 400+400*S(4*t-i/3.), 50/i**0.5, 50/i**0.5)

Mar 4 2017 7:05 PM UTC

}// 105/140

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

u/recursive

nice
u/joeytwiddle

This reminds me of a certain arcade game dragon
u/lionleaf

#organic

show FPS hide FPS share fullscreen

sigveseb

function u(t) {

t*=5;for(c.width=s=X=64;X--;)for(Y=37;Y--;1-Q*Q-W*W>0&&x.fillRect(X,Y,1,1))for(j=40,Q=W=E=0;j--;Q=E)E=Q*Q-W*W-X/t/t+5/t,W=2*W*Q-Y/t/t+.66

Mar 2 2017 2:02 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/sfz

Nice Mandelbrorshach!
u/iverjo

That's pretty impressive
u/sigveseb

#fractal #zoom
u/katkip

Awesome
u/katkip

#mandelbrot

show FPS hide FPS share 1 remix fullscreen

FireFly

function u(t) {

t || x.translate(960, 540)
for (i=40; i--; x.rotate(S(t)))
 x.fillStyle = 'hsla('+i*t+',90%,50%,'+1/t+')',
 x.fillRect(v=i*20, v, i*t, i*t)

Mar 1 2017 8:05 PM UTC

}// 139/140

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

Colour mania

Show more comments…
u/iverjo

Nice!
u/Woodmouth

Ohh, if you wait long enough it goes grey, but then if you wait even longer, it quite suddenly goes back to color, and then suddenly even more grey
u/joeytwiddle

After that it ends up resting on a kind of shiny brushed metal pattern. Amazing!
u/joeytwiddle

#shiny
u/joeytwiddle

#color #rainbow (sorry for spamming the comments)
u/PotatoImaginator

#atom #orbital

show FPS hide FPS share fullscreen

FireFly

remix of d/1690 by u/FireFly

function u(t) {

s=t?t<.1?s.replace(/\d/g,i=>+i?'-0+1+0-':'+1-0-1+'):s:'0';c=s[t*60|0];c<2?x.translate(0,16,x.fillRect(0,0,3,16)):x.rotate(c+1.05)

Mar 3 2017 4:49 PM UTC

}// 129/140

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

Same as parent, but golfed and abusing time for the first 6 frames to evaluate/expand the L-system. The straight line at the start is an artifact of this and the particular choice of system.

u/donbright

love this method
u/SpecialAgent

love this series
u/katkip

#fractal

show FPS hide FPS share fullscreen

ClayCowgill

function u(t) {

f=frame;for(j=1080;j--;x.fillRect(f,j,1,S(k),x.fillStyle=R(f/9,99)))for(a=f/500-2,b=j/500-1,k=35;k--&&a*a+b*b<4;a=c)c=a*a-b*b-.7,b=2*a*b+.55

Mar 2 2017 10:45 PM UTC

}// 140/140

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

I just can't get the color version down to size! i=frame;for(j=1080;j--;){a=i/500-2;b=j/500-1;for(k=75;k--&&a*a+b*b<4;)c=a*a-b*b-.7,b=2*a*b+.55,a=c;x.fillStyle=hsl(${C(k/9)*255},99%,50%);x.fillRect(i,j,1,1)}

Show more comments…
u/iverjo

Rad!
u/sigveseb

and yet the colors on this one are already beautiful!
u/sigveseb

btw you can do t*60 instead of frame
u/ClayCowgill

Thanks! That's one more saved! ;-)
u/ClayCowgill

(BTW, this is mostly based on a Mandelbrot set dweet that I can no longer find. (This is part of the Julia set instead.)
u/FireFly

Halfway there (150): for(j=2e3;j--;x.fillRect(t*60,j,1,1,x.fillStyle=hsl(${C(k/9)*255},99%,50%)))for(a=t*.12-2,b=j/500-1,k=75;k--&&a*a+b*b<4;a=c)c=a*a-b*b-.7,b=2*a*b+.55
u/FireFly

t*.12 is approx. t/8 if you're fine with it being somewhat off-centre.
u/ClayCowgill

Nice! Just six over now... for(j=2e3;j--;x.fillRect(t*60,j,1,1,x.fillStyle=hsl(${C(k/9)*99},99%,50%)))for(a=t/8-2,b=j/500-1,k=99;k--&&a*a+b*b<4;a=c)c=a*a-b*b-.7,b=2*a*b+.5
u/New_Core

the first 99 number can be put as k so still 5 to go
u/magna

You can omit the closing parenthesis of hsl() because browsers are resilient to bad CSS syntax
u/ClayCowgill

Good tips! Thanks!
u/ClayCowgill

Thanks for the help-- managed to get a high resolution/high color version going with the suggestions. :) https://www.dwitter.net/d/1896
u/katkip

Genius

show FPS hide FPS share 1 remix fullscreen

FireFly

remix of d/1689 by u/FireFly

function u(t) {

for(s='0',i=6;i--;c=s[t*60|0])s=s.replace(/\d/g,i=>['+1-0-1+','-0+1+0-'][i]);c<2?x.translate(18,0,x.fillRect(0,0,18,3)):x.rotate(c+60/57.3)

Mar 1 2017 5:45 PM UTC

}// 139/140

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

L-system visualizer. Sierpiński arrowhead curve

u/donbright

brilliant.... any description of how it works?
u/donbright

n/m i see you explain it in 1688, thanks!
u/tomkh

haha... using translate/rotate is a cool hack! reminds me of LOGO turtle
u/FireFly

Hehe, it's handy to offload the job of keeping track of the turtle to the canvas.
u/katkip

#fractal

show FPS hide FPS share fullscreen

joseprio

remix of d/1867 by u/joseprio

function u(t) {

for(s=0;t>0;)x.fillStyle=s?"#fff":"#000",z=t*t*t*80,x.fillRect(s?960+S(s)*z:0,s?540+C(s)*z:0,w=s++?t*4:2e3,w),t-=.01

Mar 4 2017 11:30 PM UTC

}// 116/140

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