Snippet Zone

Oera Linda Inspired Symbols

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

```
  c = canvas.getContext("2d"),
```
```
  title = document.createElement("h1");
```
```
 
```

canvas.style.transformOrigin = "top left";

canvas.style.transform = "scale(0.5, 0.5)";

```
 
```
```
document.body.appendChild(canvas);
```
```
 
```

title.innerHTML = "Oera Linda Inspired Symbols";

```
document.body.appendChild(title);
```
```
 
```
```
var erase = function () {
```
```
  c.fillStyle = "#244250";
```

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

```
};
```
```
 
```
```
var shuffle = function () {
```
```
  return 0.5 - Math.random();
```
```
};
```
```
 
```
```
var Symbol = function (x, y, radius) {
```
```
  this.x = x;
```
```
  this.y = y;
```
```
  this.radius = radius;
```
```
  this.halfRadius = this.radius / 2;
```
```
  this.draw();
```
```
};
```
```
 
```
```
Symbol.ARC_NUM = 8;
```
```
Symbol.TOTAL_SEGS = 23;
```
```
Symbol.nodeMap = [
```

  // [node index][list of possible node connections]

```
  [7, 0, 9],
```
```
  [10, 0, 2],
```
```
  [11, 3, 1],
```
```
  [4, 2, 12],
```
```
  [3, 5, 13],
```
```
  [4, 6, 14],
```
```
  [5, 7, 15],
```
```
  [6, 0, 16],
```
```
  [0, 9],
```
```
  [8, 10, 11, 12, 13, 14, 15, 16],
```
```
  [1, 9],
```
```
  [2, 9],
```
```
  [3, 9],
```
```
  [4, 9],
```
```
  [5, 9],
```
```
  [6, 9],
```
```
  [7, 9]
```
```
];
```
```
 
```
```
Symbol.segMap = {
```

  // [node-node][segment function index]

```
  "0-1": 0,
```
```
  "1-2": 1,
```
```
  "2-3": 2,
```
```
  "3-4": 3,
```
```
  "4-5": 4,
```
```
  "5-6": 5,
```
```
  "6-7": 6,
```
```
  "7-0": 7,
```
```
 
```
```
  "0-8": 9,
```
```
  "8-9": 8,
```
```
 
```
```
  "9-10": 10,
```
```
  "9-11": 12,
```
```
  "9-12": 14,
```
```
  "9-13": 16,
```
```
  "9-14": 18,
```
```
  "9-15": 20,
```
```
  "9-16": 22,
```
```
 
```
```
  "1-10": 11,
```
```
  "2-11": 13,
```
```
  "3-12": 15,
```
```
  "4-13": 17,
```
```
  "5-14": 19,
```
```
  "6-15": 21,
```
```
  "7-16": 23
```
```
};
```
```
 
```
```
// add reverse node connection keys
```
```
for (var i in Symbol.segMap) {
```

  var key = i.split("-").reverse().join("-");

  Symbol.segMap[key] = Symbol.segMap[i];

```
}
```
```
 
```
```
// store all keys
```
```
Symbol.segMapKeys = [];
```
```
for (var i in Symbol.segMap) {
```
```
  Symbol.segMapKeys.push(i);
```
```
}
```
```
 
```
```
Symbol.prototype = {
```
```
  constructor: Symbol,
```

  arcSegLength: (Math.PI * 2) / Symbol.ARC_NUM,

```
  mirrors: [
```
```
    [-1, -1],
```
```
    [1, -1],
```
```
    [-1, 1]
```
```
  ],
```
```
 
```
```
  line: function (offset, isInner) {
```

    var theta = this.arcSegLength * offset,

```
      cos = Math.cos(theta),
```
```
      sin = Math.sin(theta),
```
```
      x1 = this.halfRadius * cos,
```
```
      y1 = this.halfRadius * sin,
```
```
      x2,
```
```
      y2;
```
```
 
```
```
    if (isInner) {
```
```
      x2 = 0;
```
```
      y2 = 0;
```
```
    } else {
```
```
      x2 = this.radius * cos;
```
```
      y2 = this.radius * sin;
```
```
    }
```
```
 
```
```
    c.beginPath();
```
```
    c.moveTo(x1, y1);
```
```
    c.lineTo(x2, y2);
```
```
    c.stroke();
```
```
  },
```
```
 
```
```
  arc: function (offset) {
```

    var step = this.arcSegLength * offset;

```
    c.beginPath();
```

    c.arc(0, 0, this.radius, step, step + this.arcSegLength, false);

```
    c.stroke();
```
```
  },
```
```
 
```
```
  drawAll: function () {
```
```
    c.save();
```
```
    c.translate(this.x, this.y);
```

    for (var i = 0; i <= Symbol.TOTAL_SEGS; i++) {

```
      this[i]();
```
```
    }
```
```
    c.restore();
```
```
  },
```
```
 
```
```
  sequence: function (num) {
```
```
    var keys = Symbol.segMapKeys,
```

      index = Math.floor(keys.length * Math.random()),

```
      curr = keys[index],
```
```
      seq = [curr];
```
```
 
```
```
    for (var i = 0; i < num; i++) {
```
```
      var comp = curr.split("-"),
```
```
        end = comp[1],
```
```
        begin = comp[0];
```
```
 
```

      for (var j = 0; j < keys.length; j++) {

```
        var cc = keys[j].split("-");
```

        if (cc[0] === end && cc[1] !== begin) {

```
          curr = keys[j];
```
```
          seq.push(curr);
```
```
          break;
```
```
        }
```
```
      }
```
```
    }
```
```
    return seq;
```
```
  },
```
```
 
```
```
  draw: function () {
```

    var steps = 1 + Math.floor(Math.random() * 5);

```
    (keys = this.sequence(steps)),
```
```
      (indices = []),
```
```
      (memory = {}),
```
```
      (mirrorProb = 0.3),
```
```
      (multiMirrorProb = 0.1),
```
```
      (mirrorIter = 1),
```
```
      (scales = []);
```
```
 
```
```
    c.lineWidth = 1;
```

    c.strokeStyle = "rgba(255,255,255,0.15)";

```
    this.drawAll();
```
```
 
```
```
    c.lineWidth = 2;
```
```
    c.strokeStyle = "rgb(255,255,255)";
```
```
 
```
```
    c.save();
```
```
    c.translate(this.x, this.y);
```

    for (var i = 0; i < keys.length; i++) {

      var index = Symbol.segMap[keys[i]];

```
      this[index]();
```
```
      indices.push(index);
```
```
    }
```
```
    c.restore();
```
```
 
```
```
    if (Math.random() < mirrorProb) {
```
```
      mirrorIter = 1;
```
```
 
```

      if (Math.random() < multiMirrorProb) {

        mirrorIter = 2 + Math.round(Math.random());

```
      }
```
```
 
```

      scales = this.mirrors.sort(shuffle);

```
 
```

      for (var i = 0; i < mirrorIter; i++) {

```
        c.save();
```
```
        c.translate(this.x, this.y);
```

        c.scale(scales[i][0], scales[i][1]);

        for (var j = 0; j < indices.length; j++) {

```
          this[indices[j]]();
```
```
        }
```
```
        c.restore();
```
```
      }
```
```
    }
```
```
  }
```
```
};
```
```
 
```
```
// arc partials:
```

for (var i = 0; i < Symbol.ARC_NUM; i++) {

```
  (function (i) {
```
```
    Symbol.prototype[i] = function () {
```
```
      this.arc(i);
```
```
    };
```
```
  })(i);
```
```
}
```
```
 
```
```
// line partials:
```
```
var j = 0;
```

for (var i = Symbol.ARC_NUM; i <= Symbol.TOTAL_SEGS; i += 2) {

```
  // inner
```
```
  (function (i, j) {
```
```
    Symbol.prototype[i] = function () {
```
```
      this.line(j, true);
```
```
    };
```
```
  })(i, j);
```
```
 
```
```
  // outer
```
```
  (function (i, j) {
```
```
    Symbol.prototype[i] = function () {
```
```
      this.line(j, false);
```
```
    };
```
```
  })(i + 1, j);
```
```
  j++;
```
```
}
```
```
 
```
```
var render = function () {
```
```
  var radius = 70,
```
```
    diameter = radius * 2,
```
```
    padding = 10,
```
```
    size = diameter + padding * 2,
```
```
    winWidth = window.innerWidth * 2,
```
```
    winHeight = window.innerHeight * 2,
```
```
    cols = Math.floor(winWidth / size),
```

    rows = Math.floor(winHeight / size),

```
    num = cols * rows,
```

    offX = Math.abs(winWidth - cols * size) / 2,

    offY = Math.abs(winHeight - rows * size) / 2;

```
 
```
```
  for (var i = cols; i < num; i++) {
```

    var x = offX + radius + (i % cols) * size;

    var y = offY + radius + parseInt(i / cols) * size;

```
    var s = new Symbol(x, y, radius);
```
```
  }
```
```
};
```
```
 
```
```
var renderTimeout;
```
```
var rerender = function () {
```
```
  clearInterval(renderTimeout);
```

  renderTimeout = setTimeout(render, 500);

```
};
```
```
 
```
```
var resize = function (e) {
```
```
  canvas.width = window.innerWidth * 2;
```

  canvas.height = window.innerHeight * 2;

```
  erase();
```
```
  if (e) {
```
```
    rerender();
```
```
  }
```
```
};
```
```
 
```

window.addEventListener("resize", resize);

```
resize();
```
```
render();
```
```
 
```

document.addEventListener("click", function () {

```
  erase();
```
```
  render();
```
```
});
```

Always fun to look through old codepen stuff…

See the Pen Better Oera Linda Inspired Symbols by Zevan Rosser (@ZevanRosser) on CodePen.

January 31, 2022

// canvas

Hamming Distance in JavaScript

```
function hamming(a, b) {
```
```
  const leng = a.length
```
```
  let dist = 0
```
```
 
```
```
  // strings need to be same length
```
```
  if (leng != b.length) return -1;
```
```
 
```
```
  a = a.toLowerCase()
```
```
  b = b.toLowerCase()
```
```
 
```
```
  for (let i = 0; i < leng; i++)
```
```
    if (a[i] !== b[i]) dist++
```
```
 
```
```
  return dist
```
```
}
```
```
 
```
```
console.log(hamming('zevan', 'kevin'))
```
```
console.log(hamming('joe', 'joe'))
```
```
console.log(hamming('john', 'jake'))
```

The hamming distance between two strings…

January 30, 2022

// javascript // math // strings

Canvas Ring on Image

const uploadInput = document.body.appendChild(

  Object.assign(document.createElement('input'), {

```
    type: 'file',
```
```
    accept: 'image/png, image/jpeg'
```
```
  })
```
```
)
```
```
uploadInput.style.display = 'block'
```
```
 
```

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

```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.style.width = '70%'
```
```
 
```
```
let sampleSize
```
```
const steps = 100
```
```
const step = (Math.PI * 2) / steps
```
```
 
```
```
let interval
```
```
 
```
```
const ring = () => {
```
```
  clearInterval(interval)
```
```
  let x = imageEl.width / 2,
```
```
    y = imageEl.height / 2,
```
```
    rad = imageEl.width * 0.3,
```
```
    theta = 0,
```
```
    px,
```
```
    py,
```
```
    pxs = [],
```
```
    spy = []
```
```
  ;(pys = []), (im = []), (rects = [])
```
```
 
```
```
  for (let i = 0; i < steps; i++) {
```
```
    px = x + rad * Math.cos(theta)
```

    py = y + (rad / 2) * Math.sin(theta)

```
    theta += step
```
```
    pxs[i] = px
```
```
    pys[i] = spy[i] = py
```

    im[i] = c.getImageData(px, py, sampleSize, sampleSize)

    rects[i] = [px, py, sampleSize, sampleSize]

```
  }
```
```
 
```
```
  interval = setInterval(() => {
```
```
    for (let i = 0; i < steps; i++) {
```
```
      pys[i] -= 1
```

      c.putImageData(im[i], pxs[i], pys[i])

```
      v = (y - spy[i]) / rad
```

      c.fillStyle = 'rgba(0,0,0,' + v + ')'

      c.fillRect(pxs[i] - 1, pys[i], sampleSize + 2, sampleSize - 1)

```
    }
```
```
  }, 16)
```
```
}
```
```
 
```
```
const imageEl = new Image()
```

imageEl.src = 'https://snippet.zone/wp-content/uploads/2022/01/taho-scaled.jpg'

```
imageEl.onload = () => {
```
```
  canvas.width = imageEl.width
```
```
  canvas.height = imageEl.height
```
```
  c.drawImage(imageEl, 0, 0)
```
```
  sampleSize = imageEl.width / 25
```
```
 
```
```
  ring()
```
```
}
```
```
 
```
```
const reader = new FileReader()
```
```
 
```
```
reader.addEventListener('load', () => {
```
```
  imageEl.src = reader.result
```
```
})
```
```
 
```

uploadInput.addEventListener('change', e => {

```
  const file = e.target.files[0]
```
```
  if (file != null) {
```
```
    reader.readAsDataURL(file)
```
```
  }
```
```
})
```

Upload an image and it will have a distortion ring drawn on it

January 29, 2022

// animation // canvas

Big Radio Button

```
document.body.innerHTML = `
```
```
  <p>Click/tap the radio button:</p>
```

  <input type="radio" style="transform:translate(20px, 30px) scale(4);background:red">

```
`;
```

I feel like at some point this didn’t work… nice to know it does now.

It will look different from browser to browser – as radio buttons do.

January 28, 2022

// tricks // ui

Airbrush-esque

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

```
const c = canvas.getContext('2d');
```
```
 
```

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

```
const brushC = brush.getContext('2d');
```
```
 
```
```
canvas.width = innerWidth;
```
```
canvas.height = innerHeight;
```
```
brush.width = innerWidth;
```
```
brush.height = innerHeight;
```
```
 
```
```
document.body.appendChild(canvas);
```
```
 
```
```
c.fillStyle = 'black'
```

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

```
 
```
```
let brushSize = 50;
```
```
let featherSize = .1;
```

let featherSteps = Math.floor(brushSize * featherSize) + 1;

```
let st = brushSize - featherSteps;
```
```
 
```
```
let a = 0;
```
```
if (st < 1) st = 1;
```
```
for (let i = 0; i < st; i++) {
```
```
  a = 1 / (st - i)
```

  c.strokeStyle = `rgba(255, 255, 255, ${a})`;

```
  console.log(c.strokeStyle)
```
```
  c.lineWidth = brushSize - i;
```
```
  c.lineJoin = 'round'
```
```
  c.lineCap = 'round'
```
```
  c.beginPath();
```
```
  c.moveTo(50, 50);
```
```
  c.lineTo(200, 200);
```

  c.bezierCurveTo(300, 200, 400, 200, 300, 400);

```
  c.stroke();
```
```
}
```

January 27, 2022

// canvas // javascript

Older Posts

Oera Linda Inspired Symbols

Hamming Distance in JavaScript

Canvas Ring on Image

Big Radio Button

Airbrush-esque

Recent

Archive