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
};
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

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);
}