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

Fast Sine and Cosine Approximation

  1. let t = 0, cos, sin, x, y;
  2.  
  3. const PI = Math.PI;
  4. const TWO_PI = PI * 2;
  5. const HALF_PI = PI / 2;
  6. const tA = 4 / PI;
  7. const tB = 4 / PI ** 2;
  8.  
  9. const canvas = document.body.appendChild(document.createElement('canvas'));
  10. const c = canvas.getContext('2d');
  11. canvas.width = canvas.height = 300;
  12.  
  13. function loop() {
  14.   // low precision sine/cosine
  15.   // always wrap input angle to -PI..PI
  16.   t += 0.1;
  17.   if (t < -PI) {
  18.     t += TWO_PI;
  19.   } else if (t > PI) {
  20.     t -= TWO_PI;
  21.   }
  22.  
  23.   // compute sine
  24.   if (t < 0) {
  25.     sin = tA * t + tB * t * t;
  26.   } else {
  27.     sin = tA * t - tB * t * t;
  28.   }
  29.  
  30.   // compute cosine: sin(t + PI/2) = cos(t)
  31.   t += HALF_PI;
  32.   if (t > PI) {
  33.     t -= TWO_PI;
  34.   }
  35.  
  36.   if (t < 0) {
  37.     cos = tA * t + tB * t * t;
  38.   } else {
  39.     cos = tA * t - tB * t * t;
  40.   }
  41.  
  42.   t -= HALF_PI; // move the shape
  43.  
  44.   x = 110 + 100 * cos;
  45.   y = 110 + 100 * sin;
  46.  
  47.   c.fillStyle = 'rgba(100, 100, 20, .5)';
  48.   c.fillRect(x, y, 10, 10);
  49.   window.requestAnimationFrame(loop);
  50. }
  51. loop();

This is an old trick for fast sine/cosine approximation. I learned about it from Michael Baczynski’s blog which now seems to be down. Here is a wayback link for the original article and another one to a more in-depth discussion about it:
original post
original thread

It’s unlikely that the speed gain (if there even is one here) makes sense in javascript. This is really more for fun… a quick search will turn up all kinds of cool info about fast sine/cosine stuff.

// javascript // math // tricks

Recent

Archive

RSS
snippet.zone /// {s/z}