Ich hab eine Frage bezüglich LeapMotion und JavaScript. Ich möchte Videos mithilfe der LeapMotion per swipe druchswitchen. Allerdings weiß ich nicht genau wie ich verschiedene Videos in diesem Fall 6 Stück, nacheinander verändere und dann nach erreichen des letzten Videos auf das erste Video zurückspringe.
Code:
window.onload = onReady; // first function call
// mouse position any time
var mouseX, mouseY;
//added Leap Motion Variables
var leapX=500;
var leapY=500;
var browserWidth, browserHeight;
var currentGesture;
var frameCounter;
var canvas;
var ctx;
// for frame rate
var filterStrength = 20;
var frameTime = 0, lastLoop = new Date, thisLoop;
// for video
var videoScreen ;
var isFirstVideo = false;
var isSecondVideo = false;
var isChangingVideo = true;
function onReady() {
// your inicialization code here ----------------------------------------------
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
frameCounter = 0;
canvas.addEventListener('mousemove', pick);
browserHeight = window.innerHeight;
browserWidth = window.innerWidth;
videoScreen = document.createElement('video');
//document.body.appendChild(videoScreen);
draw();
console.log("Netflix to gooo!");
} // end onReady()
function upDateVideo () {
if (isChangingVideo) {
if (isFirstVideo)
loadVideo("V1.mov");
else if (isSecondVideo)
loadVideo("V2.mov");
else
loadVideo("V3.mov");
/*
if (isFirstVideo)
loadVideo("movingD.mov");
else if (isSecondVideo)
loadVideo("iReal.mov");
else
loadVideo("movingF.mov");
*/
}
isChangingVideo = false;
}
function loadVideo(id) {
videoScreen.src = id;
videoScreen.load();
videoScreen.play();
}
function changeVideo() {
isChangingVideo = true;
isFirstVideo = !isFirstVideo;
}
// your drawing code here ---------------------------------------------------
function draw () {
var thisFrameTime = (thisLoop=new Date) - lastLoop;
// for background
ctx.fillStyle="#444444"; // dark gray
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(videoScreen, 0, 0);
upDateVideo();
//gesture remove
// screen text, added the Leap Motion cursor
ctx.fillStyle = "#bbbbbb";
ctx.font = "normal 11px Roboto-Medium";
ctx.fillText("xLeap = " + leapX.toFixed() + " yLeap = " + leapY.toFixed(), 10, 15);
ctx.font = "normal 18px Roboto-Medium";
ctx.fillText("last gesture = " + currentGesture, 10, 40);
var col = 'rgba(150, 0, 0, 0.5)';
drawParticle (ctx, leapX , leapY, 5, col);
// frameRate calculating
frameTime+= (thisFrameTime - frameTime) / filterStrength;
lastLoop = thisLoop;
var fpsOut = document.getElementById('frameRate');
//fpsOut.innerHTML = "current frame = " +frameCounter+ " currente frame rate = "+(1000/frameTime).toFixed(1) + " fps";
frameCounter += 1;
requestAnimationFrame(draw);
}
// Leap motion gestures, we decided to narrow it to two gestures: swipe and tap
Leap.loop(function(frame) {
// for hands
frame.hands.forEach(function(hand) {
var factorX = canvas.width / browserWidth;
var factorY = canvas.height / browserHeight;
leapX = hand.screenPosition()[0] * factorX;
leapY = hand.screenPosition()[1] * factorY;
});
// for gestures
if (frame.gestures.length > 0) {
for (var i = 0; i < frame.gestures.length; i++) {
var gesture = frame.gestures[i];
switch (gesture.type) {
case "swipe":
changeVideo(); //changeVideo is implemented
currentGesture = "swipe "+ gesture.direction;
break;
case "keyTap":
currentGesture = "keyTap on " + gesture.position + " mm";
break;
default:
currentGesture = "unkown gesture type";
}
}
}
}).use('screenPosition', {scale: 0.25});
// other functions -----------------------------------------------------------------
function drawParticle (ctx, x, y, r, col) {
ctx.fillStyle = col;
// Draw an individual particle
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.closePath();
ctx.fill();
}
// for events ---------------------------------------------------
function pick(event) {
mouseX = event.layerX;
mouseY = event.layerY;
//console.log("mouse x = " + mouseX + " mouse y = " + mouseY);
}
// for animation request ---------------------------------------------------
window.requestAnimationFrame = (function(){ //fixed "requestAnimFrame not defined" Error by changing "Anim" to Animation
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();