g = 100,

  b = 200;

let z = -100;

let x = 200,

  y = 200;

let tempX, tempY, screenPositionGen;

let boxPositionX2D, boxPositionY2D;

let d;

let explosions = [];

let particles = [];

const gravity = 0.25;

// video canvas

let boxCanvas

​

​

​

​

function setup() {

  createCanvas(400, 400, WEBGL);

  avoidClipping();

  angleMode(DEGREES);

  video = createCapture(VIDEO);

  videoAspect = video.width / video.height;

  video.hide();

  addScreenPositionFunction();

  // Video canvas 

  boxCanvas = createGraphics(400,400,WEBGL);

​

}

​

​

​

​

​

function draw() {

​

  background(0);

  translate(-width / 2, -height / 2, 0);

  //Video element add here 

  //push();

  //videoCanvas.image(video , 100 ,100);

  //pop();

  // commenting out will show the cube moving from -z axis

  push();

  image(video,0,0);

  pop();

  // works without the video layer 

  /*

  push();

  translate(x,y, -50); sphere is drawn on video canvas

  sphere(80)

  pop();

  */

​

  push();

  fill(r, g, b);

  translate(x, y, z);

  box(80, 80, 80);

​

  //Screenposition

  ScreenPositionGen = screenPosition(0, 0, 0);

  boxPositionX2D = ScreenPositionGen.x;

  boxPositionY2D = ScreenPositionGen.y;

z += 2;    

  pop();

  push();

  explosionManager();

  pop();

​

}

​

function avoidClipping() {

  perspective(PI / 3.0, width / height, 1, 1000000);

}

​

​

function mouseClicked(event) {

  d = dist(

    mouseX - width / 2,

    mouseY - height / 2,

    boxPositionX2D,

    boxPositionY2D

  );

​

  if (d < 80) {

    explode();

    x = random(0, 400);

    y = random(0, 400);

    z = -1000;

    r = random(0, 255);

    g = random(0, 255);

    b = random(0, 255);

  }

}

​

​