Which frameworks for best performance rendering edge points for images?

Question

Hello dear Sololearners.

I'm actually working on a project that should display edge points for an image and already tried different approaches.

I actually tried working with openCV.js (and older frameworks) for better performance, but with an eye on mobile performance too, it was just too slow, so I stayed with jquery.

The grayscale filter actually helped out a lot and I also changed the other variables like scale, brightnessThreshhold, etc. for better performance (and also the variables of the typewriterEffect, which is also involved), but the performance is still not very ideal.

Anyone could help?

Answer 1

I did some research and found a quiet good solution for the moment, while still working with jquery.

It evaluated fast that setAnimationFrame is the way better choice to work with, than working with setTimeout for animations and I found a solid way to adjust the fps-rate:

````javascript

function animate() {
draw();
let lastTime = 0;
const fps = 80; // set framerate
const fpsInterval = 200 / fps; //set the interval between the frames

function animate(currentTime) {
requestAnimationFrame(animate);

const elapsed = currentTime - lastTime;

if (elapsed > fpsInterval) {
lastTime = currentTime - (elapsed % fpsInterval);

// animation logic check
console.log("Frame drawn at:", currentTime);
}
}

requestAnimationFrame(animate);

````

Also the elapsed variable helped a lot to get a better procession rate.

So this works way better now, also with some other little adjustments, but I'm still thankful for valuable tips and new ideas or techniques. :<|}