#golfed added colors instead by qm3ster

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.

show FPS hide FPS share 3 remixes fullscreen

qm3ster

remix of d/12153 by u/LimeLaser

function u(t) {

r=Math.random;p=t?p.map(([a,b,f=R(0,a/8,b/4)]=[1920*r(),1080*r()])=>[a+4-8*r(),b+4-8*r(),x.fillStyle=f,x.fillRect(a,b,2,2)]):[...Array(999)]

Mar 5 2019 3:25 PM UTC

}// 140/140

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

#golfed added colors instead

Show more comments…
u/qm3ster

Colors correspond to starting position. Horizontal speed is now equal to vertical.
u/f8f82804

This might be one of the best #random dweets I've ever seen! Gorgeous!
u/LimeLaser

This is awesome!
u/pavel

131 for(r=Math.random,i=1e3;i--;x.fillRect(S[i]+=4-8*r(),C[i]+=4-8*r(),2,2))S[t]=2e3*r(),C[t++]=1080*r(),x.fillStyle=R(0,S[i]/8,C[i]/4)
u/qm3ster

@pavel why do you use 2e3 as approximation for 1920 but not 1e3 as approximation for 1080? It's not like they're used as bounds.
u/qm3ster

@pavel it doesn't persist the colors of the particles, so it just paints the whole c a gradient.
u/pavel

Ah, I didn
u/pavel

I didn't catch the color change, it does complicated the code: 138 for(r=Math.random,w=i=2e3;i--;x.fillRect(S[i]+=4-8*r(),C[i]+=4-8*r(),2,2))c[t]=S[t]=w*r(),x[t]=C[t++]=w*r(),x.fillStyle=R(0,c[i]/8,x[i]/4)
u/pavel

2e3 overruns and you can't see it. 1e3<1080 so the bottom has more whitespace and it looks bad.
u/pavel

135 for(r=Math.random,w=i=2e3;i--;x.fillRect(p[0]+=4-8*r(),p[1]+=4-8*r(),2,2))p=u[i]=t?u[i]:[a=w*r(),b=w*r(),R(0,a/8,b/4)],x.fillStyle=p[2]
u/pavel

134 for(r=Math.random,w=i=2e3;i--;x.fillRect(p[0]+=4-8*r(),p[1]+=4-8*r(),2,2))p=u[i]=u[i]||[a=w*r(),b=w*r(),R(0,a/8,b/4)],x.fillStyle=p[2]
u/pavel

This does look great :), not sure what else to add with the spare chars
u/qm3ster

Nice! I limited it to 100 particles, each gets 20 movements per frame now:
u/qm3ster

for(r=Math.random,w=i=2e3;i--;x.fillRect(p[0]+=2-4*r(),p[1]+=2-4*r(),2,2))p=u[z=i%100]=u[z]||[a=w*r(),b=w*r(),R(0,a/8,b/4)],x.fillStyle=p[2]


      u(t) is called 60 times per second.
      t: elapsed time in seconds.
      c: A 1920x1080 canvas.
      x: A 2D context for that canvas.
      S: Math.sin
      C: Math.cos
      T: Math.tan
      R: Generates rgba-strings, ex.: R(255, 255, 255, 0.5)

dwitter.net