30:T931,viewof gui = { let form = html``; form.oninput = () => { form.value = { play : form.play.checked, inplace : form.inplace.checked, boneerror : form.boneerror.checked, time : form.time.valueAsNumber, speed : form.speed.valueAsNumber, boneradius : form.boneradius.valueAsNumber, skelsize : form.skelsize.valueAsNumber, originalcolor : form.originalcolor.value, reconstructioncolor : form.reconstructioncolor.value, boneerrormultiply : form.boneerrormultiply.value }; form.timevalue.value = form.value.time; form.speedvalue.value = form.value.speed; form.boneradiusvalue.value = form.value.boneradius; form.skelsizevalue.value = form.value.skelsize; form.boneerrormultiplyvalue.value = form.value.boneerrormultiply; } form.oninput(); return form } 31:T45c,function requestProjection (bvh,points,npoints) { var XHR = new XMLHttpRequest(); var FD = new FormData(); FD.append ('bvh', bvh); let pts = "[ "; for (let i = 0; i < points.length; i++) { if (points[i][2] != 0) { pts = pts + `[${i},${points[i][0]},${points[i][1]}],`; } } pts = pts.slice(0,pts.length-1)+"]"; FD.append ('points', pts); FD.append ('npoints', npoints); FD.append ('optimize', 1); let fetchPromise = new Promise((resolve, reject) => { XHR.onload = function(event) { resolve (event.target.responseText); } XHR.onerror = function(event) { reject ('Oops! Something went wrong.'); }; XHR.open("POST", "http://localhost:8000/cgi-bin/project.py"); XHR.send(FD); }); // XHR.onload = function(event) { // console.log (event.target.responseText); // } // XHR.onerror = function(event) { // console.log ('Oops! Something went wrong.'); // }; // XHR.open("POST", "http://localhost:8000/cgi-bin/project.py"); // // The data sent is what the user provided in the form // XHR.send(FD); return fetchPromise }32:Tdfb,rbfpPlot = { d3.select("div.projection svg").remove(); let plotArea = d3.select("div.projection").append("svg") .attr ("width", svgSize.width) .attr ("height", svgSize.height) .style ("background-color", "white"); //let svg = DOM.svg(svgSize.width,svgSize.height); //svg.style["background-color"]="white" let circleDrag = d3.drag() .on("start", circledragstarted) .on("drag", circledragged) .on("end", circledragended); let markDrag = d3.drag() .on("start", markdrag) .on("drag", markdrag); let line = d3.line() .curve(d3.curveCatmullRom) .x(d => x(d[0])) .y(d => y(d[1])); //let plotArea = d3.select(svg); plotArea.call(markDrag); plotArea.selectAll("path").remove(); plotArea.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); plotArea.selectAll("circle").remove(); plotArea.selectAll("circle.frame").data(data).enter().append("circle") .attr("class", "frame") .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) .on ("mousedown", function(d,i) { d3.event.stopPropagation(); console.log (d, i, bvh.clip.tracks[0].times[i] ); mixer.clipAction( bvh.clip ).time = bvh.clip.tracks[0].times[i]; mixer.update(0); //changeTimeSlider(bvh.clip.tracks[0].times[i]) mutable currentFrame = i; let dragging = !!(d3.event.buttons & 2); }); // .on ("mouseenter", function (d,i) { // let times = bvh.clip.tracks[0].times; // let t = times[i] || 0; // changeTimeSlider(t) // }) //.call(circleDrag); plotArea.append("path") .attr("class", "mark") .attr("d", "M10,0 L-10,0 M0,10 L0,-10") .style("stroke", gui.reconstructioncolor) .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",gui.originalcolor) .style("fill", "none") .style("stroke-width", 2.5); function markdrag() { mutable mark = [d3.event.x,d3.event.y]; d3.event.sourceEvent.stopPropagation(); } let circleWasDragged = false; function circledragstarted(d,i) { console.log (d3.event); circleWasDragged = !!(event.buttons & 2); d3.event.sourceEvent.preventDefault(); mutable currentFrame = i; d3.event.sourceEvent.stopPropagation(); //d3.select(this).classed("active", true); } function circledragged(d,i) { if (!circleWasDragged) return; circleWasDragged = true; 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) { return; let circle = d3.select(this); if (!circleWasDragged) { // toggle keyframe flag d[2] = 1-d[2]; circle.attr("r", d => d[2] == 1 ? 8 : 4) .attr("fill", d => d[2] == 1 ? "blue" : "red") } circle.classed("active", false); // Build a new data using rbfp let rbfData = data.map(function (d,i) { if (d [2] > 0) return d; let [x,y] = rbfp(bvhRot(bvh,i)); return [x,y,0] }) //mutable data = rbfData; } return plotArea; }33:T613,animate = { let request = null; const clock = new THREE.Clock(); let animate = function () { request = requestAnimationFrame( animate ); 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 : [skeletonClone] }, { left : 0.5, top : 0, width : 0.5, height: 1, removeObjects: [skeletonHelper] } ]; 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(); }34:T476,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 = 1; boneContainer.scale.set(s,s,s); boneContainer.add( skeletonHelper ); boneContainer.add( skeletonHelper.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:Tf73,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; } 36:T1853,mutable projectionFile = `0.845835 0.122082 1 0.856258 0.108765 0 0.858606 0.0951693 0 0.852827 0.0744022 0 0.877835 0.0712962 0 0.870633 0.0542279 0 0.880946 0.0457856 1 0.890751 0.0398771 0 0.898712 0.0293615 0 0.905213 0.0234022 0 0.909559 0.017752 0 0.931676 0.0376252 0 0.934163 0.0468248 0 0.930418 0.0527542 0 0.929433 0.0657863 0 0.937191 0.079441 0 0.942383 0.0953942 0 0.947334 0.12049 0 0.952761 0.1646 0 0.950854 0.216529 0 0.943474 0.248357 0 0.935803 0.276531 0 0.9223 0.305829 0 0.912967 0.336481 0 0.898051 0.36832 0 0.881644 0.389248 0 0.874339 0.406734 0 0.856272 0.431559 0 0.840849 0.451915 1 0.829016 0.468013 0 0.809925 0.486964 0 0.789799 0.505202 0 0.774872 0.520598 0 0.76367 0.53372 0 0.750852 0.548925 0 0.740158 0.558145 0 0.734059 0.566226 0 0.722561 0.576563 0 0.710514 0.595006 0 0.701554 0.605987 0 0.689448 0.611189 0 0.658032 0.610398 0 0.626134 0.600617 0 0.599515 0.607107 0 0.574889 0.599261 0 0.538867 0.596044 0 0.512553 0.595798 0 0.432397 0.543142 0 0.403848 0.536481 0 0.376493 0.528545 0 0.352053 0.520321 0 0.325194 0.507217 0 0.299129 0.49199 1 0.282 0.479376 0 0.263891 0.464253 0 0.244512 0.441712 0 0.226578 0.416154 0 0.236373 0.419049 0 0.229257 0.406091 0 0.219449 0.389459 0 0.214211 0.375558 0 0.199919 0.348928 0 0.0115081 0.152492 0 0.000648474 0.13434 0 0 0.122521 0 0.00506265 0.115133 0 0.0153803 0.113836 0 0.0203545 0.112849 0 0.0214334 0.108456 0 0.0203452 0.1047 0 0.0192747 0.104862 0 0.0187049 0.106529 0 0.0205842 0.112688 1 0.0191239 0.112833 0 0.0144542 0.112613 0 0.00896219 0.112865 0 0.00402855 0.113518 0 0.00631404 0.11621 0 0.0115824 0.11843 0 0.0187063 0.116658 0 0.0338228 0.139475 0 0.0366957 0.152771 0 0.0398922 0.164597 0 0.0468319 0.175186 0 0.0527618 0.179317 0 0.0642836 0.178797 0 0.0701563 0.181073 1 0.0820943 0.186845 0 0.0988458 0.184053 0 0.116502 0.182479 0 0.133376 0.187597 0 0.151719 0.193419 0 0.164404 0.197973 0 0.178267 0.19722 0 0.197445 0.195604 0 0.204393 0.188955 0 0.216516 0.1915 1 0.237839 0.198554 0 0.261364 0.198683 0 0.279068 0.200011 0 0.299724 0.213387 0 0.330969 0.216866 0 0.359992 0.209688 0 0.392418 0.215441 0 0.422252 0.228872 0 0.447522 0.234468 0 0.482949 0.23823 0 0.518425 0.232714 0 0.550208 0.227749 1 0.57139 0.228021 0 0.592139 0.227069 0 0.614867 0.215577 0 0.642262 0.200666 0 0.667089 0.193052 0 0.694731 0.193301 0 0.725011 0.18765 0 0.750373 0.182798 0 0.781137 0.188953 0 0.810362 0.198874 0 0.824205 0.194043 0 0.833969 0.176587 0 0.846775 0.153389 0 0.863879 0.13838 0 0.872998 0.111429 0 0.897847 0.0945515 0 0.910435 0.0769069 0 0.923727 0.061394 0 0.930419 0.0450191 0 0.923485 0.0265843 0 0.939087 0.0356062 0 0.948873 0.0315314 0 0.955335 0.022192 0 0.959657 0.0132655 0 0.961652 0 0 0.978982 0.021182 0 0.97717 0.0394832 0 0.974642 0.0553083 0 0.972069 0.0693878 0 0.977525 0.0744355 1 0.986486 0.0847069 0 0.987128 0.110996 0 1 0.165822 0 0.999975 0.205538 0 0.992762 0.241929 0 0.98755 0.284995 0 0.973282 0.309917 0 0.965179 0.315485 0 0.946583 0.33559 0 0.924565 0.384352 0 0.934009 0.386577 0 0.929047 0.415209 0 0.910095 0.447355 0 0.898061 0.475987 0 0.880006 0.503089 0 0.843027 0.526914 0 0.82866 0.537783 0 0.807213 0.546125 0 0.790032 0.563407 0 0.774569 0.587096 0 0.755058 0.597771 0 0.737344 0.604091 1 0.719538 0.609686 0 0.70443 0.61048 0 0.683484 0.606767 0 0.659055 0.604403 0 0.622788 0.594076 0 0.592136 0.594518 0 0.56378 0.593617 0 0.533754 0.588134 0 0.496505 0.579622 0 0.464037 0.583239 1 0.447547 0.580691 0 0.430007 0.579287 0 0.409736 0.569922 0 0.394277 0.558068 0 0.377963 0.54398 0 0.363652 0.535125 0 0.352539 0.529902 0 0.346903 0.516409 0 0.333438 0.501399 0 0.302346 0.466544 0 0.284434 0.447855 0 0.27126 0.435139 0 0.258141 0.414364 0 0.249054 0.39206 0 0.242494 0.373296 0 0.0186384 0.140927 0 0.00974532 0.129124 0 0.00512877 0.121814 0 0.0133806 0.119259 0 0.0208548 0.114022 0 0.0253475 0.111572 0 0.0250491 0.112106 0 0.024086 0.113191 0 0.0225926 0.113777 0 0.0203843 0.114687 0 0.0219422 0.114398 0 0.0205862 0.115319 0 0.0194217 0.117182 0 0.0206555 0.11716 0 0.0217848 0.115182 1 0.0250372 0.126311 0 0.02737 0.140408 0 0.0325886 0.15201 0 0.0257243 0.167393 0 0.0301113 0.183004 0 0.0409681 0.18986 0 0.0507237 0.19495 0 0.0625376 0.206258 0 0.0796012 0.210749 0 0.0990429 0.210863 0 0.124415 0.204211 0 0.140244 0.208265 0 0.148958 0.214384 0 0.155064 0.227457 0 0.17469 0.212961 0 0.189318 0.207581 0 0.196645 0.207797 0 0.207721 0.212299 0 0.232095 0.219677 0 0.25338 0.226308 0 0.264285 0.2318 0 0.278545 0.229187 0 0.308986 0.23198 0 0.330658 0.233698 0 0.356475 0.236617 0 0.37365 0.242906 0 0.415286 0.234713 0 0.442261 0.237062 0 0.457057 0.239734 0 0.476829 0.244954 0 0.500162 0.247835 0 0.525488 0.248626 0 0.559786 0.248637 0 0.589748 0.240003 0 0.609173 0.235512 0 0.629098 0.24032 0 0.651837 0.232477 0 0.679755 0.231712 0 0.717381 0.201209 0 0.730019 0.216693 0 0.753612 0.207988 0 0.76667 0.203065 0 0.780423 0.190393 0 0.796657 0.177302 0 0.814815 0.158915 0 0.818222 0.113867 0 0.839057 0.0919851 0 0.876916 0.0895988 0 0.898814 0.074481 0 0.906713 0.0593558 0 0.909088 0.0461223 0 0.914255 0.0304145 0 0.925618 0.0230777 0 0.931637 0.0189214 1 0.935948 0.0183369 0 0.939808 0.0181223 0 0.948818 0.0311888 0 0.953543 0.046669 0 0.957251 0.0598187 0 0.959923 0.0720449 0 0.958962 0.0834759 0 0.965646 0.0970572 0 0.974645 0.116056 0 0.977442 0.143873 0 0.97855 0.182256 0 0.974762 0.219974 0 0.963663 0.252538 0 0.963466 0.286261 0 0.953272 0.312378 0 0.926104 0.352471 0 0.908267 0.382152 0 0.892997 0.403429 0 0.888756 0.423511 0 0.877001 0.455465 0 0.873853 0.478254 0 0.859085 0.503691 0 0.840097 0.525134 0 0.827762 0.544016 0 0.816635 0.551887 0 0.802061 0.569793 1 0.793628 0.588185 0 0.780834 0.600601 0 0.763822 0.605305 0 0.732166 0.590303 0 0.71808 0.591989 0 0.696488 0.593984 0 0.680227 0.591865 0 0.662649 0.594625 1 0.635629 0.590871 0 0.616248 0.584841 0 0.566675 0.587584 0 0.541738 0.582017 0 0.520287 0.574218 0 0.501009 0.568864 0 0.455451 0.561652 0 0.431406 0.548351 0 0.40348 0.540302 0 0.383592 0.529132 0 0.361327 0.501995 0 0.339398 0.491518 0 0.317472 0.475812 0 0.294724 0.465805 0 0.279397 0.45038 0 0.26258 0.429566 0 0.24878 0.414344 0 0.240608 0.389861 0 0.226445 0.373389 0 0.117916 0.26015 0`37: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.append (rbfpPlot.node());\n let canvas = renderer.domElement;\n canvas.style[\"vertical-align\"] = \"top\";\n div.append (canvas);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"gui","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"{ \n let origPose = bvhRot(bvh,currentFrame);\n let [markx,marky] = mark;\n let recPose = rbfu(x.invert(markx),y.invert(marky));\n return euclideanNorm(origPose,recPose)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof loadProjFile = file({\n title: \"Load Projection File\",\n description: \"Text file containing 3 numbers separated by a space per line: x y c\",\n accept: \".txt\",\n multiple: false,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof loadBvhFile = file({\n title: \"BVH File\",\n description: \"A Mocap file in the BVH format (.bvh)\",\n accept: \".bvh\",\n multiple: false,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"viewof reprojectionParameters = checkbox({\n title: \"Reprojection Parameters\",\n options: [\n { value: \"o\", label: \"Optimize\" },\n { value: \"k\", label: \"Keep Control Points\" }\n ],\n value: [\"k\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"requestButton = {\n let button = html``;\n button.onclick = async function() {\n let s;\n if (reprojectionParameters.indexOf (\"k\") >= 0) {\n s = await requestProjection(bvhFilename, data, 0);\n }\n else {\n s = await requestProjection(bvhFilename, [], 5);\n }\n console.log (\"Loaded\");\n let a = s.search(\"rbfp projection\");\n let b = s.search(\"optimized projection\");\n if (reprojectionParameters.indexOf (\"o\") >= 0) {\n mutable projectionFile = s.slice(b+21,s.length-1);\n }\n else {\n mutable projectionFile = s.slice(a+16,b-1);\n }\n }\n return button;\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"speed = {\n mixer.timeScale = gui.speed;\n return gui.speed\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"mutable time = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"changeTimeSlider = function (newtime) {\n let i = document.querySelector(\"#timeSlider\");\n i.value = newtime;\n let parent = i.parentElement.parentElement;\n var event = new Event('input');\n parent.dispatchEvent(event);\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`## Projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"\nx = d3.scaleLinear().domain(d3.extent(data, d => d[0])).range([margin.left,svgSize.width-margin.right])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"y = d3.scaleLinear().domain(d3.extent(data, d => d[1])).range([svgSize.height-margin.top,margin.bottom])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"panelWidth = width - 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"svgSize = ({width:panelWidth/3,height:panelWidth/3})","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"margin = ({left:10,right:10,bottom:10,top:10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"mutable mark = [0,0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"updateMark = {\n let [markx,marky] = mark;\n rbfpPlot.select(\"path.mark\").attr(\"transform\", \"translate(\"+markx+\",\"+marky+\")\");\n let interpPose = rbfu([x.invert(markx),y.invert(marky)]);\n setSkeletonPose(skeletonClone, interpPose, new THREE.Vector3(0,bvhTranslation[1],0));\n let basePose = bvhRot(bvh,currentFrame);\n return { error : euclideanNorm(basePose,interpPose) } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"updateFrameMark = {\n let [px,py] = data[currentFrame];\n let [markx,marky] = [x(px),y(py)];\n rbfpPlot.select(\"path.frame\").attr(\"transform\", \"translate(\"+markx+\",\"+marky+\")\");\n mutable mark = [markx,marky];\n return [markx,marky]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`## Mocap animation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"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":597,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"rendererSize = ({width:width*0.95,height:width/2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"frameFromTime = function(time) {\n let times = bvh.clip.tracks[0].times;\n let n = times.length;\n let i = 0;\n let k = 1000;\n let j;\n while (k-- > 0 && n >= 1) {\n j = ~~(i + n/2);\n if (times[j] > time) {\n n = j-i;\n } else {\n n = n - (j - i);\n i = j;\n }\n }\n return j\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"mutable currentFrame = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"/**\n * Listen for the timeSlider and updates the mocap skeleton rendering\n **/\ntimecallback = {\n if (!gui.play) {\n mixer.clipAction( bvh.clip ).time = gui.time;\n mixer.update(0);\n mutable currentFrame = frameFromTime(gui.time);\n //mutable time = gui.time;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"mutable mixer = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"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":173,"value":"skeletonHelper = {\n let sh = new SkeletonHelper( bvh.skeleton.bones[0]);\n sh.skeleton = bvh.skeleton; // allow animation mixer to bind to SkeletonHelper directly\n return sh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"{ \n let q1 = new THREE.Quaternion(-0.32845902442932123,\n -0.046959217637777315,\n -0.08708960562944411,\n 0.9393215179443357);\n let q2 = new THREE.Quaternion( 0.027259070970604034,\n 0.015950005869948256,\n -0.23759064991254447,\n 0.9708518030249018)\n return q1.angleTo(q2)/Math.PI * 3\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"skeletonClone = {\n let sh = skeletonHelper.clone();\n sh.reference = skeletonHelper;\n return sh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1042,"value":"skeletonConfigure = {\n skeletonHelper.configure({radius: gui.boneradius, color: gui.originalcolor});\n skeletonClone.configure({radius: gui.boneradius, color: gui.reconstructioncolor, \n boneerror: gui.boneerror, boneerrormultiply: gui.boneerrormultiply});\n let s = gui.skelsize;\n skeletonHelper.parent.scale.set (s,s,s);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"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":847,"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":1254,"value":"setClonePose = {\n let setClonePose = function (frame) {\n if (frame != mutable currentFrame) {\n let [px,py] = data[frame];\n let [markx,marky] = [x(px),y(py)];\n let interpPose = rbfu([x.invert(markx),y.invert(marky)]);\n setSkeletonPose(skeletonClone, interpPose, new THREE.Vector3(0,bvhTranslation[1],0));\n //mutable currentFrame = frame;\n }\n }\n return setClonePose;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`## Projection data loading and parsing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"mutable originalData = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"data = // Build a new data using rbfp\n originalData.map(function (d,i) {\n if (d [2] > 0) return d;\n let [x,y] = rbfp(bvhRot(bvh,i));\n return [x,y,0]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"/** \n * Triggered by changing the contents of projectionFile\n **/\nloadDataFromFile = {\n mutable originalData = d3.dsvFormat(\" \").parseRows(projectionFile, function(d,i) { return d.map(x => +x) })\n return \"data loaded\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"/**\n * Triggered when a new projection file is selected\n **/\nonLoadProjFile = {\n let text = \"\";\n try {\n text = await Files.text(loadProjFile);\n mutable projectionFile = text;\n return \"loaded\";\n } catch (exception) {\n return \"canceled\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"function euclideanNorm(pa, pb) {\n return numeric.norm2(numeric.sub(pb, pa));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"/**\n * Returns an array of rotations using Euler angles, one triple for each joint, \n * for the given frame of the bvh motion\n **/\nbvhEulerRot = 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 angles = new Float32Array(bvh.joints.length * 3);\n let i = 0;\n for (let j of bvh.joints) { \n let values = tracks[j].values;\n let q = new THREE.Quaternion(values[offset],values[offset+1],values[offset+2],values[offset+3]);\n let e = new THREE.Euler().setFromQuaternion(q);\n angles[i++] = e.x; angles[i++] = e.y; angles[i++] = e.z;\n }\n return angles;\n}\n \n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"/**\n * Returns an array of rotations using quaternions, one quadruple of numbers for each joint, \n * for the given frame of the bvh motion\n **/\nbvhQuatRot = 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}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"bvhRot = bvhQuatRot","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"/** \n * Builds an rbf interpolant where the domain is a pose (list of rotations)\n * and the range is a position in 2d space\n **/\nrbfProjection = function (bvh, oldProjection) {\n let points = [];\n let values = [];\n let frame = 0;\n for (let p of oldProjection) {\n if (p[2] > 0) {\n values.push(p.slice(0,2));\n points.push(bvhRot(bvh,frame));\n }\n frame++;\n }\n return RBF(points,values,'linear','euclidean');\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"/** \n * Builds an rbf interpolant where the domain is a pose (list of rotations)\n * and the range is a position in 2d space\n **/\nrbfUnprojection = function (bvh, projection) {\n let points = [];\n let values = [];\n let frame = 0;\n for (let p of projection) {\n if (p[2] > 0) {\n points.push(p.slice(0,2));\n values.push(bvhRot(bvh,frame));\n }\n frame++;\n }\n return RBF(points,values,'linear','euclidean');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"kernel = function(r) {\n return r;\n// let dist = 0;\n// for (let i = 0; i < a.length; i++) {\n// let delta = a[i]-b[i];\n// dist += delta*delta;\n// }\n// return Math.sqrt(dist)\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"rbfp = rbfProjection(bvh,originalData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"rbfu = rbfUnprojection (bvh,data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"avgKeyframeError = {\n let err = [];\n let frame = 0;\n for (let d of data) {\n if (d[2] > 0) { // keyframe\n let pose = bvhRot (bvh, frame);\n let proj = rbfp(pose);\n let reconstruction = rbfu([d[0],d[1]]);\n err.push(euclideanNorm(pose,reconstruction));\n }\n frame++;\n }\n return err.reduce((a,c) => a+c)/err.length\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"frameError = {\n let err = [];\n let frame = 0;\n for (let d of data) {\n let pose = bvhRot (bvh, frame);\n let proj = rbfp(pose);\n let reconstruction = rbfu([d[0],d[1]]);\n err.push(euclideanNorm(pose,reconstruction));\n frame++;\n }\n return {avg: err.reduce((a,c) => a+c)/err.length, \n min: err.reduce((a,c) => Math.min(a,c)), \n max: err.reduce((a,c) => Math.max(a,c))} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`## BVH file loading and parsing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"mutable bvhFile = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"// A default file\nloadWalkCycle = {\n let walkcycle = fetch('https://gist.githubusercontent.com/esperanc/224330602781b880efbc9bbc50a9268b/raw/5d475dcc5a4489f56afc315a0f7b1c3dcc02f36a/08_02.bvh')\n .then(function(response) {\n return response.text();\n })\n mutable bvhFile = walkcycle;\n return \"Walk Cycle loaded\";\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"mutable bvhFilename = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"/** \n * Loads bvhFile variable when the loadBvhFile button is used to select a bvh file\n **/\nonLoadBvhFile = {\n let text = \"\";\n try {\n text = await Files.text(loadBvhFile);\n mutable bvhFilename = loadBvhFile.name;\n mutable bvhFile = text;\n return \"loaded\";\n } catch (exception) {\n return \"canceled\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"mutable bvhTranslation = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"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 (bvhFile); \n mutable bvhTranslation = Float32Array.from(obj.clip.tracks[0].values);\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"/** \n * Called from the inPlaceMotion button. Changes the first track of the bvh (the one containing the \n * skeleton translation) so as to contain only the first translation or the whole set of translations.\n **/\ninPlaceMotionCallback = {\n \n // Remove translation from the root bone\n let obj = bvh;\n let rootTranslation = obj.clip.tracks[0].values;\n let origin = [0,bvhTranslation[1],0];\n if (gui.inplace) {\n for (let i = 0; i < rootTranslation.length; i += 3) rootTranslation.set(origin,i);\n }\n else {\n rootTranslation.set(bvhTranslation)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"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":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"numeric = require('https://bundle.run/numeric@1.2.6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"import {checkbox,slider,file} from \"@esperanc/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}