Dweets awesomed by u/jczimm

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 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

jczimm

remix of d/23690 by u/rodrigo.siqueira

function u(t) {

A=a=b=t;s=1e2
for(i=1e4;--i;b=A,A=a)x.fillStyle=R(q=t*5,q,q,.1),x.fillRect(1e3+s*a*S(t),6e2+s*b*C(t),1,1),a=Math.abs(a/3+1/b/4e3)*(A/9-1)-b

Aug 31 2021 9:23 AM UTC

}// 139/140

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

the panopticon

show FPS hide FPS share 2 remixes fullscreen

TGY

remix of d/23680 by u/TGY

function u(t) {

for(i=frame%214,j=6;j--;)
for(y=82-20*j+9*S(p=i/45+j)**2;y++<120-j*20;x.fillRect(9*i,9*y|0,9,9))
x.fillStyle=R(g=80+45*S(p+y/20)**2,g+y,3*g)

Aug 30 2021 4:05 PM UTC

}// 140/140

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

#windows11

u/davidsover

Upgrade for free!

show FPS hide FPS share 3 remixes fullscreen

rodrigo.siqueira

remix of d/23687 by u/rodrigo.siqueira

function u(t) {

c.style.filter=`invert(`
A=a=b=t/2;s=240
for(i=1e4;--i;b=A,A=a)x.fillRect(990+a*s,640+b*s,.7,1),a=.04-b+1.2*Math.abs(a/3+1/b/4e3)*(A/9-2)

Aug 30 2021 2:25 PM UTC

}// 137/140

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

I can't name it. Ideas?

u/Joachim

Spider-Limpets ;-)

show FPS hide FPS share fullscreen

taupelink

remix of d/23648 by u/taupelink

function u(t) {

for(i=q=k=447;i--;x.fillRect(k*X,k+i/Y,-8*q/v,i*(Y-2)/v))f=i*t,X=f*f%7-1,Y=X*f%3-2,x.fillStyle=R(q*=C(X/6)/8-Y/4,i*S(X/2),q^=k,k/q*t),v=t**t

Aug 30 2021 4:04 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/23689

u/rep_movsd

This is superb
u/rfs

What is your process for making these? incredible
u/taupelink

thank you! lots and lots of trial and error, lately aided by https://capjs.3d2k.com/ I keep playing around with variations, e.g.: for the Y-coordinate, k+i*Y,k-i*Y,k+i/Y,k-i/Y each have a different effect
u/taupelink

for those unfamiliar with dwitter-style compact JS code: for a typical dweet of this type, each frame draws a bunch of rectangles. each rectangle has random coordinates for its upper left-hand corner. the RGBA (color and opacity) of the rectangle depends on those coordinates and on some other parameter that gets modified with each step. The dimensions of the rectangles shrink over time, thus adding finer-grained detail

show FPS hide FPS share 1 remix fullscreen

rodrigo.siqueira

remix of d/23673 by u/rodrigo.siqueira

function u(t) {

c.style.filter=`sepia(`
A=a=b=.8/t;s=920
for(i=1e4;--i;b=A,A=a)x.fillRect(940+a*s,540+b*s,.8,t<99),a=Math.abs(a/2+1/b/2e3)*(A/2+C(a-a/4))-b

Aug 29 2021 8:19 PM UTC

}// 140/140

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

Glial astrocyte convergence

u/magna

Crazy!

show FPS hide FPS share fullscreen

TGY

remix of d/23667 by u/Joachim

function u(t) {

c.width|=t?0:d=p=[]
Y=540
d++%9<6&&p.push({Y,s:1,X:Y+Y*S(t)**2})
for(i of p)with(i)x.fillStyle=R(s,a=s/20,s),x.fillRect(X-s/2,Y+=a,s+=a,a+9)

Aug 29 2021 1:53 PM UTC

}// 140/140

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

show FPS hide FPS share 1 remix fullscreen

rodrigo.siqueira

remix of d/23669 by u/rodrigo.siqueira

function u(t) {

c.style.filter=`sepia(`
A=a=b=.8/t;s=400
for(i=1e4;--i;b=A,A=a)x.fillRect(900+a*s,480+b*s,1,t<5),a=.4-b+Math.abs(a/2+1/b/2e3)*(A/3-.5)

Aug 29 2021 12:23 AM UTC

}// 134/140

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

Axon formation around a multinucleate alien cell

u/sigveseb

Nice!
u/Toby

Fab! Do you have a source reference for the kind of iterated formula you're using?
u/rodrigo.siqueira

You can see the original equation by changing the to "s=70" and the end to: a=1-b+Math.abs(a)
u/rodrigo.siqueira

It's based on the "Gingerbreadman Map" #gingerbreadman https://www.dwitter.net/d/14641 I don't understand the details but I know that "Even the simplest mathematical expressions, when interpreted as dynamical systems, yield fractals."
u/Toby

Ahhhh yes of course! I remember Gingerbreadman now! Thank you Rodrigo!

show FPS hide FPS share 1 remix fullscreen

rodrigo.siqueira

remix of d/23661 by u/rodrigo.siqueira

function u(t) {

A=a=b=.8/t;s=130
for(i=1e4;--i;b=A,A=a)x.fillStyle=R(a*50,x.fillRect(840+a*s,470+b*s,.9,t<2),30*b),a=1-b+Math.abs(a/2+1/b/2e3)*C(a-4)

Aug 28 2021 12:25 AM UTC

}// 133/140

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

Alien cell #attractor

show FPS hide FPS share 1 remix fullscreen

TGY

function u(t) {

eval(unescape(escape`󭽩󭍨󚍍󨝴󪌩󩬽󚍴󛍩󛍸󛍹󚜽󟭛󝜴󝬳󛌲󜜹󝌬󜬳󞌶󧝛󮜫󭌪󞜦󝽝󙬱󟌼󮌭󜜊󭽩󭍨󚍸󚝦󫽲󚍣󛭷󪝤󭍨󯌽󪜽󜬵󝜻󪜭󛜻󩭩󫍬󚍡󬭣󚌸󜌪󦌬󞌰󚭙󛌴󜌪󚍲󟬱󟼱󞭲󚜬󜌬󝼩󚜩󨭥󩽩󫭐󨝴󪌨󦌽󪜥󜜶󛍙󟜰󯍩󛼱󝬬󬬽󩬨󭌬󪜬󦌬󦜩󚜬󩭩󫍬󤽴󮝬󩜽󬬾󜌿󤬨󜌩󞭒󚌲󝜵󛍲󟜭󬬩`.replace(/u../g,'')))

Aug 27 2021 4:50 AM UTC

}// 140/140

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

Have you ever tried tixy.land? #tixy

dwitter.net | jczimm (6107)