• Options

Koch Snowflake

The Koch Snowflake is a famous fractal. It is also known as Koch Island and is closely related to the different versions of the Koch Curve. It's usually generated by recursively subdividing line segments by adding small triangles to them. Different variations with different angles for the created triangles exist.

What you see here is an L-System Implementation, which is generated by the L-System Algorithm with the following settings:

const kochSnowflake: Ruleset = {
  color: "#b1e5e8",
  minIterations: 1,
  maxIterations: 7,
  axiom: "F++F++F",
  replace: {
    F: "F-F++F-F",
  },
  angle: 60,
  initLength: (sizes) => Math.min(sizes.width, sizes.height) * 0.8,
  initTranslation: (sizes, initialLength) => [
    sizes.width / 2 - initialLength / 3,
    sizes.height / 2 + initialLength / 2,
  ],
  divideFactor: 3,
};

This fractal, by its nature as an L-System, is related to all the other L-System Fractals. A few you can check out: Hilbert Curve, Fern 1, and the Lévy Curve.

The alphabet to instructions set used to draw this fractal are the same as for the other L-Systems:

const drawRules: Record<string, () => void> = {
    V: () => {},
    W: () => {},
    X: () => {},
    Y: () => {},
    Z: () => {},
    G: drawForward,
    F: drawForward,
    f: () => ctx.translate(0, -len),
    "+": () => ctx.rotate(angle * rotationDirection),
    "-": () => ctx.rotate(angle * -rotationDirection),
    "|": () => ctx.rotate(180),
    "[": () => ctx.push(),
    "]": () => ctx.pop(),
    "#": () => (ctx.lineWidth = weight += weightIncrement) ,
    "!": () => (ctx.lineWidth = weight -= weightIncrement) ,
    ">": () => (len *= scale),
    "<": () => (len /= scale),
    "&": () => (rotationDirection = -rotationDirection),
    "(": () => (angle += angleIncrement),
    ")": () => (angle -= angleIncrement),
};