var speed = 1;

​

​

let fps = 60;

​

​

​

// the canvas capturer instance

/*

var capturer = new CCapture({

  format: 'png',

  framerate: fps

});

*/

​

​

function setup() {

  createCanvas(300, 300);

  frameRate(fps);

​

  // start the recording

  //capturer.start();

}

​

​

//var startMillis;

​

function draw() {

  background(255);

​

​

/*

   if (startMillis == null) {

     startMillis = millis();

   }

​

​

   var duration = 6000;//3500

​

   var elapsed = millis() - startMillis;

   var t = map(elapsed, 0, duration, 0, 1);

​

​

   if (t > 1) {

     noLoop();

     console.log('finished recording.');

     capturer.stop();

     capturer.save();

     return;

   }

*/

​

​

​

​

​

​

  strokeWeight(3);

​

  stroke(0);

  fill(255);

  rect(0, 0, 300, 300);

​

  ellipseMode(CENTER);

​

​

  xpos = xpos + speed;

​

  if ((xpos > width-100) || (xpos < 100)) {

    speed = speed * -1;

  }

​

  fill(0);

  ellipse(xpos, height / 2, 100, 100); //horizontal

  //ellipse(height/2, xpos, 100, 100);//vertical

  //ellipse(xpos, xpos, 100, 100);//diagonal

​

  //rotate

  /*

  translate(150, 150); 

  rotate(radians(frameCount));

  ellipse(0,0,100,100);

  fill(255);

  rect(0,0,80,80);

  */

​

  // handle saving the frame

  //console.log('capturing frame');

  //capturer.capture(document.getElementById('defaultCanvas0'));

​

}