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 { body {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */ /* Safari/Chrome, other WebKit */
@ -25,7 +28,14 @@ canvas {
padding: 0px 20px 0px 20px; padding: 0px 20px 0px 20px;
width: 500px; width: 500px;
height: 100vh; 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 { #custom {
@ -37,7 +47,22 @@ canvas {
padding: 0px 20px 0px 20px; padding: 0px 20px 0px 20px;
/* width: 500px; */ /* width: 500px; */
/* height: 100vh; */ /* 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 { .button {

4
docs/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<!-- ahhh --> <!-- ahhh -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head> <head>
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="./css/styles.css"> <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="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./js/math.js" type="text/javascript"></script> <script src="./js/math.js" type="text/javascript"></script>
<script src="./js/objects.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> </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" }, { type: "range", min: 100, max: 1000, defaultValue: 100, property: "limiter" },
], ],
RaysInShape: [ 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: "range", min: 1, max: 30, defaultValue: 2, property: "speed" },
{ type: "checkbox", defaultValue: true, property: "doesWave" }, { 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: "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: "speedVert" },
{ type: "range", min: 1, max: 200, defaultValue: 100, property: "speedHorr" }, { 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: 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: "range", min: 1, max: 500, defaultValue: 5, property: "lineWidth" },
{ type: "checkbox", defaultValue: false, property: "fade" }, { type: "checkbox", defaultValue: false, property: "fade" },
{ type: "color", defaultValue: "#43dbad", property: "colourFree" }, { type: "color", defaultValue: "#43dbad", property: "colourFree" },
@ -245,9 +245,9 @@ function updateControlInput(value, controlName) {// Find and update the slider e
elementSlider.value = value; elementSlider.value = value;
// Update the text display // Update the text display
const elementSliderText = document.getElementById('elTextspeedVert'); const elementSliderText = document.getElementById(`elText${controlName}`);
if (elementSliderText) { if (elementSliderText) {
elementSliderText.innerText = "speedVert: " + Math.round(this.speedVert); elementSliderText.innerText = `${controlName}: ${Math.round(value)}`;
} }
} }
console.log("Updated control input:", controlName, value); console.log("Updated control input:", controlName, value);
@ -483,8 +483,6 @@ function rotatePointTmp(x, y, centerXX, centerYY, rotation) {
function rotatePoint(x, y, rotation) { function rotatePoint(x, y, rotation) {
let nCos = Math.cos(rad(rotation)) let nCos = Math.cos(rad(rotation))
// console.log(nCos*(180/Math.PI))
// console.log(rad(rotation))
let nSin = Math.sin(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

85
docs/js/index.js
View File

@ -3,8 +3,8 @@ let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d"); let ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth; ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight; ctx.canvas.height = window.innerHeight;
centerX = ctx.canvas.width / 2; let centerX = ctx.canvas.width / 2;
centerY = ctx.canvas.height / 2; let centerY = ctx.canvas.height / 2;
let deg_per_sec = 10; let deg_per_sec = 10;
@ -28,11 +28,11 @@ function createInstance(className, args) {
FloralAccident: FloralAccident, FloralAccident: FloralAccident,
FloralPhyllo_Accident: FloralPhyllo_Accident, FloralPhyllo_Accident: FloralPhyllo_Accident,
Nodal_expanding: Nodal_expanding, Nodal_expanding: Nodal_expanding,
Phyllotaxis:Phyllotaxis, Phyllotaxis: Phyllotaxis,
SquareTwist_angle:SquareTwist_angle, SquareTwist_angle: SquareTwist_angle,
EyePrototype:EyePrototype, EyePrototype: EyePrototype,
CircleExpand:CircleExpand, CircleExpand: CircleExpand,
MaryFace:MaryFace, MaryFace: MaryFace,
// Add more class constructors here as needed // Add more class constructors here as needed
}; };
@ -66,39 +66,37 @@ async function updateDrawObj() {
updateDrawObj(); updateDrawObj();
function render() { function render(timestamp) {
setTimeout(() => { if (!lastTimestamp) lastTimestamp = timestamp;
requestAnimationFrame((timestamp) => { const deltaTime = timestamp - lastTimestamp;
if (!lastTimestamp) lastTimestamp = timestamp; const adjustedElapsed = elapsedTime / 100; // Convert to seconds
const deltaTime = timestamp - lastTimestamp; lastTimestamp = timestamp;
const adjustedElapsed = elapsedTime / 100; // Convert to seconds let adjustedDeltaTime;
lastTimestamp = timestamp; if (!paused) {
let adjustedDeltaTime; rotation += deg_per_sec / targetFps;
if (!paused) { elapsedTime += deltaTime;
rotation += deg_per_sec / targetFps; adjustedDeltaTime = deltaTime / 100; // Convert to seconds
elapsedTime += deltaTime; // console.log(adjustedDeltaTime)
adjustedDeltaTime = deltaTime / 100; // Convert to seconds }
// console.log(adjustedDeltaTime) // console.log(deltaTime)
} // console.log(elapsedTime)
// console.log(deltaTime) render_clear();
// console.log(elapsedTime) if (drawObj) {
render_clear(); // drawObj.draw(rotation);
if (drawObj) {
// drawObj.draw(rotation);
drawObj.draw(adjustedElapsed, adjustedDeltaTime); drawObj.draw(adjustedElapsed, adjustedDeltaTime);
} }
ctx.font = "48px serif"; ctx.font = "48px serif";
ctx.fillStyle = "white" ctx.fillStyle = "white"
ctx.fillText(Math.floor(elapsedTime) + "ms", centerX - 100, centerY + 400); ctx.fillText(Math.floor(elapsedTime) + "ms", centerX - 100, centerY + 400);
// drawCenter(300) // drawCenter(300)
});
render(); requestAnimationFrame(render);
}, frameDuration);
} }
document document
.getElementById("shape-selector") .getElementById("shape-selector")
.addEventListener("change", updateDrawObj); .addEventListener("change", updateDrawObj);
@ -106,7 +104,16 @@ document
let toolbarShowing = true; let toolbarShowing = true;
document.addEventListener("keydown", toggleSettings); 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") console.log("hi")
toolbarShowing = !toolbarShowing; toolbarShowing = !toolbarShowing;
let tb = document.getElementById("toolbar"); let tb = document.getElementById("toolbar");
@ -149,11 +156,11 @@ function Reset() {
} }
function ForwardFrame() { 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 currentFrame += 1; // was = i
} }
function BackwardFrame() { 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 currentFrame -= 1; // was = i
} }
@ -161,4 +168,4 @@ function ChangeDegPerSec(newValue) {
deg_per_sec = 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) { if (this.doesWave) {
const vertRate = this.speedVertRate / 100; const vertRate = this.speedVertRate / 100;
const horrRate = this.speedHorrRate / 100; const horrRate = this.speedHorrRate / 100;
this.speedVert = Math.sin(elapsed / 10 * vertRate) * 90 + 100; this.speedVert = Math.sin(elapsed / 10 * vertRate) * 85 + 100;
this.speedHorr = Math.sin(elapsed / 10 * horrRate) * 90 + 100; this.speedHorr = Math.sin(elapsed / 10 * horrRate) * 85 + 100;
updateControlInput(this.speedVert, "speedVert"); updateControlInput(this.speedVert, "speedVert");
updateControlInput(this.speedHorr, "speedHorr"); updateControlInput(this.speedHorr, "speedHorr");
console.log(this.controls) console.log(this.controls)