let saveVideo = true;

var loopFrames = 240;

//

let x;

let y;

let xspeed;

let yspeed;

let dvd;

let degre=30;

​

let r, g, b;

​

//loading the dvd image

function preload()

{

 dvd_logo=loadImage("dvd.jpg");

}

//////////////////////////////////////

// init video recorder

function initRecorder() {

  if(saveVideo) {

    capture = P5Capture.getInstance();

    capture.start({

      format: "webm", duration: loopFrames,

      framerate: 60,});

  } else {

    select('.p5c-container').hide();

  }

}

​

// Loop properties that help you loop elements in your animation.

// These are updated in `updateLoopRecording()`

let frameCountLooped = 1;

let loopProgress = 0;

let loopProgressRadians = 0;

​

// call this function first in `draw()`

var capture = null;

function updateLoopRecording() {

  // create a looped framecount & normalized progress

  frameCountLooped = frameCount % loopFrames;

  loopProgress = frameCountLooped / loopFrames;

  loopProgressRadians = loopProgress * TWO_PI;

}

////////////////////////////////////

function setup() 

{

  initRecorder();

  createCanvas(500, 400);

  x=width/2;

  y=height/2;

  xspeed=1;

  yspeed=1;

  pickColor();

​

}

// for the tint changes

function pickColor() 

  {

  r = random(100, 256);

  g = random(100, 256);

  b = random(100, 256);

  }

​

function draw() {

  updateLoopRecording();

  background("black");

  dvd_logo.resize(70, 70);

  image(dvd_logo,x,y);

  x=x+xspeed;

  y=y+yspeed;

  tint(r,g,b);

  if(x+ dvd_logo.width>=width)

    {

      xspeed= -xspeed;

      x=width-dvd_logo.width;

      pickColor();

    }

         else if (x<=0)

           {

           xspeed = -xspeed

           x=0;

             pickColor();

           }

  if(y+dvd_logo.height>=height)

    {

      yspeed=-yspeed;

      y=height-dvd_logo.height;

      pickColor();

    }

          else if(y<=0)

            {

              yspeed=-yspeed;

              y=0;

              pickColor();

            }

}