var vid1;

var vid2;

​

var dragging = false;

var rollover = false;

​

var offsetX, offsetY;

​

var x1 = 10;

var y1 = 10;

var x2 = 150;

var y2 = 150;

var w1 = 200;

var h1 = 100;

var w2 = 100;

var w2 = 50;

function setup() {

  createCanvas(600,400);

  vid1 = createVideo("pig.mp4");

  vid2 = createVideo('running.mp4');

  videos = [vid1,vid2]

  vid1.hide().loop();

  vid2.hide().loop();

​

}

​

function draw(){

    background(255);

​

  if (mouseX > x1 && mouseX < x1 + w1 && mouseY > y1 && mouseY < y1 + h1) {

    rollover = true;

  } 

  else {

    rollover = false;

  }

    if (dragging) {

    x1 = mouseX + offsetX;

    y1 = mouseY + offsetY;

  }

    image(vid1,x1,y1,w1,h1);

  // filter('GRAY');

  // image(vid2,x2,y2,w2,h2);

  print(x1);

}

​

​

function mousePressed() {

  // Did I click on the rectangle?

  if (mouseX > x1 && mouseX < x1 + w1 && mouseY > y1 && mouseY < y1 + h1) {

    dragging = true;

    // If so, keep track of relative location of click to corner of rectangle

    offsetX = x1-mouseX;

    offsetY = y1-mouseY;

  }

}

​

function mouseReleased() {

  // Quit dragging

  dragging = false;

}

​

​