Snippet Zone

2x mod 1 Map

```
function twoXmodMap(start = 0.2) {
```

  const seed = () => Math.random() * Math.random() * start

```
  let xn = seed()
```
```
  let xn1
```
```
  let iter = 0
```
```
  return () => {
```
```
    iter++
```
```
    if (iter > 50) {
```
```
      xn = seed()
```
```
      iter = 0
```
```
    }
```
```
 
```
```
    // this is the key part:
```
```
    xn1 = (2 * xn) % 1
```
```
    xn = xn1
```
```
 
```
```
    return xn1
```
```
  }
```
```
}
```
```
 
```

const el = document.body.appendChild(document.createElement('div'))

```
el.innerHTML = `
```
```
  <svg>
```

    <path d="M 0 0 L 1 1" fill="none" stroke="red" />

```
  </svg>
```
```
  <style>
```
```
    svg, body, html {
```
```
      width: 100%;
```
```
      height: 100%;
```
```
      overflow: visible;
```
```
    }
```
```
  </style>
```
```
`
```
```
 
```
```
const path = el.querySelector('path')
```
```
let pathStr = ''
```
```
 
```
```
const map = twoXmodMap()
```
```
 
```
```
let x = 0
```
```
let yo = 0
```
```
let y;
```
```
function loop() {
```
```
  y = map()
```
```
  x += 2
```
```
 
```
```
  if (pathStr == '' || x > 300) {
```
```
    x = 10
```
```
    yo += 50
```
```
    pathStr += `M 10 ${yo}`
```
```
  } else {
```

    pathStr += ` L ${x} ${yo + y * 30} `

```
  }
```
```
 
```
```
  path.setAttribute('d', pathStr)
```
```
  window.requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Drawing the 2x mod 1 map.

October 28, 2021

// javascript // math // svg

Find a String Naive Hill Climbing

```
const target = 'snippetzone'.split``;
```
```
const leng = target.length;
```

const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split``;

```
 
```
```
function randomString() {
```
```
  let str = [];
```
```
  for (let i = 0; i < leng; i++) {
```
```
    str.push(randomChar());
```
```
  }
```
```
  return str;
```
```
}
```
```
 
```
```
function randomChar() {
```

  return alphabet[Math.floor(Math.random() * alphabet.length)];

```
}
```
```
 
```
```
let iterations = 0;
```
```
const search = randomString();
```
```
const indices = [];
```

for (var i = 0; i < leng; i++) indices.push(i);

```
let found = false;
```
```
 
```
```
function loop() {
```
```
  for (let i = 0; i < 10; i++) {
```
```
    if (indices.length > 0) {
```

      let ii = Math.floor(Math.random() * indices.length);

```
      let index = indices[ii];
```
```
      search[index] = randomChar();
```

      if (search[index] == target[index]) {

```
        indices.splice(ii, 1);
```
```
      }
```
```
      console.log(search.join(','));
```
```
      iterations++;
```
```
    } else {
```

      console.log('found after', iterations, 'iterations');

```
      found = true;
```
```
      break;
```
```
    }
```
```
  }
```
```
 
```
```
  if (!found) {
```
```
    requestAnimationFrame(loop);
```
```
  }
```
```
}
```
```
loop();
```

This is a port of an old snippet of mine. It naively and randomly finds a target string. In this case the string “snippetzone”.

It’s fun to see it randomly perform better/worse…


e,f,k,w,q,s,o,h,n,r,f
e,f,k,w,q,s,o,h,n,r,u
k,f,k,w,q,s,o,h,n,r,u
k,f,k,w,q,o,o,h,n,r,u
k,f,k,w,q,o,o,v,n,r,u
k,f,k,w,q,v,o,v,n,r,u
...
s,e,i,p,p,e,t,z,o,n,e
s,v,i,p,p,e,t,z,o,n,e
s,h,i,p,p,e,t,z,o,n,e
s,d,i,p,p,e,t,z,o,n,e
s,s,i,p,p,e,t,z,o,n,e
s,e,i,p,p,e,t,z,o,n,e
s,g,i,p,p,e,t,z,o,n,e
s,q,i,p,p,e,t,z,o,n,e
s,m,i,p,p,e,t,z,o,n,e
s,w,i,p,p,e,t,z,o,n,e
s,g,i,p,p,e,t,z,o,n,e
s,x,i,p,p,e,t,z,o,n,e
s,t,i,p,p,e,t,z,o,n,e
s,o,i,p,p,e,t,z,o,n,e
s,e,i,p,p,e,t,z,o,n,e
s,k,i,p,p,e,t,z,o,n,e
s,p,i,p,p,e,t,z,o,n,e
s,b,i,p,p,e,t,z,o,n,e
s,n,i,p,p,e,t,z,o,n,e
found after 176 iterations

October 27, 2021

// javascript // math // speed-coded // strings

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

Older Posts

Newer Posts

2x mod 1 Map

Find a String Naive Hill Climbing

Fast Sine and Cosine Approximation

isPowerOfTwo

Lerp

Recent

Archive