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

### 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-24 /// {s/z}