diff --git a/code/L-system-playground/sketch.js b/code/L-system-playground/sketch.js index 25c3eeb..cd91edf 100644 --- a/code/L-system-playground/sketch.js +++ b/code/L-system-playground/sketch.js @@ -36,9 +36,6 @@ function setup() { canvas.position(175, 75); canvas.id("mycanvas"); p5grain.setup(); - // for (let s of sliders) { - // s.id("sliders"); - // } controls = addLsystem(); } diff --git a/docs/instructions.md b/docs/instructions.md index 9f57260..1d02487 100644 --- a/docs/instructions.md +++ b/docs/instructions.md @@ -1,37 +1,60 @@ # Instructions - WIP -There are multiple sliders and three sets of dropdowns for each visualization. (While the majority of the rule-sets render fractals, a few just render multiple copies of the shape in interesting ways.) - -This code as the sliders for the first L-system, setting the translation, fractal level to 5, the grid length to 20, strokeweight to 2, alpha to 145, of the scale of the shape to 1/2 of the grid size. The L-system rotation are both set to zero. The remaining numbers are the shape parameters. - -`[sliders0, sliderLabels0] = addSliders( - 10, - "first", - 0.0, - 1.0, - 5, - 20, - 2, - 145, - 0.5, - 0, - 0, - 1.5, - 2.5, - 6, - 1, - 1, - 1, - 1 - );` - -The next lines add the three dropdowns for the first L-system, setting the Hilbert curve as the fractal, the gear curve as the shape, and the color palette to raspberry. - -`ruleDropdown0 = addRuleDropdown(x, 5, "hilbert");` - `shapeDropdown0 = addShapesDropdown(x, 50, "gear");` - `paletteDropdown0 = addPalettes(x, 95, "raspberry");` - -

Hilbert curve with gear curve

+ +## Options + +1. Choose one or two rulesets (default). Press "Remove second ruleset" checkbox to remove the second ruleset. Dropdowns and sliders remain but ruleset will be gone. + +2. Choose the rulseset from the ruleset dropdown. + +See ruleset-dropdown.js and ruleset.json files. + + Because I was have an issue with the sketch slowing down or freezing, I have imposed limits (maxLevel field in the ruleset.json file) on the level for most of the rulesets. A message will pop up if you try to increase the level beyond the maxLevel I have imposed. You can find the code in the addLsystem() function in the turtle.js file. + +```JAVASCRIPT +if (level > this.maxLevel) { + this.addWarning = true; + params[0] = this.maxLevel; + this.levelWarning(params, colorParams, ruleChoices); + } else { + this.ruleWarnings[index] = null; + this.render(params, colorParams); + } +``` + +You might also want to be careful about increasing the level for certain curves, most significantly the "rose" curve. + +3. Choose a shape/curve from the shapes dropdown. + +```JAVASCRIPT +constructor(r, a, b, m, n1, n2, n3, n, d, angle) { + this.r = r; + this.a = a; + this.b = b; + this.n1 = n1; + this.n2 = n2; + this.n3 = n3; + this.m = m; + this.n = n; + this.d = d; + this.angle = angle; + this.points = []; +} +``` + + +See shape_ui.js and shape.js + +4. Adjust shape parameters. If the shape is a function of the slider parameters, a message will pop up. + + + +TODO: add pic of sliders + +4. Choose color palettes, strokeWeight, and alpha + +See palette-dropdown.js file + ## Palettes