31:T546,{ if (projectionSource == "database") { if (twostep) { viewof selectionAlgorithm.value = 'rbfp'; return md`**Projection:** Two step? ${bind (makeCheckbox(), viewof twostep)} Keyframe % ${bind (makeSelect({options:["3pc","5pc","7pc","9pc"]}), viewof keyframePercentage)}, First step ${bind (makeSelect({options:["force","isomap","lle","mds","pca","tsne"]}), viewof projectionAlgorithm)}, Selection: **rols**, Second step: **rbfp** Optimized ${bind (makeCheckbox(), viewof optimizedProjection)}` } else { if (viewof selectionAlgorithm.value == 'rbfp') viewof selectionAlgorithm.value = 'rols'; return md` **Projection:** Two step? ${bind (makeCheckbox(), viewof twostep)} Keyframe % ${bind (makeSelect({options:["3pc","5pc","7pc","9pc"]}), viewof keyframePercentage)}, Projection ${bind (makeSelect({options:["force","isomap","lle","mds","pca","tsne"]}), viewof projectionAlgorithm)}, Selection ${bind (makeSelect({options:["pb","rols","scs","us"]}), viewof selectionAlgorithm)} Optimized ${bind (makeCheckbox(), viewof optimizedProjection)}` } } else { return md`Projection file: ${bind (makeFile(), viewof projectionFile)}` } } 32:T443,scene = { let scene = new THREE.Scene(); scene.background = new THREE.Color( 0xeeeeee ); scene.add( new THREE.GridHelper(2000, 40 ) ); var ambientLight = new THREE.AmbientLight( 0x101010 ); 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), -1, 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 = 3; boneContainer.scale.set(s,s,s); boneContainer.add( sk ); boneContainer.add( sk.bones[0]); boneContainer.add( interpolatedSk ); boneContainer.add( interpolatedSk.bones[0]); boneContainer.add( timeInterpolatedSk ); boneContainer.add( timeInterpolatedSk.bones[0]); scene.add( boneContainer ); boneContainer.add( trajectories ); return scene; }33:T161c,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; this.jointPairs = []; this.jointPairNames = []; for (let b of this.bones) { b.length = 0; b.importance = 1; if (b.parent && b.parent.isBone) { //b.length = b.parent.length + b.position.length(); b.importance += b.position.length(); this.jointPairs.push ([b,b.parent]); this.jointPairNames.push (b.name+"-"+b.parent.name); } } for (let i = this.bones.length-1; i>=0; i--) { let b = this.bones[i]; if (b.parent && b.parent.isBone) { // let tmp = b.importance + (b.length - b.parent.length); // b.parent.importance = Math.max(b.parent.importance, tmp); let tmp = b.importance + b.length; b.parent.length = Math.max(b.parent.length,tmp); } } for (let i = this.bones.length-1; i>=0; i--) { let b = this.bones[i]; b.importance += b.length; } } jointPairSegment (jointPair) { let [b,p] = jointPair; let [bpos, ppos] = [new Vector3(),new Vector3()]; b.getWorldPosition(bpos); p.getWorldPosition(ppos); return [bpos,ppos]; } 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); bone.mesh = 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; 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 = bone.mesh; mesh.position.copy (v0); mesh.quaternion.copy (q); mesh.scale.set (alpha,len,alpha); mesh.updateMatrix(); mesh.matrix.multiply(displace); } } super.updateMatrixWorld ( force ); } // // Recomputes a skeleton helper from an array containing the rotations of all non-terminal joints // setPose (pose, position=new THREE.Vector3(0,0,0)) { let i = 0; console.assert (pose.length == quatTrackToBone.length*4); this.bones[0].position.copy(position); for (let [itrack,ibone] of quatTrackToBone) { let q = new THREE.Quaternion(pose [i++],pose[i++],pose[i++],pose[i++]); //q.normalize(); this.bones[ibone].quaternion.set (q.x,q.y,q.z,q.w) } } } return SkeletonHelper; }34:Tc38,projectionPlot = { let {width:w, height:h, margin, keyframeRadius, frameRadius, markerRadius} = projectionPlotSize; let svg = DOM.svg (w,h); let sel = d3.select(svg); let projcurve = sel.append("path") .attr("class", "projcurve") .attr("fill", "none") .attr("stroke", "black") .style("opacity", 0.3) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); let framemarker = sel.append("path") .attr("class", "frame") .attr("d", "M-10,-10 L-10,10 L10,10 L10,-10 Z".replace(/10/g,markerRadius)) .style("stroke", "red") .style("fill", "none") .style("stroke-width", 2); let interpolatemarker = sel.append("path") .attr("class", "interpolatemark") .attr("d", "M10,0 L-10,0 M0,10 L0,-10".replace(/10/g,markerRadius)) .style("stroke", "blue") .style("stroke-width", 2); let screenX, screenY; let projection; let currentframe = 0; function setFrame (frame) { currentframe = frame; if (projection && projection[frame]) { let pos = projection[frame]; framemarker.attr("transform", `translate(${screenX(pos.x)},${screenY(pos.y)})`); } } let interpMark = {x:0, y:0}; function setInterpMark (pos) { [interpMark.x,interpMark.y] = [pos.x, pos.y]; interpolatemarker.attr("transform", `translate(${screenX(pos.x)},${screenY(pos.y)})`); } function getInterpMark() { return interpMark; } function moveInterpMark () { let pos = { x: screenX.invert(d3.event.offsetX), y:screenY.invert(d3.event.offsetY) }; setInterpMark (pos); } function interpMarkVisible (boolean) { interpolatemarker.style ("visibility", boolean ? "visible" : "hidden") } sel.on ("mousedown", moveInterpMark); sel.on ("mousemove", function () { if (d3.event.buttons) moveInterpMark() }) function data (proj) { projection = proj; screenX = d3.scaleLinear().domain(d3.extent(projection, d => d.x)).range([margin, w - 2*margin]); screenY = d3.scaleLinear().domain(d3.extent(projection, d => d.y)).range([margin, h - 2*margin]); let line = d3.line() .curve(d3.curveCatmullRom) .x(d => screenX(d.x)) .y(d => screenY(d.y)); projcurve.attr("d", line(projection)); let join = sel.selectAll("circle.frame").data(projection); join.exit().remove(); join.enter().append("circle") .attr("class", "frame") .merge(join) .attr("cx", d => screenX(d.x)) .attr("cy", d => screenY(d.y)) .attr("r", d => d.key == 1 ? keyframeRadius : frameRadius) .style("fill", d => d.key == 1 ? "red" : "black") .style("stroke", d => d.key == 1 ? "red" : "none") .style("fill-opacity", 0.5) .style("stroke-width", 1) .style("stroke-opacity", 1); setFrame(currentframe); } return { svg : svg, data : data, setFrame : setFrame, setInterpMark : setInterpMark, getInterpMark : getInterpMark, interpMarkVisible : interpMarkVisible } } 35:T470,updateTrajectories = { if (showTrajectories) { trajectories.visible = true; while(trajectories.children.length>0) trajectories.children.pop(); let jointPairsSk = []; let jointPairsInt = []; let jointPairsTimeInt = []; for (let i = 0; i < sk.jointPairNames.length; i++) { if (selectedJointPairs[i]) { jointPairsSk.push (sk.jointPairs[i]); jointPairsInt.push (interpolatedSk.jointPairs[i]); jointPairsTimeInt.push (timeInterpolatedSk.jointPairs[i]); } } if (showSkeletons[0]) { let skPose = (sk,frame) => sk.setPose(bvhFramePose(bvh,frame),bvhFramePosition(bvh,frame)); trajectories.add (jointPairTape (sk, skPose, jointPairsSk, 0xffaaaa)); skPose(sk,viewof frame.value); } if (showSkeletons[1]) { trajectories.add (jointPairTape (interpolatedSk, skfFrameInterpolate, jointPairsInt, 0xaaaaff)); } if (showSkeletons[2]) { trajectories.add (jointPairTape (timeInterpolatedSk, timeFrameInterpolate, jointPairsTimeInt, 0xaaffaa)); } } else { trajectories.visible = false; } return ++calls.trajectories; } 36:T1003,/** * This is essentially the rbf module by Thibaut Séguy, but modified to use a selectable norm * See https://github.com/thibauts/rbf **/ RBF = { var distanceFunctions = { 'linear': distanceLinear, 'cubic': distanceCubic, 'quintic': distanceQuintic, 'thin-plate': distanceThinPlate, 'gaussian': distanceGaussian, 'inverse-multiquadric': distanceInverseMultiquadric, 'multiquadric': distanceMultiquadric }; var normFunctions = { 'euclidean' : euclideanNorm, 'quaternion' : quaternionNorm }; var distance = distanceFunctions.linear; var norm = normFunctions.euclidean; function RBF(points, values, distanceFunction, normFunction, epsilon) { if(distanceFunction) { distance = typeof distanceFunction !== 'string' ? distanceFunction : distanceFunctions[distanceFunction]; } if(normFunction) { norm = typeof normFunction !== 'string' ? normFunction : normFunctions[normFunction]; } // `identity` here serves as a shorthand to allocate // the matrix nested array. var M = numeric.identity(points.length); // First compute the point to point distance matrix // to allow computing epsilon if it's not provided for(var j=0; j`;\n div.style = `position: relative; width: ${windowSize.width}px; height: ${windowSize.height}px; \n background: yellow;`;\n let skel = renderer.domElement;\n skel.style = `position: absolute; z-index:1;\n width: ${rendererSize.width}px; height: ${rendererSize.height}px;`\n let plot;\n if (layout != \"no projection\") {\n plot = projectionPlot.svg;\n plot.style = `position: absolute; background: white; z-index:3;`;\n }\n if (layout == \"split\") {\n skel.style.left = windowSize.width / 2 + \"px\"\n }\n else if (layout == \"inset left\") {\n plot.style.left = \"10px\";\n plot.style.bottom = \"10px\";\n }\n else if (layout == \"inset right\") {\n plot.style.right = \"10px\";\n plot.style.top = \"10px\";\n }\n div.append(skel);\n if (plot) div.append(plot);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"md`**Current frame:** ${bind (makeSlider({min:0, max:nframes-1, step:1}), viewof frame)} \n${bind (makeNumber({min:0, max:nframes-1, step:1, size:\"3em\"}), viewof frame)} Animate? ${bind(makeCheckbox(),viewof animate)}` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"md`** Main panel layout:** ${bind(makeRadioGroup({options:[\"inset left\", \"inset right\", \"split\", \"no projection\"]}), viewof layout)} Inset size: ${bind (makeSlider({min:0.3, max:1, step:0.05}), viewof insetSize)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"{ \n let div = html`

`;\n div.append (md`** BVH Source ** ${bind(makeRadioGroup({options:[\"database\",\"file\"]}), viewof bvhSource)}`);\n if (bvhSource == \"database\") {\n div.append (md`**Mocap file:** ${bind (makeSelect({options:allfiles}), viewof bvhName)}`);\n }\n else {\n div.append(md`**Mocap file**: ${bind (makeFile(), viewof bvhFile)}`)\n }\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`** Projection Source ** ${bind(makeRadioGroup({options:[\"database\",\"file\"]}), viewof projectionSource)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"{\n let div = html`

`\n div.append(md`**Rotation interpolation**: ${bind (makeRadioGroup({options:[\"Slerp\", \"SKF\", \"Hybrid SKF+time\"]}), viewof spatialInterpolationAlgorithm)}`);\n if (spatialInterpolationAlgorithm == \"Hybrid SKF+time\") \n div.append(\n md`Weight of temporal dimension in hybrid reconstruction: ${bind(makeNumber({min:0,max:100,step:1}), viewof hybridFactor)}`);\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"{\n let div = html`

`;\n div.append (md`**Show trajectories?** ${bind(makeCheckbox(), viewof showTrajectories)}`);\n if (showTrajectories) {\n let cg = bind (makeCheckGroup({options:sk.jointPairNames}), viewof selectedJointPairs);\n cg.style['font-size'] = 'small';\n div.append (cg)\n }\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"md`**Show skeletons** ${bind (makeCheckGroup({options:[\"Original\", \"Spatial\", \"Temporal\"]}), viewof showSkeletons)} \n\ndisplacement x:${bind (makeNumber({min:-30, max:30, step:1, size:\"3em\"}), viewof displaceX)} \ny:${bind (makeNumber({min:-30, max:30, step:1, size:\"3em\"}), viewof displaceY)} \nz:${bind (makeNumber({min:-30, max:30, step:1, size:\"3em\"}), viewof displaceZ)} \n\nSpatial skeleton follows ${bind (makeRadioGroup({options:[\"frame\",\"marker\"]}), viewof interpolationMode)}\n\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"md`Average errors: **Spatial**:${averageErrors.Spatial.toFixed(5)} **Temporal**: ${averageErrors.Temporal.toFixed(5)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1372,"value":"projectionPlot.svg","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"vl.markLine()\n .width(680)\n .background(\"white\")\n .data(errorByFrame)\n .title(\"Error By Frame\")\n //.data(frameToFrameError)\n .encode(\n vl.x().fieldQ('Frame'),\n vl.y().fieldQ('error'),\n vl.color().fieldN('Interpolation').scale({\"range\": [\"blue\", \"green\"]})\n ).render({renderer: 'svg'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"vl.markLine()\n .width(680)\n .background(\"white\")\n .title(\"Inter-frame differences\")\n .data(frameToFrameError)\n .encode(\n vl.x().fieldQ('Frame'),\n vl.y().fieldQ('error').scale({type: 'log'}),\n vl.color().fieldN('Interpolation').scale({\"range\": [\"red\",\"blue\", \"green\"]})\n ).render({renderer: 'svg'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`

\n### Skeleton drawing objects`","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"windowSize = ({width: width, height:~~(width*9/16)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"rendererSize = {\n if (layout == \"split\") {\n return {width:windowSize.width/2,height:windowSize.height}\n }\n return windowSize;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"camera = {\n\tlet camera = new THREE.PerspectiveCamera( 20, rendererSize.width/rendererSize.height, 1, 8000 );\n\tcamera.position.set( 0, 200, 2000 );\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"sk = {\n let sh = new SkeletonHelper( bvh.skeleton.bones[0]);\n sh.skeleton = bvh.skeleton;\n sh.configure({color:\"red\", radius:0.5});\n return sh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"interpolatedSk = {\n let sh = sk.clone();\n sh.reference = sk;\n sh.configure({color:\"rgb(30,30,255)\", radius:0.5});\n return sh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"timeInterpolatedSk = {\n let sh = sk.clone();\n sh.reference = sk;\n sh.configure({color:\"green\", radius:0.5});\n return sh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"renderer = {\n let renderer = new THREE.WebGLRenderer({antialias: true});\n \n renderer.setSize(rendererSize.width, rendererSize.height);\n renderer.setPixelRatio(devicePixelRatio);\n renderer.gammaFactor = 2.2;\n renderer.gammaOutPut = true;\n \n invalidation.then(function () {\n renderer.dispose();\n });\n \n return renderer\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"controls = {\n let controls = new THREE.EditorControls(camera, renderer.domElement);\n let controlsUpdate = () => renderer.render(scene, camera);\n controls.addEventListener(\"change\", controlsUpdate);\n controls.rotate (new THREE.Vector3());\n controlsUpdate();\n invalidation.then(function () {\n controls.removeEventListener(\"change\", controlsUpdate);\n controls.dispose();\n })\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"trajectories = new THREE.Group()","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`

\n### Skeleton drawing functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"//\n// Given a bvh and a frame, returns a pose for that frame\n//\nbvhFramePose = function (bvh,frame) {\n \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":258,"value":"//\n// Returns the translation of the skeleton of the bvh for the given frame\n//\nbvhFramePosition = function (bvh, frame) {\n let tracks = bvh.clip.tracks;\n let offset = frame*3;\n let values = tracks[0].values;\n return new THREE.Vector3 (values[offset],values[offset+1],values[offset+2]);\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"jointPairTape = function (sk, setPoseByFrame, jointPairs, color) {\n let geometry = new THREE.Geometry();\n let n = 0;\n let nv = jointPairs.length * 2;\n for (let frame = 0; frame < nframes; frame++) {\n setPoseByFrame (sk, frame);\n sk.root.updateMatrixWorld(true);\n for (let jointPair of jointPairs) {\n let [p,q] = sk.jointPairSegment(jointPair);\n geometry.vertices.push (p,q);\n n += 2;\n if (frame > 0) {\n geometry.faces.push (new THREE.Face3( n-nv-1,n-nv-2, n-2 ), new THREE.Face3( n-nv-1, n-2, n-1 ));\n }\n }\n }\n geometry.computeVertexNormals();\n geometry.computeBoundingBox();\n let material = new THREE.MeshPhongMaterial({color:color, side:THREE.DoubleSide});\n return new THREE.Mesh ( geometry, material )\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`

\n### Projection plotting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"projectionPlotSize = {\n let psize = { margin: windowSize.width * 0.02, markerRadius:windowSize.width*0.01, frameRadius:windowSize.width*0.003, keyframeRadius : windowSize.width*0.008};\n if (layout == \"split\") {\n psize.width = windowSize.width/2; psize.height = windowSize.height;\n }\n else if (layout == \"no projection\") {\n psize.width = psize.height = windowSize.width * 0.5;\n }\n else {\n psize.width = psize.height = windowSize.height * insetSize;\n }\n if (layout.slice(0,5) == \"inset\") {\n for (let key of [\"markerRadius\", \"frameRadius\", \"keyframeRadius\"]) psize[key] *= insetSize\n }\n return psize;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"md`

\n### Callbacks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"calls = ({ plot:0, framemarker:0, skeleton:0, scene:0, trajectories:0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"updateskeleton = {\n sk.setPose(bvhFramePose(bvh,frame),bvhFramePosition(bvh,frame));\n return ++calls.skeleton;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"updateplot = {\n projectionPlot.data(projection);\n projectionPlot.interpMarkVisible (interpolationMode == \"marker\");\n return ++calls.plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"updateframemarker = { \n projectionPlot.setFrame(frame);\n return ++calls.framemarker;\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"updatescene = {\n while(true) {\n sk.visible = showSkeletons[0];\n if (interpolatedSk.visible = showSkeletons[1]) {\n if (viewof interpolationMode.value === \"frame\") {\n skfFrameInterpolate(interpolatedSk,frame);\n }\n else {\n markerInterpolate(interpolatedSk,projectionPlot.getInterpMark(),frame); \n }\n }\n if (timeInterpolatedSk.visible = showSkeletons[2]) {\n timeFrameInterpolate(timeInterpolatedSk,frame); \n }\n renderer.render(scene,camera);\n yield ++calls.scene;\n if (viewof animate.value) {\n if (viewof frame.value < nframes) viewof frame.value++;\n else viewof frame.value = 0; \n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"loadBvhFromUrl = {\n let bvhtext = await fetch(bvhUrl).then(x => x.text() );\n let loader = new THREE.BVHLoader( );\n mutable bvh = loader.parse (bvhtext); \n return \"loaded \"+bvhUrl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"loadBvhFile = {\n if (bvhFile.length > 0) {\n let txt = await Files.text(bvhFile[0]);\n let loader = new THREE.BVHLoader( );\n mutable bvh = loader.parse (txt); \n }\n else {\n return \"no file loaded yet\"\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"loadProjectionFromUrl = {\n let txt = await fetch (projectionUrl).then(x => x.text ());\n loadProjection(txt);\n return \"loaded \"+projectionUrl\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"loadProjectionFile = {\n if (projectionFile.length > 0) {\n let txt = await Files.text(projectionFile[0]);\n loadProjection(txt);\n return \"projection file loaded\"\n }\n else {\n return \"no file loaded yet\"\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"loadProjection = function (txt) {\n let pts = [];\n for (let line of txt.trim().split(\"\\n\")) {\n try {\n let n = line.split(\" \")\n let [x,y,key] = [+n[0],+n[1],+n[2]]\n pts.push ({x:x,y:y,key:key})\n }\n catch (e){\n }\n }\n mutable projection = pts\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1097,"value":"md`

\n## Reconstruction error charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"md`

\n## Pose error / distance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"poseError = function (pose1, pose2) {\n let d = 0;\n let q1 = new THREE.Quaternion(), q2 = new THREE.Quaternion();\n for (let i = 0; i < pose1.length; i+=4) {\n q1.fromArray(pose1,i); q1.normalize();\n q2.fromArray(pose2,i); q2.normalize();\n d += q1.angleTo(q2)*bvhPoseBoneWeights[i/4];\n }\n d = d / sk.bones.length;\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"mutable averageErrors =[0,0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"errorByFrame = {\n let errors = [];\n let totalTemporal = 0,totalSpatial = 0;\n for (let frame = 0; frame < nframes; frame++) {\n let refPose = bvhFramePose(bvh,frame);\n let point = projection[frame];\n let skfPose = spatialPoseInterpolant([point.x,point.y],frame);\n let [tmpPose,pos] = temporalFrameInterpolant(frame);\n let skfError = poseError (refPose,skfPose);\n let tmpError = poseError(refPose,tmpPose);\n errors.push ({\"Frame\": frame, \"Interpolation\":\"Spatial\", \"error\": skfError},\n {\"Frame\": frame, \"Interpolation\":\"Temporal\", \"error\": tmpError})\n totalTemporal += tmpError;\n totalSpatial += skfError;\n }\n mutable averageErrors = {\"Spatial\":totalSpatial/nframes, \"Temporal\": totalTemporal/nframes};\n return errors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"frameToFrameError = {\n let errors = [];\n let prevRefPose, prevSkfPose, prevTmpPose;\n for (let frame = 0; frame < nframes; frame++) {\n let refPose = bvhFramePose(bvh,frame);\n let point = projection[frame];\n let skfPose = spatialPoseInterpolant([point.x,point.y],frame);\n let [tmpPose,pos] = temporalFrameInterpolant(frame);\n if (frame > 0) {\n errors.push ({\"Frame\": frame, \"Interpolation\":\"Original\", \"error\": poseError (refPose,prevRefPose)},\n {\"Frame\": frame, \"Interpolation\":\"Spatial\", \"error\": poseError (skfPose,prevSkfPose)},\n {\"Frame\": frame, \"Interpolation\":\"Temporal\", \"error\": poseError(tmpPose,prevTmpPose)})\n }\n [prevRefPose, prevSkfPose, prevTmpPose] = [refPose, skfPose, tmpPose]; \n }\n return errors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"md`

\n### RBF (Radial Basis Functions)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"/** \n * Builds an rbf interpolant for quaternions. The domain is a position in 2D \n * and the range is a pose (array of quaternions). \n * Interpolation is directly made on quaternion space.\n **/\nrbfPoseUnprojection = function (bvh, projection) {\n let points = [];\n let values = [];\n let frame = 0;\n for (let p of projection) {\n if (p.key > 0) {\n points.push([p.x,p.y]);\n values.push(bvhFramePose(bvh,frame));\n }\n frame++;\n }\n return RBF(points,values,rbfKernel,'euclidean');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":" /** \n * Builds an rbf interpolant for quaternions. The domain is a position in 2D \n * and the range is a pose (array of quaternions). \n * Interpolation is done on rotation matrices that are orthonormalized as per Igarashi's spatial\n * keyframes scheme.\n **/\nrbfPoseUnprojectionSKF = function (bvh, projection) {\n \n let points = [];\n let values = [];\n let frame = 0;\n for (let p of projection) {\n if (p.key > 0) {\n points.push([p.x,p.y]);\n values.push(rotMatrices(bvhFramePose(bvh,frame)));\n }\n frame++;\n }\n let rbf = RBF(points,values,rbfKernel,'euclidean')\n return function (point) {\n let matrices = rbf(point);\n return quaternionsFromMatrices(matrices);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":" /** \n * Builds an rbf interpolant for quaternions. The domain is a position in 2D plus \n * the frame number, i.e., a 3D point. \n * Interpolation is done on rotation matrices that are orthonormalized as per Igarashi's spatial\n * keyframes scheme.\n **/\nhybridTimeSpatialPoseInterpolant = {\n \n let points = [];\n let values = [];\n let frame = 0;\n for (let p of projection) {\n if (p.key > 0) {\n points.push([p.x,p.y,frame/120*hybridFactor]);\n values.push(rotMatrices(bvhFramePose(bvh,frame)));\n }\n frame++;\n }\n let rbf = RBF(points,values,rbfKernel,'euclidean')\n return function (point,frame) {\n let matrices = rbf([point[0],point[1],frame/120*hybridFactor]);\n return quaternionsFromMatrices(matrices);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"/*\n * Select one of the RBF-based pose reconstruction functions above\n */\nspatialPoseInterpolant = {\n if (spatialInterpolationAlgorithm == \"SKF\") return rbfPoseUnprojectionSKF (bvh, projection);\n if (spatialInterpolationAlgorithm == \"Hybrid SKF+time\") return hybridTimeSpatialPoseInterpolant;\n else return rbfPoseUnprojection (bvh, projection)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"// Given an array of quaternions coefficients, returns an array of rotation matrices \n// coefficients\nfunction rotMatrices(pose) {\n let nrots = pose.length / 4;\n let matrices = new Float32Array(nrots*9);\n let m = new THREE.Matrix4();\n let e = m.elements;\n let q = new THREE.Quaternion();\n for (let i = 0; i < nrots; i++) {\n q.fromArray (pose,i*4);\n m.makeRotationFromQuaternion (q);\n let j = i*9;\n matrices[j++] = e[0];matrices[j++] = e[1];matrices[j++] = e[2];\n matrices[j++] = e[4];matrices[j++] = e[5];matrices[j++] = e[6];\n matrices[j++] = e[8];matrices[j++] = e[9];matrices[j++] = e[10];\n }\n return matrices;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"/** \n * Builds an rbf interpolant where the domain is a position in 2D\n * and the range is a position in 3 space\n **/\nrbfPositionUnprojection = function (bvh, projection) {\n let points = [];\n let values = [];\n let frame = 0;\n for (let p of projection) {\n if (p.key > 0) {\n points.push([p.x,p.y]);\n let pos = bvhFramePosition(bvh,frame);\n values.push([pos.x, pos.y, pos.z]);\n }\n frame++;\n }\n return RBF(points,values,'linear','euclidean');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"/*\n * A function to interpolate a skeleton following a point in the projection plane.\n * Position still follows the frame, though\n */\nmarkerInterpolate = {\n let poseInterpolant = rbfPoseUnprojectionSKF (bvh, projection);\n //let positionInterpolant = rbfPositionUnprojection (bvh, projection);\n let interpolate = function (skeletonHelper, point, frame) {\n let pose = poseInterpolant([point.x,point.y]);\n //let p = positionInterpolant([point.x,point.y]);\n let position = bvhFramePosition(bvh,frame).add(new THREE.Vector3(displaceX,displaceY,displaceZ));\n //let position = new THREE.Vector3 (p[0]+displaceX,p[1]+displaceY,p[2]+displaceZ);\n skeletonHelper.setPose (pose,position)\n }\n return interpolate;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"skfFrameInterpolate = {\n let poseInterpolant = spatialInterpolationAlgorithm == \"SKF\" ? rbfPoseUnprojectionSKF (bvh, projection) : hybridTimeSpatialPoseInterpolant;\n let interpolate = function (skeletonHelper, frame) {\n let point = projection[frame];\n let pose = poseInterpolant([point.x,point.y],frame);\n let position = bvhFramePosition (bvh, frame);\n position.add(new THREE.Vector3 (displaceX, displaceY, displaceZ));\n skeletonHelper.setPose (pose,position)\n }\n return interpolate;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"temporalFrameInterpolant = {\n let pc = +keyframePercentage.replace(/[^\\d]/g,'');\n let nkeys = Math.trunc(nframes * pc / 100);\n let delta = (nframes-1) / (nkeys-1);\n return function (frame) {\n let frameprev = Math.round(Math.trunc(frame/delta)*delta);\n let framenext = Math.min(nframes-1, Math.round(Math.trunc(frame/delta)*delta+delta)); \n let t = framenext == frameprev ? 0 : (frame-frameprev)/(framenext-frameprev);\n let poseprev = bvhFramePose(bvh,frameprev);\n let posenext = bvhFramePose(bvh,framenext);\n for (let i = 0; i < poseprev.length; i+= 4) {\n let pquat = new THREE.Quaternion ().fromArray(poseprev,i);\n let nquat = new THREE.Quaternion ().fromArray(posenext,i);\n pquat.slerp(nquat,t);\n pquat.toArray(poseprev,i);\n }\n let posprev = bvhFramePosition(bvh,frameprev);\n let posnext = bvhFramePosition(bvh,framenext);\n posprev.lerp(posnext,t);\n posprev.add(new THREE.Vector3 (2*displaceX, 2*displaceY, 2*displaceZ));\n return [poseprev,posprev];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"timeFrameInterpolate = function (skeletonHelper, frame) {\n let [pose,pos] = temporalFrameInterpolant(frame);\n skeletonHelper.setPose(pose,pos);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`

\n### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"allfiles = fetch(bvhbasename+\"allfiles.txt\").then(x => x.text() ).then(y => y.trim().split(/\\s+/).sort())","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"bvhbasename = 'https://raw.githubusercontent.com/bfcosta/mocapskf/master/bvhs/'","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"bvhUrl = bvhbasename + bvhName","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"projectionBasename = \"https://raw.githubusercontent.com/bfcosta/mocapskf/master/projections/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"projectionUrl = {\n let name = projectionBasename + \n keyframePercentage +\n \"/\" + projectionAlgorithm +\n \"/\" + selectionAlgorithm + \n \"/\" + bvhName.slice(3).replace(\".bvh\",\"\") +\n \"_\" + selectionAlgorithm +\n \"_\" + projectionAlgorithm +\n \"_\" + keyframePercentage;\n if (optimizedProjection) name += \"_opt\";\n return name+\".txt\"\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"mutable bvh = null\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"bvhPoseBoneWeights = {\n let sh = sk;\n let weights = sh.bones.map((bone) => bone.importance);\n let names = sh.bones.map((bone) => bone.name);\n let parents = sh.bones.map((bone) => bone.parent);\n for (let i = 0; i < parents.length; i++) {\n for (let j = i+1; j < parents.length; j++) {\n if (parents[i] == parents[j]) {\n weights[i] += weights[j];\n }\n }\n }\n let ret = [];\n for (let i = 0; i < names.length; i++) {\n if (names[i] != \"ENDSITE\") ret.push(weights[i+1]);\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"nframes = bvh.clip.tracks[0].times.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"nkeyframes = {\n let pc = +keyframePercentage.replace(/[^\\d]/g,'');\n return Math.trunc(nframes * pc / 100);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"/**\n * an array of pairs that map quaternion track indices to the corresponding bone indices\n **/\nquatTrackToBone = {\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":711,"value":"mutable projection = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`

\n### Variables controlled by the GUI`","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"viewof layout = new View(\"inset left\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"viewof insetSize = new View (0.3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"viewof bvhName = new View (allfiles[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"viewof hybridFactor = new View(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"viewof keyframePercentage = new View (\"3pc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof projectionAlgorithm = new View (\"tsne\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"viewof selectionAlgorithm = new View (\"rols\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof optimizedProjection = new View (false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"viewof interpolationMode = new View(\"frame\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"viewof spatialInterpolationAlgorithm = new View(\"SKF\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1320,"value":"viewof rbfKernel = new View(\"linear\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"viewof twostep = new View(false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"viewof frame = new View(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"viewof showSkeletons = new View([true,true,true])","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"viewof showTrajectories = new View(false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"viewof selectedJointPairs = {\n let flags = []; \n for (let i = 0; i < sk.jointPairNames.length; i++) flags.push(false)\n return new View(flags)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"viewof displaceX = new View(-20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"viewof displaceY = new View(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"viewof displaceZ = new View(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"viewof bvhSource = new View(\"database\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"viewof bvhFile = new View(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"viewof projectionSource = new View(\"database\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"viewof projectionFile = new View(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"viewof temporalInterpolation = new View(false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"viewof animate = new View (true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`

\n## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"import { View, bind, makeSelect, makeSlider, makeNumber, makeCheckbox, makeRadioGroup, makeFile, makeCheckGroup } from \"@esperanc/inline-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"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":459,"value":"numeric = require('https://bundle.run/numeric@1.2.6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"import {vl} from \"@vega/vega-lite-api\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`

\n### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}