Merge pull request #8 from kfahn22/two-shapes

add shape translation and modify heart curve
kfahn22 · Oct 11, 2024 · 3786c40 · 3786c40
2 parents b62635b + c15dee6
commit 3786c40
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 79 deletions.
diff --git a/code/L-system-two-rulesets/shapes.js b/code/L-system-two-rulesets/shapes.js
@@ -205,15 +205,18 @@ class Shape {
   }
 
   // heart curve equation from https://mathworld.wolfram.com/HeartCurve.html
+  // https://thecodingtrain.com/challenges/134-heart-curve
 
   heart() {
-    for (let theta = 0; theta < 2 * PI; theta += 0.05) {
-      const r =
-        2 -
-        2 * sin(theta) +
-        sin(theta) * (pow(abs(cos(theta)), 0.5) / (sin(theta) + 1.4));
-      const x = this.r * r * cos(theta);
-      const y = this.r * r * sin(theta);
+    for (let theta = 0; theta < 2 * PI; theta += 0.1) {
+      const x = 0.1 * this.r * 16 * pow(sin(theta), 3);
+      const y =
+        0.1 *
+        -this.r *
+        (13 * cos(theta) -
+          5 * cos(2 * theta) -
+          2 * cos(3 * theta) -
+          cos(4 * theta));
       this.points.push(createVector(x, y));
     }
   }

diff --git a/code/Shapes-playground-two-shapes/controls.js b/code/Shapes-playground-two-shapes/controls.js
@@ -20,25 +20,17 @@ class AddControls {
       values[0], // sw
       values[1], // strokeAlpha
       values[2], // fillAlpha
-      values[3] * width, // r
-      values[4], // a
-      values[5], // b
-      values[6], // m
-      values[7], // n1
-      values[8], // n2
-      values[9], // n3
-      values[10], // n
-      values[11], //  shape angle
-      // 4, // strokeWeight
-      // 0.2*width, // r
-      // 1, // a
-      // 1, // b
-      // 8, // m
-      // 1, // n1
-      // 1, // n2
-      // 1, // n3
-      // 1, // n
-      // 0, // shape angle
+      values[3], // wadj
+      values[4], // hadj
+      values[5] * width, // r
+      values[6], // a
+      values[7], // b
+      values[8], // m
+      values[9], // n1
+      values[10], // n2
+      values[11], // n3
+      values[12], // n
+      values[13] //  shape angle
     );
     this.sliders = this.sliderGroup.sliders;
     this.sliderValues = this.sliderGroup.getValues();

diff --git a/code/Shapes-playground-two-shapes/shape_ui.js b/code/Shapes-playground-two-shapes/shape_ui.js
@@ -54,15 +54,17 @@ class ShapeUI {
     let r = values[0]; 
     // Create a new Shape object with necessary parameters
     this.shape = new Shape(
-      values[0], // radius
-      values[1], // a
-      values[2], // b
-      values[3], // m
-      values[4], // n1
-      values[5], // n2
-      values[6], // n3
-      values[7], // n
-      radians(values[8]) // rotateShape
+      values[0], // x
+      values[1], // y
+      values[2], // radius
+      values[3], // a
+      values[4], // b
+      values[5], // m
+      values[6], // n1
+      values[7], // n2
+      values[8], // n3
+      values[9], // n
+      radians(values[10]) // rotateShape
     );
 
     this.shape.points = []; // Clear any existing points
@@ -76,8 +78,8 @@ class ShapeUI {
         break;
       case "Astroid":
         this.shape.astroid();
-        this.addMessage = true;
-        this.message = "The astroid is a f(a).";
+        // this.addMessage = true;
+        // this.message = "The astroid is a f(a).";
         break;
       case "Bicorn":
         this.shape.bicorn();

diff --git a/code/Shapes-playground-two-shapes/shapes.js b/code/Shapes-playground-two-shapes/shapes.js
@@ -1,7 +1,9 @@
 const e = 2.71828;
 
 class Shape {
-  constructor(r, a, b, m, n1, n2, n3, n, angle) {
+  constructor(x, y, r, a, b, m, n1, n2, n3, n, angle) {
+    this.x = x;
+    this.y = y;
     this.r = r;
     this.a = a;
     this.b = b;
@@ -26,8 +28,8 @@ class Shape {
   // https://mathworld.wolfram.com/Astroid.html
   astroid() {
     for (let theta = 0; theta < TWO_PI; theta += 0.05) {
-      let x = this.r * this.a * pow(cos(theta), 3);
-      let y = this.r * this.a * pow(sin(theta), 3);
+      let x = this.r * pow(cos(theta), 3);
+      let y = this.r * pow(sin(theta), 3);
       this.points.push(createVector(x, y));
     }
   }
@@ -165,7 +167,7 @@ class Shape {
       this.points.push(createVector(x, y));
     }
   }
-  
+
   // https://thecodingtrain.com/challenges/55-mathematical-rose-patterns
   // changed to flower
   flower() {
@@ -197,15 +199,18 @@ class Shape {
   }
 
   // heart curve equation from https://mathworld.wolfram.com/HeartCurve.html
+  // https://thecodingtrain.com/challenges/134-heart-curve
 
   heart() {
-    for (let theta = 0; theta < 2 * PI; theta += 0.05) {
-      const r =
-        2 -
-        2 * sin(theta) +
-        sin(theta) * (pow(abs(cos(theta)), 0.5) / (sin(theta) + 1.4));
-      const x = this.r * r * cos(theta);
-      const y = -this.r * r * sin(theta);
+    for (let theta = 0; theta < 2 * PI; theta += 0.1) {
+      const x = 0.1 * this.r * 16 * pow(sin(theta), 3);
+      const y =
+        0.1 *
+        -this.r *
+        (13 * cos(theta) -
+          5 * cos(2 * theta) -
+          2 * cos(3 * theta) -
+          cos(4 * theta));
       this.points.push(createVector(x, y));
     }
   }
@@ -371,6 +376,7 @@ class Shape {
 
   show() {
     push();
+    translate(this.x * width, this.y * height);
     rotate(this.angle);
     beginShape();
     for (let p of this.points) {
@@ -382,6 +388,7 @@ class Shape {
 
   openShow() {
     push();
+    translate(this.x * width, this.y * height);
     rotate(this.angle);
     beginShape();
     for (let p of this.points) {

diff --git a/code/Shapes-playground-two-shapes/sketch.js b/code/Shapes-playground-two-shapes/sketch.js
@@ -27,8 +27,10 @@ let shapeMessage = null;
 
 let sliderValues0 = [
   2, // strokeWeight
-  255,
-  150,
+  255, // stroke alpha
+  150, // fill alpha
+  0.0, // translate shape x
+  0.0, // translate shape y
   0.1, // r
   1, // a
   1, // b
@@ -42,8 +44,10 @@ let sliderValues0 = [
 
 let sliderValues1 = [
   2, // strokeWeight
-  255,
-  150,
+  255, // stroke alpha
+  150, // fill alpha
+  0.0, // translate shape x
+  0.0, // translate shape y
   0.1, // r
   1, // a
   1, // b
@@ -57,7 +61,7 @@ let sliderValues1 = [
 
 function setup() {
   canvas = createCanvas(600, 600);
-  canvas.position(240, 75);
+  canvas.position(240, 90);
 
   addShape = createCheckbox("Add second shape", false);
   addShape.position(400, 10);
@@ -82,7 +86,7 @@ function setup() {
 }
 
 function updateValues(shapeSystem) {
-  let controls = shapeSystem[0];
+  // let controls = shapeSystem[0];
   let dropdowns = shapeSystem[1];
   let checkBoxes = shapeSystem[2];
   let sliderGroup = shapeSystem[3];
@@ -95,6 +99,8 @@ function updateValues(shapeSystem) {
   for (let i = 0; i < 2; i++) {
     values.push(checkBoxes[i].checked());
   }
+
+  // Add slider values
   let sliderValues = sliderGroup.getValues();
   for (let s of sliderValues) {
     values.push(s);
@@ -122,7 +128,6 @@ function handleInput(shapeSystem) {
 
 function reset() {
   clear();
-  //shapeMessage.hide();
   setShape(shapeSystems);
 }
 
@@ -154,7 +159,6 @@ function addShapeSystem(
 
 function setShape(shapeSystems) {
   let shapeSystemValues = [];
-  //let sliderValues = [];
 
   let n; // # of shapes
   if (addShape.checked()) {
@@ -171,7 +175,6 @@ function setShape(shapeSystems) {
     let dropdowns = shapeSystems[i][1];
     let checkBoxes = shapeSystems[i][2];
     let values = updateValues(shapeSystems[i]);
-    //console.log(values);
 
     // Add all of the color choices to an array
     let colorChoices = [];
@@ -183,7 +186,7 @@ function setShape(shapeSystems) {
     fillChoice[3] = values[7];
     let addStroke = checkBoxes[0];
     let fillShape = checkBoxes[1];
-    
+
     colorChoices.push(strokeChoice);
     colorChoices.push(sw);
     colorChoices.push(addStroke);
@@ -195,35 +198,39 @@ function setShape(shapeSystems) {
     shapeData[2] = dropdowns;
     shapeData[3] = colorChoices;
     shapeSystemValues[i] = shapeData;
+
   }
 
   let shapes = [];
   let shapeNames = [];
   let shapeColorValues = [];
+  let shapeMessages = [];
   // Catch-all array for arcs, spirals, lissajous, zigzag
   let openShapes = ["Arc", "Cornu Spiral", "Lissajous", "Spiral", "Zigzag"];
 
   for (let i = 0; i < n; i++) {
     let shapeSystem = shapeSystemValues[i];
     let controls = shapeSystem[0];
     let values = shapeSystem[1];
-    //console.log(values)
     let dropdowns = shapeSystem[2];
 
     shapeColorValues.push(shapeSystem[3]);
 
     let bkdropdown = backgroundDropdown.dropdown;
     background(bkdropdown.value());
 
-    let shapeValues = values.slice(-9);
-
+    let shapeValues = values.slice(-11);
     let shape_ui = controls.shape_ui;
     let shapeName = dropdowns[0].value();
     shapeNames.push(shapeName);
 
     shape_ui.selectShape(shapeName, shapeValues);
     let shape = shape_ui.shape;
     shapes.push(shape);
+
+    // Add shape messages
+    let message = shape_ui.message;
+    shapeMessages.push(message);
   }
   // Render the shape
   push();
@@ -248,9 +255,37 @@ function setShape(shapeSystems) {
   }
 
   // let message = shape_ui.message;
-  // addMessages(message);
+  let messages = updateMessage(shapeMessages, n);
+  addMessages(messages);
 }
 
+// Adds a message if the choosen shape is a function of one of the shape parameters
+function updateMessage(messages, n) {
+  let message;
+  if (n > 1) {
+    if (
+      (messages[0] == messages[1] && messages[0] != null) ||
+      (messages[0] != null && messages[1] === null)
+    ) {
+      message = messages[0];
+    } else if (
+      messages[0] != null &&
+      messages[1] != null &&
+      messages[0] != messages[1]
+    ) {
+      message = messages[0] + " " + messages[1];
+    } else if (messages[0] == null && messages[1] != null) {
+      message = messages[1];
+    } else if (messages[0] == null && messages[0] == null) {
+      message = null;
+    }
+  } else {
+    message = messages;
+  }
+  return message;
+}
+
+
 // This function adds a message if the choosen shape is a function of the parameters (a, b, m, n, n1, n2, n3)
 function addMessages(message) {
   // If there's an old message, remove it
@@ -260,7 +295,7 @@ function addMessages(message) {
 
   if (message) {
     shapeMessage = createP(message); // Create a new paragraph with the message
-    shapeMessage.position(240, 20); // Set position for the message
+    shapeMessage.position(240, 25); // Set position for the message
     shapeMessage.style("font-size", "25px");
   }
 }

diff --git a/code/Shapes-playground-two-shapes/sliders.js b/code/Shapes-playground-two-shapes/sliders.js
@@ -4,6 +4,8 @@ class SliderGroup {
     sw,
     strokeAlpha,
     fillAlpha,
+    wadj,
+    hadj,
     radius,
     a,
     b,
@@ -37,7 +39,15 @@ class SliderGroup {
         label: "Stroke Alpha:",
       },
       { min: 100, max: 255, value: fillAlpha, step: 5, label: "Fill Alpha:" },
-      { min: 50, max: 400, value: radius, step: 5, label: "Shape radius:" },
+      { min: -0.5, max: 0.5, value: wadj, step: 0.05, label: "Translate x:" },
+      {
+        min: -0.5,
+        max: 0.5,
+        value: hadj,
+        step: 0.05,
+        label: "Translate y:",
+      },
+      { min: 10, max: 400, value: radius, step: 5, label: "Shape radius:" },
       { min: 0, max: 10, value: a, step: 0.01, label: "a:" },
       { min: 0, max: 20, value: b, step: 0.1, label: "b:" },
       { min: 0, max: 20, value: m, step: 1, label: "m:" },