)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Gumowski / Mira Thing

  1. D = document
  2. B = D.body
  3. S = 1200
  4. with(
  5.   B.appendChild(Object.assign(
  6.     D.createElement`canvas`, {
  7.       width: S,
  8.       height: S
  9.     })).getContext`2d`) {
  10.  
  11.   canvas.style.transformOrigin = '0 0'
  12.   canvas.style.transform = 'scale(.5)'
  13.  
  14.   b = .9998
  15.   xn1 = 5
  16.   yn1 = 0
  17.   xn = yn = 0
  18.   scale = 20
  19.   iterations = 1000
  20.  
  21.   f = x => {
  22.     x2 = x * x
  23.     return a * x + (2 * (1 - a) * x2) / (1 + x2)
  24.   }
  25.  
  26.   mouseX = mouseY = 0
  27.   onpointermove = e => {
  28.     mouseX = e.clientX
  29.     mouseY = e.clientY
  30.   }
  31.  
  32.   dwn = 0
  33.  
  34.   fillStyle = '#000'
  35.   fillRect(0, 0, S, S)
  36.  
  37.   loop = _ => {
  38.  
  39.     a = mouseY / 1000
  40.     xn1 = mouseX / 30
  41.     yn1 = 0
  42.  
  43.     dwn += 1
  44.  
  45.     for (var i = 0; i < iterations; i++) {
  46.       xn = xn1;
  47.       yn = yn1;
  48.  
  49.       fillStyle = `hsla(${i / 30}, ${dwn / 6}%, 50%, .2)`
  50.  
  51.       xn1 = b * yn + f(xn)
  52.       yn1 = -xn + f(xn1)
  53.       fillRect(S * .5 + xn1 * scale, yn1 * scale / 2 + dwn, 1, 1)
  54.     }
  55.  
  56.     requestAnimationFrame(loop)
  57.   }
  58.   loop()
  59. }

Move your around as the Gumowski / Mira shape moves down the screen…

// animation // canvas // graphics // math // speedcoding

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}