Capturer.start() from CCapture library causing my sketch animation to be jumpy

p5.js Libraries
1

Hi! I have a p5.js sketch I want to create a .gif from using CCapture library the problem is that when I run the sketch the final video is all jumpy in the drawGrid() object, does anyone have a clue why this is happening?
Here is my code:

</> button * [homework policy](/faq/#homework) * [asking questions](/t/2147)

let gifLength = 160;
let canvas;

var spacingX = 50;
var spacingY = 50;
var myAngle = 0.0;


function setup() {
  var p5Canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  canvas = p5Canvas.canvas;
  centerX = windowWidth/2;
  centerY = windowHeight/3;
  background(0);
}
function draw() {
  capturer.start();
  background(0);
  rotateX(1.45);
  push();
  translate(-600,millis()/11 % 100);
  console.log(millis());
  drawGrid();
  pop();
  push();
  ambientLight(255, 0, 255);
  ambientMaterial(255, 0, 255);
  translate(0,200,160);
  myAngle = myAngle + 0.01;
  rotateZ(myAngle);
  drawPyramid();
  pop();
  if (frameCount < gifLength){
  capturer.capture(canvas);
  } else if (frameCount == gifLength){
    capturer.stop();
    capturer.save();
  }
}
 
 // this creates a pyramid shape by defining
 // vertex points in 3D space (x, y, z)

function drawPyramid() {
  stroke(139,0,139);
  beginShape();
    // triangle 1
    fill(50, 55, 100);
    vertex(-100, -100, -100);
    vertex( 100, -100, -100);
    vertex(   0,    0,  100);
  endShape(CLOSE);
  beginShape();
    // triangle 2
    fill(50, 55, 100);
    vertex( 100, -100, -100);
    vertex( 100,  100, -100);
    vertex(   0,    0,  100);
  endShape(CLOSE);
  beginShape();
    // triangle 3
    fill(50, 55, 100);
    vertex( 100, 100, -100);
    vertex(-100, 100, -100);
    vertex(   0,   0,  100);
 endShape(CLOSE);
 beginShape();
    // triangle 4
    fill(50, 55, 100);
    vertex(-100,  100, -100);
    vertex(-100, -100, -100);
    vertex(   0,    0,  100);
endShape(CLOSE);
beginShape();
    // pyramid base
    fill(50, 55, 100);
    vertex(-100, -100, -100);
    vertex( 100, -100, -100);
    vertex( 100, 100, -100);
    vertex(-100,  100, -100);
endShape(CLOSE);
  }

function drawGrid() {
  fill(139,0,139);
  stroke(139,0,139);
  
  
  for (var y = -100; y < windowHeight+100; y = y + spacingY){
    line(-200, y, windowWidth+100, y);
  }
  
  for (var x = -200; x < windowWidth+100; x = x + spacingX){
    line(x, -100, x, windowHeight+200);
  }
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

And this is my html code

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/CCapture.all.min.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/download.js"></script>
  <script language="javascript" type="text/javascript" src="retro.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
  <script language="javascript" type="text/javascript" src="/js/gif.workers.js"></script>
  <!--<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>-->
  
  <script> 
  var capturer = new CCapture ({
  framerate: 60,
  format:'gif',
  workersPath: './js/',
  verbose: true
} );
  </script>

 <style> body { padding: 0; margin: 0; } </style>
</head>
<body>
<style>
</style>
<!--<div id="overlay"> <h1> Hola Parrots!</h1> </div>-->
</body>
</html>```