capture

Capture Class

Manual

• p5Gif.Capture
  • capture.controllers
  • capture.startUntil()
  • capture.finish()

Constructor

This is a quick simple to manually record p5 canvas to a gif.

Constructor Config

var config = {
    canvas: "defaultCanvas0",
    top: 0,
    left: 0,
    width: -1, 
    height: -1,
    framerate: 10,
    repeat: false,
    webgl: false
};
recorder = p5Gif.capture(config);

config.canvas

The Dom Id of the canvas to capture the gif from. default: "defaultCanvas0"

config.top / config.left

The top, left boundry of the capture range. (Unit: canvas pixel) default: {top: 0, left: 0}

config.width / config.height

The width, height of the capture range. (Unit: canvas pixel, -1 meaning the size of canvas) default: {width: -1, height: -1}

config.framerate

The framerate of gif to record. (Unit: fps) default: 10. Note that the framerate is limited to below 30 fps.

config.repeat

If you want your exported gif to be looping over, you need to set it as true.

config.webgl

If you want to use webgl to render and display gif, you need to set it as true. In addition, be sure to set the p5 canvas as webgl while init it.

function setup() {
  createCanvas(200, 200, WEBGL);
  recorder = p5Gif.capture({framerate: 60, webgl: true});
}

Getters

console.log(recorder.delay);

Note

If you want to use the custom framerate, please use the start() and stop().

Example

var gif = null;
var recorder = null;

function setup() {
    createCanvas(400, 400);
    recorder = p5Gif.capture(); // initialize capture instance
}

function draw() {
    background(220);

    // an example in p5js official website to draw rotating shapes
    push();
    translate(width * 0.5, height * 0.5);
    rotate(frameCount / 200.0);
    polygon(0, 0, 100, 3);
    pop();
    
    // add current frame into recorder
    recorder.addFrame();

    if (frameCount === 100) recorder.download(); // stop the recorder and download the gif when frameCount is 100
    // if (frameCount === 100) {
    //      var recordGif = recorder.export(); // export the record gif to a p5Gif object
    //    }
}

// an example in p5js official website to draw rotating shapes
function polygon(x, y, radius, npoints) {
    var angle = TWO_PI / npoints;
    beginShape();
    for (var a = 0; a < TWO_PI; a += angle) {
        var sx = x + cos(a) * radius;
        var sy = y + sin(a) * radius;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}