Random dweets | Dwitter

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

UEZ

remix of d/24233 by u/TGY

function u(t) {

for(c.width=i=1e3;i--;x.fillRect(S(i^9)*99*m+500+S(t*3)*200,400+m+S(t*6)*59,m*3,-m*9))m=200/(99-(t+i)%99),x.fillStyle=R(0,0,0,1-m/255)

Oct 27 2021 7:06 AM UTC

}// 134/140

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

city walk with alpha ^^

u/ciaccodavide

nice! I made it faster and with less head bobbing ;) for(c.width=i=1e3;i--;x.fillRect(S(i^9)*99*m+500+S(t*3)*33,400+m+S(t*6)*9,m*3,-m*9))m=200/(99-(t*9+i)%99),x.fillStyle=R(0,0,0,1-m/255)

show FPS hide FPS share 5 remixes fullscreen

taupelink

function u(t) {

k=120;for(i=k;i--;)
f=i*t,X=f*f%16,Y=X*f%9,
x.fillStyle=R(q=i*2,q*=1+S(X),q*=1-S(Y)),
x.fillRect(k*X,k*Y,k/5**t,i)

Sep 7 2021 2:03 PM UTC

}// 114/140

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

d/23806 figure 1

Show more comments…
u/taupelink

this week i will give a line-by-line description here in comments and then maybe in a blog post
u/taupelink

definitely a blog post. the comments will come over time...don't feel obligated to come back and check this dweet for new comments
u/taupelink

k=120: for code golfing purposes, this variable plays multiple roles: loop iteration count per frame, scale factor for X&Y coordinates, width of each rectangle at the start of the animation
u/taupelink

for(i=k;i--;): establishes a loop where i counts down from 120 to 1. "i--" means, If i is 0, then stop here; otherwise, decrement i by 1
u/taupelink

f=i*t,X=f*f%16,Y=X*f%9: this code creates quasi-random decimals X (0.0-15.999) and Y(0.0-8.999). (Hat-tip to whoever suggested this technique... u/pavel ?) If you multiply the upper bounds by 120 each, you get the overall dimensions 1920x1080.
u/taupelink

x.fillStyle=R(red,green,blue): sets the RGB color value for fills. I will take each component one at a time...
u/taupelink

q=i*2: sets the red component to 2x the loop index, i.e. an even number from 2 to 240. This covers most of the possible range 0-255. The red value is tied to i but not to X or Y; rectangles everywhere have a random degree of red.
u/taupelink

q*=1+S(X): sets the green component, and updates the value of q, to q*(1+sin(X)). Where sin(X) is close to -1, around X=1.5*pi and X=3.5*pi, the value of q is close to being zeroed out by this code; that explains the vertical red bands.
u/taupelink

q*=1-S(Y): sets the blue component, and updates the value of q, to q*(1-sin(Y)). This is why you see the green bands (no blue) around Y=0.5*pi and Y=2.5*pi; that's where sin(Y) is close to 1.
u/taupelink

x.fillRect(top,left,width,height): standard Javascript for drawing a rectangle. Again I will take one component at a time...
u/taupelink

k*X,k*Y: the X- and Y-coordinates of the upper left-hand corner of the rectangle, scaled by a factor of k.
u/taupelink

k/5**t: the width of the rectangle, which decreases exponentially over time. This can provide texture at different scales, including fine-grained detail.
u/taupelink

i: the height of the rectangle, equal to the index variable. The height of each rectangle is proportional to the red component, indeed to every component; so, for the 120 rectangles that are drawn in any given frame, some are tall and bright, some short and dark.
u/taupelink

A blog post on this dweet is up: https://medium.com/@taupelink/elements-of-a-…

show FPS hide FPS share 1 remix fullscreen

loni_art

remix of d/5866 by u/loni_art

function u(t) {

for(c.width=i=2e3,z=(1/(1+2**-(C(t)*6))+2)*99;i--;)i%9?(x.fillStyle=R(i/9,z,i*t%255,.3),x.fillRect(i%99*(z-25*C(t))-150,i/99*z,z,z)):z--

Jan 10 2018 9:58 PM UTC

}// 137/140

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

many thanks to xeo for the golf

u/Xen

we are all waiting for the prophecy! Xeo shall rise in 100 years! ;-)
u/Xen

done you a remix: d/5870
u/sigveseb

:D

show FPS hide FPS share fullscreen

trancor

function u(t) {

t%4<.1?n=w=c.width=999:n^=S(t*w)*2+8
x.globalAlpha=.1
for(i=3e3;i>=0;i--)
x.fillRect((C(n+i^~n*t|i)/2+.5)*n%w,k=(S(i*t)*i+t*n)%w,S(n|i)*5,k)

May 8 2018 2:58 AM UTC

}// 140/140

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

u/DirtyDan

reminds me of Dying light https://i.ytimg.com/vi/U5HaOmyTiYE/maxresdef…
u/trancor

Wow! The art for this game looks amazing. Only ever looked into the zombie crowd actions in the game.

show FPS hide FPS share fullscreen

katkip

remix of d/11139 by u/anotherkitten

function u(t) {

x.fillStyle=`hsl(${t*99} 50%${50+50*S(t*99)}%`;x.arc(960,540,t+S(t**5)*t,3+C(t*99)*3,3+S(t*66)*3);x.fill();x.drawImage(c,-72,-40,2064,1160)

Nov 25 2018 10:33 AM UTC

}// 139/140

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

Falling in the #illusion #waitforit stare in the middle for few seconds in fullscreen and see what happens

u/joeytwiddle

Yeah that's ... uh ... powerful!

show FPS hide FPS share fullscreen

KilledByAPixel

remix of d/25319 by u/KilledByAPixel

function u(t) {

x.transform(s=1.005,0,0,s,w=.4,S(t)/9)
for(i=3;i--;x.fillRect(...i?q?[0,9,12,2]:[i-1?1:9,8+S(t%1*3)*9,w,w]:[q*5,q?6:41,q?2:9,1e3]))q=t%1<.01

Apr 12 2022 4: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).

Telephone Lines ☎️ Uncompressed

u/vain

Just wow!
u/tomxor

hah, awww, i was just about to try to uncompress it :P
u/KilledByAPixel

i had a feeling, beat you to it, still room for improvements and variations in this rendering style :)
u/tomxor

-9 i?q?[8,8,13,2]:[9*i,7+9*S(t%1*3),w,w]:[13,q?5:41,2,1e3]

show FPS hide FPS share 1 remix fullscreen

lewdev

function u(t) {

for(c.width=1920,x.font="200px s",i=0;i<80;i++)y=i%4,m=y==1||y==2,x.fillText(m?"🚘":"🏠",120+y*500,(m?0:-2e3)+500*(m?-t:t)%2e3+i*(m?100:50));

Jul 30 2021 9:21 PM UTC

}// 139/140

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

🚘 Cars driving through town. My first dweet!

u/Xen

Welcome to the dwitter family!

show FPS hide FPS share fullscreen

BackendForth

function u(t) {

v=(n)=>n?v(n-1)*n:1
f=2*t-2*t%1
for(i=c.width=1920;i--;){h=0
for(j=f;j--;)h+=(i/99)**(2*j)/v(2*j)*-(j%2*2-1)
x.fillRect(i,h*99+540,9,9)}

Jan 31 2018 1:03 AM UTC

}// 136/140

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

u/lionleaf

Taylor expansion of sin(x)?
u/BackendForth

Yup!
u/Lazy1337

#math

show FPS hide FPS share 1 remix fullscreen

rodrigo.siqueira

remix of d/33595 by u/rodrigo.siqueira

function u(t) {

for(i=4e4;i--;){
r=S(i*i/t)+S(i)**2
X=r*C(k=i/11)*1540
Y=r*S(k)*1400
Z=r*C(S(i*.1))*6-.2
x.fillRect(960+X/Z,540-Y/Z,.14,t<1)}

Apr 14 2025 12:28 PM UTC

}// 125/140

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

sym-22

show FPS hide FPS share 1 remix fullscreen

mark1626

function u(t) {

c.width=1920,X=0,Y=0;for(i=1e3;i--;)
k=(t/3e3)%2e4,X=C(k*i)*C(i),Y=C(k*i)*S(i),
x.fillRect(X*500+960,Y*500+540,5,5)

May 18 2026 6:27 AM UTC

}// 115/140

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