technicalkiwi
/
animate
mirror of https://github.com/SamEyeBam/animate.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Mobile ui, bug fixes

This commit is contained in:
Sam 2025-04-21 18:15:23 +12:00
parent 5a9a800ef9
commit 28040b38f9
5 changed files with 81 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/css/styles.css
View File

@ -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 {

2
docs/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<!-- ahhh -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<title>Document</title>
<link rel="stylesheet" href="./css/styles.css">

10
docs/js/helper.js
View File

@ -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

29
docs/js/index.js
View File

@ -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;
@ -66,9 +66,7 @@ async function updateDrawObj() {
updateDrawObj();
function render() {
setTimeout(() => {
requestAnimationFrame((timestamp) => {
function render(timestamp) {
if (!lastTimestamp) lastTimestamp = timestamp;
const deltaTime = timestamp - lastTimestamp;
const adjustedElapsed = elapsedTime / 100; // Convert to seconds
@ -94,11 +92,11 @@ function render() {
ctx.fillStyle = "white"
ctx.fillText(Math.floor(elapsedTime) + "ms", centerX - 100, centerY + 400);
// drawCenter(300)
});
render();
}, frameDuration);
requestAnimationFrame(render);
}
document
.getElementById("shape-selector")
.addEventListener("change", updateDrawObj);
@ -106,6 +104,15 @@ document
let toolbarShowing = true;
document.addEventListener("keydown", toggleSettings);
// 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;
@ -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);

4
docs/js/objects.js
View File

@ -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)