)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Freeth’s Nephroid Animated

  1. const FOUR_PI = 4 * Math.PI;
  2. const { cos, sin } = Math;
  3.  
  4. const canvas = document.body.appendChild(
  5.   document.createElement('canvas')
  6. );
  7. const c = canvas.getContext('2d');
  8.  
  9. function resize() {
  10.   canvas.width = window.innerWidth;
  11.   canvas.height = window.innerHeight;
  12. }
  13.  
  14. let inc = 0;
  15. function draw() {
  16.   c.clearRect(0, 0, canvas.width, canvas.height);
  17.   c.fillStyle = 'blue';
  18.  
  19.   const halfWidth = window.innerWidth / 2;
  20.   const halfHeight = window.innerHeight / 2;
  21.   let theta = 0,
  22.     a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,
  23.     x,
  24.     y;
  25.  
  26.   c.save();
  27.   c.translate(halfWidth, halfHeight)
  28.  
  29.   // Freeth's Nephroid
  30.   // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/
  31.   // r = a(1 + 2sin(θ / 2))
  32.   let b = 2 * cos(inc);
  33.   inc += .01;
  34.  
  35.   for (let i = 0; theta < FOUR_PI; i++) {
  36.     let rad = a * (b + 2 * sin(theta / 2))
  37.     x = rad * cos(theta);
  38.     y = rad * sin(theta);
  39.     c.fillRect(x, y, 2, 2);
  40.     theta += 0.05;
  41.   }
  42.   c.restore();
  43.  
  44.   requestAnimationFrame(draw)
  45. }
  46.  
  47. resize();
  48. window.addEventListener('resize', resize);
  49.  
  50. draw()

It’s always fun to play with curves from here Famous Curves Index

snippet.zone ~ 2021-22 /// {s/z}