Merge pull request #25 from kfahn22/ornamental

Add option to sync data for some variables

code/L-system-two-rulesets/controls.js

@@ -1,25 +1,28 @@
 class AddControls {
-  constructor(pos, sliderValues, rulesetData, ruleChoice, shapeChoice, strokeChoice, fillChoice) {
+  constructor(
+    pos,
+    sliderValues,
+    rulesetData,
+    ruleChoice,
+    shapeChoice,
+    strokeChoice,
+    fillChoice
+  ) {
     this.backgroundDropdown = new PaletteDropdown(
-      pos,
-      145,
+      10,
+      260,
       "black",
       "Background Color"
     );
     this.backgrounddropdown = this.backgroundDropdown.dropdown;
     this.strokeDropdown = new PaletteDropdown(
       pos,
-      200,
+      145,
       strokeChoice,
       "Stroke Color"
     );
     this.strokedropdown = this.strokeDropdown.dropdown;
-    this.fillDropdown = new PaletteDropdown(
-      pos,
-      255,
-      fillChoice,
-      "Fill Color"
-    );
+    this.fillDropdown = new PaletteDropdown(pos, 200, fillChoice, "Fill Color");
     this.filldropdown = this.fillDropdown.dropdown;
     // Create an instance of the SliderGroup class
     this.sliderGroup = new SliderGroup(
@@ -70,10 +73,10 @@ class AddControls {
     // Whether to add P5 Grain library
     // Will slow down the render so I recommend keeping to false most of the time
     this.addP5Grain = createCheckbox("Add p5.Grain", false);
-    this.addP5Grain.position(pos, 405);
+    this.addP5Grain.position(10, 405);
     this.addP5Grain.style("color", "white");
-    this.removeRuleset = createCheckbox("Remove ruleset", false);
-    this.removeRuleset.position(1150, 450);
+    this.removeRuleset = createCheckbox("Remove second ruleset", false);
+    this.removeRuleset.position(900, 10);
     this.removeRuleset.style("color", "white");
 
     // Ensure checkboxes reflect initial values

code/L-system-two-rulesets/sketch.js

@@ -7,6 +7,9 @@ let rulesetData;
 // Control variables
 let images = [];
 
+//let backgroundDropdown;
+let syncVariables; // checkbox for whether the same translation and length variables are used for both Lsystems
+
 // Array to store dropdowns, sliderGroup, sliders, checkBoxes
 let lsystem0;
 let ruleChoice0 = "ADH231a";
@@ -80,30 +83,53 @@ function preload() {
 
 function setup() {
   canvas = createCanvas(800, 800);
-  canvas.position(340, 75);
+  canvas.position(360, 95);
   canvas.id("mycanvas");
   p5grain.setup();
- console.log(strokeChoice0, fillChoice0) ;
- console.log(strokeChoice1, fillChoice1);
-  lsystems.push(addLsystem(10, sliderValues0,  ruleChoice0, shapeChoice0, strokeChoice0, fillChoice0));
-  lsystems.push(addLsystem(1150, sliderValues1, ruleChoice1, shapeChoice1, strokeChoice1, fillChoice1));
+
+  syncVariables = createCheckbox(
+    "Use the same translation and length variables",
+    true
+  );
+  syncVariables.position(360, 10);
+  syncVariables.style("color", "white");
+
+  lsystems.push(
+    addLsystem(
+      10,
+      sliderValues0,
+      ruleChoice0,
+      shapeChoice0,
+      strokeChoice0,
+      fillChoice0
+    )
+  );
+  lsystems.push(
+    addLsystem(
+      1170,
+      sliderValues1,
+      ruleChoice1,
+      shapeChoice1,
+      strokeChoice1,
+      fillChoice1
+    )
+  );
   setSystemVariables(lsystems);
 }
 
 function updateValues(lsystem) {
-  let controls = lsystem[0];
+  //let controls = lsystem[0];
   let dropdowns = lsystem[1];
   let checkBoxes = lsystem[2];
   let sliderGroup = lsystem[3];
-  //let sliders = lsystem[4];
   let values = [];
   // Add ruleset, shape, palettes dropdown values
   for (let i = 0; i < dropdowns.length; i++) {
     //values.push(dropdowns[i].selected());
     values.push(dropdowns[i].value());
   }
   // Add values for addStroke, fillShape, and addP5Grain
-  for (let i = 0; i < 3; i++) {
+  for (let i = 0; i < 4; i++) {
     values.push(checkBoxes[i].checked());
   }
   let sliderValues = sliderGroup.getValues();
@@ -137,7 +163,14 @@ function reset() {
   setSystemVariables(lsystems);
 }
 
-function addLsystem(pos, sliderValues, ruleChoice, shapeChoice, strokeChoice, fillChoice) {
+function addLsystem(
+  pos,
+  sliderValues,
+  ruleChoice,
+  shapeChoice,
+  strokeChoice,
+  fillChoice
+) {
   let lsystem = [];
   let controls = new AddControls(
     pos,
@@ -169,20 +202,22 @@ function setSystemVariables(lsystems) {
   } else {
     n = 2;
   }
+
   for (let i = 0; i < n; i++) {
     // Array to hold the data of each Lsystem
     let lsystemData = [];
+
     let controls = lsystems[i][0];
     let values = updateValues(lsystems[i]);
+
     addp5Grain.push(lsystems[i][2][2]); // add addp5Grain checkBoxes to array
 
     // Set color palettes
-    let [currentBackgroundPalette, currentStrokePalette, currentFillPalette] =
-      controls.setPalettes(
-        values[2], // backgroundPalette
-        values[3], // strokePalette
-        values[4] // fillPalette
-      );
+    let [currentBackgroundPalette, currentStrokePalette, currentFillPalette] = controls.setPalettes(
+      values[2], // backgroundPalette
+      values[3], // strokePalette
+      values[4] // fillPalette
+    );
 
     background(currentBackgroundPalette[0]);
 
@@ -224,6 +259,14 @@ function setSystemVariables(lsystems) {
     ruleset.selectRule(ruleChoice);
     let lsystemData = ruleset.currentFractal;
 
+    // Whether same translation and grid length should be used for all L-systems
+    if (syncVariables.checked() && n == 2) {
+      lsystemValues[1][0][8] = lsystemValues[0][0][8];
+      lsystemValues[1][0][9] = lsystemValues[0][0][9];
+      lsystemValues[1][0][15] = lsystemValues[0][0][15];
+    }
+    //console.log(lsystemValues);
+
     // Get Shape data
     sliderValues.push(lsystemValues[i][0].slice(-18)); // -18
     let clrMode = lsystemValues[i][5];
@@ -265,7 +308,7 @@ function addMessages(shapeMessages, warnings) {
   } else addMessage = false;
 
   shapeMessage = createP(message);
-  shapeMessage.position(340, 0);
+  shapeMessage.position(360, 30);
   shapeMessage.addClass("p");
 
   if (addMessage) {
@@ -279,7 +322,7 @@ function addMessages(shapeMessages, warnings) {
   } else addWarning = false;
 
   ruleWarning = createP(warning);
-  ruleWarning.position(340, 30);
+  ruleWarning.position(360, 60);
   ruleWarning.addClass("p");
 
   if (addWarning) {

code/L-system-two-rulesets/sliders.js

@@ -102,7 +102,7 @@ class SliderGroup {
       );
       slider.addClass("slider");
       //slider.id("mySliders");
-      slider.position(pos + 10, 30 + i * 55);
+      slider.position(pos + 35, 30 + i * 55);
       slider.input(() => this.reset());
 
       // Create label