31:T633,plotInit = { let plotArea = d3.select(maindiv).select('svg'); plotArea.selectAll("circle,text,path").remove(); plotArea.append("text").attr("class", "error") .attr("fill","black") .attr("x", 20) .attr("y", 20); plotArea.append("path") .attr("class", "projcurve") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); plotArea.append("path") .attr("class", "mark") .attr("d", "M10,0 L-10,0 M0,10 L0,-10") .style("stroke", interpColor) .style("stroke-width", 2.5); plotArea.append("path") .attr("class", "closest") .attr("d", "M15,0 L0,15 L-15,0 0,-15 Z") .style("stroke", closestColor) .style("fill", "none") .style("stroke-width", 2.5); plotArea.append("path") .attr("class", "frame") .attr("d", "M-10,-10 L-10,10 L10,10 L10,-10 Z") .style("stroke", originalColor) .style("fill", "none") .style("stroke-width", 2.5); function svgdragstarted (d,i) { let [px,py] = d3.mouse(this); d3.event.sourceEvent.preventDefault(); mutable xy = [screenX.invert(px), screenY.invert(py)]; } function svgdragged (d,i) { let [px,py] = d3.mouse(this); d3.event.sourceEvent.preventDefault(); mutable xy = [screenX.invert(px), screenY.invert(py)]; } function svgdragended (d,i) { } let svgDrag = d3.drag() .on("start", svgdragstarted) .on("drag", svgdragged) .on("end", svgdragended); plotArea.call (svgDrag); }32:T401,kfDrag = { console.log ("kf drag redefined"); let x = screenX, y = screenY; // Drag functions function kfdragstarted(d,i) { d3.event.sourceEvent.preventDefault(); console.log ("selected "+i); // mutable currentFrame = i; d3.event.sourceEvent.stopPropagation(); } function kfdragged(d,i) { let [px,py] = [d3.event.x, d3.event.y]; d[1]= x.invert(px); d[2]= y.invert(py); d3.select(this).attr("cx", px).attr("cy", py); d3.event.sourceEvent.stopPropagation(); } function kfdragended(d) { callSetKFs(); console.log ("calling reproject"); let opt = !!optimizeCheckBox.value; console.log (opt); reproject(opt); console.log ("done"); // let proj = reproject(false); // if (autoOptimize) { proj = reproject(true) } // mutable projection = proj; // d3.event.sourceEvent.stopPropagation(); } let kfDrag = d3.drag() .on("start", kfdragstarted) .on("drag", kfdragged) .on("end", kfdragended); return kfDrag; }33:T64e,plot = { console.log ('plot redefined'); let plotArea = d3.select(maindiv).select('svg'); let x = screenX, y = screenY; const curveColor = ["DarkBlue", "DarkGreen", "DarkRed"]; // Draw the mocap projection curves let curves = plotArea.selectAll("path.projcurve").data (mocaps); curves.exit().remove(); curves.enter().append("path").attr("class", "projcurve").merge(curves) .attr("stroke", (d,i) => curveColor[i%curveColor.length]) .attr("stroke-width", (d,i) => i == currentMocap ? 2.5 : 1.5) .attr("fill", "none") .attr("d", function (d) { return line(d.projection) }); // Draw the keyframes let kfs = plotArea.selectAll("circle.key").data(kfProjection); kfs.exit().remove(); console.log(!!kfCheckBox); console.log("kfCheckBox = " + kfCheckBox); let display = !!kfCheckBox ? "inline" : "none"; kfs.enter().append("circle").attr("class", "key") .call (kfDrag) .merge(kfs) .attr("cx", d => x(d[1])) .attr("cy", d => y(d[2])) .attr("r", 8) .attr("fill", "red") .attr("opacity", 0.6) .style("display", display); // Draw the black circles let projection = currentMocap == null ? [] : mocaps[currentMocap].projection; let join = plotArea.selectAll("circle.frame").data(projection); join.exit().remove(); join.enter().append("circle") .attr("class", "frame") .merge(join) .attr("cx", d => x(d[0])) .attr("cy", d => y(d[1])) .attr("r", 4) .attr("fill", "black") .attr("opacity", 0.6) .on ("click", function (d, i) { mutable currentFrame = i }) }34:Tf72,SkeletonHelper = { let { Color, CylinderBufferGeometry, Matrix4, Vector3, Quaternion, Bone, Group, Mesh, MeshLambertMaterial } = THREE; // Recursively visit all bones in the skeleton starting from the root bone function getBoneList( object ) { var boneList = []; if ( object && object.isBone ) boneList.push( object ); for ( var i = 0; i < object.children.length; i ++ ) { boneList.push.apply( boneList, getBoneList( object.children[ i ] ) ); } return boneList; } // Clones a bone function dupBone (b) { var nb = new Bone(); nb.position.copy (b.position); nb.quaternion.copy (b.quaternion); nb.name = b.name; return nb } // Clones a skeleton function dupSkeleton ( root ) { var dupRoot; if ( root && root.isBone ) { dupRoot = dupBone(root); } else return null; for ( var i = 0; i < root.children.length; i ++ ) { let dupBranch = dupSkeleton (root.children[i] ); if (dupBranch == null) continue; dupRoot.add (dupBranch); } return dupRoot; } class SkeletonHelper extends Group { // Constructor uses the first bone of the skeleton as 'object' constructor (rootBone, options = { color : 0x00ff00, radius : 0.5 } ) { super(); this.root = rootBone; this.bones = getBoneList(rootBone); this.matrix = rootBone.matrixWorld; this.matrixAutoUpdate = false; this.configure (options); this.reference = null; } configure (options) { let { color, radius, boneerror = false, boneerrormultiply = 5 } = options; this.boneerror = boneerror; this.boneerrormultiply = boneerrormultiply; var boneGeometry = new CylinderBufferGeometry (radius, radius, 1); var boneMaterial = new MeshLambertMaterial ({ color: color }); while (this.children.length>0) this.remove(this.children[0]); for ( var i = 0; i < this.bones.length; i ++ ) { var bone = this.bones[ i ]; if ( bone.parent && bone.parent.isBone ) { let mesh = new Mesh (boneGeometry, boneMaterial); mesh.matrixAutoUpdate = false; this.add (mesh); } } } // Builds a clone of this skeleton helper clone () { return new SkeletonHelper(dupSkeleton(this.root)) } // Applies the bone transformations to the renderable objects updateMatrixWorld (force) { var v0 = new Vector3(); var v1 = new Vector3(); var y = new Vector3(0,1,0); var q = new Quaternion(); var boneMatrix = new Matrix4(); var displace = new Matrix4().makeTranslation(0,0.5,0); var matrixWorldInv = new Matrix4(); var bones = this.bones; matrixWorldInv.getInverse( this.root.matrixWorld ); for ( var i = 0, j = 0; i < bones.length; i ++ ) { var bone = bones[ i ]; if ( bone.parent && bone.parent.isBone ) { boneMatrix.multiplyMatrices( matrixWorldInv, bone.matrixWorld ); v0.setFromMatrixPosition( boneMatrix ); boneMatrix.multiplyMatrices( matrixWorldInv, bone.parent.matrixWorld ); v1.setFromMatrixPosition( boneMatrix ); v1.sub (v0); var len = v1.length(); v1.multiplyScalar (1/len); console.assert(bone.quaternion !== undefined); let alpha = (!this.boneerror || this.reference == null) ? 1 : 0.2 + Math.abs(this.reference.bones[i].quaternion.angleTo(bone.quaternion)) /Math.PI*this.boneerrormultiply; q.setFromUnitVectors(y,v1); var mesh = this.children[j++]; mesh.position.copy (v0); mesh.quaternion.copy (q); mesh.scale.set (alpha,len,alpha); mesh.updateMatrix(); mesh.matrix.multiply(displace); } } super.updateMatrixWorld ( force ); } } return SkeletonHelper; }35:T4bb,scene = { let scene = new THREE.Scene(); scene.background = new THREE.Color( 0xeeeeee ); scene.add( new THREE.GridHelper( 800, 20 ) ); var ambientLight = new THREE.AmbientLight( 0x000000 ); scene.add( ambientLight ); var light1 = new THREE.DirectionalLight (0xffffff,0.9); var light2 = new THREE.DirectionalLight (0xffffff,0.9); var light3 = new THREE.DirectionalLight (0xffffff,0.9); light1.position.set ( Math.cos (Math.PI*2/3), 0.5, Math.sin (Math.PI*2/3) ); light2.position.set ( Math.cos (Math.PI*4/3), 0.5, Math.sin (Math.PI*4/3) ); light3.position.set ( Math.cos (Math.PI*6/3), 0.5, Math.sin (Math.PI*6/3) ); scene.add (light1,light2,light3); let boneContainer = new THREE.Group(); let s = 5; boneContainer.scale.set(s,s,s); boneContainer.add( sk ); boneContainer.add( sk.bones[0]); boneContainer.add( interpSk ); boneContainer.add( interpSk.bones[0]); // boneContainer.add( skeletonClone ); // boneContainer.add( skeletonClone.bones[0] ); scene.add( boneContainer ); // // play animation // let mx = new THREE.AnimationMixer( skeletonHelper ); // mx.clipAction( bvh.clip ).setEffectiveWeight( 1.0 ).play(); // mutable mixer = mx; return scene; }36:T667,animate = { let request = null; const clock = new THREE.Clock(); let animate = function () { request = requestAnimationFrame( animate ); // Call this same function on the next frame // let delta = clock.getDelta(); // if ( mixer ) { // if (gui.play) { // let action = mixer.update(delta); // let t = mixer.time % bvh.clip.duration; // //mutable time = t; // mutable currentFrame = frameFromTime(t); // //setClonePose(frameFromTime(t)); // } // } let views = [ { left : 0, top : 0, width: 1, height:0.5, removeObjects : [interpSk] }, { left : 0, top : 0.5, width : 1, height: 0.5, removeObjects: [sk] } ]; for ( let view of views ) { var left = Math.floor( rendererSize.width * view.left ); var top = Math.floor( rendererSize.height * view.top ); var width = Math.floor( rendererSize.width * view.width ); var height = Math.floor( rendererSize.height * view.height ); renderer.setViewport( left, top, width, height ); renderer.setScissor( left, top, width, height ); renderer.setScissorTest( true ); camera.aspect = width / height; camera.updateProjectionMatrix(); let parents = []; for (let obj of view.removeObjects) { parents.push (obj.parent); obj.parent.remove (obj) } renderer.render( scene, camera ); for (let obj of view.removeObjects) { let p = parents.shift(); p.add (obj) } } } invalidation.then(function() { cancelAnimationFrame (request); }) animate(); return "Animate defined" }37:[] 2f:{"title":"BVH Multi Projection Visualization","cells":[{"id":0,"value":"md`# BVH Multi Projection Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"maindiv = { \n let div = html`

`;\n div.append (renderer.domElement);\n renderer.domElement.style[\"vertical-align\"] = \"top\";\n let svg = DOM.svg(svgSize.width,svgSize.height);\n div.append (svg)\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"viewof kfratio = slider({\n min: 0, \n max: 50, \n step: 0.5, \n value: 5,\n description: \"Keyframe ratio (%)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"viewof frameSlider = slider({\n min: 0, \n max: currentMocap != null ? mocaps[currentMocap].nframes-1 : 1, \n step: 1, \n value: 0,\n description: \"Frame Slider\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"viewof curMocapRadio = {\n let r = radio(\n {options : [\"None\", \"0\", \"1\", \"2\", \"3\", \"4\", \"5\"].slice(0,mocaps.length+1),\n title: \"Set Current Mocap\",\n value: \"\"+(mocaps.length-1)}\n )\n \n return r; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof bvhFile = file()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"{ \n let div = html`

`;\n \n let addButton = html``;\n addButton.onclick = function () {\n loadMocap (bvhText)\n }\n div.append (addButton);\n \n let clearButton = html``;\n clearButton.onclick = clearMocaps;\n div.append (clearButton);\n \n let computeKfsButton = html``;\n computeKfsButton.onclick = callComputeKFs;\n div.append (computeKfsButton);\n \n let reprojButton = html``;\n reprojButton.onclick = function () {\n reproject(optimizeCheckBox.value)\n }\n div.append (reprojButton);\n \n let reprojOptButton = html``;\n reprojOptButton.onclick = function () {\n reproject(true)\n }\n div.append (reprojOptButton);\n \n for (let c of div.childNodes) {\n c.style[\"margin-right\"] = \"8px\";\n }\n \n return div;\n}\n \n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"viewof optimizeCheckBox = checkbox({\n title: \"Optimize projection\",\n options: [\n { value: \"yes\", label: \"ok\" }\n ],\n value: [false],\n description : \"Automatically optimize projection when control point is dragged\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"viewof kfCheckBox = checkbox({\n title: 'Render Keyframes ?',\n description: 'draw keyframes as big dots',\n options: [\n { value: 'y', label: 'Yes' },\n ],\n value: [false]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"/** \n * Set skeleton helper sk to the pose interpolated from position x,y of the \n * interaction plane\n **/\nfunction interpolateSkeleton (sk, x, y) {\n let y0 = mocaps[0].translations[1];\n // set SKF interpolated skeleton\n let quatArray = new cArray (4 * dof);\n unprojectPose(quatArray.offset, 4*dof, x, y);\n setSkeletonPose (sk, quatArray.getArray(), new THREE.Vector3 (0,y0,0) );\n quatArray.dispose();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"/**\n * Returns the error between an interpolated pose stored in poseData and\n * and the pose 'frame' of the current mocap\n **/\nfunction getError (poseData, frame) { \n let pose1 = new cArray (4 * dof);\n let pose2 = new cArray (4 * dof);\n let p1data = pose1.getArray();\n for (let i = 0; i < poseData.length; i++) {\n p1data[i] = poseData[i];\n }\n let poseData2 = bvhQuatRot(frame);\n let p2data = pose2.getArray();\n for (let i = 0; i < poseData2.length; i++) {\n p2data[i] = poseData2[i];\n }\n let error = getPoseError (pose1.offset, pose2.offset, 4*dof);\n pose1.dispose();\n pose2.dispose();\n return error;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"getErrorMatrix = function (nx,ny) {\n let result = [];\n let interp = sk.clone();\n for (let i = 0; i < ny; i++) {\n result.push([]);\n let y = (0.5 + i) / ny;\n for (let j = 0; j < nx; j++) {\n let x = (0.5 + j) / nx;\n interpolateSkeleton (interp, x, y);\n let frame = getClosestFrame(x,y)\n result[i][j] = getError(interp,frame)\n }\n }\n return result \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"colorScale=d3.scaleLinear().domain([0,0.5,1]).range([d3.color(\"blue\"),d3.color(\"green\"),d3.color(\"red\")])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"{\n let svg = d3.select(DOM.svg(svgSize.width,svgSize.height));\n let n = 10;\n let m = getErrorMatrix(n,n);\n let w = svgSize.width / n;\n let h = svgSize.height / n;\n svg.selectAll(\"g\").data(m).enter().append(\"g\")\n .selectAll(\"rect\").data((d,i)=>d.map(x => [x,i])).enter()\n .append(\"rect\")\n .each(function (d,i) {\n let r = d3.select(this);\n let [e, j] = d;\n console.log (i,j,e)\n //r.attr(\"x\"\n })\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"error = {\n xy; // force this to be re-evaluated if xy changes\n let pose1 = new cArray (4 * dof);\n let pose2 = new cArray (4 * dof);\n let p1data = pose1.getArray();\n let interp = getSkeletonPose(interpSk);\n for (let i = 0; i < interp.length; i++) {\n p1data[i] = interp[i];\n }\n //console.log (interp);\n let p2data = pose2.getArray();\n let current = getSkeletonPose(sk);\n for (let i = 0; i < current.length; i++) {\n p2data[i] = current[i];\n }\n //console.log (current);\n let error1 = getPoseError(pose1.offset,pose2.offset,4*dof);\n //p2data = pose2.getArray();\n let closest = bvhQuatRot(closestFrame);\n for (let i = 0; i < closest.length; i++) {\n p2data[i] = closest[i];\n }\n let error2 = getPoseError (pose1.offset, pose2.offset, 4*dof);\n pose1.dispose();\n pose2.dispose();\n\n let fmt = d3.format(\".3f\");\n d3.select(\"svg text.error\").text(`Current: ${fmt(error1)} Closest: ${fmt(error2)}`) \n\n return { current: error1, closest: error2 };\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"//nframes = getNumberOfFrames(bvhText)\n//nframes = add2DB()\nmutable nframes = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"dof = 31","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"mutable mocaps = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"mutable currentMocap = +curMocapRadio >= 0 ? +curMocapRadio : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"loadMocap = function (bvhText) {\n var loader = new THREE.BVHLoader( ); \n let bvh = loader.parse (bvhText); // Compute structure for display\n let frames = add2DB(bvhText); // Add to motion database \n console.assert (bvh.clip.tracks[0].times.length == frames);\n mutable nframes = frames + nframes;\n let bvhTranslation = Float32Array.from(bvh.clip.tracks[0].values);\n mutable currentMocap = mocaps.length;\n mutable mocaps = mocaps.concat ([{bvh: bvh, projection: [], translations: bvhTranslation, nframes : frames }]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"clearMocaps = function () {\n clearDB();\n mutable nframes = 0;\n mutable mocaps = [];\n mutable currentMocap = null;\n mutable kfProjection = [];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"mutable kfProjection = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"callComputeKFs = function () {\n let nkfs = ~~(kfratio * nframes / 100);\n let projArray = cArray(nkfs*3);\n computeKFs (projArray.offset, nkfs, 500);\n let proj = [];\n let data = projArray.getArray();\n console.assert (data.length == projArray.size);\n for (let i = 0; i < data.length; i+=3) {\n proj.push ([data[i], data[i+1], data[i+2]])\n }\n projArray.dispose();\n mutable kfProjection = proj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"callSetKFs = function () {\n let nkfs = mutable kfProjection.length;\n let projArray = cArray(nkfs*3);\n let data = projArray.getArray();\n for (let i = 0; i < data.length; i+=3) {\n let row = mutable kfProjection[i/3];\n data[i] = row[0];\n data[i+1] = row[1];\n data[i+2] = row[2];\n }\n setKFs (projArray.offset, nkfs);\n projArray.dispose();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"reproject = {\n console.log (\"reproject redefined\");\n function reproject (optimize = false) {\n let projArray = cArray(nframes*3);\n getRBFP(projArray.offset, 0, nframes);\n if (optimize) {\n getRBFPOpt(projArray.offset);\n }\n let data = projArray.getArray();\n console.assert(data.length == nframes * 3);\n let j = 0;\n let imocap = 0;\n let k = 0;\n let nkf = mutable kfProjection.length;\n for (let i = 0; i < data.length; i+=3) {\n let proj = [data[i], data[i+1], data[i+2]];\n if (!!proj[2]) { // A keyframe\n let tmp = mutable kfProjection[k++];\n tmp[0] = i/3;\n tmp[1] = proj[0];\n tmp[2] = proj[1];\n }\n mutable mocaps [imocap].projection[j] = proj;\n j++;\n if (j >= mutable mocaps [imocap].nframes) {\n j = 0;\n imocap++;\n }\n }\n // console.log (\"keyframes\", nkf, k);\n mutable mocaps = mutable mocaps;\n projArray.dispose();\n }\n return reproject;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"svgSize = ({width:width*7/16,height:width*7/16})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"margin = ({left:10,right:10,bottom:10,top:10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"//\n// Function to map projection x coordinate to screen\n//\nscreenX = d3.scaleLinear().domain([-0.2,1.2]).range([margin.left,svgSize.width-margin.right])\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"screenY = d3.scaleLinear().domain([-0.2,1.2]).range([svgSize.height-margin.top,margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"line = d3.line()\n .curve(d3.curveCatmullRom)\n .x(d => screenX(d[0]))\n .y(d => screenY(d[1]))\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"viewof originalColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"viewof interpColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"viewof closestColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"moveMark = {\n d3.select(maindiv).select(\"svg path.mark\").attr(\"transform\", `translate(${screenX(xy[0])},${screenY(xy[1])})`)\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"moveFrame = {\n if (currentMocap != null) {\n let cf = mocaps[currentMocap].projection[currentFrame];\n d3.select(maindiv).select(\"svg path.frame\").attr(\"transform\", `translate(${screenX(cf[0])},${screenY(cf[1])})`)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"moveClosest = {\n let cf = mocaps[currentMocap].projection[closestFrame];\n d3.select(maindiv).select(\"svg path.closest\")\n .attr(\"transform\", `translate(${screenX(cf[0])},${screenY(cf[1])})`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1339,"value":"function getClosestFrame(x,y) {\n let mind = 1e10;\n let closest = -1;\n let i = 0;\n for (let p of mocaps[currentMocap].projection) {\n let d = Math.sqrt(Math.pow(x-p[0],2)+Math.pow(y-p[1],2));\n if (d < mind) {\n closest = i;\n mind = d;\n }\n i++\n }\n return closest\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"closestFrame = getClosestFrame(...xy)","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"mutable xy = [0,0]\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`## Skeleton code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"mutable bvhTranslation = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"rendererSize = ({width:width*7/16,height:width*7/16})","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"camera = {\n let camera = new THREE.PerspectiveCamera( 60, rendererSize.width/rendererSize.height, 1, 4000 );\n\tcamera.position.set( 0, 200, 400 );\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"sk = {\n let bvh = currentMocap != null ? mocaps[currentMocap].bvh : mocaps[0].bvh;\n let sh = new SkeletonHelper(bvh.skeleton.bones[0]);\n sh.skeleton = bvh.skeleton; // allow animation mixer to bind to SkeletonHelper directly\n sh.configure({color:originalColor, radius:0.5});\n return sh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"interpSk = {\n let sh = sk.clone();\n sh.reference = sk;\n sh.configure({color:interpColor, radius:0.5});\n return sh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"renderer = {\n let renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(rendererSize.width, rendererSize.height);\n renderer.setPixelRatio(devicePixelRatio);\n invalidation.then(function () {\n renderer.dispose();\n });\n return renderer\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1148,"value":"controls = {\n let controls = new THREE.EditorControls(camera, renderer.domElement);\n let controlsUpdate = () => renderer.render(scene, camera);\n controls.addEventListener(\"change\", controlsUpdate);\n invalidation.then(function () {\n controls.removeEventListener(\"change\", controlsUpdate);\n controls.dispose();\n });\n return controls;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"/**\n * an array of pairs that map quaternion track indices to the corresponding bone indices\n **/\nquatTrackToBone = {\n let bvh = mocaps[0].bvh;\n let tracks = bvh.clip.tracks;\n let bones = bvh.skeleton.bones;\n \n \n let boneName = new Map();\n for (let i = 0; i < bones.length; i++) {\n let bone = bones[i];\n boneName.set(bone.name,i)\n }\n \n let trackToBone = []\n for (let i = 0; i < tracks.length; i++) {\n let t = tracks[i];\n if (t.name.search(\"quaternion\")>0) {\n let a = t.name.search(/\\[/);\n let b = t.name.search(/\\]/);\n trackToBone.push([i,boneName.get(t.name.slice(a+1,b))])\n }\n }\n \n return trackToBone\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"/**\n * Recomputes a skeleton helper from an array containing the rotations of all non-terminal joints\n **/\nsetSkeletonPose = function (sh, pose, position=new THREE.Vector3(0,0,0)) {\n let i = 0;\n console.assert (pose.length == quatTrackToBone.length*4);\n sh.bones[0].position.copy(position);\n for (let [itrack,ibone] of quatTrackToBone) {\n let q = new THREE.Quaternion(pose [i++],pose[i++],pose[i++],pose[i++]);\n q.normalize();\n sh.bones[ibone].quaternion.set (q.x,q.y,q.z,q.w)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"/**\n * Returns an array containing the rotations of all non-terminal joints for a given skeleton helper\n **/\ngetSkeletonPose = function (sh) {\n let i = 0;\n let pose = [];\n for (let [itrack,ibone] of quatTrackToBone) {\n let q = sh.bones[ibone].quaternion;\n pose.push(q.x, q.y, q.z, q.w);\n }\n return pose;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"bvhQuatRot = function (frame) {\n \n let bvh = mocaps[currentMocap].bvh;\n let tracks = bvh.clip.tracks;\n \n if (bvh.joints == undefined) {\n // find which tracks are rotations and store their indices in bvh.joints\n bvh.joints = [];\n for (let i = 0; i < tracks.length; i++) {\n let t = tracks[i];\n if (t.name.search(\"quaternion\")>0) {\n bvh.joints.push(i);\n }\n }\n }\n \n let offset = frame*4;\n let quats = new Float32Array(bvh.joints.length * 4);\n let i = 0;\n for (let j of bvh.joints) { \n let values = tracks[j].values;\n quats[i++] = values[offset]; \n quats[i++] = values[offset+1]; \n quats[i++] = values[offset+2]; \n quats[i++] = values[offset+3]; \n }\n return quats;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"mutable currentFrame = frameSlider","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"frameSliderCallback = { \n let y = mocaps[0].translations[1];\n setSkeletonPose ( sk, bvhQuatRot(currentFrame), new THREE.Vector3 (0,y,0) );\n return frameSlider\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"showInterpolatedSk = {\n let y = mocaps[0].translations[1];\n // set SKF interpolated skeleton\n let quatArray = new cArray (4 * dof);\n unprojectPose(quatArray.offset, 4*dof, xy[0], xy[1]);\n setSkeletonPose ( interpSk, quatArray.getArray(), new THREE.Vector3 (0,y,0) );\n quatArray.dispose();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"interpSkCallback = {\n return xy\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"bvhText = Files.text(bvhFile)","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.96/build/three.min.js\");\n await require(\"three@0.96/examples/js/controls/EditorControls.js\").catch(() => {});\n await require(\"three@0.96/examples/js/loaders/BVHLoader.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"import {file, slider, checkbox, radio} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"import { Module, add2DB, clearDB, computeKFs, setKFs, getRBFP, getRBFPOpt, getPoseError, unprojectPose, cArray } from \"@bfcosta/bvh-multi-projection-library\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}