d/23810 figure 2 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) {

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

Sep 8 2021 1:50 AM UTC

}// 133/140

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

d/23810 figure 2

Show more comments…
u/taupelink

Changes from figure 1:
u/taupelink

f=97*i*t: I added the "97*" to improve the quasi-random numbers. If you omit it from this dweet, then artifacts appear reflecting small values of f.
u/taupelink

q*=1+S(X*.6): I added the "*.6" to zoom in horizontally. I wanted the picture to have just one vertical red bar.
u/taupelink

q*=1-S(Y*.8+1.2): vertical zoom and translation, positioning the green bars so they look a little like riverbanks. The constants here were found entirely by trial-and-error.
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

q**-t: This dweet uses RGBA rather than RGB. Changing the alpha formula can create or destroy an image, or otherwise dramatically affect its appearance. Varying
u/taupelink

Varying alpha inversely with brightness can create interesting effects. Here, it varies with t as well. This contributes to the texture of the river. Again, I came across this formula by trial-and-error.
u/taupelink

So that's how I ended up with a red bridge across a river. An inky shadowy red river bridge, if you will.
u/taupelink

(sorry about the repeated comment above...if a moderator could delete those, and this request comment, that'd be great. Thank you!)
u/taupelink

More about how the q**-t works: the taller, brighter blues are more transparent. The shorter, darker ones stand out more, appearing as dark horizontal lines.


      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