* Utilities

 * CCapture.js for Exporting Images/Videos

 * Stats.js for Showing Stats

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

 * https://instagram.com/jackbdu/

 */

​

// data.GUI

// p5sketch.gui = new dat.GUI();

// const tempOptions = {};

// for (const optionsCategory of Object.keys(p5sketch.options)) {

//   tempOptions[optionsCategory] = {};

//   const folder = p5sketch.gui.addFolder(optionsCategory);

//   const subOptions = p5sketch.options[optionsCategory];

//   for (const optionKey of Object.keys(subOptions)) {

//     const option = p5sketch.options[optionsCategory][optionKey];

//     // console.log(p5sketch.options[optionsCategory]);optionsCategoryoptionsCategory

//     tempOptions[optionsCategory][optionKey] = option[0];

//     if (optionKey.endsWith('Color')) {

//       folder.addColor(tempOptions[optionsCategory], optionKey)

//     } else {

//       folder.add(tempOptions[optionsCategory], optionKey, option[1], option[2])

//     }

//   }

// }

// p5sketch.options = tempOptions;

​

// statsjs

if (p5sketch.specs.showStats) {

  p5sketch.stats = new Stats();

  p5sketch.stats.showPanel(0);

  document.body.appendChild( p5sketch.stats.dom );

}

​

// statsjs & ccapturejs

p5sketch.beforeDraw = () => {

  if (p5sketch.beginCapture) p5sketch.beginCapture();

  if (p5sketch.stats) p5sketch.stats.begin();

}

​

p5sketch.afterDraw = () => {

  if (p5sketch.stats) p5sketch.stats.end();

  if (p5sketch.endCapture) p5sketch.endCapture();

}

​

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

  }

}