Skip to content

Commit

Permalink
rescale + attraction added to pose
Browse files Browse the repository at this point in the history
  • Loading branch information
@stc
stc committed Jun 11, 2018
1 parent 1fade35 commit 2af19f8
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 70 deletions.
54 changes: 54 additions & 0 deletions 009_pose/PoseObject.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
class Pose {
constructor() {
this.mappedPose = [];
for(let i=0; i<17; i++) {
this.mappedPose.push([0,0]);
}
}

update(pose) {
for(let i=0; i<pose.length; i++) {
this.mappedPose[i] = [ this.mapX(pose[i].position.x), this.mapY(pose[i].position.y) ];
}
}

draw() {
for(let i=0; i< this.mappedPose.length; i++) {
if(i<5) {
noStroke();
fill(255,255,0);
rect(this.mappedPose[i][0], this.mappedPose[i][1],10, 10);
}
/*
stroke(255,0,100);
strokeWeight(2);
line(this.mappedPose[5][0], this.mappedPose[5][1], this.mappedPose[6][0], this.mappedPose[6][1]);
line(this.mappedPose[5][0], this.mappedPose[5][1], this.mappedPose[7][0], this.mappedPose[7][1]);
line(this.mappedPose[6][0], this.mappedPose[6][1], this.mappedPose[8][0], this.mappedPose[8][1]);
line(this.mappedPose[8][0], this.mappedPose[8][1], this.mappedPose[10][0], this.mappedPose[10][1]);
line(this.mappedPose[7][0], this.mappedPose[7][1], this.mappedPose[9][0], this.mappedPose[9][1]);
line(this.mappedPose[5][0], this.mappedPose[5][1], this.mappedPose[11][0], this.mappedPose[11][1]);
line(this.mappedPose[6][0], this.mappedPose[6][1], this.mappedPose[8][0], this.mappedPose[8][1]);
line(this.mappedPose[6][0], this.mappedPose[6][1], this.mappedPose[12][0], this.mappedPose[12][1]);
line(this.mappedPose[11][0],this.mappedPose[11][1], this.mappedPose[12][0], this.mappedPose[12][1]);
line(this.mappedPose[11][0],this.mappedPose[11][1], this.mappedPose[13][0], this.mappedPose[13][1]);
line(this.mappedPose[13][0],this.mappedPose[13][1], this.mappedPose[15][0], this.mappedPose[15][1]);
line(this.mappedPose[12][0],this.mappedPose[12][1], this.mappedPose[14][0], this.mappedPose[14][1]);
line(this.mappedPose[14][0],this.mappedPose[14][1], this.mappedPose[16][0], this.mappedPose[16][1]);
*/

noStroke();
text(i, this.mappedPose[i][0]+10,this.mappedPose[i][1]);
}
}

mapX(x) {
return map(x,0,640,(width-height*captureRatio)/2, (width-height*captureRatio) /2 + height * captureRatio);
}

mapY(y) {
// raw html5 video capture differs from p5js capture aspects for some reason...
return map(y,0,360,0 + height/10,height-height/10);
}
}
17 changes: 10 additions & 7 deletions 009_pose/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
<html>

<head>
<title>Simple</title>
<title>Attractors</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../libs/toxiclibs.min.js"></script>
<script src="../libs/p5.js"></script>
<script src="../libs/p5.dom.js"></script>
<style>
Expand All @@ -21,12 +22,13 @@

<div id="main">
<video id="video"
style=" -moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
display: none;
">
style="
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
display: none;
">
</video>
<canvas id="output"></canvas>
</div>
Expand All @@ -35,6 +37,7 @@
</div>
<script>var mPoses = [];</script>
<script src="tf-pose.js"></script>
<script src="PoseObject.js"></script>
<script src="sketch.js"></script>
</body>

Expand Down
123 changes: 64 additions & 59 deletions 009_pose/sketch.js
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,101 @@
let capture;
const captureRatio = 1.333;
let cPoses = [];
let cPoseNum = 0;
let pPoseNum = 0;

var VerletPhysics2D = toxi.physics2d.VerletPhysics2D,
VerletParticle2D = toxi.physics2d.VerletParticle2D,
AttractionBehavior = toxi.physics2d.behaviors.AttractionBehavior,
GravityBehavior = toxi.physics2d.behaviors.GravityBehavior,
Vec2D = toxi.geom.Vec2D,
Rect = toxi.geom.Rect;

let NUM_PARTICLES = 10;

let physics;
let mouseAttractor;
let mousePos;

let headAttractor;
let headPos;

function setup() {
var canvas = createCanvas(windowWidth,windowHeight);
canvas.position(0,0);
canvas.id("mCanvas");
capture = createCapture(VIDEO);
capture.hide();

physics = new VerletPhysics2D();
physics.setDrag(0.05);
physics.setWorldBounds(new Rect((width-height*captureRatio)/2, 0, height * captureRatio, height));
physics.addBehavior(new GravityBehavior(new Vec2D(0, 0.15)));

headPos = new Vec2D(width/2,height/2);
headAttractor = new AttractionBehavior(headPos, 500, 0.9);
physics.addBehavior(headAttractor);
}

function addParticle() {
let randLoc = Vec2D.randomVector().scale(5).addSelf(width / 2, 0);
let p = new VerletParticle2D(randLoc);
physics.addParticle(p);
physics.addBehavior(new AttractionBehavior(p, 20, -1.2, 0.01));
}

function draw() {
background(0);
push();
tint(255,255);
tint(255,50);
scale(-1,1);
translate(-width + ((width-height*captureRatio)/2),0);
image(capture,0,0,height*captureRatio,height);
pop();

// recreate pose array if there is a change in number of poses
cPoseNum = mPoses.length;
if(cPoseNum != pPoseNum) {
cPoses = [];
for(let i=0; i<cPoseNum; i++) {
cPoses.push(new Pose(mPoses[i]));
}
}

// update each pose
for(let i=0; i<cPoseNum; i++) {
cPoses = [];
for(let i=0; i<mPoses.length; i++) {
cPoses.push(new Pose(mPoses[i]));
for(let j=0;j<mPoses[i].keypoints.length;j++) {
if(mPoses[i].score>0.2 && mPoses[i].score < 0.5) {
cPoses[i].update(mPoses[i].keypoints);
}
}
}
// draw each pose
for(let p of cPoses) {
p.draw();
}

// set previous pose numbers to check if there is change
pPoseNum = cPoseNum;
}
if(cPoses.length>0) headPos.set(cPoses[0].mappedPose[0][0], cPoses[0].mappedPose[0][1]-300);

class Pose {
constructor() {
this.mappedPose = [];
}
console.log(headPos);

update(pose) {
this.mappedPose = [];
for(let i=0; i<pose.length; i++) {
this.mappedPose.push( [ this.mapX(pose[i].position.x), this.mapY(pose[i].position.y) ] );
}
}
if (physics.particles.length < NUM_PARTICLES) {
addParticle();
}
physics.update();

for (let i=0;i<physics.particles.length;i++) {
let p = physics.particles[i];
fill(255);
rect(p.x, p.y, 10, 10);
}

fill(255);
text(frameRate(), 30, 30);
}

draw() {
for(let i=0; i< this.mappedPose.length; i++) {
if(i<5) {
noStroke();
fill(255,255,0);
ellipse(this.mappedPose[i][0], this.mappedPose[i][1],10, 10);
}
stroke(255,0,100);
strokeWeight(2);
line(this.mappedPose[5][0], this.mappedPose[5][1], this.mappedPose[6][0], this.mappedPose[6][1]);
line(this.mappedPose[5][0], this.mappedPose[5][1], this.mappedPose[7][0], this.mappedPose[7][1]);
line(this.mappedPose[6][0], this.mappedPose[6][1], this.mappedPose[8][0], this.mappedPose[8][1]);
line(this.mappedPose[8][0], this.mappedPose[8][1], this.mappedPose[10][0], this.mappedPose[10][1]);
line(this.mappedPose[7][0], this.mappedPose[7][1], this.mappedPose[9][0], this.mappedPose[9][1]);
line(this.mappedPose[5][0], this.mappedPose[5][1], this.mappedPose[11][0], this.mappedPose[11][1]);
line(this.mappedPose[6][0], this.mappedPose[6][1], this.mappedPose[8][0], this.mappedPose[8][1]);
line(this.mappedPose[6][0], this.mappedPose[6][1], this.mappedPose[12][0], this.mappedPose[12][1]);
line(this.mappedPose[11][0],this.mappedPose[11][1], this.mappedPose[12][0], this.mappedPose[12][1]);
line(this.mappedPose[11][0],this.mappedPose[11][1], this.mappedPose[13][0], this.mappedPose[13][1]);
line(this.mappedPose[13][0],this.mappedPose[13][1], this.mappedPose[15][0], this.mappedPose[15][1]);
line(this.mappedPose[12][0],this.mappedPose[12][1], this.mappedPose[14][0], this.mappedPose[14][1]);
line(this.mappedPose[14][0],this.mappedPose[14][1], this.mappedPose[16][0], this.mappedPose[16][1]);
}
}
function mousePressed() {
addParticle();
mousePos = new Vec2D(mouseX, mouseY);
mouseAttractor = new AttractionBehavior(mousePos, 250, 0.9);
physics.addBehavior(mouseAttractor);
}

mapX(x) {
return map(x,0,640,(width-height*captureRatio)/2, (width-height*captureRatio) /2 + height * captureRatio);
}
function mouseDragged() {
mousePos.set(mouseX, mouseY);
}

mapY(y) {
// raw html5 video capture differs from p5js capture aspects...
return map(y,0,360,0 + height/10,height-height/10);
}
function mouseReleased() {
physics.removeBehavior(mouseAttractor);
}


6 changes: 2 additions & 4 deletions 009_pose/tf-pose.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27692,8 +27692,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

//var mPoses = [];

const videoWidth = 640;
const videoHeight = 360;

Expand All @@ -27709,7 +27707,7 @@ async function setupCamera() {
width: videoWidth,
height: videoHeight }
});

video.srcObject = stream;

return new _promise2.default(resolve => {
Expand Down Expand Up @@ -27743,7 +27741,7 @@ function detectPoseInRealTime(video, net) {
canvas.height = videoHeight;

async function poseDetectionFrame() {
const imageScaleFactor = 0.8;
const imageScaleFactor = 0.6;
const outputStride = 16;
let poses = [];
let minPoseConfidence = 0.2;
Expand Down
7 changes: 7 additions & 0 deletions libs/toxiclibs.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 2af19f8

Please sign in to comment.