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

magna

remix of d/2533 by u/Jenky

function u(t) {

t||(n=c.cloneNode(),g=n.getContext("webgl"))
g.clearColor(.7+.3*S(t*4),0,0,1)
g.clear(16384)
x.drawImage(n,0,0)

Apr 19 2017 11:57 AM UTC

}// 111/140

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

Shorter, but inefficient WebGL setup

u/tomxor

OooOh, stop tempting me!

show FPS hide FPS share fullscreen

Polyducks

function u(t) {

x.fillRect(0,0,1920,1080)
x.font = "60px A"
W=S(t)*600;H=T(t/10)*200;for(i=0;i<20;)x.fillText("👾",((100*(++i%5))+700)+W,(100*(i%4))+200+H)

Apr 18 2017 6:42 PM UTC

}// 139/140

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

SPACE INVADERS

u/Polyducks

Weird... I wonder why it's stopped working...
u/magna

It still works for me. macOS + Chrome.
u/joeytwiddle

MacOS and Chrome here. The unicode char (was it 👾?) appears to get stripped while loading. If I paste it in between the "", then it works. Perhaps Dwitter loads differently on different pages?

show FPS hide FPS share fullscreen

prawnwarp

remix of d/2536 by u/prawnwarp

function u(t) {

c.width|=0;x.lineWidth=2;r=500;a=460;b=540;x.moveTo(a,b);for(i=2;i<128;i+=2){a+=C(t*i)*r/i;b+=S(t*i)*r/i;x.lineTo(a,b);}x.stroke();

Apr 20 2017 2:03 AM UTC

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

prawnwarp

function u(t) {

c.width|=0;x.lineWidth=5;r=500;a=960;b=540;x.moveTo(a,b);for(i=1;i<23;i+=2){a+=C(t*i)*r/i;b+=S(t*i)*r/i;x.lineTo(a,b);}x.stroke();

Apr 19 2017 5:07 AM UTC

}// 130/140

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

More iterations on the Fourier expansion

show FPS hide FPS share 4 remixes fullscreen

magna

remix of d/2516 by u/magna

function u(t) {

c.width|=0
x.font='50px monospace';
((u+'').slice(0,t*3+S(t)*5)+' |'[t*2&1]).split('\n').map((r,i)=>x.fillText(r,0,++i*50))

Apr 18 2017 12:29 PM UTC

}// 123/140

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

Slimmer version of "pair programming nightmare"

Show more comments…
u/magna

Challenge: Add occasional mistakes like skipped characters / typos etc.
u/Polyducks

I'm struggling to understand how this works. Where have you got the function input from? Amazingly realistic!
u/Jenky

It's from (u+'') - afaik, it's basically a short/cheat way of converting anything to a string in JS :D
u/Jenky

Also, down to 119 and whole string within canvas - https://www.dwitter.net/d/2524
u/magna

@Jenky Nice!
u/magna

#quine

show FPS hide FPS share fullscreen

prawnwarp

function u(t) {

function r(){return Math.random()*255;}a=960+960*C(t);b=540+540*S(t*.9);x.fillStyle=R(r(),r(),r(),.05);x.fillRect(a,b,1920-2*a,1080-2*b);

Apr 19 2017 2:51 AM UTC

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

Polyducks

function u(t) {

L=(X,Y,X1,X2)=>{x.beginPath();x.moveTo(X,Y);x.lineTo(X1,X2);x.stroke()}
if(t<16){L(S(t)*1000,S(t)*1000,T(t)*1000/S(t),t*100)}

Apr 18 2017 6:04 PM UTC

}// 125/140

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

_A stone wall by the sea_

u/Polyducks

I'll work out how to do bold text soon, I swear...
u/tapgiles

The first comment is automatically made bold ;P
u/tapgiles

Looks cool. Wish the line wouldn't disappear for so long, though...

show FPS hide FPS share 1 remix fullscreen

magna

remix of d/2420 by u/magna

function u(t) {

c.width|=0;for(j=9;j--;)for(i=100;i--;s=S(t),X=i%5+j*10+s*30,Y=i/5|0,S(Y+t*7)/4<Math.random()&&x.fillRect(400+X*10,400+Y*10,10,10));

Apr 18 2017 4:06 AM UTC

}// 132/140

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

#default #noise

u/iverjo

#random

show FPS hide FPS share 1 remix fullscreen

eruonna

function u(t) {

a=[0,9,0,-9,0]
if(t){if(i>=0){d=(p[i--]+1)%4;p.push(d);j++;b+=a[d];c-=a[d+1];x.lineTo(b,c);x.stroke()}else i=j}else{p=[0];i=j=0;b=960;c=540}

Apr 17 2017 8:56 PM UTC

}// 140/140

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

Works best in full screen, otherwise line is too thin

u/donbright

how does it work ?
u/eruonna

One way to draw the next iteration of the dragon curve is to take the previous iteration and then add it to itself backwards and rotated 90 degrees. Here p is the array of previous steps, j the index of the current step, and i walks backward through p. When i gets to the beginning, we set it equal to j and start over.
u/donbright

thanks, that is fascinating

show FPS hide FPS share fullscreen

magna

function u(t) {

c.width|=0
x.font=f='60px monospace'
for(Y=18;Y--;)for(X=32;X--;)x.fillText(X<8?(t+Y<<3>>28-X*4&15).toString(16):-~X%3?0:'',X*40,-~Y*60)

Apr 19 2017 6:47 AM UTC

}// 136/140

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

Hexdump of the void

u/magna

This portion can be used in an operator precedence quiz: t+Y<<3>>28-X*4&15