Snippet Zone

Low Resolution Sine Table

```
const sin = [
```

0,1,1,2,2,3,3,4,4,5,5,6,6,6,7,7,7,8,8,8,8,9,9,9,9,9,9,9,

9,9,9,9,9,9,9,9,9,9,9,8,8,8,8,7,7,7,6,6,5,5,5,4,4,3,3,2,2,

1,1,0,0,-1,-1,-2,-2,-3,-3,-4,-4,-4,-5,-5,-6,-6,-7,-7,-7,-8,

-8,-8,-9,-9,-9,-9,-10,-10,-10,-10,-10,-10,-10,-10,-10,-10,

-10,-10,-10,-10,-10,-10,-10,-10,-9,-9,-9,-9,-8,-8,-8,-7,-7,

-6,-6,-6,-5,-5,-4,-4,-3,-3,-2,-2,-1,-1,0];

```
 
```
```
const c = document.body.appendChild(
```
```
  document.createElement('canvas')
```
```
).getContext('2d');
```
```
 
```
```
const size = 200;
```

c.canvas.width = c.canvas.height = size;

```
 
```
```
let x = 0;
```
```
let tick = 0;
```
```
let xOff = 30;
```
```
let lines = 14;
```
```
let pad = 10;
```
```
let stagger = 8;
```
```
 
```
```
const loop = () => {
```
```
  tick++;
```
```
  c.fillStyle = 'red';
```
```
  c.fillRect(0, 0, size, size);
```
```
  c.fillStyle = 'white';
```
```
 
```
```
  for (let i = 0; i < size; i++) {
```
```
    for (let j = 1; j < lines; j++) { 
```

      x = xOff + sin[(i + j * stagger + tick) % 125];

```
      c.fillRect(x + j * pad, i, 1, 1);
```
```
    }
```
```
  }
```
```
  requestAnimationFrame(loop);
```
```
};
```
```
loop()
```

This is a low resolution sine table. I created this array to run on the original gameboy sometime last year… worked great for that…

November 3, 2021

// canvas // javascript // math

100 35 Ways

```
const _100 = 100;
```
```
 
```
```
const count = i => {
```
```
  document.body.innerHTML += 
```

    _100.toString(i) + ` :: ... ${i}<br>`

```
  i++ < 36 && count(i)
```
```
}
```
```
count(2)
```

Display 100 in many bases from binary to base 36… Today is the 100th post on Snippet Zone.

November 1, 2021

// javascript // math // strings

Random Trick

// multiply math random by another math random:

const value = Math.random() * Math.random() * 10;

```
 
```

// This makes it less likely that `value` will be 10

```
 
```

// the more times you multiply, the less likely you will be to reach

```
// the maximum potential value
```

const value = Math.random() * Math.random() * Math.random() * 10;

I use this a fair amount when creating artwork with code. I’ll usually use a seeded random though for more control.

I was thinking about different icons I might use in a node based programming environment to denote this use of random and after a little futzing around created this series of histograms:

```
function rand(n = 1, f = 1) {
```
```
  let value = 1;
```
```
  for (let i = 0; i < n; i++) {
```
```
    value *= Math.random();
```
```
  }
```
```
  // fixing the value so that it fits
```
```
  // nicely as a key in the hash table
```
```
 
```
```
  // hash = {
```
```
  //   0.2: 5,
```
```
  //   0.9: 8,
```
```
  //   etc...
```
```
  // }
```
```
  return value.toFixed(f);
```
```
}
```
```
 
```

function histo(n = 1, f = 2, off, iter = 1500, size = 70) {

```
  const vals = {};
```

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

```
  const c = canvas.getContext('2d');
```
```
 
```
```
  canvas.width = canvas.height = size;
```
```
  canvas.style.margin = '.5em';
```
```
  document.body.appendChild(canvas);
```
```
 
```
```
  for (let i = 0; i < iter; i++) {
```

    const randNum = off ? off - rand(n, f) : rand(n, f);

```
    if (vals[randNum] == null) {
```
```
      vals[randNum] = 1;
```
```
    } else {
```
```
      vals[randNum]++;
```
```
    }
```
```
  }
```
```
 
```
```
  c.fillStyle = '#ccc';
```
```
  c.fillRect(0, 0, size, size);
```
```
  c.strokeRect(0, 0, size, size);
```
```
  for (let i in vals) {
```
```
    const x = parseFloat(i) * size;
```
```
    c.beginPath();
```
```
    c.moveTo(x, size);
```
```
    c.lineTo(x, size - vals[i]);
```
```
    c.stroke();
```
```
  }
```
```
}
```
```
 
```
```
histo();
```
```
histo(2);
```
```
histo(3, 2, 1);
```
```
histo(5, 2, 1);
```
```
histo(6, 2, 0, 500);
```

October 31, 2021

// javascript // math // random // speed-coded

Random Walk to Target

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

```
const c = canvas.getContext('2d');
```
```
 
```
```
let targetX, targetY, startX, startY;
```
```
const rectSize = 20;
```
```
const maxStep = 10;
```
```
 
```
```
const matchStep = maxStep / 2;
```
```
const halfRectSize = rectSize / 2;
```
```
let matchTime = 0;
```
```
const resetTime = 20;
```
```
 
```
```
function randX() {
```

  return innerWidth * 0.8 * Math.random() + innerWidth * 0.1;

```
}
```
```
function randY() {
```

  return innerHeight * 0.8 * Math.random() + innerHeight * 0.1;

```
}
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth;
```
```
  canvas.height = innerHeight;
```
```
  reset();
```
```
}
```

window.addEventListener('resize', resize);

```
resize();
```
```
 
```
```
document.body.appendChild(canvas);
```
```
document.body.style.margin = 0;
```
```
 
```
```
function reset() {
```
```
  matchTime = 0;
```
```
  targetX = randX();
```
```
  targetY = randY();
```
```
  startX = randX();
```
```
  startY = randY();
```
```
  c.fillStyle = '#ccc';
```

  c.fillRect(0, 0, innerWidth, innerHeight);

```
 
```
```
  c.fillStyle = '#c79500';
```
```
  c.fillRect(
```
```
    targetX - halfRectSize,
```
```
    targetY - halfRectSize,
```
```
    rectSize,
```
```
    rectSize
```
```
  );
```
```
 
```
```
  c.fillStyle = '#4e82c7';
```

  c.fillRect(startX - halfRectSize, startY - halfRectSize, rectSize, rectSize);

```
}
```
```
 
```
```
function loop() {
```
```
  c.strokeStyle = 'black';
```
```
  c.beginPath();
```
```
  c.moveTo(startX, startY);
```
```
  if (startX < targetX) {
```
```
    startX += Math.random() * maxStep;
```
```
  } else if (startX > targetX) {
```
```
    startX -= Math.random() * maxStep;
```
```
  }
```
```
  if (startY < targetY) {
```
```
    startY += Math.random() * maxStep;
```
```
  } else if (startY > targetY) {
```
```
    startY -= Math.random() * maxStep;
```
```
  }
```
```
 
```
```
  c.lineTo(startX, startY);
```
```
  c.stroke();
```
```
 
```
```
  if (
```

    Math.abs(startX - targetX) < matchStep &&

    Math.abs(startY - targetY) < matchStep

```
  ) {
```
```
    matchTime++;
```
```
    if (matchTime > resetTime) {
```
```
      reset();
```
```
    }
```
```
  }
```
```
 
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Randomly walk to a target.

October 29, 2021

// canvas // javascript // math

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

Older Posts

Newer Posts

Low Resolution Sine Table

100 35 Ways

Random Trick

Random Walk to Target

2x mod 1 Map

Recent

Archive