From 28040b38f9d940bd255e65a3ecd13be15ad11b3d Mon Sep 17 00:00:00 2001 From: Sam <34695753+SamEyeBam@users.noreply.github.com> Date: Mon, 21 Apr 2025 18:15:23 +1200 Subject: [PATCH] Mobile ui, bug fixes --- docs/css/styles.css | 29 ++++++++++++++-- docs/index.html | 4 +-- docs/js/helper.js | 10 +++--- docs/js/index.js | 85 ++++++++++++++++++++++++--------------------- docs/js/objects.js | 4 +-- 5 files changed, 81 insertions(+), 51 deletions(-) diff --git a/docs/css/styles.css b/docs/css/styles.css index 612d6e4..3cf8c37 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -1,3 +1,6 @@ +:root { + color-scheme: dark; +} body { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ @@ -25,7 +28,14 @@ canvas { padding: 0px 20px 0px 20px; width: 500px; height: 100vh; - background-color: rgb(189, 189, 189); + background-color: rgba(32, 32, 32, 0.616); + overflow-y: scroll; +} +@media screen and (max-width: 768px) { + #toolbar { + width: 100%; /* Full width on mobile */ + padding: 0px 10px; /* Slightly reduced padding for mobile */ + } } #custom { @@ -37,7 +47,22 @@ canvas { padding: 0px 20px 0px 20px; /* width: 500px; */ /* height: 100vh; */ - background-color: rgb(189, 189, 189); + /* background-color: rgba(32, 32, 32, 0.616); */ +} + +#custom p{ + color: #e0e0e0; + font-family: Roboto, system-ui; +} +#toolbar p{ + color: #e0e0e0; + font-family: Roboto, system-ui; +} + +.header { + text-align: center; + font-weight: bold; + padding: 12px 0px 0px 2px; } .button { diff --git a/docs/index.html b/docs/index.html index 5181340..233b808 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,7 +1,7 @@ - + Document @@ -55,6 +55,6 @@ - + \ No newline at end of file diff --git a/docs/js/helper.js b/docs/js/helper.js index 6ddcfb1..fc6e4af 100644 --- a/docs/js/helper.js +++ b/docs/js/helper.js @@ -100,7 +100,7 @@ async function fetchConfig(className) { { type: "range", min: 100, max: 1000, defaultValue: 100, property: "limiter" }, ], RaysInShape: [ - { type: "range", min: 50, max: 1000, defaultValue: 300, property: "rays" }, + { type: "range", min: 50, max: 1000, defaultValue: 6, property: "rays" }, { 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" }, @@ -108,7 +108,7 @@ async function fetchConfig(className) { { 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: 1, max: 60, defaultValue: 20, property: "trailLength" }, + { type: "range", min: 1, max: 800, defaultValue: 20, property: "trailLength" }, { type: "range", min: 1, max: 500, defaultValue: 5, property: "lineWidth" }, { type: "checkbox", defaultValue: false, property: "fade" }, { type: "color", defaultValue: "#43dbad", property: "colourFree" }, @@ -245,9 +245,9 @@ function updateControlInput(value, controlName) {// Find and update the slider e elementSlider.value = value; // Update the text display - const elementSliderText = document.getElementById('elTextspeedVert'); + const elementSliderText = document.getElementById(`elText${controlName}`); if (elementSliderText) { - elementSliderText.innerText = "speedVert: " + Math.round(this.speedVert); + elementSliderText.innerText = `${controlName}: ${Math.round(value)}`; } } console.log("Updated control input:", controlName, value); @@ -483,8 +483,6 @@ function rotatePointTmp(x, y, centerXX, centerYY, 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 diff --git a/docs/js/index.js b/docs/js/index.js index d373345..fbad2d5 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -3,8 +3,8 @@ let c = document.getElementById("myCanvas"); let ctx = c.getContext("2d"); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; -centerX = ctx.canvas.width / 2; -centerY = ctx.canvas.height / 2; +let centerX = ctx.canvas.width / 2; +let centerY = ctx.canvas.height / 2; let deg_per_sec = 10; @@ -28,11 +28,11 @@ function createInstance(className, args) { FloralAccident: FloralAccident, FloralPhyllo_Accident: FloralPhyllo_Accident, Nodal_expanding: Nodal_expanding, - Phyllotaxis:Phyllotaxis, - SquareTwist_angle:SquareTwist_angle, - EyePrototype:EyePrototype, - CircleExpand:CircleExpand, - MaryFace:MaryFace, + Phyllotaxis: Phyllotaxis, + SquareTwist_angle: SquareTwist_angle, + EyePrototype: EyePrototype, + CircleExpand: CircleExpand, + MaryFace: MaryFace, // Add more class constructors here as needed }; @@ -66,39 +66,37 @@ async function updateDrawObj() { updateDrawObj(); -function render() { - setTimeout(() => { - requestAnimationFrame((timestamp) => { - if (!lastTimestamp) lastTimestamp = timestamp; - const deltaTime = timestamp - lastTimestamp; - const adjustedElapsed = elapsedTime / 100; // Convert to seconds - lastTimestamp = timestamp; - let adjustedDeltaTime; - if (!paused) { - rotation += deg_per_sec / targetFps; - elapsedTime += deltaTime; - adjustedDeltaTime = deltaTime / 100; // Convert to seconds - // console.log(adjustedDeltaTime) - } - // console.log(deltaTime) - // console.log(elapsedTime) - render_clear(); - if (drawObj) { - // drawObj.draw(rotation); +function render(timestamp) { + if (!lastTimestamp) lastTimestamp = timestamp; + const deltaTime = timestamp - lastTimestamp; + const adjustedElapsed = elapsedTime / 100; // Convert to seconds + lastTimestamp = timestamp; + let adjustedDeltaTime; + if (!paused) { + rotation += deg_per_sec / targetFps; + elapsedTime += deltaTime; + adjustedDeltaTime = deltaTime / 100; // Convert to seconds + // console.log(adjustedDeltaTime) + } + // console.log(deltaTime) + // console.log(elapsedTime) + render_clear(); + if (drawObj) { + // drawObj.draw(rotation); - drawObj.draw(adjustedElapsed, adjustedDeltaTime); + drawObj.draw(adjustedElapsed, adjustedDeltaTime); - } + } - ctx.font = "48px serif"; - ctx.fillStyle = "white" - ctx.fillText(Math.floor(elapsedTime) + "ms", centerX - 100, centerY + 400); - // drawCenter(300) - }); - render(); - }, frameDuration); + ctx.font = "48px serif"; + ctx.fillStyle = "white" + ctx.fillText(Math.floor(elapsedTime) + "ms", centerX - 100, centerY + 400); + // drawCenter(300) + + requestAnimationFrame(render); } + document .getElementById("shape-selector") .addEventListener("change", updateDrawObj); @@ -106,7 +104,16 @@ document let toolbarShowing = true; document.addEventListener("keydown", toggleSettings); -function manualToggleSettings(){ +// Add resize event listener +window.addEventListener('resize', function () { + ctx.canvas.width = window.innerWidth; + ctx.canvas.height = window.innerHeight; + centerX = ctx.canvas.width / 2; + centerY = ctx.canvas.height / 2; + +}); + +function manualToggleSettings() { console.log("hi") toolbarShowing = !toolbarShowing; let tb = document.getElementById("toolbar"); @@ -149,11 +156,11 @@ function Reset() { } function ForwardFrame() { - rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation + rotation += deg_per_sec / targetFps; // was = j = innerRotation, now = rotation currentFrame += 1; // was = i } function BackwardFrame() { - rotation -= deg_per_sec / fps; // was = j = innerRotation, now = rotation + rotation -= deg_per_sec / targetFps; // was = j = innerRotation, now = rotation currentFrame -= 1; // was = i } @@ -161,4 +168,4 @@ function ChangeDegPerSec(newValue) { deg_per_sec = newValue; } -window.onload = render; +window.onload = requestAnimationFrame(render); diff --git a/docs/js/objects.js b/docs/js/objects.js index ecfc804..4b50854 100644 --- a/docs/js/objects.js +++ b/docs/js/objects.js @@ -838,8 +838,8 @@ class RaysInShape extends BaseShape { if (this.doesWave) { const vertRate = this.speedVertRate / 100; const horrRate = this.speedHorrRate / 100; - this.speedVert = Math.sin(elapsed / 10 * vertRate) * 90 + 100; - this.speedHorr = Math.sin(elapsed / 10 * horrRate) * 90 + 100; + this.speedVert = Math.sin(elapsed / 10 * vertRate) * 85 + 100; + this.speedHorr = Math.sin(elapsed / 10 * horrRate) * 85 + 100; updateControlInput(this.speedVert, "speedVert"); updateControlInput(this.speedHorr, "speedHorr"); console.log(this.controls)