This sketch takes the multi-peer sketch from last week and moves it into the third dimension!

​

Hint: try using the mouse to rotate

*/

​

let myVideo;

let myCamera;

let friends = {};

let liveMediaConnection;

​

function setup() {

  // when using p5's WebGL mode, we need to specify "WEBGL" as a third parameter

  createCanvas(600, 600, WEBGL);

  // set up a camera

  myCamera = createCamera();

  // set up some helpers 

  debugMode();

​

  liveMediaConnection = new p5LiveMedia(this, null, null, "my-avatar-room");

  liveMediaConnection.on("stream", gotStream);

  liveMediaConnection.on("data", gotData);

  myVideo = createCapture(VIDEO, gotLocalMediaStream);

  myVideo.muted = true;

  myVideo.hide();

}

​

function gotData(data, id) {

  console.log("got incoming data from peer with ID", id);

  console.log(data);

  let parsedData = JSON.parse(data);

  friends[id].update(parsedData.x,parsedData.y,parsedData.z);

}

​

// this function is called when our webcamera stream is ready

function gotLocalMediaStream(stream) {

  console.log("got local stream!");

  liveMediaConnection.addStream(stream, "CAPTURE");

}

​

// this function is called when a remote stream is ready

function gotStream(stream, id) {

  console.log("got remote stream!");

  friends[id] = new Friend(stream, id);

​

  // hide the HTML <video> element

  stream.hide();

}

​

function draw() {

  background(220);

​

  for (let id in friends) {

    let p = friends[id];

    p.show();

  }

​

  if (keyIsDown(UP_ARROW)){

    myCamera.move(0,0,-2);

  }

  if (keyIsDown(DOWN_ARROW)){

    myCamera.move(0,0,2);

  }

  if (keyIsDown(LEFT_ARROW)){

    myCamera.pan(0.01);

  }

  if (keyIsDown(RIGHT_ARROW)){

    myCamera.pan(-0.01);

  }

  // do this once every 10 frames

  if (frameCount % 10 === 0){

    sharePosition();

  }

}

​

function sharePosition(){

  if (liveMediaConnection){

    let dataToSend = {

      x: myCamera.eyeX,

      y: myCamera.eyeY,

      z: myCamera.eyeZ

    }

    liveMediaConnection.send(JSON.stringify(dataToSend));

  }

}

​