Eight kissing circles by pavel

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

pavel

function u(t) {

for(c.width=640,i=8;i--;x.stroke())x.beginPath(R=3+12**.5*C(t+=22/21)),j=i<2,x.arc(320+150*(2*!i-j),180+260*S(t)*!j/R,130/(j||R*R)**.5,0,7)

Jan 4 2020 12: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).

Eight kissing circles

Show more comments…
u/pavel

These are the circles e^is, 1/3*e^is, 1/3*e^is + 2/3*e^i(n*pi/3+t) for n=0..5 transformed via the conformal map (3^.5+z)/(1+3^.5*z)
u/yonatan

Fascinating, but incomprehensible :)
u/yonatan

my best guess: z in the map is coords as a complex number, i is sqrt(-1), e is euler's const? no idea what's s
u/pavel

You got it. s is just a parameter, a real number. If you plot e^is in the complex plane you get a circle (https://en.wikipedia.org/wiki/Euler%27s_form…). Then that map magically moves and resizes things but keeps circles as circles.
u/pavel

This d/17068 is what the circles look like before the mapping. The mapping moves the inner one sideways, outside of the outer circle, and resizes it to be the same size, meanwhile the moving circles keep touching.
u/pavel

Check out https://jsfiddle.net/umL3t1he/9/ on desktop
u/katkip

#apolloniangasket


      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