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

Fermat’s Spiral

  1. const canvas = document.body.appendChild(document.createElement('canvas'));
  2. const c = canvas.getContext('2d');
  3.  
  4. function resize() {
  5.   canvas.width = window.innerWidth;
  6.   canvas.height = window.innerHeight;
  7.   draw();
  8. }
  9.  
  10. function draw() {
  11.   c.clearRect(0, 0, canvas.width, canvas.height);
  12.   c.fillStyle = 'blue';
  13.  
  14.   const iter = 300;
  15.   const halfWidth = window.innerWidth / 2;
  16.   const halfHeight = window.innerHeight / 2;
  17.   let rad = 0,
  18.     theta = 0,
  19.     scale = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.006,
  20.     x,
  21.     y;
  22.  
  23.   c.save();
  24.   c.translate(halfWidth, halfHeight);
  25.  
  26.   for (let i = 0; i < iter; i++) {
  27.     rad = Math.sqrt(theta) * scale;
  28.     x = rad * Math.cos(theta);
  29.     y = rad * Math.sin(theta);
  30.     c.fillRect(x, y, 2, 2);
  31.     c.fillRect(-x, -y, 5, 5);
  32.  
  33.     theta += 0.05;
  34.   }
  35.   c.restore();
  36. }
  37.  
  38. resize();
  39. window.addEventListener('resize', resize);

Draw Fermat’s spiral…

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