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

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 {

4
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">
@ -55,6 +55,6 @@
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./js/math.js" type="text/javascript"></script>
<script src="./js/objects.js" type="text/javascript"></script>
<script src="./js/index.js"></script>
<script src="./js/index.js" ></script>
</html>

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

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

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)