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

BalintCsala

function u(t) {

c.width=500
for(x.scale(i=5,5);i--;k=S(t*5),x[H]("⚪",S(T=(i?k>0:k<0)?k:0)*20+23+i*42,C(T)*20+30))x[H="fillText"]("⚪",30+i*7,50)

Sep 7 2018 8:45 AM UTC

}// 127/140

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

Newton's cadle

u/fujimotos

#physics

show FPS hide FPS share fullscreen

Xen

remix of d/9713 by u/katkip

function u(t) {

for(c.width^=i=7e2;i--;)x.lineTo(300*(2+C(Θ=13.37*i)*S(Φ=Math.acos(1-1*i/(t*99%1e3)))*S(t)+C(Φ)*C(t)),300*(1+S(Θ)*S(Φ)));x.stroke()

Sep 8 2018 7:18 PM UTC

}// 131/140

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

Absent_Data

u/lionleaf

I like the #glitchy look
u/katkip

i don't lol. the glitchy look makes the dweet looks broken
u/donbright

this needs one of those epilepsy warnings

show FPS hide FPS share 2 remixes fullscreen

joeytwiddle

remix of d/9639 by u/joeytwiddle

function u(t) {

x.fillRect(0,0,W=c.width=99,W);for(H=j=288;x.shadowBlur=j--/4;x.fillRect(9*T(j%9+t),7*T(t-j%9),5,5))x.fillStyle=x.shadowColor=R(H-j,H,H)

Sep 5 2018 9:45 AM UTC

}// 136/140

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

The night they arrived

Show more comments…
u/yonatan

Lovely!
u/yonatan

for(p in x)this[p[0]+p[6]]=p;x[fc](0,0,W=c.width=99,W);for(H=j=288;x[sB]=j--/4;x[fc](9*T(j%9+t),7*T(t-j%9),5,5))x[fy]=x[sC]=R(H-j,H,H)
u/yonatan

First time this actually saves chars on dwitter...
u/joeytwiddle

Wow, that is the craziest approach I have seen to that problem! But I can't argue with a 2 char saving.
u/f8f82804

u/yonatan: genius!
u/username

I am very confused. Did I actually bring up shadowBlur again? Have never seen it on Dwitter before.
u/donbright

man this looks so cool.. the JoeyTwiddle effect is one for the books.
u/joeytwiddle

Here are some previous uses of shadowBlur: d/2723 d/3173 d/6820 d/6883 d/9608
u/joeytwiddle

Looks better with x.shadowBlur=j--/7 #glow

show FPS hide FPS share fullscreen

prplz

remix of d/9719 by u/prplz

function u(t) {

x.setTransform(1,S(t*=4),S(t),1,960,540)
x.fillStyle=`hsl(${t*99},50%,50%)`
x.rotate(t)
x.fillRect(q=-280,q,q*-2,q*-2)

Sep 9 2018 1:38 AM UTC

}// 118/140

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

u/katkip

This looks nice

show FPS hide FPS share fullscreen

katkip

function u(t) {

var g=x.createRadialGradient(960,540,0,90,t*99,t*99);g.addColorStop(0,"#ff0");g.addColorStop(1,"#000");x.fillStyle=g;x.fillRect(0,0,2e3,2e3)

Sep 6 2018 6:12 AM UTC

}// 140/140

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

That's how to render a ball surface like a pro

u/Xen

nice
u/katkip

#sphere

show FPS hide FPS share 1 remix fullscreen

f8f82804

remix of d/3023 by u/joeytwiddle

function u(t) {

if(t%2<.01)with(speechSynthesis)V=getVoices()[t>>1],(U=new SpeechSynthesisUtterance(n=V.name)).voice=V,c.width=99,x.fillText(n,0,9),speak(U)

Sep 7 2018 5:27 PM UTC

}// 140/140

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

A new voice every two seconds! #audio #speaking #halting

Show more comments…
u/lionleaf

Man, I was not expecting sound. Is there a way we could make all sound dweets click to play/unmute?
u/f8f82804

I try really hard to make my audio dweets stop when you scroll away. Other than that, I'm not sure how to tackle it from the site side... With speechSynthesis we can just add pause() and resume() calls to the dweet pausing/resuming code (see https://developer.mozilla.org/en-US/docs/Web…). For AudioContext however, I think we'd need a set of bindings to create instances that register them with the dweet pause/resume hooks.
u/f8f82804

I also just realized that firefox won't mute speechSynthesis even though it shows an audio icon...
u/yonatan

Chrome won't mute it either.
u/katkip

That's genius
u/joeytwiddle

@f8f82804 The first stage, we can simply not autoplay audio dweets. https://git.io/fA2Bp

show FPS hide FPS share fullscreen

f8f82804

remix of d/9676 by u/f8f82804

function u(t) {

eval(unescape(escape`景爨椽挮睩摴桞㴰㭩ⴭ㭸⹢敧楮偡瑨⡸⹦楬氨⤩⥃⡡㵴⵩⤾〦♸⹥汬楰獥⠹㘰⬨堽⡩⨹㘰⵩⩩⤪⨮㔪匨愩⤬㘰⭩Ⱘ猽㈵⴨匨愭ㄩ⨨戽⠱⴨⡙㵩ⴴ㠰⤯㐸〩⨪㈩⨪⸵⤩⨪㐪㈴⤪䌨愩⩢ⱳⱍ慴栮慴慮⡙⽘⤬〬㜩`.replace(/u(..)/g,"$1%")))

Sep 5 2018 8:57 PM UTC

}// 138/140

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

#specular #d3 #sphere #animated #compressed

Show more comments…
u/f8f82804

for(i=c.width^=0;i--;x.beginPath(x.fill()))C(a=t-i)>0&&x.ellipse(960+(X=(i*960-i*i)**.5*S(a)),60+i,(s=25-(S(a-1)*(b=(1-((Y=i-480)/480)**2)**.5))**4*24)*C(a)*b,s,Math.atan(Y/X),0,7)
u/joeytwiddle

I like how the circles become ellipses at the edges. https://codegolf.tk/a/254
u/magna

WHOA
u/f8f82804

u/joeytwiddle: that's the whole point of this demo, the lighting is just there because I had to compress it and had leftover space
u/f8f82804

you can see this concept implemented without compression in d/9676
u/iverjo

Very nice!
u/f8f82804

#fullhd

show FPS hide FPS share fullscreen

acorv

function u(t) {

c.width=1920;for(i=1;i<400;i++)j=i%20,w=t*5+j*9+i/600,x.beginPath(),x.arc(960-940*S(w/7)*C(w/3),540-520*S(w/2)*C(w/9),i/20,0,7),x.fill();

Sep 5 2018 3:32 PM UTC

}// 137/140

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

u/donbright

i stare at this at night... i see gray trails!!!
u/joeytwiddle

Could be your monitor is old, or your eyes
u/fujimotos

Oh hey, I can see the gray tails too. It appears when I don't focus on an individual node and try to watch the whole screen.
u/katkip

It's not deep learning but I will #ai this.
u/iverjo

My cat reacts to this ^^ She tries to catch the "fishes"

show FPS hide FPS share fullscreen

katkip

remix of d/3194 by u/lurifax

function u(t) {

for(i=2e3;i--;x.fillStyle=R(T(t)*99,i/t,C(i)*128+128,.07))x.fillRect(960+S(p=i/314)*(d=99+T(C(t/i))*(S(i*9+t)*99)*C(t)*4),540+C(p)*d,9,9)

Sep 8 2018 7:54 PM UTC

}// 137/140

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

Nuclear core

show FPS hide FPS share 2 remixes fullscreen

katkip

function u(t) {

a=.2*t|0,b=t|0;c.width^=0;x.translate(960,540);for(τ=0;τ<2e3;τ++)x.rotate(t/900),x.fillRect(S(τ*a)*900,C(τ*b)*500,1,3e3)

Sep 7 2018 7:06 PM UTC

}// 120/140

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

u/donbright

this looks absolutely wild on my machine. fascinating way to draw line patterns. especially after a minute or two when it 'breaks' into what looks like orbiting string-drawing
u/katkip

yep