var world;
var sw;
var sh;
var renderer;
var stage;
var fixedTimeStep = 1 / 60;
var colorList = [
0xf64c4c,
0xf6844c,
0xd0f64c,
0x4cc8f6
]
var itemList = [];
var editView = document.getElementById('editView');
var stage = document.getElementById('stage');
var videoElem = document.getElementById('videoElem');
var videoStream;
var startButton = document.getElementById('startButton');
startButton.addEventListener('click', function(){onClickStartButton()});
var captureButton = document.getElementById('captureButton');
captureButton.style.display = 'none';
captureButton.addEventListener('click', function(){onClickCaptureButton()});
var captureCanvas = document.createElement("canvas");
captureCanvas.width = 320;
captureCanvas.height = 240;
var captureContext2d = captureCanvas.getContext('2d');
var captureTexture;
function startWebcam() {
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(function (stream) {
videoStream = stream;
console.log(stream);
videoElem.src = window.URL.createObjectURL(videoStream);
startButton.style.display = 'none';
captureButton.style.display = 'block';
}).catch(function (error) {
console.error('エラー', error);
return;
});
}
function onClickStartButton() {
startWebcam();
}
function onClickCaptureButton() {
captureContext2d.drawImage(videoElem, 0, 0, 320, 240);
editView.style.display = 'none';
stage.style.display = 'block';
main();
}
function main() {
sw = window.innerWidth;
sh = window.innerHeight;
renderer = new PIXI.CanvasRenderer({
width: sw,
height: sh,
autoResize:true
});
renderer.backgroundColor = 0xffffff;
document.getElementById('stage').appendChild(renderer.view);
stage = new PIXI.Container();
world = new p2.World({
gravity: [0, -9.82]
});
world.on('beginContact', function() {
})
var outerData2 = analyzePathData2(outerPathData2, 0.8, outerPathWidth, outerPathHeight);
var innerData2 = analyzePathData2(innerPathData2, 0.8, innerPathWidth, innerPathHeight);
createConcave(sw / 2, sh / 2, outerData2.p2Path, outerData2.path, 'outerBody');
createConcave(sw / 2, sh / 2, innerData2.p2Path, innerData2.path, 'innerBody');
createWall(sw / 2 - 200, sh / 2, 10, 400, 0);
createWall(sw / 2 + 200, sh / 2, 10, 400, 0);
createWall(sw / 2, sh / 2 + 200, 400, 10, 0);
window.addEventListener('resize', resize);
resize();
captureTexture = PIXI.Texture.fromCanvas(captureCanvas);
requestAnimationFrame(animate);
}
function animate(time) {
requestAnimationFrame(animate);
world.step(fixedTimeStep);
render();
}
function render() {
createBall();
for (var i = itemList.length - 1; i >= 0; i--) {
var graphic = itemList[i];
if (graphic.body.world && graphic.shape.type == p2.Shape.CIRCLE) {
var x = p2ToPixiX(graphic.body.position[0]);
var y = p2ToPixiY(graphic.body.position[1]);
if (y > sh + 50) {
world.removeBody(graphic.body);
stage.removeChild(graphic);
itemList.splice(i, 1);
graphic.destroy();
} else {
graphic.x = x;
graphic.y = y;
graphic.rotation = -graphic.body.angle;
}
}
}
renderer.render(stage);
}
function createBall() {
var randX = sw / 2 + (Math.random() * 100 - 50);
var randY = Math.random() * 50 - 50;
var xx = pixiToP2X(randX);
var yy = pixiToP2Y(randY);
var radius = 14;
var ballShape = new p2.Circle({radius:pixiToP2Value(radius)});
var ballBody = new p2.Body({
mass:1.0,
position: [xx, yy]
});
var colorID = Math.floor(Math.random() * colorList.length);
var color = colorList[colorID];
ballBody.color = color;
ballBody.addShape(ballShape);
world.addBody(ballBody);
var container = new PIXI.Container();
var sprite = new PIXI.Sprite(captureTexture);
sprite.x = -160;
sprite.y = -120;
var mask = new PIXI.Graphics();
mask.beginFill(color);
mask.drawCircle(0, 0, 100);
mask.endFill();
container.addChild(sprite);
container.addChild(mask);
sprite.mask = mask;
container.body = ballBody;
container.shape = ballShape;
container.width = radius*2;
container.height = radius*2;
container.x = randX;
container.y = randY;
stage.addChild(container);
itemList.push(container);
}
function createWall(x, y, w, h, rotation) {
var p2X = pixiToP2X(x);
var p2Y = pixiToP2Y(y);
var p2W = pixiToP2Value(w);
var p2H = pixiToP2Value(h);
var shape = new p2.Box({
width:p2W,
height:p2H,
});
var body = new p2.Body({
mass:0,
position:[p2X, p2Y],
angle:-rotation
});
body.addShape(shape);
world.addBody(body);
}
function createConcave(x, y, p2Path, path, name) {
var p2X = pixiToP2X(x);
var p2Y = pixiToP2Y(y);
var body = new p2.Body({
mass:0,
position:[p2X, p2Y],
});
body.fromPolygon(p2Path);
body.name = name;
for (var i = 0, len = body.shapes.length; i < len; i++) {
var shape = body.shapes[i];
//shape.sensor = true;
}
world.addBody(body);
}
function analyzePathData2(pathData, scale, width, height) {
var points = pathData.split(' ');
var result = {};
result.path = [];
result.p2Path = [];
var wid = width * scale;
var hei = height * scale;
for (var i = 0, len = points.length; i < len; i++) {
var pt = points[i];
var point = pt.split(',');
var x = point[0] * scale - wid/2;
var y = point[1] * scale - hei/2;
var p2X = pixiToP2X(x);
var p2Y = pixiToP2Y(y);
result.path.push([x, y]);
result.p2Path.push([p2X, p2Y]);
}
return result;
}
function resize(evt) {
sw = window.innerWidth;
sh = window.innerHeight;
}
// p2→pixi
function p2ToPixiX(p2X) {
return p2X * 100;
}
function p2ToPixiY(p2Y) {
return -(p2Y * 100);
}
function p2ToPixiValue(p2Value) {
return p2Value * 100;
}
// pixi→p2
function pixiToP2X(pixiX) {
return pixiX / 100;
}
function pixiToP2Y(pixiY) {
return -(pixiY / 100);
}
function pixiToP2Value(pixiValue) {
return pixiValue / 100;
}
var innerPathWidth = 116;
var innerPathHeight = 112;
var innerPathData2 = "62.5,0.5 33.5,9.5 12.5,29.5 0.5,53.5 0.5,76.5 10.5,97.5 27.5,107.5 45.5,112.5 67.5,108.5 87.5,96.5 104.5,76.5 111.5,56.5 111.5,37.5 103.5,20.5 91.5,8.5 77.5,1.5";
var outerPathWidth = 346;
var outerPathHeight = 340;
var outerPathData2 = "144.5,9.5 133.5,78.5 169.5,65.5 202.5,62.5 232.5,70.5 254.5,85.5 272.5,109.5 282.5,138.5 282.5,169.5 272.5,202.5 253.5,232.5 229.5,253.5 201.5,269.5 169.5,278.5 136.5,278.5 109.5,269.5 84.5,249.5 68.5,220.5 63.5,188.5 87.5,38.5 46.5,75.5 20.5,117.5 5.5,158.5 0.5,193.5 4.5,229.5 14.5,263.5 34.5,292.5 58.5,314.5 88.5,330.5 121.5,338.5 165.5,339.5 207.5,328.5 245.5,310.5 273.5,291.5 314.5,338.5 345.5,163.5 345.5,120.5 331.5,76.5 309.5,43.5 278.5,18.5 238.5,3.5 205.5,-0.5 176.5,1.5";
//main();
<div id="editView">
<div id="startButtonArea">
<div id="startButton" class="button">Use WebCam</div>
<div id="captureButton" class="button2">Capture</div>
</div>
<div id="videoArea">
<video id="videoElem" autoplay></video>
<div class="captureGuide"></div>
</div>
</div>
<div id="stage"></div>
html, body {
margin: 0;
padding: 0;
width:100%;
height:100%;
overflow: hidden;
}
#videoElem {
width: 320px;
height: 240px;
transform: scaleX(-1);
}
#videoArea {
position: relative;
}
.captureGuide {
position: absolute;
top: 20px;
left: 60px;
width: 200px;
height: 200px;
border-radius: 100px;
border:1px solid #f6f6f6;
}
.button, .button2 {
box-sizing: border-box;
padding: 8px 0 0 0;
width: 320px;
height: 40px;
background-color: #f64c4c;
color: #fff;
text-align: center;
cursor:pointer;
}
.button2 {
background-color: #4cc8f6;
}
External resources loaded into this fiddle: