add pseudo-3d rotation

app.py

@@ -110,6 +110,13 @@ with gr.Blocks() as demo:
 - "shift + drag" to rotate(move right first, release shift, then up or down)
 - "space + drag" to move within range
 - "[", "]" or mouse wheel to shrink or expand range
+- "ctrl + z", "shift + ctrl + z" to undo, redo
+- "a" add new person
+- "q + click" to delete person
+- "x + drag" to x-axis pseudo-3D rotation
+- "c + drag" to y-axis pseudo-3D rotation
+
+Points to note for pseudo-3D rotation: When performing pseudo-3D rotation on the X and Y axes, the projection is converted to 2D and Z-axis information is lost when the mouse button is released. This means that if you finish dragging while the shape is collapsed, you may not be able to restore it to its original state. In such a case, please use the "undo" function.
 """)
 
   source.change(

static/poseEditor.js

@@ -10,10 +10,24 @@ function distSq(p0, p1) {
   return (p0[0] - p1[0]) ** 2 + (p0[1] - p1[1]) ** 2;
 }
 
-// poseDataの形式：[[[x1, y1], [x2, y2], ...]]
+// poseDataの形式：[[[x1, y1], [x2, y2], ...],[[x3, y3], [x4, y4], ...], ...]
 // 各要素が人間
 // 人間の各要素が関節
-let poseData = [];
+
+function poseDataToCandidateAndSubset(poseData) {
+  let candidate = [];
+  let subset = [];
+  for (let i = 0; i < poseData.length; i++) {
+    let person = poseData[i];
+    let subsetElement = [];
+    for (let j = 0; j < person.length; j++) {
+      candidate.push(person[j]);
+      subsetElement.push(candidate.length - 1);
+    }
+    subset.push(subsetElement);
+  }
+  return [candidate, subset];
+}
 
 // サンプルデータ  
 const sampleCandidateSource = [[235, 158],[234, 220],[193, 222],[138, 263],[89, 308],[276, 220],[325, 264],[375, 309],[207, 347],[203, 433],[199, 523],[261, 347],[262, 430],[261, 522],[227, 148],[245, 148],[208, 158],[258, 154]].map((p) => [p[0], p[1] - 70]);
@@ -77,6 +91,70 @@ function resizeCanvas(width, height) {
   drawBodyPose();
 }
 
+function calculateCenter(shape) {
+  var center = shape.reduce(function(acc, point) {
+    acc[0] += point[0];
+    acc[1] += point[1];
+    return acc;
+  }, [0, 0]);
+  center[0] /= shape.length;
+  center[1] /= shape.length;
+  return center;
+}
+
+// v2d -> v3d
+function rotateX(vector, angle) {
+  var x = vector[0];
+  var y = vector[1];
+  var z = 0;
+
+  // X軸に対して回転する
+  var x1 = x;
+  var y1 = y * Math.cos(angle) - z * Math.sin(angle);
+  var z1 = y * Math.sin(angle) + z * Math.cos(angle);
+
+  return [x1, y1, z1];
+}
+
+// v2d -> v3d
+function rotateY(vector, angle) {
+  var x = vector[0];
+  var y = vector[1];
+  var z = 0;
+
+  // Y軸に対して回転する
+  var x1 = x * Math.cos(angle) + z * Math.sin(angle);
+  var y1 = y;
+  var z1 = -x * Math.sin(angle) + z * Math.cos(angle);
+
+  return [x1, y1, z1];  
+}
+
+// v3d -> v2d
+function perspectiveProjection(vector, cameraDistance) {
+  var x = vector[0];
+  var y = vector[1];
+  var z = vector[2];
+
+  if (z === 0) {
+    return [x, y];
+  }
+
+  var scale = cameraDistance / (cameraDistance - z);
+  var x1 = x * scale;
+  var y1 = y * scale;
+
+  return [x1, y1];
+}  
+
+// v2d -> v3d
+function rotateAndProject(f, p, c, angle) {
+  var v = [p[0] - c[0], p[1] - c[1]];
+  var v1 = f(v, angle);
+  var v2 = perspectiveProjection(v1, 500);
+  return [v2[0] + c[0], v2[1] + c[1]];
+}
+
 function drawBodyPose() {
   const stickWidth = 6;
   const limbSeq = [[2, 3], [2, 6], [3, 4], [4, 5], [6, 7], [7, 8], [2, 9], [9, 10],
@@ -91,6 +169,7 @@ function drawBodyPose() {
 
   for (let i = 0; i < poseData.length; i++) {
     const pose = poseData[i];
+    const center = calculateCenter(pose);
 
     // edge
     for (let j = 0; j < 17; j++) {
@@ -242,7 +321,8 @@ function handleMouseDown(event) {
   dragStart = p;
   dragMarks = poseData.map(pose => pose.map(node => false));
 
-  if (event.altKey || event.ctrlKey || event.shiftKey) {
+  if (event.altKey || event.ctrlKey || event.shiftKey ||
+      keyDownFlags["KeyX"] || keyDownFlags["KeyC"]) {
     // dragMarksを設定
     dragMarks[personIndex] = 
       poseData[personIndex].map((node) => node != null);
@@ -254,6 +334,10 @@ function handleMouseDown(event) {
     } else if (event.shiftKey) {
       dragMode = "rotate";
       rotateBaseVector = [0, 0];
+    } else if (keyDownFlags["KeyX"]) {
+      dragMode = "rotateX";
+    } else if (keyDownFlags["KeyC"]) {
+      dragMode = "rotateY";
     }
   } else if (keyDownFlags["Space"]) {
     dragMarks[personIndex] = 
@@ -302,6 +386,25 @@ function handleMouseMove(event) {
         node[0] = x * cos - y * sin + dragStart[0];
         node[1] = x * sin + y * cos + dragStart[1];
       });
+    } else if (dragMode == "rotateX") {
+      const center = dragStart;
+      const angle = dragOffset[1] / -40;
+      forEachMarkedNodes((i, j, node) => {
+        const lp = latestPoseData[i][j];
+        const np = rotateAndProject(rotateX, lp, center, angle);
+        console.log(np);
+        node[0] = np[0];
+        node[1] = np[1];
+      });
+    } else if (dragMode == "rotateY") {
+      const center = dragStart;
+      const angle = dragOffset[0] / 40;
+      forEachMarkedNodes((i, j, node) => {
+        const lp = latestPoseData[i][j];
+        const np = rotateAndProject(rotateY, lp, center, angle);
+        node[0] = np[0];
+        node[1] = np[1];
+      });
     } else if (dragMode == "move") {
       // 移動
       forEachMarkedNodes((i, j, node) => {
@@ -370,18 +473,22 @@ function initializePose(jsonData,w,h) {
   canvas.addEventListener('mouseup', handleMouseUp);
 
   resizeCanvas(w, h);
+
+  // setInterval(Redraw, 1000 / 30);
 }
 
 function savePose() {
-    const canvasUrl = canvas.toDataURL();
+  const canvasUrl = canvas.toDataURL();
+
+  const createEl = document.createElement('a');
+  createEl.href = canvasUrl;
 
-    const createEl = document.createElement('a');
-    createEl.href = canvasUrl;
+  // This is the name of our downloaded file
+  createEl.download = "pose.png";
 
-    // This is the name of our downloaded file
-    createEl.download = "pose.png";
+  createEl.click();
+  createEl.remove();
 
-    createEl.click();
-    createEl.remove();
-    return { "candidate": candidate, "subset": subset };
+  var [candidate, subset] = poseDataToCandidateAndSubset(poseData);
+  return {candidate: candidate, subset: subset};
 }