• Options

Board

This "Board" is an L-System Fractal. As such it's not very remarkable or famous mathematically, but I think it still looks quite pretty. Just like the Quadratic Snowflake or the Crystal.

It is generated by the L-System Algorithm with the following settings:

const board: Ruleset = {
    color: "#339ffc",
    minIterations: 1,
    maxIterations: 6,
    axiom: "F+F+F+F",
    replace: {
      F: "FF+F+F+F+FF",
    },
    angle: 90,
    initLength: (ctx) => Math.min(ctx.width, ctx.height) * 0.7,
    initTranslation: (ctx, initialLength) => [
      ctx.width / 2 - initialLength / 2,
      ctx.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: Sierpinski-Arrowhead, Hilbert Curve, 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),
};