d/23825 by taupelink

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 fullscreen

taupelink

remix of d/23806 by u/taupelink

function u(t) {

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

Sep 10 2021 5:54 PM UTC

}// 138/140

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

d/23825

Show more comments…
u/taupelink

I doubt I'll be able to give a satisfying breakdown of this one. A few observations...
u/taupelink

q is declared at the start of the loop, and it evolves over time. In previous examples, q was always equal to i*2. Here, in each iteration, q is set to q%i*4 before undergoing further changes....this makes it so that q and i are related but not as tightly coupled.
u/taupelink

("time"=loop iterations here)
u/taupelink

Y is in the range -5...5. The top of the rectangle is 540+120*Y. (Note to self: go back and redo Figure 3 to use *Y rather than /Y, it's simpler)
u/taupelink

The green component is q*=1+S(X*.6)*Y/5. In Figures 1 and 2, there was a vertical red line, reflecting the way that the q parameter depended only on X at this point; it got zeroed out around X=5. Here, q is zeroed out around only part of the X=5 line, specifically the part around Y=5 at the bottom.
u/taupelink

Correction: I'm talking about X=8, not X=5. The sin(X*.6) term hits -1 around where X*.6=1.5*pi, which is around X=8.
u/taupelink

So, if a rectangle is plotted with upper left-hand corner near X=8, Y=5 (i.e., bottom center), then there will be little to no green or blue in it.
u/taupelink

If you're following along, then you may be looking at that spot in the picture and wondering why there's some green, yellow, orange in that location. That's due to overlap with other rectangles, ones whose upper left-hand corners are elsewhere...
u/taupelink

....The overlap is partly due to how I defined the rectangle width parameter, i/t. The "/t" means that rectangle widths shrink over time....but when t is very small, the rectangles are very wide! Part of the green/orange near X=8,Y=5 is due to rectangles that were drawn during the first half-second or so of the animation.


      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