)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
} ### 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

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