* Canvas Capturing for Exporting Images/Videos

 * Jack B. Du (github@jackbdu.com)

 * https://instagram.com/jackbdu/

 */

​

p5sketch.capturerSpecs = {

  numStartCaptureFrame: 1,

  // numTotalCaptureFrames: p5sketch.specs.numLoopFrames, // uncomment this line to capture canvas

}

// specify output dimensions

// p5sketch.specs = {...p5sketch.specs, outputWidth: 1920, outputHeight: 1080 }; // 1080p horizontal

// p5sketch.specs = {...p5sketch.specs, outputWidth: 1080, outputHeight: 1920 }; // 1080p vertical

// p5sketch.specs = {...p5sketch.specs, outputWidth: 1920, outputHeight: 1920 }; // 1920x1920 square

​

p5sketch.canvasCapturer = new CCapture({

  format: 'png',

  framerate: p5sketch.fps,

});

p5sketch.beginCapture = () => {

  if (p5sketch.canvasCapturer &&

      p5sketch.capturerSpecs &&

      p5sketch.capturerSpecs.numTotalCaptureFrames) {

    if (p5sketch.frameCount === p5sketch.capturerSpecs.numStartCaptureFrame ||

        p5sketch.capturerSpecs.boolManualCaptureStart) {

      p5sketch.canvasCapturer.start();

      if (p5sketch.capturerSpecs.boolManualCaptureStart) {

        p5sketch.capturerSpecs.boolManualCaptureStart = false;

        p5sketch.capturerSpecs.numStartCaptureFrame = p5sketch.frameCount;

      }

    } else if (p5sketch.frameCount >= p5sketch.capturerSpecs.numStartCaptureFrame + p5sketch.capturerSpecs.numTotalCaptureFrames) {

      p5sketch.noLoop();

      console.log("canvas capturing ended.");

      p5sketch.canvasCapturer.stop();

      // default save, will download automatically a file called {name}.extension (webm/gif/tar)

      p5sketch.canvasCapturer.save();

      return;

    }

  }

}

​

p5sketch.endCapture = () => {

  if (

    p5sketch.canvasCapturer &&

    p5sketch.capturerSpecs &&

    p5sketch.capturerSpecs.numTotalCaptureFrames &&

    p5sketch.frameCount >= p5sketch.capturerSpecs.numStartCaptureFrame

  ) {

    console.log("capturing canvas frame...");

    p5sketch.canvasCapturer.capture(document.getElementById("defaultCanvas0"));

  }

}