Compression by rodrigo.siqueira

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 2 remixes fullscreen

rodrigo.siqueira

remix of d/33264 by u/tzador

function u(t) {

for(N=i=3e4;i--;x.fillRect(960+X*400/Z,540+Y*400/Z,w=.4/Z+Y*Y%1,w*(t<8)))
X=(S(i*N)*N+S(t*i*i)*2)%9,Y=((i*N)*N/t/99)%9-4,Z=2-1.8/(1+X*X+Y*Y)

Feb 9 2025 3:42 PM UTC

}// 140/140

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

Compression

u/tzador

Very very nice ))
u/tzador

Could you explain how you achieve this wayve gradient pattern?
u/rodrigo.siqueira

About the horizontal lines around the circle: u/tzador, in your original code if you change Y=...%9-4 for Y=.../400-4 then you will see parallel horizontal lines around the circle in middle. In my case, the lines around appear by using %1 here w=...+Y*Y%1
u/rodrigo.siqueira

About the gradient: It's given here by using "Y" values to pixel size (w). if you change to w=.4/Z+Y then you will see a strong and simple "Y" gradient. If you try w=.4/Z+X then you will see vertical instead of horizontal gradient. Then the %1 will "break the gradient" in multiple gradients of "width 1"
u/tzador

Thank you, will try it out in the next one ))


      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