Top dweets by u/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.

Try the new frontend: beta.dwitter.net
Current theme challenge: #Food

show FPS hide FPS share 1 remix fullscreen

taupelink

remix of d/24254 by u/taupelink

function u(t) {

for(i=q=400;i--;x.fillRect(720*X,720*Y,90*q/2**t,i/t))f=i*t,X=f*f%3,Y=X*f%2,x.fillStyle=R(q+=i/t**.5*S(i/X&q),q/=2+C(t/Y+X),q*=2*S(Y),i/q/t)

Nov 5 2021 12:27 AM UTC

}// 140/140

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

d/24295

u/donbright

#waitforit
u/donbright

the final image is really cool, i love the colors and the contrast of the black monoliths
u/donbright

upside down it looks like a strange fire

show FPS hide FPS share fullscreen

taupelink

remix of d/24254 by u/taupelink

function u(t) {

for(i=q=200;i--;x.fillRect(720*X,720*Y,50*q/t**t,i/t))f=i*i*t,X=f*f%3,Y=X*f%2,x.fillStyle=R(q+=i*C((t*X&q/6)/4),q*=1-Y/2,q*=.5+C(Y)/2,i/q)

Oct 31 2021 10:20 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/24262

show FPS hide FPS share 1 remix fullscreen

taupelink

remix of d/23760 by u/taupelink

function u(t) {

for(i=q=k=640;i--;x.fillRect(k*X,k+q/Y,q/v,i/t))f=i*t,X=f*f%3,Y=X*f%4-2,v=t**t,x.fillStyle=R(q+=i*S(q/X-Y),q/=X,q*=Y+q%t%2,99/(k-q)/(2+Y)/v)

Oct 13 2021 12:47 AM UTC

}// 140/140

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

d/24091

show FPS hide FPS share fullscreen

taupelink

remix of d/23920 by u/taupelink

function u(t) {

for(i=k=q=300;i--;x.fillRect(k*X,k*Y,q/t**t,-i*C(8*Y)/t))f=i*i*t,X=f*f%7,Y=X*f%4,x.fillStyle=R(q*=C((z=i*Y|q*X)/9)/4,q/=1+S(z/t),q^=i,i/q)

Oct 7 2021 11:45 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/24042

u/taupelink

old bookshelf?
u/rep_movsd

A brownish color may look like a reed mat

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.

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

taupelink

remix of d/23644 by u/taupelink

function u(t) {

for(i=q=k=256;--i;x.fillRect(k*X,v*k*Y,-1e5/q**.5/v*(C(q)>Y),-9*q/v))f=i*t,X=f*f%9,Y=X*f%1,x.fillStyle=R(q^i,q*=C(q/X**Y),q^=k,Y*q/i),v=2**t

Aug 26 2021 1:14 PM UTC

}// 140/140

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

d/23648

u/sigveseb

Cool colors

show FPS hide FPS share fullscreen

taupelink

remix of d/23465 by u/taupelink

function u(t) {

r=89*t;e=r*r%300;X=e*r%70-6;Y=X*r%42-6;x.fillStyle=R(e**(a=.8+S(Y+e)*S(X)),e*a,e/a,a/t);x.fillRect(X*30,Y*30,9*e/t,S(X*e)>.5+T(Y)?1e5/e/t:0)

Aug 3 2021 9:30 PM UTC

}// 140/140

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

d/23467

show FPS hide FPS share 2 remixes fullscreen

taupelink

remix of d/23354 by u/taupelink

function u(t) {

for(i=q=400;--i;x.fillRect(i*X,i*Y+50*t,-q/t,i*q/2**t))f=i*t,X=f*f%6,Y=X*f%2,x.fillStyle=R(q+=C(q/20+X)*i/4,q*=S(X/q**.5)+.4,q/=Y,1e4/q/q)

Jul 22 2021 12:51 AM UTC

}// 138/140

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

d/23369

show FPS hide FPS share 2 remixes fullscreen

taupelink

remix of d/22825 by u/taupelink

function u(t) {

for(i=q=150;--i;x.fillRect(30*g+i,q*Y,-q*.8**t,-i*.7**t))f=i*i*t,X=3**(f*f%6),Y=3**(X*f%3),x.fillStyle=R(q%=(g=i/X**.5),q^=i,q^=X,q/500/t)

May 21 2021 1:38 AM UTC

}// 138/140

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

d/22831

u/tomxor

I see seaweed
u/erin

you see-seeweed

dwitter.net | taupelink (7550)