31:T5b5,plotInit = { let plotArea = d3.select(maindiv).select('svg'); plotArea.selectAll("circle,path").remove(); 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:T4f2,plot = { let plotArea = d3.select(maindiv).select('svg'); let x = screenX, y = screenY; plotArea.select("path.projcurve") .attr("d", line(projection)); function circledragstarted(d,i) { d3.event.sourceEvent.preventDefault(); mutable currentFrame = i; d3.event.sourceEvent.stopPropagation(); } function circledragged(d,i) { let [px,py] = [d3.event.x, d3.event.y]; d[0]= x.invert(px); d[1]= y.invert(py); d3.select(this).attr("cx", px).attr("cy", py); d3.event.sourceEvent.stopPropagation(); } function circledragended(d) { let proj = reproject(false); if (autoOptimize) { proj = reproject(true) } mutable projection = proj; d3.event.sourceEvent.stopPropagation(); } let circleDrag = d3.drag() .on("start", circledragstarted) .on("drag", circledragged) .on("end", circledragended); let join = plotArea.selectAll("circle.frame").data(projection); join.exit().remove(); join.enter().append("circle") .attr("class", "frame") .call(circleDrag) .merge(join) .attr("cx", d => x(d[0])) .attr("cy", d => y(d[1])) .attr("r", d => d[2] == 1 ? 8 : 3) .attr("fill", d => d[2] == 1 ? "red" : "black") .attr("opacity", 0.6) }33: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; }34: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; }35:T668,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: 0.5, height:1., removeObjects : [interpSk] }, { left : 0.5, top : 0, width : 0.5, height: 1, 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" }36:[] 2f:{"title":"BVH Projection Visualization","cells":[{"id":0,"value":"md`# BVH Projection Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"url = \"https://www.lcg.ufrj.br/~bfcosta/projection.js\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"url2 = \"https://bfcosta.github.io/ObsAuxRepo/js/projection.js\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"\nModule = require(url2).catch(() => {\n const m = window.Module;\n if (m.onRuntimeInitialized) return m; // Already initialized.\n return new Promise(resolve => m.onRuntimeInitialized = () => resolve(m));\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`## Module imported functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"md` \\` double * getBvhProjection(double pc, double * pvec, int size) \\`\n\nGets keyframes and MDS projection for the last loaded BVH\n\nwhere:\n\n* *pc* is the keyframe to total frame ratio (a number from 1 to 100). \n* *pvec* output buffer vector in which projection is loaded as a row wise *m* x 3 matrix. Each row is of the form [x, y, keyframe], where keyframe is 1 iff this frame was chosen as a key frame by the ROLS algorithm. *m* is the total number of frames.\n* *size* should be m x 3\n\nReturns the address of *pvec*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"getBvhProjection = Module.cwrap('getBvhProjection', 'number', ['number', 'number', 'number'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"md`\n\\`unsigned int getNumberOfFrames(char * argv) \\`\n\nLoads BVH contents (text), saves a handle for future use, and returns total number of frames.\n\nwhere \n\n* *argv* is the string with BVH file contents.\n\nReturns number of frames in BVH\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"getNumberOfFrames = Module.cwrap('getNumberOfFrames', 'number', ['string'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`\n\\`double * getRbfSmoothedProjection(double * pvin, double * pvout, int size)\\`\n\nComputes RBFP projection given a seed projection with control points\n\nwhere\n\n * *pvin* is the buffer with seed projection: a three-column row-wise matrix where third column is the control point flag\n * *pvout* is the buffer with RBFP: a three-column row-wise matrix where third column is the control point flag\n * *size* is the buffer size\n\nReturns address of pvout\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"getRbfSmoothedProjection = Module.cwrap('getRbfSmoothedProjection', 'number', ['number', 'number', 'number'])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"md`\n\\`double * getImprovedProjection(double * pvin, double * pvout, int size)\\`\n\nOptimizes by running forward and backward projection algorithm starting with an initial projection. ssumes Mocap file has been loaded by calling getNumberOfFrames. Also, control points must be available in the initial projection.\n\nwhere \n\n* *pvin* is the buffer with initial projection\n* *pvout* is the buffer with improved projection\n* *size* is the buffer size\n\nReturns address of *pvout*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"getImprovedProjection = Module.cwrap('getImprovedProjection', 'number', ['number', 'number', 'number'])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"md`\n\\`double getPoseError(double * pvin, int size, double xpos, double ypos, int frame)\\`\n\nReturns skeleton pose error between the original pose for given frame and a reconstructed \npose built by SKF interpolation given a controller position in 2D.\n\nwhere \n * *pvin* buffer with a given projection: a three-column row-wise matrix\n * *size* pvin buffer size\n * *xpos* X position on the controller plane\n * *ypos* Y position on the controller plane\n * *frame* mocap frame id\n \nReturns calculated error between frame id and SKF interpolation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"getPoseError = Module.cwrap('getPoseError', 'number', ['number', 'number', 'number', 'number', 'number'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"md`\n\\`int getSkfSkeleton(double * pvin, int isize, double * qvout, int qsize, double * jvout, int jsize, double xpos, double ypos)\\`\n\nComputes the skeleton pose for a given 2D coordinate using spatial keyframe interpolation\n\nwhere\n* *pvin* is the input projection buffer\n* *isize* is the size of input projection buffer\n* *qvout* is the output skeleton rotation buffer\n* *qsize* is the size of output skeleton rotation buffer\n* *jvout* is the output skeleton position buffer\n* *jsize* is the size of output skeleton position buffer\n* *xpos* is the X coordinate\n* *ypos* is the Y coordinate\n\nReturns the number of degrees of freedom\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"getSkfSkeleton = Module.cwrap('getSkfSkeleton', 'number', ['number', 'number', 'number', 'number', 'number', 'number', 'number', 'number'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"md`\n\\`int getLoadedSkfSkeleton(double * qvout, int qsize, double * jvout, int jsize, double xpos, double ypos)\\`\n\nComputes the skeleton pose for a given 2D coordinate using last loaded spatial keyframe interpolation\n\nwhere\n* *qvout* is the output skeleton rotation buffer\n* *qsize* is the size of output skeleton rotation buffer\n* *jvout* is the output skeleton position buffer\n* *jsize* is the size of output skeleton position buffer\n* *xpos* is the X coordinate\n* *ypos* is the Y coordinate\n\nReturns the number of degrees of freedom\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"getLoadedSkfSkeleton = Module.cwrap('getLoadedSkfSkeleton', 'number', ['number', 'number', 'number', 'number', 'number', 'number'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"md`\n\\`int getMocapSkeleton(double * qvout, int qsize, double * jvout, int jsize, int frameid)\\`\n\nReads the mocap skeleton given by a frame id\n\nwhere\n* *qvout* is the output buffer of skeleton rotations\n* *qsize* is the size of output buffer of skeleton rotations\n* *jvout* is the output buffer of skeleton positions\n* *jsize* is the size of output buffer of skeleton positions\n* *frameid* is the given frame id\n\nReturns the number of degrees of freedom\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"getMocapSkeleton = Module.cwrap('getMocapSkeleton', 'number', ['number', 'number', 'number', 'number', 'number'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof bvhFile = file()","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"bvhText = Files.text(bvhFile)","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"nframesMotionDb = getNumberOfFrames(bvhText)","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"nframesBvh = bvh.clip.tracks[0].times.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"dof = 31","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"proj1buf = { \n let nbytes = Float64Array.BYTES_PER_ELEMENT;\n\tlet size = 3 * nframesMotionDb;\n\tlet proj1buf = Module._malloc(size * nbytes);\n\tModule.HEAPF64.set(new Float64Array(size), proj1buf/nbytes);\n return proj1buf\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"proj2buf = { \n let nbytes = Float64Array.BYTES_PER_ELEMENT;\n\tlet size = 3 * nframesMotionDb;\n\tlet proj2buf = Module._malloc(size * nbytes);\n\tModule.HEAPF64.set(new Float64Array(size), proj2buf/nbytes);\n return proj2buf\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"quatbuf = { \n let nbytes = Float64Array.BYTES_PER_ELEMENT;\n\tlet qsize = 4 * dof;\n\tlet quatbuf = Module._malloc(qsize * nbytes);\n\tModule.HEAPF64.set(new Float64Array(qsize), quatbuf/nbytes);\n return quatbuf\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"posbuf = { \n let nbytes = Float64Array.BYTES_PER_ELEMENT;\n\tlet psize = 3 * dof;\n\tlet posbuf = Module._malloc(psize * nbytes);\n\tModule.HEAPF64.set(new Float64Array(psize), posbuf/nbytes);\n return posbuf\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"mutable projection = [[0,0,1],[2,2,0],[2,0,1]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"loadFirstProjection = function () {\n let nbytes = Float64Array.BYTES_PER_ELEMENT; \n let proj1ArrayPtr = Module.HEAPF64.subarray(proj1buf/nbytes, proj1buf/nbytes + 3*nframesMotionDb); \n getBvhProjection(kfratio, proj1buf, 3*nframesMotionDb);\n let proj = [];\n for (let i = 0; i < proj1ArrayPtr.length; i+=3) {\n proj.push ([proj1ArrayPtr[i], proj1ArrayPtr[i+1], proj1ArrayPtr[i+2]])\n }\n mutable projection = proj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"reproject = function (optimize = false) {\n let nbytes = Float64Array.BYTES_PER_ELEMENT; \n let proj1ArrayPtr = Module.HEAPF64.subarray(proj1buf/nbytes, proj1buf/nbytes + 3*nframesMotionDb); \n let proj2ArrayPtr = Module.HEAPF64.subarray(proj2buf/nbytes, proj2buf/nbytes + 3*nframesMotionDb); \n for (let i = 0, j = 0; i < proj1ArrayPtr.length; i+=3, j++) {\n proj1ArrayPtr[i] = projection[j][0];\n proj1ArrayPtr[i+1] = projection[j][1];\n proj1ArrayPtr[i+2] = projection[j][2];\n } \n if (optimize) { \n getImprovedProjection(proj1buf, proj2buf,3*nframesMotionDb);\n } else {\n getRbfSmoothedProjection(proj1buf, proj2buf,3*nframesMotionDb);\n }\n let proj = [];\n for (let i = 0; i < proj2ArrayPtr.length; i+=3) {\n proj.push ([proj2ArrayPtr[i], proj2ArrayPtr[i+1], proj2ArrayPtr[i+2]])\n }\n return proj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"{ \n let button = html``;\n button.onclick = loadFirstProjection\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"{ \n let button = html``;\n button.onclick = function () {\n mutable projection = reproject(false)\n }\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"{ \n let button = html``;\n button.onclick = function () { \n mutable projection = reproject(true) \n } \n return button\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":347,"value":"viewof autoOptimize = 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":184,"value":"svgSize = ({width:width*0.33,height:width*0.33})","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":404,"value":"viewof frameSlider = slider({\n min: 0, \n max: (bvh.clip.tracks[0].times.length-1), \n step: 1, \n value: 0,\n description: \"Frame Slider\"\n})\n","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 div.append (DOM.svg(svgSize.width,svgSize.height))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"error = {\n let nbytes = Float64Array.BYTES_PER_ELEMENT; \n let proj1ArrayPtr = Module.HEAPF64.subarray(proj1buf/nbytes, proj1buf/nbytes + 3*nframesMotionDb); \n for (let i = 0, j = 0; i < proj1ArrayPtr.length; i+=3, j++) {\n proj1ArrayPtr[i] = projection[j][0];\n proj1ArrayPtr[i+1] = projection[j][1];\n proj1ArrayPtr[i+2] = projection[j][2];\n }\n return { current: getPoseError (proj1buf, 3*nframesMotionDb, xy[0], xy[1], currentFrame),\n closest: getPoseError (proj1buf, 3*nframesMotionDb, xy[0], xy[1], closestFrame) }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"//\n// Function to map projection x coordinate to screen\n//\nscreenX = d3.scaleLinear().domain(d3.extent(projection, d => d[0])).range([margin.left,svgSize.width-margin.right])\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"screenY = d3.scaleLinear().domain(d3.extent(projection, d => d[1])).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 let cf = projection[currentFrame];\n d3.select(maindiv).select(\"svg path.frame\").attr(\"transform\", `translate(${screenX(cf[0])},${screenY(cf[1])})`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"moveClosest = {\n let cf = 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":181,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"closestFrame = {\n let mind = 1e10;\n let closest = -1;\n let i = 0;\n let [x,y] = xy;\n for (let p of 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":291,"value":"mutable xy = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`## Skeleton code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"/** \n * The contents of the mocap file as a THREE object\n **/\nbvh = {\n var loader = new THREE.BVHLoader( );\n var obj = loader.parse (bvhText); \n mutable bvhTranslation = Float32Array.from(obj.clip.tracks[0].values);\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"mutable bvhTranslation = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"rendererSize = ({width:width*0.65,height:width*0.33})","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 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":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"renderer = {\n let renderer = new THREE.WebGLRenderer({antialias: true});\n const controls = new THREE.EditorControls(camera, renderer.domElement);\n renderer.setSize(rendererSize.width, rendererSize.height);\n renderer.setPixelRatio(devicePixelRatio);\n let controlsUpdate = () => renderer.render(scene, camera)\n controls.addEventListener(\"change\", controlsUpdate);\n\n\n invalidation.then(function () {\n controls.removeEventListener(\"change\", controlsUpdate);\n controls.dispose();\n renderer.dispose();\n });\n return renderer\n}","pinned":false,"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 \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.log (\"quat track bone length: \" + quatTrackToBone.length*4);\n //console.log (\"pose length: \"+pose.length);\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":400,"value":"bvhQuatRot = function (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":440,"value":"mutable currentFrame = frameSlider","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"frameSliderCallback = { \n setSkeletonPose ( sk, bvhQuatRot(currentFrame), new THREE.Vector3 (0,bvhTranslation[1],0) );\n // set SKF interpolated skeleton\n let nbytes = Float64Array.BYTES_PER_ELEMENT; \n let quatArrayPtr = Module.HEAPF64.subarray(quatbuf/nbytes, quatbuf/nbytes + 4*dof); \n getLoadedSkfSkeleton(quatbuf, 4*dof, posbuf, 3*dof, xy[0], xy[1]);\n //getMocapSkeleton(quatbuf, 4*dof, posbuf, 3*dof, currentFrame);\n setSkeletonPose ( interpSk, quatArrayPtr, new THREE.Vector3 (0,bvhTranslation[1],0) );\n return frameSlider\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"interpSkCallback = {\n return xy\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"$35","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"}],"files":"$W36","stdlib":"1","titling":"auto"}