# Capturer.start() from CCapture library causing my sketch animation to be jumpy **URL:** \ **Category:** Libraries\ **Created:** [April 28, 2020, 1:29am UTC](https://discourse.processing.org/t/capturer-start-from-ccapture-library-causing-my-sketch-animation-to-be-jumpy/20217 "2020-04-28T01:29:31Z")\ **Posts on this page:** 1\ **Page:** 1

**Author:** ![Darkmatterial](https://avatars.discourse-cdn.com/v4/letter/d/aeb1de/32.png) [@Darkmatterial](https://discourse.processing.org/u/Darkmatterial)\ **Post date:** [April 28, 2020, 1:29am UTC](https://discourse.processing.org/t/capturer-start-from-ccapture-library-causing-my-sketch-animation-to-be-jumpy/20217/1 "2020-04-28T01:29:31Z")

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: ```auto 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 ````auto ``` ````