Dweets awesomed 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 fullscreen

taupelink

remix of d/23806 by u/taupelink

function u(t) {

k=120;for(i=k;i--;)
f=i*t,X=f*f%16,Y=X*f%4-2,
x.fillStyle=R(0,k+k*Y/2,k+k*C(Y*1.57)),
x.fillRect(k*X,540+k/Y,k/5**t,i)

Sep 10 2021 3:57 AM UTC

}// 118/140

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

d/23823 figure 3

u/taupelink

briefly: Y ranges from -2 to 2. Below the middle line, Y is positive and there's more green than average. In the large top and bottom areas, Y is between -1 and 1, and there is more blue than average.
u/taupelink

Note the formula for the top of the rectangle, 540+k/Y. This breaks the window up into four horizontal bands. From top to bottom, they are: -2<Y<-1, -1<Y<0, 1<Y<2, and 0<Y<1 respectively.
u/taupelink

Correction: -1<Y<0 is the top band, -2<Y<-1 the second from the top.
u/taupelink

The green component formula is k+k*Y/2. This is greater than k when Y>0.
u/taupelink

The blue formula is k+k*C(Y*1.57). This is greater than k when C(Y*1.57)>0, i.e., when -1<Y<1.

show FPS hide FPS share 1 remix fullscreen

pavel

remix of d/19550 by u/tomxor

function u(t) {

for(c.width=w=127,i=9087;i--;t?p&u[r=i+w+r%3]<1&&--u[i]&++u[r]:u[i]=r)x.fillRect(X=i&w,Y=i>>7,.5,p=u[i]),v=Y-36,r=(X/3-21)**4>v*v?2:i*t|Y<30

Sep 10 2021 2:03 AM UTC

}// 140/140

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

Overfilled #hourglass

u/pavel

#time
u/rep_movsd

Amazing!
u/tomxor

Excellent! makes me wonder what else we can do with this stuff...

show FPS hide FPS share fullscreen

rep_movsd

function u(t) {

eval(unescape(escape`𨰮𭱩𩁴𪁼👙👌🐳𜐴𛁏🐹𞐬𮀮𭁲𨑮𬱬𨑴𩐨𞐶𜀬𝐴𜀩𒡔👦𬡡𫑥𙑌𚠲𛁋🐨𥀼𣀩𚡔𚰫𛁋𯁼𮀮𬡯𭁡𭁥𚁔𛱏𚐊𡀽𚁘𛁗𚐽🡸𛡦𪑬𫁒𩑣𭀨𦀬𦐬𥱼𜠬𞐩𒡦𫱲𚀻𦐾𛑌𞰩𥰽𛐨𢠽𣰭𠰨𦐭𛐯𣰩𚡏𚰴𚐪𜠬𦐪𦐾𞁥𝁼𦐾𣀭𢱼𚁙🀰𙡙🡋𛑌𚐿𡀨𢠬𥰩𞡄𚁊𚐬𡀨𢠫𥰩`.replace(/u../g,'')))

Sep 9 2021 9:11 PM UTC

}// 140/140

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

Hourglass #time

show FPS hide FPS share fullscreen

taupelink

remix of d/23648 by u/taupelink

function u(t) {

for(i=q=k=288;--i;x.fillRect(k*X-k,k*Y,2e4/q*(C(q)>Y/9*t),-Y*q))f=i*t,X=f*f%9,Y=X*f%6,x.fillStyle=R(q^=k,q*=.9+S(q%X+Y)/2,q^i,q**.5/i*Y*9/t)

Sep 9 2021 1:07 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/23818

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 fullscreen

rodrigo.siqueira

remix of d/23749 by u/rodrigo.siqueira

function u(t) {

for(i=k=780;--i;x.fillRect(k-i*Y,k-v*i,80*q*X*v,Y*i*v))f=i*t,X=i*f%3-1,Y=X*f%4-2,x.fillStyle=R(q=i*X,q*=X*X/t,q*=Y**3*t*q/i/X,i/q/q),v=.5**t

Sep 6 2021 1:32 PM UTC

}// 140/140

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

All the colors of a sunrise

u/taupelink

nice!
u/rep_movsd

Try swapping around the r, g and b values - b, g , r and g, r, r look pretty realistic
u/rodrigo.siqueira

u/rep_movsd please paste the colors (q=...?) that you found so I can try your suggested combinations, thanks!

show FPS hide FPS share fullscreen

taupelink

remix of d/23760 by u/taupelink

function u(t) {

for(i=q=k=810;--i;x.fillRect(k*X,k-q*Y,-i/v,q*Y/v))f=i*t,X=f*f%5,Y=X*f%4-2,x.fillStyle=R(s=q+i*Y*.4,q^=-s,q^=255,(k+q)*(Y+3)**2/4e4),v=4**t

Sep 6 2021 6:21 AM UTC

}// 139/140

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

d/23766

u/rep_movsd

You need to write a blog about this particular technique
u/taupelink

i'd like to, but it would take time (i'm a super slow writer) and it's honestly not a priority at the moment. I can at least say this: Part of how I get four vertical bands is having Y range from less than -1 to greater than 1 (in this case, -2 to 2). Multiplying or dividing by Y then has four effects: stretch or compress, do or do not reverse sign
u/rep_movsd

A one page breakdown would be nice, or perhaps I'll write one
u/taupelink

ah ok...like a line-by-line explanation? that's doable...i'll write something up next weekend!

show FPS hide FPS share fullscreen

tomxor

remix of d/23756 by u/tomxor

function u(t) {

for(Y=t*480%720|0,X=1280;X--;!Z|!Y|Y>640|(Z/480+.75&Y/480+.83&(X|Y)/16%15)&&x.fillRect(320+X,180+Y-Z/6*S(Z/203),3,4))Z=X>640?1279-X:X

Sep 5 2021 8:28 PM UTC

}// 133/140

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

Smolr #book of #sierpinski

u/tomxor

Someone's been drawing in the margins...
u/erin

magic

show FPS hide FPS share 2 remixes fullscreen

taupelink

remix of d/23688 by u/taupelink

function u(t) {

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

Sep 5 2021 7:00 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/23760

u/magna

Wow!

dwitter.net | taupelink (50630)