Spaces:
Runtime error
Runtime error
| console.log("hello from poseEditor.js") | |
| var canvas = null; | |
| var ctx = null; | |
| const wheelDisplayTime = 500; | |
| const limbSeq = [ | |
| [1, 2], [2, 3], [3, 4], // 右腕 | |
| [1, 5], [5, 6], [6, 7], // 左腕 | |
| [1, 8], [8, 9], [9, 10], // 右胴→右脚 | |
| [1, 11], [11, 12], [12, 13], // 左胴→左脚 | |
| [1, 0], // 首 | |
| [0, 14], [14, 16], // 右目 | |
| [0, 15], [15, 17] // 左目 | |
| ]; | |
| function findParentNodeIndex(nodeIndex) { | |
| // limbSeqの各要素の2番目の要素がjointIndexの場合、その要素の1番目の要素を返す | |
| // 見つからないばあいは-1を返す | |
| limbIndex = limbSeq.findIndex((limb) => limb[1] === nodeIndex); | |
| return limbIndex === -1 ? -1 : limbSeq[limbIndex][0]; | |
| } | |
| function cutOffLimb(pose, cutOffIndex) { | |
| console.log(`cutOffLimb: ${cutOffIndex}`); | |
| // 末端ノードの座標を削除する | |
| var newPose = deepCopy(pose); | |
| for (let i = 0; i < 18; i++) { | |
| if (newPose[i] == null) {continue;} | |
| // ルートまで検索し、その間にcuttOffIndexがあれば削除 | |
| var curr = i; | |
| while (curr !== 1) { | |
| console.log(`checking: ${i} -> ${curr}`); | |
| let parent = findParentNodeIndex(curr); | |
| if (parent === cutOffIndex) { | |
| console.log(`cutOffLimb: ${i} -> ${cutOffIndex}`); | |
| newPose[i] = null; | |
| break; | |
| } | |
| curr = parent; | |
| } | |
| } | |
| return newPose; | |
| } | |
| function repairPose(sourcePose) { | |
| // TODO: ループには対応してないかも | |
| var pose = sourcePose; | |
| var newPose = new Array(18) | |
| for (var k = 0; k < 3; k++) { | |
| var processed = 0; // イテレーション用 | |
| for (let i = 0; i < 18; i++) { | |
| if (pose[i] == null) { | |
| let parent = findParentNodeIndex(i); | |
| if (parent === -1) {continue;} // あり得ない | |
| if (pose[parent] == null) { | |
| console.log(`repair failed(A): ${i} -> parent loss`); | |
| continue; | |
| } | |
| // サンプルデータから引っ張ってくる | |
| var v = sampleCandidateSource[i].map((x, j) => x - sampleCandidateSource[parent][j]); | |
| newPose[i] = pose[parent].map((x, j) => x + v[j]); | |
| console.log(`repaired: ${i} -> ${newPose[newPose.length - 1]}`); | |
| processed++; | |
| } else { | |
| newPose[i] = pose[i].map(x => x); | |
| } | |
| } | |
| if (processed === 0) {break;} | |
| pose = newPose; | |
| } | |
| return newPose; | |
| } | |
| function deepCopy(arr) { | |
| return JSON.parse(JSON.stringify(arr)); | |
| } | |
| function distSq(p0, p1) { | |
| return (p0[0] - p1[0]) ** 2 + (p0[1] - p1[1]) ** 2; | |
| } | |
| // poseDataの形式：[[[x1, y1], [x2, y2], ...],[[x3, y3], [x4, y4], ...], ...] | |
| // 各要素が人間 | |
| // 人間の各要素が関節 | |
| 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]); | |
| const sampleSubsetElementSource = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]; | |
| // const sampleCandidateSource = [[618.00, 0.00], [618.00, 44.00], [304.00, 81.00], [482.00, 96.00], [66.00, 270.00], [171.00, 280.00], [618.00, 82.00], [307.00, 112.00], [460.00, 143.00], [0.00, 301.00], [65.00, 301.00], [172.00, 303.00], [584.00, 86.00], [275.00, 119.00], [420.00, 139.00], [0.00, 301.00], [41.00, 301.00], [144.00, 303.00], [544.00, 131.00], [348.00, 139.00], [262.00, 160.00], [0.00, 337.00], [52.00, 339.00], [130.00, 348.00], [570.00, 175.00], [283.00, 177.00], [78.00, 338.00], [172.00, 380.00], [651.00, 78.00], [338.00, 111.00], [505.00, 144.00], [92.00, 301.00], [198.00, 305.00], [661.00, 132.00], [349.00, 156.00], [541.00, 179.00], [106.00, 336.00], [203.00, 348.00], [305.00, 159.00], [665.00, 160.00], [563.00, 192.00], [80.00, 343.00], [181.00, 385.00], [614.00, 205.00], [291.00, 220.00], [432.00, 320.00], [152.00, 372.00], [43.00, 380.00], [0.00, 386.00], [623.00, 281.00], [306.00, 290.00], [92.00, 357.00], [509.00, 434.00], [304.00, 357.00], [622.00, 368.00], [47.00, 394.00], [0.00, 395.00], [142.00, 405.00], [535.00, 565.00], [655.00, 200.00], [337.00, 217.00], [467.00, 322.00], [191.00, 372.00], [83.00, 375.00], [344.00, 282.00], [655.00, 282.00], [103.00, 343.00], [237.00, 368.00], [22.00, 377.00], [0.00, 379.00], [460.00, 459.00], [305.00, 352.00], [638.00, 355.00], [0.00, 401.00], [110.00, 412.00], [411.00, 570.00], [608.00, 0.00], [608.00, 40.00], [297.00, 75.00], [469.00, 84.00], [0.00, 261.00], [58.00, 263.00], [165.00, 275.00], [625.00, 0.00], [625.00, 39.00], [309.00, 74.00], [486.00, 83.00], [71.00, 264.00], [180.00, 276.00], [599.00, 0.00], [599.00, 44.00], [284.00, 80.00], [440.00, 93.00], [48.00, 271.00], [0.00, 272.00], [157.00, 277.00], [634.00, 0.00], [633.00, 41.00], [319.00, 77.00], [79.00, 269.00], [190.00, 277.00]]; | |
| // const sampleSubsetElementSource = [1.00,6.00,12.00,18.00,24.00,28.00,33.00,39.00,43.00,49.00,54.00,59.00,65.00,72.00,77.00,84.00,90.00,97.00,32.98,18.00],[5.00,11.00,17.00,23.00,27.00,32.00,37.00,42.00,46.00,-1.00,-1.00,62.00,67.00,-1.00,82.00,88.00,95.00,100.00,25.45,15.00],[4.00,10.00,16.00,22.00,26.00,31.00,36.00,41.00,47.00,51.00,57.00,63.00,66.00,74.00,81.00,87.00,93.00,99.00,26.97,18.00],[3.00,8.00,14.00,19.00,25.00,30.00,35.00,40.00,45.00,52.00,58.00,61.00,70.00,75.00,79.00,86.00,92.00,-1.00,30.45,17.00],[2.00,7.00,13.00,20.00,-1.00,29.00,34.00,38.00,44.00,50.00,53.00,60.00,64.00,71.00,78.00,85.00,91.00,98.00,27.89,17.00],[0.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,-1.00,76.00,83.00,-1.00,96.00,3.33,4.00]; | |
| function makePoseFromCandidateAndSubsetElement(candidate, subsetElement) { | |
| var pose = []; | |
| for (let j = 0 ; j < 18; j++) { | |
| let i = subsetElement[j]; | |
| pose.push(i < 0 || candidate[i] == null ? null : candidate[i].map((x)=>x)); | |
| } | |
| return pose; | |
| } | |
| function makePoseDataFromCandidateAndSubset(candidate, subset) { | |
| return subset.map(subsetElement => makePoseFromCandidateAndSubsetElement(candidate, subsetElement)); | |
| } | |
| function addPerson() { | |
| var dx = Math.random() * 100; | |
| var dy = Math.random() * 100; | |
| poseData.push( | |
| makePoseFromCandidateAndSubsetElement( | |
| sampleCandidateSource.map(point => [point[0] + dx, point[1] + dy]), | |
| sampleSubsetElementSource)); | |
| addHistory(); | |
| Redraw(); | |
| } | |
| function removePerson(personIndex) { | |
| poseData.splice(personIndex, 1); | |
| addHistory(); | |
| Redraw(); | |
| } | |
| function repairPerson(personIndex) { | |
| poseData[personIndex] = repairPose(poseData[personIndex]); | |
| addHistory(); | |
| Redraw(); | |
| } | |
| function cutOffPersonLimb(personIndex, limbIndex) { | |
| poseData[personIndex] = cutOffLimb(poseData[personIndex], limbIndex); | |
| console.log(poseData[personIndex]); | |
| console.log(poseData); | |
| addHistory(); | |
| Redraw(); | |
| } | |
| // ドラッグ中の各キーが押されているかどうかのフラグ | |
| var keyDownFlags = {}; | |
| // マウスカーソル | |
| var mouseCursor = [-1, -1]; | |
| function cross(lhs, rhs) {return lhs[0] * rhs[1] - lhs[1] * rhs[0];} | |
| function dot(lhs, rhs) {return lhs[0] * rhs[0] + lhs[1] * rhs[1];} | |
| function directedAngleTo(lhs, rhs) {return Math.atan2(cross(lhs, rhs), dot(lhs, rhs));} | |
| function isMouseOnCanvas() { | |
| // mouseCursorがcanvasの範囲内にあるかどうかを判定 | |
| var rect = canvas.getBoundingClientRect(); | |
| var f = 0 <= mouseCursor[0] && mouseCursor[0] <= rect.width && 0 <= mouseCursor[1] && mouseCursor[1] <= rect.height; | |
| return f; | |
| } | |
| function clearCanvas() { | |
| var w = canvas.width; | |
| var h = canvas.height; | |
| ctx.fillStyle = 'black'; | |
| ctx.fillRect(0, 0, w, h); | |
| } | |
| function resizeCanvas(width, height) { | |
| canvas.width = width ? width : canvas.width; | |
| canvas.height = height ? height : canvas.height; | |
| Redraw(); | |
| } | |
| function calculateCenter(shape) { | |
| var center = shape.reduce(function(acc, point) { | |
| if (point === null) { | |
| 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() { | |
| let stickWidth = 4; | |
| let imageSize = Math.min(canvas.width, canvas.height); | |
| stickWidth *= imageSize / 512; | |
| const colors = [[255, 0, 0], [255, 85, 0], [255, 170, 0], [255, 255, 0], [170, 255, 0], [85, 255, 0], [0, 255, 0], | |
| [0, 255, 85], [0, 255, 170], [0, 255, 255], [0, 170, 255], [0, 85, 255], [0, 0, 255], [85, 0, 255], | |
| [170, 0, 255], [255, 0, 255], [255, 0, 170], [255, 0, 85]]; | |
| ctx.globalAlpha = 0.6; | |
| // edge | |
| for (let i = 0; i < poseData.length; i++) { | |
| const pose = poseData[i]; | |
| for (let j = 0; j < 17; j++) { | |
| const p = pose[limbSeq[j][0]]; | |
| const q = pose[limbSeq[j][1]]; | |
| if (p == null || q == null) continue; | |
| const [X0, Y0] = p; | |
| const [X1, Y1] = q; | |
| let angle = Math.atan2(Y1 - Y0, X1 - X0); | |
| let magnitude = ((X0 - X1) ** 2 + (Y0 - Y1) ** 2) ** 0.5 | |
| let polygon = new Path2D(); | |
| polygon.ellipse((X0+X1)/2, (Y0+Y1)/2, magnitude / 2, stickWidth, angle, 0, 2 * Math.PI); | |
| ctx.fillStyle = `rgb(${colors[j].join(',')})`; | |
| ctx.fill(polygon); | |
| } | |
| } | |
| ctx.globalAlpha = 1.0; | |
| // node | |
| for (let i = 0; i < poseData.length; i++) { | |
| const pose = poseData[i]; | |
| ctx.font = '12px serif'; | |
| for (let j = 0; j < 18; j++) { | |
| const p = pose[j]; | |
| if (p == null) continue; | |
| const [x, y] = p; | |
| ctx.beginPath(); | |
| ctx.arc(x, y, stickWidth, 0, 2 * Math.PI); | |
| ctx.fillStyle = `rgb(${colors[j].join(',')})`; | |
| ctx.fill(); | |
| // ctx.fillStyle = 'rgb(255,255,255)' | |
| // ctx.fillText(j, x-3, y+4); | |
| } | |
| } | |
| } | |
| let lastWheeling = 0; | |
| function drawUI() { | |
| if (keyDownFlags['Space'] || keyDownFlags['BracketLeft'] || keyDownFlags['BracketRight'] || | |
| new Date().getTime() - lastWheeling < wheelDisplayTime) { | |
| ctx.beginPath(); | |
| ctx.lineWidth=4; | |
| ctx.arc(mouseCursor[0], mouseCursor[1], dragRange, 0, 2 * Math.PI); | |
| ctx.strokeStyle = 'rgb(255,255,255)'; | |
| ctx.stroke(); | |
| } | |
| if (isDragging && (dragMode == "rotate" || dragMode == "rotate2")) { | |
| ctx.beginPath(); | |
| ctx.lineWidth=1; | |
| ctx.strokeStyle = 'rgb(255,255,255)'; | |
| ctx.moveTo(dragStart[0], dragStart[1]); | |
| ctx.lineTo(dragStart[0]+rotateBaseVector[0], dragStart[1]+rotateBaseVector[1]); | |
| ctx.stroke(); | |
| } | |
| let operationTextFlags = { | |
| "Space": "Range Move", | |
| "AltLeft": "Body Move", | |
| "AltRight": "Body Move", | |
| "ControlLeft": "Scale", | |
| "ControlRight": "Scale", | |
| "ShiftLeft": "Rotate", | |
| "ShiftRight": "Rotate", | |
| "KeyQ": "CutOff", | |
| "KeyD": "Delete", | |
| "KeyX": "X-Axis", | |
| "KeyC": "Y-Axis", | |
| "KeyR": "Repair", | |
| } | |
| // operationTextFlagsに含まれるものがkeyDownFlagsに含まれるばあい、そのキーの文字列を取得 | |
| let activeOperations = Object.keys(operationTextFlags).filter(key => keyDownFlags[key]); | |
| if (activeOperations.length > 0) { | |
| // 左上に表示 | |
| ctx.font = '20px serif'; | |
| ctx.fillStyle = 'rgb(255,255,255)'; | |
| ctx.fillText(operationTextFlags[activeOperations[0]], 10, 30); | |
| } | |
| } | |
| function Redraw() { | |
| clearCanvas(); | |
| drawBodyPose(); | |
| drawUI(); | |
| } | |
| function getNearestNode(p) { | |
| let minDistSq = Infinity; | |
| let personIndex = -1; | |
| let nodeIndex = -1; | |
| for (let i = 0; i < poseData.length; i++) { | |
| const pose = poseData[i]; | |
| for (let j = 0; j < pose.length; j++) { | |
| const q = pose[j]; | |
| if (q == null) continue; | |
| const d = distSq(p, q); | |
| if (d < minDistSq) { | |
| minDistSq = d; | |
| personIndex = i; | |
| nodeIndex = j; | |
| } | |
| } | |
| } | |
| return [personIndex, nodeIndex, Math.sqrt(minDistSq)]; | |
| } | |
| let dragRange = 64; | |
| let dragRangeDelta = 16; | |
| // ドラッグ中に座標を保持するための変数 | |
| let isDragging = false; | |
| let dragStart = [0, 0]; | |
| let dragPersonIndex = -1; | |
| let dragMarks = []; | |
| let dragMode = ""; | |
| let rotateBaseVector = null; | |
| let history = []; | |
| let historyIndex = 0; | |
| function clearHistory() { | |
| history = []; | |
| historyIndex = 0; | |
| } | |
| function addHistory() { | |
| history = history.slice(0, historyIndex); | |
| history.push(JSON.parse(JSON.stringify(poseData))); | |
| historyIndex = history.length; | |
| } | |
| function undo() { | |
| if (1 < historyIndex) { | |
| historyIndex--; | |
| poseData = deepCopy(history[historyIndex-1]); | |
| Redraw(); | |
| } | |
| } | |
| function redo() { | |
| if (historyIndex < history.length) { | |
| historyIndex++; | |
| poseData = deepCopy(history[historyIndex-1]); | |
| Redraw(); | |
| } | |
| } | |
| function fetchLatestPoseData() { | |
| return history[historyIndex-1]; | |
| } | |
| function getCanvasPosition(event) { | |
| const rect = canvas.getBoundingClientRect(); | |
| const x = event.clientX - rect.left; | |
| const y = event.clientY - rect.top; | |
| return [x, y]; | |
| } | |
| function forEachMarkedNodes(fn) { | |
| for (let i = 0; i < dragMarks.length; i++) { | |
| for (let j = 0; j < dragMarks[i].length; j++) { | |
| if (dragMarks[i][j]) { | |
| fn(i, j, poseData[i][j]); | |
| } | |
| } | |
| } | |
| } | |
| // Canvas要素上でマウスが押された場合に呼び出される関数 | |
| function handleMouseDown(event) { | |
| const p = getCanvasPosition(event); | |
| const [personIndex, nodeIndex, minDist] = getNearestNode(p); | |
| if (keyDownFlags["KeyD"]) {removePerson(personIndex);return;} | |
| if (keyDownFlags["KeyR"]) {repairPerson(personIndex);return;} | |
| if (keyDownFlags["KeyQ"] && minDist < 16) { | |
| console.log("pressed KeyQ"); | |
| cutOffPersonLimb(personIndex, nodeIndex); | |
| return; | |
| } | |
| // ドラッグ処理の開始 | |
| dragStart = p; | |
| dragMarks = poseData.map(pose => pose.map(node => false)); | |
| if (event.altKey || event.ctrlKey || event.shiftKey || | |
| keyDownFlags["KeyX"] || keyDownFlags["KeyC"]) { | |
| // dragMarksを設定 | |
| dragMarks[personIndex] = | |
| poseData[personIndex].map((node) => node != null); | |
| isDragging = true; | |
| if (event.altKey) { | |
| dragMode = "move"; | |
| } else if (event.ctrlKey) { | |
| dragMode = "scale"; | |
| } 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] = | |
| poseData[personIndex].map( | |
| (node) => node != null && distSq(p, node) < dragRange ** 2); | |
| isDragging = dragMarks[personIndex].some((mark) => mark); | |
| dragMode = "move"; | |
| } else if (minDist < 16) { | |
| dragMarks[personIndex][nodeIndex] = true; | |
| isDragging = true; | |
| dragMode = "move"; | |
| } | |
| } | |
| // Canvas要素上でマウスが動いた場合に呼び出される関数 | |
| function handleMouseMove(event) { | |
| mouseCursor = getCanvasPosition(event); | |
| if (isDragging) { | |
| const p = getCanvasPosition(event); | |
| const dragOffset = [p[0] - dragStart[0], p[1] - dragStart[1]]; | |
| const latestPoseData = fetchLatestPoseData(); | |
| if (dragMode == "scale") { | |
| // 拡大縮小 | |
| let xScale = 1 + dragOffset[0] / canvas.width; | |
| let yScale = 1 + dragOffset[0] / canvas.height; | |
| forEachMarkedNodes((i, j, node) => { | |
| const lp = latestPoseData[i][j]; | |
| node[0] = (lp[0] - dragStart[0]) * xScale + dragStart[0]; | |
| node[1] = (lp[1] - dragStart[1]) * yScale + dragStart[1]; | |
| }); | |
| } else if (dragMode == "rotate") { | |
| rotateBaseVector = dragOffset; | |
| if (!event.shiftKey) { | |
| dragMode = "rotate2"; | |
| } | |
| } else if (dragMode == "rotate2") { | |
| // 回転 | |
| let angle = directedAngleTo(rotateBaseVector, dragOffset); | |
| forEachMarkedNodes((i, j, node) => { | |
| const lp = latestPoseData[i][j]; | |
| let x = lp[0] - dragStart[0]; | |
| let y = lp[1] - dragStart[1]; | |
| let sin = Math.sin(angle); | |
| let cos = Math.cos(angle); | |
| 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); | |
| 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) => { | |
| const lp = latestPoseData[i][j]; | |
| node[0] = lp[0] + dragOffset[0]; | |
| node[1] = lp[1] + dragOffset[1]; | |
| }); | |
| } | |
| } | |
| Redraw(); | |
| } | |
| function handleMouseUp(event) { | |
| isDragging = false; | |
| addHistory(); | |
| Redraw(); | |
| } | |
| function handleMouseLeave(event) { | |
| mouseCursor = [-1,-1]; | |
| } | |
| function ModifyDragRange(delta) { dragRange = Math.max(dragRangeDelta, Math.min(512, dragRange + delta)); } | |
| document.addEventListener('wheel', function(event) { | |
| if (!isMouseOnCanvas()) {return;} | |
| if (!event.altKey && !keyDownFlags['Space']) {return;} | |
| event.preventDefault(); | |
| const deltaY = event.deltaY; | |
| if (deltaY < 0) {ModifyDragRange(-dragRangeDelta);} | |
| if (0 < deltaY) {ModifyDragRange(dragRangeDelta);} | |
| lastWheeling = new Date().getTime(); | |
| Redraw(); | |
| window.setTimeout(function() { Redraw(); }, wheelDisplayTime+10); | |
| }, {passive: false}); | |
| document.addEventListener("keydown", (event) => { | |
| if (!isMouseOnCanvas()) {return;} | |
| if (event.code == "BracketLeft") { ModifyDragRange(-dragRangeDelta); } | |
| if (event.code == "BracketRight") { ModifyDragRange(dragRangeDelta); } | |
| keyDownFlags[event.code] = true; | |
| Redraw(); | |
| event.preventDefault(); | |
| }); | |
| document.addEventListener("keyup", (event) => { | |
| if (!isMouseOnCanvas()) {return;} | |
| keyDownFlags[event.code] = false; | |
| if (event.ctrlKey && event.code == "KeyE") { | |
| addPerson(); | |
| } else if (event.ctrlKey && event.code == "KeyZ") { | |
| if (event.shiftKey) { | |
| redo(); | |
| } else { | |
| undo(); | |
| } | |
| } | |
| Redraw(); | |
| event.preventDefault(); | |
| }); | |
| function initializeEditor() { | |
| console.log("initializeEditor"); | |
| canvas = document.getElementById('canvas'); | |
| ctx = canvas.getContext('2d'); | |
| canvas.addEventListener('mousedown', handleMouseDown); | |
| canvas.addEventListener('mousemove', handleMouseMove); | |
| canvas.addEventListener('mouseup', handleMouseUp); | |
| canvas.addEventListener('mouseleave', handleMouseLeave); | |
| poseData = []; | |
| clearHistory(); | |
| } | |
| function importPose(jsonData) { | |
| if (jsonData != null) { | |
| newPoseData = makePoseDataFromCandidateAndSubset(jsonData.candidate, jsonData.subset); | |
| } else { | |
| newPoseData = makePoseDataFromCandidateAndSubset(sampleCandidateSource, [sampleSubsetElementSource]); | |
| } | |
| poseData = poseData.concat(newPoseData); | |
| addHistory(); | |
| Redraw(); | |
| } | |
| /* | |
| function savePose() { | |
| const canvasUrl = canvas.toDataURL(); | |
| const createEl = document.createElement('a'); | |
| createEl.href = canvasUrl; | |
| // This is the name of our downloaded file | |
| createEl.download = "pose.png"; | |
| createEl.click(); | |
| createEl.remove(); | |
| var [candidate, subset] = poseDataToCandidateAndSubset(poseData); | |
| return {candidate: candidate, subset: subset}; | |
| } | |
| */ | |
| // crc32 | |
| // CRC32を初期化 | |
| function initCrc32Table() { | |
| const crcTable = new Uint32Array(256); | |
| for (let i = 0; i < 256; i++) { | |
| let c = i; | |
| for (let j = 0; j < 8; j++) { | |
| c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1); | |
| } | |
| crcTable[i] = c; | |
| } | |
| return crcTable; | |
| } | |
| // データのCRC32を計算 | |
| function getCrc32(data, crc=0) { | |
| const crcTable = initCrc32Table(); | |
| crc = (crc ^ 0xFFFFFFFF) >>> 0; | |
| for (let i = 0; i < data.length; i++) { | |
| crc = crcTable[(crc ^ data[i]) & 0xFF] ^ (crc >>> 8); | |
| } | |
| return (crc ^ 0xFFFFFFFF) >>> 0; | |
| } | |
| function stringToUint8Array(str) { | |
| var arr = new Uint8Array(str.length); | |
| for (var i = 0; i < str.length; i++) { | |
| arr[i] = str.charCodeAt(i); | |
| } | |
| return arr; | |
| } | |
| function base64ToUint8Array(base64Str) { | |
| return stringToUint8Array(atob(base64Str)); | |
| } | |
| function visitPng(png, type) { | |
| var dataLength; | |
| var chunkType; | |
| var nextChunkPos; | |
| var Signature = String.fromCharCode(137, 80, 78, 71, 13, 10, 26, 10); | |
| var rpos = 0; | |
| // シグネチャの確認 | |
| if (String.fromCharCode.apply(null, png.subarray(rpos, rpos += 8)) !== Signature) { | |
| throw new Error('invalid signature'); | |
| } | |
| // チャンクの探索 | |
| while (rpos < png.length) { | |
| dataLength = ( | |
| (png[rpos++] << 24) | | |
| (png[rpos++] << 16) | | |
| (png[rpos++] << 8) | | |
| (png[rpos++] ) | |
| ) >>> 0; | |
| nextChunkPos = rpos + dataLength + 8; | |
| chunkType = String.fromCharCode.apply(null, png.subarray(rpos, rpos += 4)); | |
| if (chunkType === type) { | |
| return [rpos - 8, dataLength, nextChunkPos]; | |
| } | |
| rpos = nextChunkPos; | |
| } | |
| } | |
| function createChunk(type, data) { | |
| var dataLength = data.length; | |
| var chunk = new Uint8Array(4 + 4 + dataLength + 4); | |
| var type = stringToUint8Array(type); | |
| var pos = 0; | |
| // length | |
| chunk[pos++] = (dataLength >> 24) & 0xff; | |
| chunk[pos++] = (dataLength >> 16) & 0xff; | |
| chunk[pos++] = (dataLength >> 8) & 0xff; | |
| chunk[pos++] = (dataLength ) & 0xff; | |
| // type | |
| chunk[pos++] = type[0]; | |
| chunk[pos++] = type[1]; | |
| chunk[pos++] = type[2]; | |
| chunk[pos++] = type[3]; | |
| // data | |
| for (let i = 0; i < dataLength; ++i) { | |
| chunk[pos++] = data[i]; | |
| } | |
| //crc | |
| initCrc32Table(); | |
| let crc = getCrc32(type); | |
| crc = getCrc32(data, crc); | |
| chunk[pos++] = (crc >> 24) & 0xff; | |
| chunk[pos++] = (crc >> 16) & 0xff; | |
| chunk[pos++] = (crc >> 8) & 0xff; | |
| chunk[pos++] = (crc ) & 0xff; | |
| return chunk; | |
| } | |
| function insertChunk(destBuffer, sourceBuffer, rpos, chunk) { | |
| var pos = 0; | |
| // IDAT チャンクの前までコピー | |
| destBuffer.set(sourceBuffer.subarray(0, rpos), pos); | |
| pos += rpos; | |
| // hoGe チャンクをコピー | |
| destBuffer.set(chunk, pos); | |
| pos += chunk.length; | |
| // IDAT チャンク以降をコピー | |
| destBuffer.set(sourceBuffer.subarray(rpos), pos); | |
| } | |
| function mergeCanvasWithPose(keyword, content) { | |
| const canvasUrl = canvas.toDataURL(); | |
| var insertion = stringToUint8Array(`${keyword}\0${content}`); | |
| var chunk = createChunk("tEXt", insertion); | |
| var sourceBuffer = base64ToUint8Array(canvasUrl.split(',')[1]); | |
| var destBuffer = new Uint8Array(sourceBuffer.length + insertion.length + 12); | |
| var [rpos, dataLength, nextChunkPos] = visitPng(sourceBuffer, "IHDR"); | |
| insertChunk(destBuffer, sourceBuffer, nextChunkPos, chunk); | |
| var blob = new Blob([destBuffer], {type: "image/png"}); | |
| var url = URL.createObjectURL(blob); | |
| return url; | |
| } | |
| function savePose() { | |
| var [candidate, subset] = poseDataToCandidateAndSubset(poseData); | |
| let jsonData = {candidate: candidate, subset: subset}; | |
| var url = mergeCanvasWithPose("openpose", JSON.stringify(jsonData)); | |
| const createEl = document.createElement('a'); | |
| createEl.href = url; | |
| // This is the name of our downloaded file | |
| createEl.download = "pose.png"; | |
| createEl.click(); | |
| createEl.remove(); | |
| } | |