var canvas;

var canvas_buffer;

var capture_canvas;

​

function setup() {

  canvas = createCanvas(640/2, 360/2);

  canvas_buffer = createGraphics(640/2, 360/2);

​

  select("#button_save").mouseClicked(startRecording);

  select("#button_stop").mouseClicked(stopRecording);

  select("#button_cancel").mouseClicked(cancelRecording);

//  frameRate(30);

​

​

  frames_recorded = 0;

}

​

function startRecording() {

   capture_canvas = new CCapture({

    format: 'webm',

    framerate: 30

//    verbose: true,

//    timeLimit: 20

  });

  capture_canvas.start();

  console.log("started Recording...");

}

​

function stopRecording() {

  if (capture_canvas) {

    capture_canvas.stop();

    capture_canvas.save();

    capture_canvas = null;

  }

  console.log("stopped Recording");

}

​

function cancelRecording() {

  if (capture_canvas) {

    capture_canvas.stop();

    capture_canvas = null;

  }

  console.log("canceled Recording");

}

​

function draw() {

  canvas_buffer.background(255);

​

  canvas_buffer.noStroke();

​

  // inspired by https://www.openprocessing.org/sketch/816453

  drawLiq(18, 50, 20, 100);

​

  image(canvas_buffer, 0, 0);

​

  if (capture_canvas) {

    capture_canvas.capture(canvas_buffer.canvas);

    frames_recorded++;

    fill(255, 0, 0);

    textAlign(CENTER, CENTER);

    text("RECORDING..", width / 2, height / 2);

  }

​

}

​

function drawLiq(vNnum, nm, sm, fcm) {

​

  let dr = TWO_PI / vNnum;

  canvas_buffer.fill(0, 150, 240, 100);

  canvas_buffer.beginShape();

  for (let i = 0; i < vNnum + 3; i++) {

    let ind = i % vNnum;

    let rad = dr * ind;

    let r = height * 0.3 + noise(frameCount / nm + ind) * height * 0.1 + sin(frameCount / sm + ind) * height * 0.05;

    canvas_buffer.curveVertex(cos(rad) * r + width / 2, sin(rad) * r + height / 2);

  }

  canvas_buffer.endShape();

​

}