i want to render a Gif with GifEncoder (older version), but unfortunately the gif output is jittery or so to say, it lags. This is my code:
import GIFEncoder from "gif-encoder-2";
import fs from "fs";
import pkg from "canvas";
const { createCanvas } = pkg;
let frame = 0;
const size = 200;
const fr = 60; //starting FPS
const encoder = new GIFEncoder(size, size);
encoder
.createReadStream()
.pipe(fs.createWriteStream("my.gif"));
encoder.start();
encoder.setRepeat(0); // 0 for repeat, -1 for no-repeat
encoder.setDelay(0); // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.
var canvas = createCanvas(size, size),
cw = canvas.width,
ch = canvas.height,
cx = null,
fps = 60,
bX = 30,
bY = 30,
mX = 10,
mY = 20,
interval = null;
function gameLoop() {
cx.clearRect(0, 0, cw, cw);
cx.beginPath();
cx.fillStyle = "red";
cx.arc(bX, bY, 20, 0, Math.PI * 360);
cx.fill();
if (bX >= cw || bX <= 0) {
mX *= -1;
}
if (bY >= ch || bY <= 0) {
mY *= -1;
}
bX += mX;
bY += mY;
encoder.addFrame(cx);
console.log(frame);
if (frame > 60) {
clearInterval(interval);
encoder.finish();
}
++frame;
}
if (typeof canvas.getContext !== undefined) {
cx = canvas.getContext("2d");
interval = setInterval(gameLoop, 1000 / fps);
}
This is the output
I took the example from this fiddle, where you can see, how smooth the ball should look like.
What I tried so far without success,
- Not creating a stream, when using GifEncoder
- Collecting
cxin an array and use GifEncoder afterwards, but it seems thectxis a reference object and I could not find a way how to copy it - Playing around with P5 in hope, they have an internal calculation, when the deltaTime is to high between the frames
Can anyone help me here or give me an advice what to do?
