Vehicle Spinner move faster when moving mouse faster - vue.js

Question

How can I speed up the rotation speed in the below script. Currently the movement is calculated like so:
handleMove($event) {
if (this.isMoving && this.isDragging) {
const positions = {
x: $event.pageX || $event.touches[0].pageX,
y: $event.pageY || $event.touches[0].pageY
}
this.changeFrame(positions);
this.lastX = positions.x;
this.lastY = positions.y;
}
},
changeFrame(positions) {
this.speedController += 1;
if ((this.speedController < this.speed)) {
return;
}
if (this.speedController > this.speed) {
this.speedController = 0;
}
if (positions.x > this.lastX) {
if (this.frame >= 0 && this.frame < this.images.length) {
this.frame += 1;
} else if (this.loop) {
this.frame = 1;
}
} else if (positions.x < this.lastX) {
if (this.frame >= 0 && this.frame - 1 > 0) {
this.frame -= 1;
} else if (this.loop) {
this.frame = this.images.length;
}
}
}
I have tried to change section where it increases the the frame number, to this.frame += positions.x - this.lastX however I then get the following error:
[Vue warn]: You may have an infinite update loop in a component render function.
What is the best way to do this? You can see the script running here.
Edit
I have updated the script, however it is really glitchy! Use the link for a live example.
changeFrame(positions) {
const diff = positions.x - this.startX;
let frameDelta = diff / this.speed;
this.frame += Math.round(frameDelta);
if (this.frame < 0) {
this.frame += this.images.length;
} else if (this.frame > this.images.length - 1) {
this.frame = this.frame % this.images.length;
}
}

Answer 1

Your logic is that as long as position.x > this.lastX that you increment this.frame by 1. If you want it to spin faster, then increment it by a larger number. The same goes for decrementing the number.
However, this speed depends on how often changeFrame() is fired, and that can be variable due to browser performance and etc. If you want the most accurate results, you should simply increment/decrement the frame based on how much the position has changed.
If you say, want to change the speed so that for every 10px of cursor movement you increment the frame by one, you can do this:
const diff = positions.x - this.lastX;
// Let's say we increment/decrement the frame for every 10px travelled
const rateOfSpin = 10;
// Number of frames of change, adjusted based on desired rate of spin
const frameDelta = diff / rateOfSpin;
this.frame += frameDelta;
// If we go below zero, then we start from the end
if (this.frame < 0) {
this.frame += this.images.length;
// Otherwise we simply get the modulus
} else if (this.frame > this.images.length) {
this.frame = this.frame % this.images.length;
}