diff --git a/docs/js/helper.js b/docs/js/helper.js index 6168753..f3460e9 100644 --- a/docs/js/helper.js +++ b/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 newPointY = Math.sin(orgAngle - rad(rotation+90)) * d + centerYY; + let newPointX = Math.cos(orgAngle - rad(rotation + 90)) * d + centerXX; + 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 newY = y*nCos + x*nSin - return [newX,newY] -} \ No newline at end of file + let newX = x * nCos - y * nSin + let newY = y * nCos + x * nSin + return [newX, newY] +} diff --git a/docs/js/objects.js b/docs/js/objects.js index 23b7483..3241347 100644 --- a/docs/js/objects.js +++ b/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({ - type: "range", min: 5, max: 200, defaultValue: this.trailLength, property: "trailLength" - }, this); - this.controls.push({ element: trailElement, listener: trailListener }); + // const { element: trailElement, listener: trailListener } = addControl({ + // type: "range", min: 5, max: 200, defaultValue: this.trailLength, property: "trailLength" + // }, this); + // 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 - ctx.lineWidth = 3; + // Draw segments + 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 - ctx.strokeStyle = `rgba(255, 51, 170, ${alpha})`; + // Contained rays + 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"; - ctx.lineWidth = 1; - ctx.strokeRect(boxLeft, boxTop, this.boxSize, this.boxSize); - + if (this.boxVisible) { + ctx.strokeStyle = "white"; + 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();