EAT ANiMation, duration is now number of bites. also fixxed timestamp

This commit is contained in:
Sam 2024-06-29 21:37:51 +12:00
parent ecd605e6e4
commit 8a6aa8beab
3 changed files with 23 additions and 14 deletions

View File

@ -24,15 +24,15 @@ async function fetchConfig(className) {
{
type: "range",
min: 0,
max: 20,
defaultValue: 2,
max: 100,
defaultValue: 50,
property: "eatSpeed"
},
{
type: "range",
min: 0,
max: 10000,
defaultValue: 3000,
max: 10,
defaultValue: 1,
property: "eatDuration"
},
// Button control to start eating

View File

@ -8,7 +8,7 @@ centerY = ctx.canvas.height / 2;
ctx.imageSmoothingEnabled = false;
let deg_per_sec = 10;
let deg_per_sec = 60;
let targetFps = 60;
let frameDuration = 1000 / targetFps;

View File

@ -60,6 +60,7 @@ class Larry extends BaseShape {
this.speedMultiplier = 100;
this.isEating = false;
this.eatEndTimestamp= 0;
this.eatDuration = eatDuration;
this.eatSpeed = eatSpeed;
@ -77,13 +78,16 @@ class Larry extends BaseShape {
this.hatXoffset = 0;
this.hatYoffset = 0;
this.lastTimestamp = 0;
}
draw(timestamp) {
timestamp *= (this.speedMultiplier / 100);
// console.log(timestamp - this.lastTimestamp)
this.lastTimestamp = timestamp;
// Draw background
if (this.backgroundImage.src) {
console.log("drawing background: " + this.backgroundImage.src)
// console.log("drawing background: " + this.backgroundImage.src)
ctx.drawImage(this.backgroundImage, centerX - (this.backgroundImage.width), centerY - this.backgroundImage.height, this.backgroundImage.width * 2, this.backgroundImage.height * 2);
}
@ -98,10 +102,14 @@ class Larry extends BaseShape {
// let headY = bodyY + this.headOffsetY - this.headHeight;
const headX = bodyX + (53.5 * this.magnitude - this.headWidth * this.magnitude / 2);
let headY = bodyY + (this.bodyHeight * this.magnitude - 7 * this.magnitude) - this.headHeight * this.magnitude;
if (this.isEating === true) {
if (timestamp < this.eatEndTimestamp) {
console.log("eating")
const adjustedTimestamp = timestamp -this.eatEndTimestamp + parseInt(this.eatDuration)/(1000/60);
console.log(adjustedTimestamp)
const eatMaxHeight = 20;
const eatingYOffset = ((Math.sin((timestamp * 2 * Math.PI * this.eatSpeed * 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;
headY -= eatingYOffset;
}
ctx.drawImage(this.headImage, headX, headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude);
@ -133,12 +141,13 @@ class Larry extends BaseShape {
startEating() {
console.log("Larry starts eating");
console.log(this.eatDuration)
this.isEating = true;
setTimeout(() => {
this.isEating = false;
console.log("Larry stops eating");
}, this.eatDuration); // Adjust duration as needed
this.eatEndTimestamp = this.lastTimestamp + (parseInt(this.eatDuration)/3)*1000/(1000/60);
console.log(this.eatEndTimestamp)
// setTimeout(() => {
// this.isEating = false;
// console.log("Larry stops eating");
// }, this.eatDuration); // Adjust duration as needed
}
applyHat() {