Snippet Zone

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

Flower of Life Canvas

```
((
```
```
  d = document,
```
```
  b = d.body,
```
```
  rad = (innerWidth * 1.9) / 6,
```
```
  theta = 0,
```
```
  thetaSpeed = 0.03,
```
```
  cx = innerWidth / 4,
```
```
  cy = innerHeight / 4,
```
```
  ox = 0,
```
```
  oy = 0,
```
```
  offTheta,
```
```
  x, y, ang, step, blur,
```
```
  _
```
```
) => {
```
```
  Object.assign(b.style, {
```
```
    background: 'black',
```
```
    margin: 0
```
```
  }) 
```
```
 
```

  blur = Object.assign(d.createElement`canvas`, {

```
    width: innerWidth * 2,
```
```
    height: innerHeight * 2
```
```
  }).getContext`2d`
```
```
 
```
```
  with (Math) {
```
```
    with (b.appendChild(
```

      Object.assign(d.createElement`canvas`, {

```
        width: innerWidth * 2,
```
```
        height: innerHeight * 2
```
```
      })
```
```
    ).getContext`2d`) {
```
```
      Object.assign(canvas.style, {
```
```
        width: '100%',
```
```
        height: '100%'
```
```
      })
```
```
 
```
```
      onresize = () => {
```

        blur.canvas.width = canvas.width = innerWidth * 2

        blur.canvas.height = canvas.height = innerHeight * 2

```
        rad = (innerWidth * 2.5) / 6
```
```
        cx = innerWidth
```
```
        cy = innerHeight
```
```
        fillStyle = '#000'
```

        fillRect(0, 0, canvas.width, canvas.height)

```
      }
```
```
      onresize()
```
```
 
```
```
      step = (PI * 2) / 6
```
```
 
```
```
      _ = t => {
```
```
        ang = ~~(t / 500) % 7
```
```
 
```
```
        globalAlpha = 0.23
```
```
        fillStyle = '#fff'
```
```
 
```
```
        if (ang > 0) {
```
```
          offTheta = step * ang
```
```
          ox = rad * cos(offTheta)
```
```
          oy = rad * sin(offTheta)
```
```
        } else {
```
```
          ox = 0
```
```
          oy = 0
```
```
        }
```
```
 
```
```
        for (i = 0; i < 20; i++) {
```

          x = ox + cx + rad * cos(theta)

          y = oy + cy + rad * sin(theta)

```
          theta += thetaSpeed
```
```
 
```
```
          fillRect(x, y, 4, 4)
```
```
        }
```
```
 
```
```
        blur.drawImage(canvas, 0, 0)
```
```
 
```
```
        globalAlpha = 0.05
```
```
        drawImage(blur.canvas, 0, 2)
```
```
 
```
```
        requestAnimationFrame(_)
```
```
      }
```
```
      _()
```
```
    }
```
```
  }
```
```
})()
```

Speed coded animated flower of life on canvas

October 20, 2021

// animation // canvas // javascript // math // obfuscation // speed-coded

Older Posts

Newer Posts

Find a String Naive Hill Climbing

Fast Sine and Cosine Approximation

isPowerOfTwo

Lerp

Flower of Life Canvas

Recent

Archive