WIP

Author: Shan Huang

illustrationGen/illustration.js

@@ -209,7 +209,8 @@ export class PoseIllustration {
         let totalW = 0;
         let weights = {};
         bones.forEach(bone => {
-            let d = bone.boneLine.getNearestPoint(point).getDistance(point);
+            let d = MathUtils.getClosestPointOnSegment(bone.kp0.position, bone.kp1.position, point)
+                .getDistance(point);
             // Absolute weight = 1 / (distance * distance)
             let w = 1 / (d * d);
             weights[bone.name] = {

illustrationGen/skeleton.js

@@ -125,12 +125,12 @@ export const allPartNames = posePartNames.concat(facePartNames);
 // Represents a bone formed by two part keypoints.
 export class Bone {
     constructor(kp0, kp1, skeleton, type) {
+        console.log('constructing...');
         this.name = `${kp0.name}-${kp1.name}`;
         this.kp0 = kp0;
         this.kp1 = kp1;
         this.skeleton = skeleton;
         this.type = type;
-        this.boneLine = new paper.default.Path(kp0.position, kp1.position);
         this.boneColor = ColorUtils.fromStringHash(this.name);
         this.boneColor.saturation += 0.5;
     };
@@ -142,11 +142,12 @@ export class Bone {
         let dir = this.kp1.position.subtract(this.kp0.position).normalize();
         let n = dir.clone();
         n.angle += 90;
-        let closestP = this.boneLine.getNearestPoint(p);
+        let closestP = MathUtils.getClosestPointOnSegment(this.kp0.position, this.kp1.position, p);
         let v = p.subtract(closestP);
         let dirProjD = v.dot(dir);
         let dirProjN = v.dot(n);
-        let anchorPerc = closestP.subtract(this.kp0.position).length / this.boneLine.length;
+        let d = this.kp0.position.subtract(this.kp1.position).length;
+        let anchorPerc = closestP.subtract(this.kp0.position).length / d;
         return {
             transform: new paper.default.Point(dirProjD, dirProjN),
             anchorPerc: anchorPerc,
@@ -282,7 +283,7 @@ export class Skeleton {
         let leftLowerLipBottom0 = getKeyPointFromSVG(skeletonGroup, 'leftLowerLipBottom0');
         let leftLowerLipBottom1 = getKeyPointFromSVG(skeletonGroup, 'leftLowerLipBottom1');
         let lowerLipBottomMid = getKeyPointFromSVG(skeletonGroup, 'lowerLipBottomMid');
-        
+
         this.bLeftShoulderRightShoulder = new Bone(leftShoulder, rightShoulder, this, 'body');
         this.bRightShoulderRightHip = new Bone(rightShoulder, rightHip, this, 'body');
         this.bLeftHipRightHip = new Bone(leftHip, rightHip, this, 'body');
@@ -364,6 +365,7 @@ export class Skeleton {
         this.bRightMouthCornerRightLowerLipBottom0 = new Bone(rightMouthCorner, rightLowerLipBottom0, this, 'face');
         this.bRightLowerLipBottom0RightLowerLipBottom1 = new Bone(rightLowerLipBottom0, rightLowerLipBottom1, this, 'face');
         this.bRightLowerLipBottom1LowerLipBottomMid = new Bone(rightLowerLipBottom1, lowerLipBottomMid, this, 'face');
+        console.log('Done');
 
         this.faceBones = [
             // Face
@@ -589,7 +591,9 @@ export class Skeleton {
             let minDistance = Infinity;
             let boneGroup = this.boneGroups[boneGroupKey];
             boneGroup.forEach(bone => {
-                minDistance = Math.min(minDistance, bone.boneLine.getNearestPoint(point).getDistance(point));
+                let d = MathUtils.getClosestPointOnSegment(bone.kp0.position, bone.kp1.position, point)
+                    .getDistance(point);
+                minDistance = Math.min(minDistance, d);
             });
             minDistances[boneGroupKey] = minDistance;
         });

static_image.js

@@ -218,7 +218,7 @@ function setupGui() {
   const imageControls = gui.addFolder('Image');
   imageControls.open();
   gui.add(guiState, 'sourceImage', Object.keys(sourceImages)).onChange(() => testImageAndEstimatePoses());
-  gui.add(guiState, 'avatarSVG', Object.keys(avatarSvgs)).onChange(() => parseSVG(avatarSvgs[guiState.avatarSVG]));
+  gui.add(guiState, 'avatarSVG', Object.keys(avatarSvgs)).onChange(() => loadSVG(avatarSvgs[guiState.avatarSVG]));
 
   const debugControls = gui.addFolder('Debug controls');
   debugControls.open();
@@ -251,17 +251,24 @@ export async function bindPage() {
   });
 
   setupGui(posenet);
-  await parseSVG(Object.values(avatarSvgs)[0]);
+  setStatusText('Loading SVG file...');
+  await loadSVG(Object.values(avatarSvgs)[0]);
 }
 
 window.onload = bindPage;
-FileUtils.setDragDropHandler(parseSVG);
+FileUtils.setDragDropHandler(loadSVG);
 
 // Target is SVG string or path
-async function parseSVG(target) {
+async function loadSVG(target) {
+  let t = new Date();
   let svgScope = await SVGUtils.importSVG(target);
+  console.log('Loading AVatar dt0: ', new Date() - t);
   skeleton = new Skeleton(svgScope);
+  console.log('Loading AVatar dt1: ', new Date() - t);
   illustration = new PoseIllustration(canvasScope);
+  console.log('Loading AVatar dt2: ', new Date() - t);
   illustration.bindSkeleton(skeleton, svgScope);
-  testImageAndEstimatePoses(posenet);
+  console.log('Loading AVatar dt3: ', new Date() - t);
+  testImageAndEstimatePoses();
+  console.log('Loading AVatar dt4: ', new Date() - t);
 }

utils/mathUtils.js

@@ -56,6 +56,18 @@ export class MathUtils {
         }
     }
 
+    static getClosestPointOnSegment(p0, p1, p) {
+        let d = p1.subtract(p0);
+        let c = p.subtract(p0).dot(d) / (d.dot(d));
+        if (c >= 1) {
+            return p1.clone();
+        } else if (c <= 0) {
+            return p0.clone();
+        } else {
+            return p0.add(d.multiply(c));
+        }
+    }
+
     // Check if v0 and v1 are collinear.
     // Returns true if cosine of the angle between v0 and v1 is within threshold to 1.
     static isCollinear(v0, v1, threshold = 0.01) {