let recorder;

let chunks = [];

​

const fr = 120;

​

function record() {

  chunks.length = 0;

  let stream = document.querySelector('canvas').captureStream();

  var options = {

      videoBitsPerSecond : 100000000,

      mimeType : 'video/webm;codecs=vp9'

    }

  recorder = new MediaRecorder(stream,options);  

  recorder.ondataavailable = e => {

    if (e.data.size) {

      chunks.push(e.data);

    }

  };

  recorder.onstop = exportVideo;

}

​

function exportVideo(e) {

  var blob = new Blob(chunks, { 'type' : 'video/webm' });

  // var blob = new Blob(chunks, { 'type' : 'video/webm' });

​

    // Draw video to screen

    // var videoElement = document.createElement('video');

    // videoElement.setAttribute("id", Date.now());

    // videoElement.controls = true;

    // document.body.appendChild(videoElement);

    // videoElement.src = window.URL.createObjectURL(blob);

  // Download the video 

  var url = URL.createObjectURL(blob);

  var a = document.createElement('a');

  document.body.appendChild(a);

  a.style = 'display: none';

  a.href = url;

  a.download = 'newVid.webm';

  a.click();

  window.URL.revokeObjectURL(url);

​

}

​

​

​

var t=0 

​

// taken from pr.js docs

var x, y;

​

function setup() {

  createCanvas(720, 720);

  noStroke();

  frameRate(15);

  fill('white');

  // initialize recorder

  record();

  // Starts in the middle

  x = width / 2;

  y = height;

}

​

function keyPressed() {

  // toggle recording true or false

  recording = !recording

  console.log(recording);

  // 82 is keyCode for r 

  // if recording now true, start recording 

  if (keyCode === 82 && recording ) {

    console.log("recording started!");

    recorder.start();

  } 

  // if we are recording, stop recording 

  if (keyCode === 82 && !recording) {  

    console.log("recording stopped!");

    recorder.stop();

  }

}

​

function draw() {

  background(200);

const w=W=720;

//  noStroke(fill('#つぶやきProcessing'))

rect(0,0,w,w)

for(k=30;k--;){

  for(j=10;j--;){

    for(i=10;i-->2;)

      fill(i%2?'#7bd':'#fff'),

      circle(j*86-(k%2)*43+16, 740-k*20+sin(k*TAU/30-t)*8, 10*i)

  }

  t+=.003

  }

// t+=.01

// background(0)

// colorMode(HSB,6)

// for(y=2;y<W;y+=60)for(x=2;x<W;x+=60){push()

// square(x,y,56)

// drawingContext.clip()

// for(i=1;i>.7;i-=.03)stroke(R=noise(x,y,i+t*3)*9,6,3)+circle(x+25+cos(R)*48,y+25+sin(R)*48,i*60)

// pop()}

​

}