Snippet Zone

CoffeeScript Ikeda Map

canvas = document.querySelector "canvas"

```
c = canvas.getContext "2d"
```
```
locX = 120
```
```
locY = 400
```
```
xn1 = xn = yn1 = yn = tn = 0
```
```
u = .7
```
```
steps = 10
```
```
iterations = 200
```
```
scale = 180
```
```
 
```
```
c.fillStyle = "black"
```

c.fillRect 0, 0, canvas.width, canvas.height

```
c.fillStyle = "rgba(255,255,255,0.2)"
```
```
 
```
```
run = setInterval ->
```
```
  clearInterval run if u > 1
```
```
  i = 0
```
```
 
```
```
  while i < steps
```
```
    u += 0.00015
```
```
    j = 0
```
```
 
```
```
    while j < iterations
```
```
      xn = xn1
```
```
      yn = yn1
```

      tn = 0.4 - (6 / (1 + xn * xn + yn * yn))

      xn1 = 1 + u * (xn * Math.cos(tn) - yn * Math.sin tn)

      yn1 = u * (xn * Math.sin(tn) + yn * Math.cos tn)

      c.fillRect locX + xn1 * scale, locY + yn1 * scale, 1, 1

```
      j++
```
```
    i++
```
```
, 30
```

I do quite miss CoffeeScript sometimes… here is an old codepen of the Ikeda Map:

See the Pen Ikeda Map by Zevan Rosser (@ZevanRosser) on CodePen.

February 17, 2022

// animation // canvas // graphics

CSS Checkbox

```
<div class="toggle">
```

  <input class="check" type="checkbox" tabindex="0">

```
  <label></label>
```
```
</div>
```
```
 
```
```
<style>
```
```
  .toggle {
```
```
    position: relative;
```
```
  }
```
```
  .check {
```
```
    position: absolute;
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    margin: 0;
```
```
    opacity: 0;
```
```
    cursor: pointer;
```
```
  }
```
```
  label {
```
```
    position: absolute;
```
```
    pointer-events: none;
```
```
    content: '';
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    background: black;
```
```
    cursor: pointer
```
```
  }
```
```
  .check:checked + label {
```
```
    background: red;
```
```
  }
```
```
</style>
```

Quick css checkbox. I used to do this all the time and feel like maybe there was a better way… anyway, this is what I did to get it working fast…

February 16, 2022

// css // html // ui

Soundex

```
// Minimum length of Soundex keys.
```
```
var minLength = 4
```
```
 
```

// Soundex values belonging to characters.

// This map also includes vowels (with a value of 0) to easily distinguish

```
// between an unknown value or a vowel.
```
```
var map = {}
```
```
 
```

map.a = map.e = map.i = map.o = map.u = map.y = 0

```
map.b = map.f = map.p = map.v = 1
```

map.c = map.g = map.j = map.k = map.q = map.s = map.x = map.z = 2

```
map.d = map.t = 3
```
```
map.l = 4
```
```
map.m = map.n = 5
```
```
map.r = 6
```
```
 
```
```
/**
```

 * Get the soundex key from a given value.

```
 *
```
```
 * @param {string} value
```
```
 * @param {number} [maxLength=4]
```
```
 * @returns {string}
```
```
 */
```
```
function soundex(value, maxLength) {
```

  var lowercase = String(value).toLowerCase()

```
  /** @type {Array.<string|number>} */
```
```
  var results = []
```
```
  var index = -1
```
```
  /** @type {string} */
```
```
  var character
```
```
  /** @type {number} */
```
```
  var previous
```
```
  /** @type {number} */
```
```
  var phonetics
```
```
 
```
```
  while (++index < lowercase.length) {
```
```
    character = lowercase.charAt(index)
```
```
    phonetics = map[character]
```
```
 
```
```
    if (index === 0) {
```
```
      // Initial letter
```

      results.push(character.toUpperCase())

    } else if (phonetics && phonetics !== previous) {

```
      // Phonetics value
```
```
      results.push(phonetics)
```
```
    } else if (phonetics === 0) {
```
```
      // Vowel
```
```
      phonetics = null
```
```
    } else {
```

      // Unknown character (including H and W)

```
      phonetics = previous
```
```
    }
```
```
 
```
```
    previous = phonetics
```
```
  }
```
```
 
```

  return pad(results.join('')).slice(0, maxLength || minLength)

```
}
```
```
 
```
```
/**
```

 * Pad a given value with zero characters. The function only pads four characters.

```
 *
```
```
 * @param {string} value
```
```
 * @returns {string}
```
```
 */
```
```
function pad(value) {
```
```
  var length = minLength - value.length
```
```
  var index = -1
```
```
 
```
```
  while (++index < length) {
```
```
    value += '0'
```
```
  }
```
```
 
```
```
  return value
```
```
}
```
```
 
```
```
console.log(
```
```
  soundex('Joe'),
```
```
  soundex('Smith'),
```
```
  soundex('Ed'), 
```
```
  soundex('Vilowat')
```
```
)
```

Was talking with someone about Soundex… I grabbed this implementation from the soundex-code npm package from Titus Wormer…

Soundex has always been super interesting to me for some reason.

February 15, 2022

// javascript // strings

Little Galaxy ES5

var canvas = document.createElement('canvas'),

```
    c = canvas.getContext('2d'), 
```
```
    SIZE = 350;
```
```
 
```
```
canvas.width = SIZE;
```
```
canvas.height = SIZE;
```
```
 
```
```
document.body.appendChild(canvas);
```
```
 
```
```
c.fillStyle = 'black';
```
```
c.fillRect(0, 0, SIZE, SIZE);
```
```
 
```
```
c.fillStyle = 'white';
```
```
 
```
```
var spa = function(ts) {
```
```
  var r = 0, t =  0;
```

  var jitterX, jitterY, jitterT, jitterR;

```
  for (var i = 0; i < 100; i += 0.5) {
```
```
    t = ts + i / 15;
```
```
    r = i;
```
```
    jitterR = 5 + i / 5;
```

    jitterT = Math.random() * 2 * Math.PI;

    jitterX = Math.random() * jitterR * Math.sin(jitterT);

    jitterY = Math.random() * jitterR * Math.cos(jitterT);

    c.fillStyle = `hsl(${t / Math.PI * 180}deg, 50%, 50%)`;

```
    c.fillRect(
```

      SIZE / 2 + r * Math.cos(t) + jitterX,

      SIZE / 2 + r * Math.sin(t) + jitterY,

```
      3, 3
```
```
    );
```
```
  }
```
```
}
```
```
 
```
```
spa(0);
```
```
spa(Math.PI);
```

I made this in response to a question from a friend of mine a few years back…

February 14, 2022

// canvas // graphics

Object Key Order and Reflect.ownKeys

const obj = { 11: 'eleven', 23: 'twenty-three', 1: 'one', 2: 'two', '-1': 'negative 1' };

```
 
```
```
console.log(Reflect.ownKeys(obj))
```

I noticed that for in.. over an object was giving me weirdly consistent results across all browsers the other day and stumbled upon this.

Great news, but it’s Reflect.ownKeys for me… now that IE11 is dying/dead.

February 13, 2022

// arrays // objects // oldschool

Older Posts

Newer Posts

CoffeeScript Ikeda Map

CSS Checkbox

Soundex

Little Galaxy ES5

Object Key Order and Reflect.ownKeys

Recent

Archive