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

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.

isPowerOfTwo

  1. function isPowerOfTwo(value) {
  2.   return (value & (value - 1)) === 0 && value !== 0;
  3. }
  4.  
  5. for (let i = 0; i < 66; i++) {
  6.   console.log(i, isPowerOfTwo(i));
  7. }

I’ve had the pleasure of using THREE.js quite a bit over the years. The MathUtils file has some great utility functions. This version of isPowerOfTwo comes straight from there. I may post a few more from there in the future…

Lerp

  1. const lerp = (a, b, t) => a + (b - a) * t;
  2.  
  3. console.log(lerp(0, 100, 0.5));
  4. console.log(lerp(0, 100, 0.1));
  5.  
  6. console.log(lerp(50, 100, 0.5));
  7. console.log(lerp(100, 50, 0.5));
  8.  
  9. const c = document.body.appendChild(document.createElement`canvas`)
  10.   .getContext`2d`;
  11. c.canvas.width = c.canvas.height = 100;
  12. c.fillStyle = 'black';
  13. c.fillRect(0, 0, 100, 100);
  14.  
  15. let time = 0;
  16. const loop = () => {
  17.   c.fillStyle = 'rgba(255, 255, 255, .5)';
  18.  
  19.   time += 0.01;
  20.  
  21.   if (time < 1) {
  22.     c.fillRect(lerp(10, 55, time), lerp(10, 90, time), 5, 5);
  23.   }
  24.   window.requestAnimationFrame(loop);
  25. };
  26. loop();

Obfuscated Pre

  1. b = document.body
  2. with(b.style) 
  3.   fontFamily = 'monospace', fontSize = '2em',
  4.   transform = 'skew(10deg) translateX(40px)'
  5.  
  6. N = '<br>';
  7.  
  8. (f=(_='*')=>(
  9.   b.innerHTML+=` <b style='opacity:${Math.random()+.2}'>${_}</b>`,f))('<pre>')
  10.   (   )(   )(   )(   )(N)
  11.    ('(')('0')('_')('_')(N)
  12.     ('-')(   )(   )('-')(N)
  13.      ('_')('_')('0')(')')(N)
  14.       ('-')(   )(   )('-')(N)
  15.        ('(')('0')('_')('_')(N)
  16.         ('-')(   )(   )('-')(N)
  17.          ('_')('_')('0')(')')(N)
  18.           ('-')(   )(   )('-')(N)
  19.            ('(')('0')('_')('_')(N)
  20.             (   )(   )(   )(   )

Not really sure what this is… just playing around…

With Style

  1. with(document.body.appendChild(
  2.       document.createElement('div')
  3.     ).style) 
  4.       height = '100px', 
  5.       background = 'red',
  6.       border = '3px solid blue',
  7.       transform = 'rotate(10deg)'

Was looking through some old code and saw something like this… people don’t like with and it doesn’t work in “strict mode”… I use it here on Snippet Zone for fun speed-coding stuff…

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