Snippet Zone

)

}

}

)

(

}

{

)

)

(

)

(

(

{

}

)

(

)

}

)

)

{

(

(

)

)

}

)

(

}

About All Posts Warning Random

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]

  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

0

snippet.zone ~ 2021-24 /// {s/z}