Published
Edited
Feb 27, 2019
Importers
1 star
// example L-Systems shown above
svgs = {
const examples = [
{ rules: { s: "[f++f++f]", f: "f+f--f+f" }, delta: Math.PI / 3, iter: 5 },
{
rules: { s: "[f-f-f-f-f-f-f-f]", f: "f---f+f+f+f+f+f+f---f" },
delta: Math.PI / 4,
iter: 6
},
{
rules: { s: "[x]", x: "-yf+xfx+fy-", y: "+xf-yfy-fx+" },
delta: Math.PI / 2,
iter: 7
},
{
rules: { s: "[a]", a: "a-b--b+a++aa+b-", b: "+a-bb--b-a++a+b" },
delta: Math.PI / 3,
iter: 5
}
];
return examples.map(toSvg);
}
probl = ({
rules: {
s: "[f]",
f: "a[kp!>/-g]/a[kp!>/+g]",
g: "a[kp!>/+f]/a[kp!>/-f]"
},
iter: 13,
// initial movement step distance
step: 20,
// initial direction
theta: -Math.PI / 2,
// rotation offset
delta: Math.PI / delta,
// direction jitter (percentage of delta, i.e. here 50%)
jitter: 0.5,
// initial survival chance
aliveProb: 0.99,
// decay factors for rotation, step, branch survival chance
decayDelta: decayDelta,
decayStep: decayStep,
decayAlive: decayAlive,
// use seedable PRNG for deterministic outcome
rnd: new r.XsAdd(0x7337c0de)
})
toSvg = ({ rules, iter, strokeWidth = 0.3, ...opts }) =>
g.asSvg(
g.svgDoc(
{ stroke: "#00f", "stroke-width": strokeWidth, width: 600, height: 600 },
...lsys
.interpret(
// create turtle instance with customized delta (rot angle)
lsys.turtle2d(opts),
// customize implementation to process syms "a" & "b" as "f"
{ ...impl, a: impl.f, b: impl.f },
// recursively expand start rule "s"
lsys.expand(rules, "s", iter)
//convert result paths to polylines for SVG export
)
.paths.map(g.polyline)
)
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
