Dweets awesomed by u/jylikangas

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

jylikangas

remix of d/18597 by u/pavel

function u(t) {

for(i=999;i--;x.fillRect(~x.setTransform(s=2e4/i,T(a=i+60*t),9,3*s,1500-i+9*s*C(a),540+8*s*S(a)),0,2,1))x.fillStyle=R(v=99-S(i/99)*80,v,v*2)

May 7 2020 9:44 AM UTC

}// 140/140

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

Ice #cavern - all credit to pavel!

u/KilledByAPixel

🧊👍
u/katkip

wow

show FPS hide FPS share fullscreen

veubeke

function u(t) {

with(x)for(i=3;i--;fill(arc(960+C(t/2+i/12)*700,540+S(t+i/6)*400,i>1?32:i?25:t%.3<.1?3:0,0,7)))beginPath(fillStyle=R($=(i>1?2:!i*3)*99,$,$))

May 5 2020 7: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).

Life is a Highway

u/pavel

(i>1?2:!i*3)*99 -> [3,0,2][i]*99 -> '302'[i]*99 -> (3^3/n)*99
u/pavel

That last one was generated automatically by https://github.com/pavelb/pavelb.github.io/b…
u/pavel

With var data=[3,0,2].map((a,b)=>[b,a])
u/pavel

Awesome dweet. Great idea and execution.
u/Xen

love it!

show FPS hide FPS share 5 remixes fullscreen

pavel

function u(t) {

with(x)for(i=999;i--;fillRect(~setTransform(s=24e3/i,0,0,4*s,960-i+9*s*C(a=i+60*t),540+8*s*S(a)),~rotate(T(a*a)),2,2))fillStyle=R(9,i/4,i/3)

May 4 2020 7:34 PM UTC

}// 140/140

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

Underwater #cavern

Show more comments…
u/KilledByAPixel

sick
u/KilledByAPixel

looped https://twitter.com/KilledByAPixel/status/12…
u/pavel

One trick here is f();g();h(-1,-1) is the same as h(~f(),~g()) when f and g return a falsy value, undefined in this case.
u/pavel

Notice how none of the distance variables are based on time, only angles are, yet the distances are changing and nothing is rotating...
u/pavel

Try making the moving a little faster :)
u/pavel

After I wrote this I looked for other dweets using a similar technique and this is the earliest one I've found, and it includes an explanation d/10212
u/KilledByAPixel

Amazing work! I have not seen the ~ before, will be using it a lot now. I tried to explain the 60*t trick in one of my blog posts, https://frankforce.com/?p=7160
u/pavel

That is an amazingly detailed explanation with great visual aids.
u/pavel

To clarify your explanation, any integer time works. 60*t is naturally an integer (ish). frame is one char longer without numerical errors. In general, (n*t|0) works for any n.
u/AndrewK

privet
u/katkip

masterpiece
u/joeytwiddle

I think this also counts as a #tunnel
u/Qwitter

Awesome!

show FPS hide FPS share fullscreen

pavel

remix of d/18577 by u/trusktr

function u(t) {

c.parentNode.style='perspective:4in';onmousemove=e=>c.style=`background:tan;transform:rotateY(${e.x-284}deg)rotateX(${160-e.y}deg)scale(.7)`

May 3 2020 2:29 AM UTC

}// 140/140

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

Tan plane looking at your mouse

u/pavel

#interactive #mouse
u/pavel

I tried doing this in js but its just too hard to fit!
u/pavel

168 c.width|=onmousemove=e=>T=e;b=.6-T.y/264;e=g=>C(i)*g(1-T.x/264);f=g=>S(i)*g(b)+e(S)*g(b-1.6);for(i=.8;i<6;x.fill(x.lineTo(960+e(C)/z,540-f(C)/z)))i+=1.57,z=(2+f(S))/960
u/pavel

This post looks better with rotation angles divided by 2 but I couldn't figure out how to fit it.

show FPS hide FPS share fullscreen

ntsutae

function u(t) {

t?f++:f=N=99
for(c.width|=X=Y=i=0;Y+=S(v=~~(S(~~((f-i)/16))*N)%4*11),X+=C(v)+S(v),s=i++%N?20:50,i<N*16;)x.fillRect(X*9+960-s,Y*9+540-s,s,s)

May 1 2020 1:55 PM UTC

}// 140/140

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

Distribution system #City #Traffic

u/ntsutae

PI/2=11/7
u/joeytwiddle

Multiplayer Amidar? :-D
u/KilledByAPixel

👍
u/tomxor

:O City Building !?

show FPS hide FPS share 3 remixes fullscreen

KilledByAPixel

function u(t) {

eval(unescape(escape`𩡯𬠨𪐽𮠽𜠰𜀫𝐰𚡓𚁴𚑼𜀻𪐭𛐻𮀮𩡩𫁬𤱴𮑬𩐽𭁼𯁒𚁩𚠵𙐷𝐰𚱩𚡩𙑺𛁩𛰮𝰬𪐪𞀭𜑥𜰩𚑱👴𙐱𛁔👱𚡺𚡃𚁩𚡩𚐪𚁩🰱𞠴𚐬𮀮𩡩𫁬𤡥𨱴𚁓𚁩𚱓𚁴𚐯𞐩𚡔𚰨𭁼𜀩𚠳𜀰𛁴🰶𜀰𚱃𚁩𚐪𥀭𬐪𮠯𛠸𚱱𚡱𚡺𞡩𚠶𛐲𩐳𛁲👴🱩🰱𜠭𬐪𞐺𞐫𬐪𜠹𞠲𩐳𛁲𚐻`.replace(/u../g,'')))

Apr 26 2020 7:19 AM UTC

}// 140/140

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

🌴🌅

u/KilledByAPixel

#palm #tree #sunset #fireworks
u/katkip

satisfying technique !
u/Xen

nice!
u/magna

Dude!
u/KilledByAPixel

golfed for(i=z=200+50*S(t)|0;i--;x.fillStyle=t||R(i*5%750+i*i%z,i/.7,i*8-1e3))f=(i?q=t%1:q*4)*z*C(i*i),x.fillRect(S(i+C(t)/8)*f+(t<<8),t?600+C(i)*f-q*z+q*q*z:i*6,r=t?i?12-q*9:9+q*29:2e3,-r)

show FPS hide FPS share 1 remix fullscreen

tomxor

remix of d/18484 by u/jylikangas

function u(t) {

for(w=i=c.width=256;--i;x.fillRect(...(i&1?[6+X,6+Y,48,36]:[(t+++S(t))*20.372%w+i%9,1+X%w,4,2,x.transform(0,1,-1,0,w,0)])))X=i%9<<6,Y=i%5<<6

Apr 25 2020 11:25 PM UTC

}// 140/140

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

#City #Traffic #Simulator v2

u/tomxor

They are mostly behaved at the junctions, few maniacs' here and there...
u/KilledByAPixel

👍
u/jylikangas

Very clever to use transform here! Thanks for improving this.
u/tomxor

Thanks for starting the idea, was really fun making this one.

show FPS hide FPS share 1 remix fullscreen

jylikangas

function u(t) {

c.width=-1
for(k=i=150;i--;)x[f="strokeRect"](i%6*64,i/5<<6,-37,i&3?40:20)
for(;i++<k;x.rotate(11/7))x[f]((i*32+t*k)%620-300,(i/2<<5)-k,9,4)

Apr 24 2020 1:34 PM UTC

}// 140/140

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

City Traffic Simulator

u/katkip

#city #simulation
u/tomxor

Nice! deserves some remix :)
u/Xen

nice
u/KilledByAPixel

🚗

show FPS hide FPS share fullscreen

pavel

function u(t) {

f=(X,y,r=80,a=0)=>r>6&&[0,.4,-.4,0].map(o=>o?f(X+r*S(a)*C(X*y/4e4+t),y-r*C(a),r*.8,a+o):x.lineTo(X,y));c.width=640;f(320,360);x.stroke()

Apr 24 2020 8:23 AM UTC

}// 136/140

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

Rotating #tree #fractal

u/pavel

Inspired by https://twitter.com/ntsutae/status/125356447…
u/neimad

You should do a twitch channel. amazing.
u/ntsutae

I’m honored.
u/pavel

u/ntsutae :O I love your stuff on twitter! 素晴らしですよ
u/vain

Great 3D version !!

show FPS hide FPS share fullscreen

pavel

function u(t) {

for(let i=2e3,f=(x,n,c=8-(t+6)*n)=>~n&(x*x*n*n+(8+(t-12)*n)**2+c*c-5)**2/16+c*c>1?f(x,n+=.002):c;i--;)x.fillRect(i,t*180,f(i/135-7,.7),3)

Apr 23 2020 7:27 AM UTC

}// 137/140

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

Actually #raytracing a #torus using ray marching

Show more comments…
u/Xen

Sweeet!
u/tomxor

Yes! we need more explicit surfaces on dwitter :)
u/Odog8

which expression is the DFT?
u/tomxor

I'm confused... this isn't explicit? it recurses.
u/pavel

This recurses just to advance ray length.
u/pavel

The closed form expression is x*x*n*n+(8+(t-12)*n)**2+c*c-5)**2/16+c*c-1 where c=8-(t+6)*n and n is the free variable.
u/tomxor

Ah, so is this technically ray casting? I have to ask because I still don't intuitively get all of the math.
u/tomxor

Sorry I meant ray marching
u/pavel

Yes. The math constructs a ray from (0,8,8) looking at (0,0,0), varied a bit depending on the pixel being drawn, its length is a function of n. I plug this into the equation for a torus and increment n from .7 to -1 until I find a zero of the equation.
u/pavel

Here is a version without much golfing that makes things clearer for(let i=2e3,f=(o,n,x=o*n,y=t/3*n-n,z=4-n)=>z>-1&(x*x+y*y+z*z+3)**2>16*(x*x+y*y)?f(o,n+.01):z;i--;)x.fillRect(i,t*180,f(i/540-16/9,3),3)
u/pavel

(x*x+y*y+z*z+3)**2>16*(x*x+y*y) is directly from https://en.wikipedia.org/wiki/Torus
u/pavel

with R=2 and r=1
u/pavel

This example shoots rays from (0,0,4). In order to rotate the shape you have to move where the rays come from, the camera!
u/tomxor

Thanks for the explanation 👍

dwitter.net | jylikangas (13525)