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

time is handled differently now. truetimestamp is now all meausred in ms

This commit is contained in:
Sam 2024-07-13 00:45:24 +12:00
parent 7458d3188e
commit ea9134bfdc
2 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Larry the snail/js/index.js
View File

@ -11,16 +11,18 @@ ctx.imageSmoothingEnabled = false;
let deg_per_sec = 60; let deg_per_sec = 60;
let targetFps = 60; let targetFps = 60;
let frameDuration = 1000 / targetFps; let frameDuration = 1000 / targetFps;
let lastTimestamp = 0;
let trueTimestamp = 0;
let rotation = 0; //was = j = angle let rotation = 0; //was = j = angle
let paused = true; let paused = false;
render_clear(); render_clear();
let drawObj = null; let drawObj = null;
function createInstance(className, args) { function createInstance(className, args) {
const classMap = { const classMap = {
Larry: Larry, Larry: Larry,
// Add more class constructors here as needed // Add more class constructors here as needed
}; };
@ -63,15 +65,26 @@ updateDrawObj();
function render() { function render() {
setTimeout(() => { setTimeout(() => {
requestAnimationFrame(() => { requestAnimationFrame((timestamp) => {
if (!lastTimestamp) lastTimestamp = timestamp;
const elapsed = timestamp - lastTimestamp;
lastTimestamp = timestamp;
render_clear(); render_clear();
if (drawObj) { if (drawObj) {
drawObj.draw(rotation); // drawObj.draw(rotation);
drawObj.draw(elapsed,trueTimestamp);
} }
if (!paused) { if (!paused) {
rotation += deg_per_sec / targetFps; rotation += deg_per_sec / targetFps;
trueTimestamp += elapsed;
} }
ctx.font = "48px serif";
ctx.fillStyle = "white"
ctx.fillText( Math.floor(trueTimestamp) + "ms", centerX-150, centerY+400);
// drawCenter(300) // drawCenter(300)
}); });
render(); render();
@ -85,7 +98,7 @@ document
let toolbarShowing = true; let toolbarShowing = true;
document.addEventListener("keydown", toggleSettings); document.addEventListener("keydown", toggleSettings);
function manualToggleSettings(){ function manualToggleSettings() {
console.log("hi") console.log("hi")
toolbarShowing = !toolbarShowing; toolbarShowing = !toolbarShowing;
let tb = document.getElementById("toolbar"); let tb = document.getElementById("toolbar");

31
Larry the snail/js/objects.js
View File

@ -53,7 +53,7 @@ class Larry extends BaseShape {
this.headHeight = 24; this.headHeight = 24;
this.headOffsetX = 54 - this.headWidth * this.magnitude / 2; this.headOffsetX = 54 - this.headWidth * this.magnitude / 2;
this.headOffsetY = this.bodyHeight * this.magnitude - 7; // Bottom of the body minus 7 pixels this.headOffsetY = this.bodyHeight * this.magnitude - 7; // Bottom of the body minus 7 pixels
this.globalX = Math.random() * 1000; this.globalX = Math.random() * 1000 + 600;
this.globalY = centerY; this.globalY = centerY;
this.localX = 0; this.localX = 0;
this.localY = 0; this.localY = 0;
@ -87,7 +87,7 @@ class Larry extends BaseShape {
this.lastTimestamp = 0; this.lastTimestamp = 0;
} }
draw(timestamp) { draw(elapsed, timestamp) {
timestamp *= (this.speedMultiplier / 100); timestamp *= (this.speedMultiplier / 100);
// console.log(timestamp - this.lastTimestamp) // console.log(timestamp - this.lastTimestamp)
this.lastTimestamp = timestamp; this.lastTimestamp = timestamp;
@ -111,23 +111,25 @@ class Larry extends BaseShape {
//eating //eating
if (timestamp < this.eatEndTimestamp) { if (timestamp < this.eatEndTimestamp) {
console.log("eating") // const adjustedTimestamp = this.eatEndTimestamp - timestamp + parseInt(this.eatDuration) / (1000 / 60);
const adjustedTimestamp = this.eatEndTimestamp - timestamp + parseInt(this.eatDuration) / (1000 / 60); const adjustedTimestamp = (timestamp - (this.eatEndTimestamp - parseInt(this.eatDuration * 1000) / (this.eatSpeed / 100)));
console.log(adjustedTimestamp)
const eatMaxHeight = 20; const eatMaxHeight = 20;
// const eatingYOffset = ((Math.cos((adjustedTimestamp -Math.PI/2+ 0.5 * Math.PI) * (this.eatSpeed/100)*0.1 - Math.PI / 2) + 1) / 2) * eatMaxHeight; // const eatingYOffset = ((Math.cos((adjustedTimestamp -Math.PI/2+ 0.5 * Math.PI) * (this.eatSpeed/100)*0.1 - Math.PI / 2) + 1) / 2) * eatMaxHeight;
const eatingYOffset = ((Math.sin((adjustedTimestamp * 2 * Math.PI * this.eatSpeed / 100 * 0.1) - Math.PI / 2) + 1) / 2) * eatMaxHeight; // const eatingYOffset = ((Math.sin((adjustedTimestamp/1000 * 2 * Math.PI * this.eatSpeed / 100 * 0.1) - Math.PI / 2) + 1) / 2) * eatMaxHeight;
const eatingYOffset = (Math.sin(((adjustedTimestamp/1000)* (this.eatSpeed/100))* Math.PI * 2 - (Math.PI/2))*0.5+0.5) * eatMaxHeight;
headY -= eatingYOffset; headY -= eatingYOffset;
const n = this.eatDuration const n = this.eatDuration
console.log(adjustedTimestamp) // console.log(adjustedTimestamp)
console.log((-adjustedTimestamp + 10 * n) / 10) // console.log((-adjustedTimestamp + 10 * n) / 10)
console.log(Math.floor((-adjustedTimestamp + (10 / (this.eatSpeed / 100)) * n) / (10 / (this.eatSpeed / 100)))) // console.log(Math.floor((-adjustedTimestamp + (10 / (this.eatSpeed / 100)) * n) / (10 / (this.eatSpeed / 100))))
const frame = Math.floor((-adjustedTimestamp + (10 / (this.eatSpeed / 100)) * n) / (10 / (this.eatSpeed / 100))) const frame = Math.floor((adjustedTimestamp / 1000) * (this.eatSpeed / 100))
this.foodImage.src = "larry_photos/foods/" + document.getElementById('elselectedFood').value + frame + ".png"; this.foodImage.src = "larry_photos/foods/" + document.getElementById('elselectedFood').value + frame + ".png";
this.drawCrosshair(bodyX + this.foodXoffset, bodyY + this.foodYoffset, 30) this.drawCrosshair(bodyX + this.foodXoffset, bodyY + this.foodYoffset, 30)
ctx.drawImage(this.foodImage, bodyX + this.foodXoffset, bodyY + this.foodYoffset, this.foodImage.width * this.foodSizeMuliplier, this.foodImage.height * this.foodSizeMuliplier) ctx.drawImage(this.foodImage, bodyX + this.foodXoffset, bodyY + this.foodYoffset, this.foodImage.width * this.foodSizeMuliplier, this.foodImage.height * this.foodSizeMuliplier)
} }
ctx.drawImage(this.headImage, headX, headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude); ctx.drawImage(this.headImage, headX, headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude);
// Draw hat if any // Draw hat if any
@ -159,8 +161,9 @@ class Larry extends BaseShape {
console.log("Larry starts eating"); console.log("Larry starts eating");
const foodSelection = document.getElementById('elselectedFood').value const foodSelection = document.getElementById('elselectedFood').value
this.isEating = true; this.isEating = true;
this.eatEndTimestamp = this.lastTimestamp + (parseInt(this.eatDuration) / (6 * (this.eatSpeed / 100))) * 1000 / (1000 / 60); // this.eatEndTimestamp = this.lastTimestamp + (parseInt(this.eatDuration) / (6 * (this.eatSpeed / 100))) * 1000 / (1000 / 60);
this.eatEndTimestamp = trueTimestamp + parseInt(this.eatDuration * 1000) / (this.eatSpeed / 100);
console.log("start:" + trueTimestamp + " end: " + this.eatEndTimestamp)
if (foodSelection === "") { if (foodSelection === "") {
this.foodXoffset = 0; this.foodXoffset = 0;
this.foodYoffset = 0; this.foodYoffset = 0;
@ -168,8 +171,8 @@ class Larry extends BaseShape {
this.foodImage.src = "larry_photos/foods/" + document.getElementById('elselectedFood').value + 0 + ".png"; this.foodImage.src = "larry_photos/foods/" + document.getElementById('elselectedFood').value + 0 + ".png";
const offsets = foodConfig[foodSelection] || { sizeMult: 0, n: 0 }; const offsets = foodConfig[foodSelection] || { sizeMult: 0, n: 0 };
this.foodSizeMuliplier = offsets.sizeMult; this.foodSizeMuliplier = offsets.sizeMult;
this.foodXoffset = (this.bodyWidth * this.magnitude) ; this.foodXoffset = (this.bodyWidth * this.magnitude);
this.foodYoffset = bodyY + (this.bodyHeight * this.magnitude - 7 * this.magnitude) - this.headHeight * this.magnitude - (this.foodImage.height/2) ; this.foodYoffset = bodyY + (this.bodyHeight * this.magnitude - 7 * this.magnitude) - this.headHeight * this.magnitude - (this.foodImage.height / 2);
} }
console.log(this.eatEndTimestamp) console.log(this.eatEndTimestamp)