rau options and fixes

docs/js/helper.js

@@ -101,17 +101,49 @@ async function fetchConfig(className) {
     ],
     RaysInShape: [
       { type: "range", min: 50, max: 1000, defaultValue: 300, property: "rays" },
-      { type: "range", min: 1, max: 1000, defaultValue: 2, property: "speed" },
+      { type: "range", min: 1, max: 30, defaultValue: 2, property: "speed" },
+      { type: "checkbox", defaultValue: true, property: "doesWave" },
+      { type: "range", min: 1, max: 200, defaultValue: 100, property: "speedVertRate" },
+      { type: "range", min: 1, max: 200, defaultValue: 100, property: "speedHorrRate" },
       { type: "range", min: 1, max: 200, defaultValue: 100, property: "speedVert" },
       { type: "range", min: 1, max: 200, defaultValue: 100, property: "speedHorr" },
       { type: "range", min: 10, max: 2000, defaultValue: 800, property: "boxSize" },
-      { type: "range", min: 10, max: 200, defaultValue: 50, property: "trailLength" },
+      { type: "range", min: 1, max: 200, defaultValue: 20, property: "trailLength" },
+      { type: "range", min: 1, max: 500, defaultValue: 5, property: "lineWidth" },
+      { type: "color", defaultValue: "#43dbad", property: "colourFree" },
+      { type: "color", defaultValue: "#f05c79", property: "colourContained" },
+      { type: "header", text: "--CollisionBox---" },
+      { type: "checkbox", defaultValue: false, property: "boxVisible" },
+      // {
+      //   type: "dropdown",
+      //   property: "exampleDropdown",
+      //   defaultValue: "",
+      //   options: [
+      //     { value: "", label: "None" },
+      //     { value: "field_white", label: "Field Whtie" },
+      //   ]
+      // },
+      // {
+      //   type: "button",
+      //   label: "Apply Background",
+      //   method: "applyBackground"
+      // }
+      // {
+      //   type: "range",
+      //   min: 1,
+      //   max: 10,
+      //   defaultValue: 5,
+      //   property: "magnitude",
+      //   callback: (instance, newValue) => instance.setMagnitude(newValue)
+      // },
 
     ],
   };
   return config[className];
 }
 
+
+
 function addControl(item, instance) {
   let parentDiv = document.getElementById("custom");
 
@@ -124,6 +156,7 @@ function addControl(item, instance) {
   if (item.type === "range") {
     control = document.createElement("input");
     control.type = "range";
+    control.id = "el" + item.property;
     control.min = item.min;
     control.max = item.max;
     control.value = item.defaultValue;
@@ -176,12 +209,24 @@ function addControl(item, instance) {
       instance[item.property] = newValue;
       title.innerText = item.property + ": " + newValue;
     })
-
+  }
+  else if (item.type === "checkbox") {
+    control = document.createElement("input");
+    control.type = item.type;
+    control.checked = item.defaultValue;
+    instance[item.property] = item.defaultValue;
+    control.id = "el" + item.property;
+    // control.height = "20px";
+    control.addEventListener("change", (event) => {
+      const newValue = event.target.checked;
+      instance[item.property] = newValue;
+      title.innerText = item.property + ": " + newValue;
+    })
   }
 
   if (item.type != "header") {
     control.className = "control";
-    control.id = "el" + item.property;
+    // control.id = "el" + item.property;
   }
 
   if (item.type != "button" && item.type != "header") {
@@ -192,6 +237,23 @@ function addControl(item, instance) {
   return { element: control };
 }
 
+function updateControlInput(value, controlName) {// Find and update the slider element
+  const elementSlider = document.querySelector('input[type="range"][id="el'+controlName+'"]');
+  if (elementSlider) {
+    // Update the slider value
+    elementSlider.value = value;
+
+    // Update the text display
+    const elementSliderText = document.getElementById('elTextspeedVert');
+    if (elementSliderText) {
+      elementSliderText.innerText = "speedVert: " + Math.round(this.speedVert);
+    }
+  }
+  console.log("Updated control input:", controlName, value);
+}
+
+
+
 function drawEyelid(width, x1, y1, colour) {
   x1 -= centerX;
   y1 -= centerY;
@@ -331,6 +393,15 @@ function waveNormal(x, max) {
   return val
 }
 
+function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
 function LerpHex(a, b, amount) {
   var ah = parseInt(a.replace(/#/g, ""), 16),
     ar = ah >> 16,
@@ -404,17 +475,17 @@ function rotatePointTmp(x, y, centerXX, centerYY, rotation) {
   console.log(Math.cos(orgAngle - rad(rotation)) * d)
   console.log(d)
   // console.log(d)
-  let newPointX = Math.cos(orgAngle - rad(rotation+90)) * d + centerXX;
+  let newPointX = Math.cos(orgAngle - rad(rotation + 90)) * d + centerXX;
-  let newPointY = Math.sin(orgAngle - rad(rotation+90)) * d + centerYY;
+  let newPointY = Math.sin(orgAngle - rad(rotation + 90)) * d + centerYY;
   return [newPointX, newPointY]
 }
 
-function rotatePoint(x,y,rotation){
+function rotatePoint(x, y, rotation) {
   let nCos = Math.cos(rad(rotation))
   // console.log(nCos*(180/Math.PI))
   // console.log(rad(rotation))
   let nSin = Math.sin(rad(rotation))
-  let newX = x*nCos - y*nSin
+  let newX = x * nCos - y * nSin
-  let newY = y*nCos + x*nSin
+  let newY = y * nCos + x * nSin
-  return [newX,newY]
+  return [newX, newY]
-}
+}

docs/js/objects.js

@@ -19,6 +19,7 @@ class BaseShape {
       if (element && listener) {
         element.removeEventListener("input", listener);
         element.removeEventListener("click", listener);
+        element.removeEventListener("change", listener);
       }
       if (element && element.parentElement) {
         element.parentElement.removeChild(element);
@@ -676,7 +677,7 @@ class NewWave extends BaseShape {
 }
 
 class RaysInShape extends BaseShape {
-  constructor(rays, speed, speedVert, speedHorr, boxSize, trailLength = 50) {
+  constructor(rays, speed, doesWave,speedVertRate, speedHorrRate,speedVert, speedHorr, boxSize, trailLength = 50, lineWidth, colourFree, colourContained, boxVisible,) {
     super();
     this.rays = rays;
     this.speed = speed;
@@ -686,9 +687,16 @@ class RaysInShape extends BaseShape {
     this.trailLength = trailLength;
     this.rayObjects = [];
     this.centerRays = []; // New array for rays heading to center
+    this.lineWidth = lineWidth;
+    this.boxVisible = boxVisible;
+    this.doesWave = doesWave;
+    this.colourFree = colourFree;
+    this.colourContained = colourContained;
+    this.speedHorrRate = speedHorrRate;
+    this.speedVertRate = speedVertRate;
   }
 
-  initialise(config) {
+  initialise(config) { //is overide
     for (let item of config) {
       const { element, listener } = addControl(item, this);
       this.controls.push({ element, listener });
@@ -700,10 +708,10 @@ class RaysInShape extends BaseShape {
     }, this);
     this.controls.push({ element: speedElement, listener: speedListener });
 
-    const { element: trailElement, listener: trailListener } = addControl({
+    // const { element: trailElement, listener: trailListener } = addControl({
-      type: "range", min: 5, max: 200, defaultValue: this.trailLength, property: "trailLength"
+    //   type: "range", min: 5, max: 200, defaultValue: this.trailLength, property: "trailLength"
-    }, this);
+    // }, this);
-    this.controls.push({ element: trailElement, listener: trailListener });
+    // this.controls.push({ element: trailElement, listener: trailListener });
 
     // Prepare rayObjects for the first draw
     this.prepareRayObjects();
@@ -798,21 +806,22 @@ class RaysInShape extends BaseShape {
         }
       }
 
-      // Draw all segments of the trail
+      // Draw segments
-      ctx.lineWidth = 3;
+
       for (let j = 1; j < ray.positions.length; j++) {
         const prev = ray.positions[j - 1];
         const curr = ray.positions[j];
 
-        // Fade color based on position in trail (newer = brighter)
+        // Fade alpha (newer = brighter)
         const alpha = (j / ray.positions.length) * 0.8 + 0.2;
 
         ctx.beginPath();
         ctx.moveTo(prev.x, prev.y);
         ctx.lineTo(curr.x, curr.y);
 
-        // Center-bound rays are pink
+        // Contained rays
-        ctx.strokeStyle = `rgba(255, 51, 170, ${alpha})`;
+        const col = hexToRgb(this.colourFree);
+        ctx.strokeStyle = `rgba(${col.r}, ${col.g}, ${col.b}, ${alpha})`;
         ctx.stroke();
       }
     }
@@ -821,6 +830,16 @@ class RaysInShape extends BaseShape {
   draw(elapsed, deltaTime) {
     deltaTime *= this.speedMultiplier / 100;
 
+    if (this.doesWave) {
+      const vertRate = this.speedVertRate /100;
+      const horrRate = this.speedHorrRate /100;
+      this.speedVert = Math.sin(elapsed / 10 * vertRate) * 100 + 100;
+      this.speedHorr = Math.sin(elapsed / 10 * horrRate) * 100 + 100;
+      updateControlInput(this.speedVert, "speedVert");
+      updateControlInput(this.speedHorr, "speedHorr");
+      console.log(this.controls)
+    }
+
     // Define the box boundaries
     const boxLeft = centerX - this.boxSize / 2;
     const boxRight = centerX + this.boxSize / 2;
@@ -828,10 +847,12 @@ class RaysInShape extends BaseShape {
     const boxBottom = centerY + this.boxSize / 2;
 
     // Draw the box boundary for visualization
-    ctx.strokeStyle = "white";
+    if (this.boxVisible) {
-    ctx.lineWidth = 1;
+      ctx.strokeStyle = "white";
-    ctx.strokeRect(boxLeft, boxTop, this.boxSize, this.boxSize);
+      ctx.lineWidth = 1;
-
+      ctx.strokeRect(boxLeft, boxTop, this.boxSize, this.boxSize);
+    }
+    ctx.lineWidth = this.lineWidth;
     // Process ray movements and collisions
     for (let j = 0; j < this.rayObjects.length; j++) {
       const ray = this.rayObjects[j];
@@ -945,7 +966,7 @@ class RaysInShape extends BaseShape {
       }
 
       // Draw the trail
-      ctx.lineWidth = 3;
+
 
       // Draw all segments of the trail
       for (let i = 1; i < ray.positions.length; i++) {
@@ -963,7 +984,9 @@ class RaysInShape extends BaseShape {
         if (curr.collision) {
           ctx.strokeStyle = `rgba(255, 255, 0, ${alpha})`;
         } else {
-          ctx.strokeStyle = `rgba(50, 50, 50, ${alpha})`;  // Changed from pink to gray
+          const col = hexToRgb(this.colourContained);
+          ctx.strokeStyle = `rgba(${col.r}, ${col.g}, ${col.b}, ${alpha})`;
+          // ctx.strokeStyle = `rgba(50, 50, 50, ${alpha})`;  // Changed from pink to gray
         }
 
         ctx.stroke();