Snippet Zone

Fast Sine and Cosine Approximation

```
let t = 0, cos, sin, x, y;
```
```
 
```
```
const PI = Math.PI;
```
```
const TWO_PI = PI * 2;
```
```
const HALF_PI = PI / 2;
```
```
const tA = 4 / PI;
```
```
const tB = 4 / PI ** 2;
```
```
 
```

const canvas = document.body.appendChild(document.createElement('canvas'));

```
const c = canvas.getContext('2d');
```
```
canvas.width = canvas.height = 300;
```
```
 
```
```
function loop() {
```
```
  // low precision sine/cosine
```
```
  // always wrap input angle to -PI..PI
```
```
  t += 0.1;
```
```
  if (t < -PI) {
```
```
    t += TWO_PI;
```
```
  } else if (t > PI) {
```
```
    t -= TWO_PI;
```
```
  }
```
```
 
```
```
  // compute sine
```
```
  if (t < 0) {
```
```
    sin = tA * t + tB * t * t;
```
```
  } else {
```
```
    sin = tA * t - tB * t * t;
```
```
  }
```
```
 
```

  // compute cosine: sin(t + PI/2) = cos(t)

```
  t += HALF_PI;
```
```
  if (t > PI) {
```
```
    t -= TWO_PI;
```
```
  }
```
```
 
```
```
  if (t < 0) {
```
```
    cos = tA * t + tB * t * t;
```
```
  } else {
```
```
    cos = tA * t - tB * t * t;
```
```
  }
```
```
 
```
```
  t -= HALF_PI; // move the shape
```
```
 
```
```
  x = 110 + 100 * cos;
```
```
  y = 110 + 100 * sin;
```
```
 
```

  c.fillStyle = 'rgba(100, 100, 20, .5)';

```
  c.fillRect(x, y, 10, 10);
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
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.

October 26, 2021

// javascript // math // tricks

isPowerOfTwo

```
function isPowerOfTwo(value) {
```

  return (value & (value - 1)) === 0 && value !== 0;

```
}
```
```
 
```
```
for (let i = 0; i < 66; i++) {
```
```
  console.log(i, isPowerOfTwo(i));
```
```
}
```

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…

October 25, 2021

// javascript // math

Lerp

const lerp = (a, b, t) => a + (b - a) * t;

```
 
```
```
console.log(lerp(0, 100, 0.5));
```
```
console.log(lerp(0, 100, 0.1));
```
```
 
```
```
console.log(lerp(50, 100, 0.5));
```
```
console.log(lerp(100, 50, 0.5));
```
```
 
```

const c = document.body.appendChild(document.createElement`canvas`)

```
  .getContext`2d`;
```
```
c.canvas.width = c.canvas.height = 100;
```
```
c.fillStyle = 'black';
```
```
c.fillRect(0, 0, 100, 100);
```
```
 
```
```
let time = 0;
```
```
const loop = () => {
```

  c.fillStyle = 'rgba(255, 255, 255, .5)';

```
 
```
```
  time += 0.01;
```
```
 
```
```
  if (time < 1) {
```

    c.fillRect(lerp(10, 55, time), lerp(10, 90, time), 5, 5);

```
  }
```
```
  window.requestAnimationFrame(loop);
```
```
};
```
```
loop();
```

October 24, 2021

// canvas // javascript // math

Obfuscated Pre

```
b = document.body
```
```
with(b.style) 
```

  fontFamily = 'monospace', fontSize = '2em',

  transform = 'skew(10deg) translateX(40px)'

```
 
```
```
N = '<br>';
```
```
 
```
```
(f=(_='*')=>(
```

  b.innerHTML+=` <b style='opacity:${Math.random()+.2}'>${_}</b>`,f))('<pre>')

```
  (   )(   )(   )(   )(N)
```
```
   ('(')('0')('_')('_')(N)
```
```
    ('-')(   )(   )('-')(N)
```
```
     ('_')('_')('0')(')')(N)
```
```
      ('-')(   )(   )('-')(N)
```
```
       ('(')('0')('_')('_')(N)
```
```
        ('-')(   )(   )('-')(N)
```
```
         ('_')('_')('0')(')')(N)
```
```
          ('-')(   )(   )('-')(N)
```
```
           ('(')('0')('_')('_')(N)
```
```
            (   )(   )(   )(   )
```

Not really sure what this is… just playing around…

October 23, 2021

// codegolf // javascript // obfuscation // speed-coded // strings

With Style

```
with(document.body.appendChild(
```
```
      document.createElement('div')
```
```
    ).style) 
```
```
      height = '100px', 
```
```
      background = 'red',
```
```
      border = '3px solid blue',
```
```
      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…

October 22, 2021

// javascript // speed-coded

Older Posts

Newer Posts

Fast Sine and Cosine Approximation

isPowerOfTwo

Lerp

Obfuscated Pre

With Style

Recent

Archive