2b:null 2c:["$","title",null,{"children":"Biological Motion Walker Demo | Brett Cooper | Observable"}] 31:T5a6,# Biological Motion Walker Demo Based on the notebook by [@mythmon](https://observablehq.com/@mythmon/bmwalker-demo). with help from [observable Talk](https://talk.observablehq.com/t/github-bmwalker-js-library-doesnt-want-to-be-required/6475), [@mootari](https://observablehq.com/@mootari), [@enjalot](https://observablehq.com/@enjalot) and [@mbostock](https://observablehq.com/@mbostock) https://github.com/tetunori/BMWalker.js by https://twitter.com/tetunori_lego https://www.biomotionlab.ca/projects/ [Decomposing biological motion: A framework for analysis and synthesis of human gait patterns](https://jov.arvojournals.org/article.aspx?articleid=2192503). #### ALT text: Human body points, Head, Belly, Clavicles, Left and Right Ankles, Elbows, Hands, Hips, Knees, Shoulders are represented by circles on a y and x chart. The size of the circle represents the z position and is plotted at the points x and y position on the chart. The circles are drawn at a position in relations to the movement of taking one step and are drawn on top for the previous position with about 80 circles drawn for each point. The colours for each body point ranged from purple through green through to yellow making up 15 colours. When a circle is drawn, it's drawn at 10% intensity alpha. That means the circle builds darker colours when the circles overlaps previous x,y positions. They mostly looks like donuts crossed with pretzels. 32:T5e3,Plot.plot({ width:450, height:512, margin:30, x: {domain: [ -80, 80]}, y: {domain: [120, -120]}, r: {domain: [-40,40], range: [1, 20], type: "identity" }, color: {scheme: "viridis", legend: true, columns: 5, width: 400, }, style: { fontFamily: "Arial", fontSize: "12px" }, marks: [ Plot.ruleY([120]), Plot.ruleX([-80]), Plot.link( (bb.includes('Bones'))?[]:data.lines, {x1: "x1", y1: "y1", x2: "x2", y2: "y2", stroke: "rgba(0,0,0,.03)"}), // Plot.link((check==‘yes’) ? data.lines : [], options) Plot.dot((bb.includes('Bits'))?[]:data.head, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.clavicles, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.lShoulder, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.lElbow, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.lHand, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.rShoulder, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.rElbow, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.rHand, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.belly, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.lHip, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.lKnee, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.lAnkle, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.rHip, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.rKnee, dotOptions), Plot.dot((bb.includes('Bits'))?[]:data.rAnkle, dotOptions), ] }) 33:T46b,{ let el = htl.html``; let z = d3 .scaleLinear() .domain([-50, 50]) .range([walkerHeight / 100, walkerHeight / 60]); function update() { let joints = d3 .select(el) .select("g.joints") .selectAll("circle") .data(markers.point); joints .enter() .append("circle") .attr("fill", "black") .merge(joints) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => z(d.z)*2); let bones = d3 .select(el) .select("g.bones") .selectAll("line") .data(markers.line); bones .enter() .append("line") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1) .merge(joints) .attr("x1", (d) => d[0].x) .attr("y1", (d) => d[0].y) .attr("x2", (d) => d[1].x) .attr("y2", (d) => d[1].y); } while (true) { update(); yield el; } }34:T477,--- # [setWalkerParam](https://github.com/tetunori/BMWalker.js#setwalkerparam)()

setWalkerParam( bodyStructure Number,  
                weight Number, 
                nervousness Number, 
                happiness Number)

### Overview: Set parameters on the motion of 'Walker'. Valid if the type is BMW_TYPE_HUMAN only. ### Parameters: Default values are 0 which means neutral. **bodyStructure** Number. Adjust parameters on body structure. >Set values between _minBodyStructure_ and _maxBodyStructure_(automatically clamped). **weight** Number. Adjust parameters on weight. >Set values between _minWeight_ and _maxWeight_(automatically clamped). Positive values are heavy and negative values are light. **nervousness** Number. Adjust parameters on nervousness. >Set values between _minNervousness_ and _maxNervousness_(automatically clamped). Positive values are nervous and negative values are relaxed. **happiness** Number. Adjust parameters on happiness. >Set values between _minHappiness_ and _maxHappiness_(automatically clamped). Positive values are happy and negative values are sad. 35:Te6a,The main routine that updates the markers positions based on **Body structure, weight, nervousness **and** happiness** ### todo reference white paper to explain math. ```js // Calculate marker positions for (i = 0; i < this.nummarkers * 3 + 1; i++) { // 46 this.markers[i] = this.sample(i, walkertime, true); } ``` --- ```js sample(i, walkertime, includeStructure) { // includeStructure is a bool and true. walkertime is ms into animation from 0 to walker.getPeriod() let initialpos = this.meanwalker[this.type][i]; // steps thought each entry in the meanwalker[0] length 230 if (includeStructure) { if (this.type === BMW_TYPE_HUMAN) { // based on i = 0 initialpos += // ${walker.meanwalker[0][0]} this.bodyStructureaxis[i] * this.bodyStructure + // ${walker.meanwalker[0][0]+walker.bodyStructureaxis[0]*walker.bodyStructure} this.weightaxis[i] * this.weight + // ${walker.meanwalker[0][0]+walker.bodyStructureaxis[0]*walker.bodyStructure+walker.weightaxis[0]*walker.weight} this.nervousaxis[i] * this.nervousness + // ${walker.meanwalker[0][0]+walker.bodyStructureaxis[0]*walker.bodyStructure+walker.weightaxis[0]*walker.weight+walker.nervousaxis[0]*walker.nervousness} this.happyaxis[i] * this.happiness; // ${walker.meanwalker[0][0]+walker.bodyStructureaxis[0]*walker.bodyStructure+walker.weightaxis[0]*walker.weight+walker.nervousaxis[0]*walker.nervousness+walker.happyaxis[0]*walker.happiness} } //invert or scale structure if (i >= this.nummarkers * 2 && i < this.nummarkers * 3) // z positions? initialpos *= this.structure_vertical_scale; // ${walker.structure_vertical_scale} else initialpos *= this.structure_horizontal_scale; // ${walker.structure_horizontal_scale} } else { initialpos = 0; } //motion! let motionpos = 0; const j = this.nummarkers * 3 + 1; // j ${walker.nummarkers*3+1} = ${walker.nummarkers} * 3 + 1 if (this.type === BMW_TYPE_HUMAN) { const b = this.bodyStructure; // ${walker.bodyStructure} const w = this.weight; // ${walker.weight} const n = this.nervousness; // ${walker.nervousness} const h = this.happiness; // ${walker.happiness} motionpos = (this.meanwalker[this.type][i + j] + this.bodyStructureaxis[i + j] * b + this.weightaxis[i + j] * w + this.nervousaxis[i + j] * n + this.happyaxis[i + j] * h) * Math.sin(walkertime) + (this.meanwalker[this.type][i + j * 2] + this.bodyStructureaxis[i + j * 2] * b + this.weightaxis[i + j * 2] * w + this.nervousaxis[i + j * 2] * n + this.happyaxis[i + j * 2] * h) * Math.cos(walkertime) + (this.meanwalker[this.type][i + j * 3] + this.bodyStructureaxis[i + j * 3] * b + this.weightaxis[i + j * 3] * w + this.nervousaxis[i + j * 3] * n + this.happyaxis[i + j * 3] * h) * Math.sin(2 * walkertime) + (this.meanwalker[this.type][i + j * 4] + this.bodyStructureaxis[i + j * 4] * b + this.weightaxis[i + j * 4] * w + this.nervousaxis[i + j * 4] * n + this.happyaxis[i + j * 4] * h) * Math.cos(2 * walkertime); } if (i >= this.nummarkers * 2 && i < this.nummarkers * 3) motionpos *= this.motion_vertical_scale; else motionpos *= this.motion_horizontal_scale; return initialpos + motionpos; } ```36:[] 2f:{"id":"3ee505cd5d388730","slug":"biological-motion-walker-demo","title":"Biological Motion Walker Demo","thumbnail":"af5d2aaebf45dd372f1c2b4bfbc2bb0a21704a1b28e10ef9a044adab548b478a","access_level":"public","create_time":"$D2022-04-26T06:24:06.994Z","update_time":"$D2022-07-06T21:31:37.089Z","view_time":null,"first_public_time":"$D2022-04-27T18:31:42.148Z","fork":{"id":"e35cc4e9207e5f6e","slug":"bmwalker-demo","title":"BMWalker Demo","owner":{"id":"3a9cb3bb8fb63f67","login":"mythmon","name":"Michael Cooper"}},"stars":29,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":3092,"publish_version":3092,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[{"id":"5777f7dbd3a3c054","reply_to_id":null,"content":"I think you want r: {type: \"identity\"} here. Otherwise there’s an extra sqrt transform happening.","create_time":"$D2022-04-28T05:02:25.007Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"8e49bc973411280b","reply_to_id":"5777f7dbd3a3c054","content":"Also, this notebook is amazing! 😍 Great work and thanks for using Plot!","create_time":"$D2022-04-28T05:02:47.296Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"1945295e4c4fbb01","reply_to_id":"5777f7dbd3a3c054","content":"Oh thanks. the looks heaps better.","create_time":"$D2022-04-28T15:52:33.325Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Biological Motion Walker Demo","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2406,"value":"viewof bb = Inputs.checkbox([\"Bones\",\"Bits\"], {label: \"Show/Hide body bits\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1410,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"viewof walkerParams = Inputs.form({\n bodyStructure: Inputs.range(paramBounds.bodyStructure, {\n label: \"Body Structure\",\n value: 0,\n step: 0.1\n }),\n weight: Inputs.range(paramBounds.weight, {\n label: \"Weight\",\n value: 0,\n step: 0.1\n }),\n nervousness: Inputs.range(paramBounds.nervousness, {\n label: \"Nervousness\",\n value: 0,\n step: 0.1\n }),\n happiness: Inputs.range(paramBounds.happiness, {\n label: \"Happiness\",\n value: 0,\n step: 0.1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"viewof cam = Inputs.form({\n elevation: Inputs.range([-3.14, 3.14], {\n label: \"Camera elevation 1.6 for topdown view\",\n step: 0.01,\n value: 0\n }),\n roll: Inputs.range([-3.14, 3.14], {\n label: \"Camera roll\",\n step: 0.01,\n value: 0\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2401,"value":"The **Play** button controls the azimuth of the model, it lets you turn model to the left and right (1.6 presents a side view) or press **Play** to Animate.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2214,"value":"viewof azimuth = Scrubber(angles, { loop: true, alternate: true, autoplay: false, value:0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"viewof walkerHeight = Inputs.range([50, 500], {\n label: \"Walker Height\",\n value: 250,\n step: 1,\n disabled:true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"viewof walkerSpeed = Inputs.range([-2, 2], {\n label: \"Walker Speed\",\n value: 0.4,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"viewof bodyType = Inputs.range([BMW_TYPE_HUMAN, BMW_TYPE_BOX], {\n label: \"Body Type\",\n value: 0,\n step: 1,\n disabled:true\n})\n\n// const BMW_TYPE_HUMAN = 0;\n// const BMW_TYPE_CAT = 1;\n// const BMW_TYPE_PIGEON = 2;\n// const BMW_TYPE_BOX = 3; // (for debug)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":817,"value":"viewof animate = Inputs.toggle({label: \"Stop/Start Animate\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":566,"value":"viewof markerIndex = Inputs.range([0, walker.getPeriod()], {\n label: \"Marker time index\",\n value: 0,\n step: walker.getTranslationSpeed()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1588,"value":"I reversed the y axis when displaying the positions, so the head is on top. \nThe body is facing the viewer with a camera azimuth of zero.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1206,"value":"Plot.plot({\n width:400,\n height:512,\n margin:40,\n grid: true,\n x: {domain: [ -60, 60]},\n y: {domain: [120, -120]},\n r: {domain: [45,-45], range: [2, 20], type: \"identity\"} ,\n marks: [\n Plot.link(markers.line, {x1: d=>d[0].x, y1: d=>d[0].y, x2: d=>d[1].x, y2: d=>d[1].y, stroke: \"rgba(0,0,0,0.5)\"}),\n Plot.dot(markers.point, {x: \"x\", y: \"y\", r: d=> zScale(d.z), fill:'desc'}),\n Plot.text(markers.point, Plot.selectLast({x: \"x\", y: \"y\", z: \"z\", text: \"desc\", textAnchor: \"middle\", dy: 25})),\n \n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1555,"value":"zScale = d3.scaleLinear()\n .domain([-35, 35])\n .range([5, 20]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1234,"value":"# make the time series data set","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1192,"value":"data = {\n walkerParams // causes this cell to run when body parameters change\n cam\n azimuth\n \n let teData = {lines: []}\n let stepGap = walker.getFrequency()/(1000/120)\n\n walker.getMarkers(walkerHeight,0).map( d => _.set(teData,_.camelCase(d.desc),[]))\n \n for (let i = 0; i < walker.getPeriod(); i+=stepGap) {\n teData.lines.push(...walker.getLineMarkers(walkerHeight, i)\n .map(([a, b]) => ({x1: a.x, y1: a.y, x2: b.x, y2: b.y })))\n walker.getMarkers(walkerHeight,i).map( walk => teData[_.camelCase(walk.desc)].push({x:walk.x,y:walk.y,z:walk.z,c:walk.desc}))\n \n }\nreturn teData\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":329,"value":"walker.setSpeed(walkerSpeed) // updates the walking speed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"paramBounds = {\n let tmpWalker = new BMWalker();\n return {\n bodyStructure: [tmpWalker.minBodyStructure, tmpWalker.maxBodyStructure],\n weight: [tmpWalker.minWeight, tmpWalker.maxWeight],\n nervousness: [tmpWalker.minNervousness, tmpWalker.maxNervousness],\n happiness: [tmpWalker.minHappiness, tmpWalker.maxHappiness]\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"walker = {\n let walker = new BMWalker(bodyType);\n return walker;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"{\n walker.setWalkerParam(\n walkerParams.bodyStructure,\n walkerParams.weight,\n walkerParams.nervousness,\n walkerParams.happiness\n );\n return walkerParams;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"{\n walker.setCameraParam(azimuth, cam.spin ? 1 : 0, cam.elevation, cam.roll);\n return cam;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"markers = {\n while (true) {\n yield {\n point: walker.getMarkers(walkerHeight,animate?markerIndex:undefined),\n line: walker.getLineMarkers(walkerHeight,animate?markerIndex:undefined)\n };\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1812,"value":"dotOptions = ({x: \"x\", y: \"y\", r: d=> zScale(d.z), stroke:'c', opacity:0.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"BMWalker = fetch(\"https://tetunori.github.io/BMWalker.js/dist/v0.6.1/bmwalker.js\")\n .then((r) => r.text())\n .then((src) => new Function(` let abs = Math.abs; \n ${src}; \n return BMWalker`)())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":397,"value":"# other notes\n\n## mean walker\nFour arrays for each type:\n- BMW_TYPE_HUMAN\n- BMW_TYPE_CAT \n- BMW_TYPE_PIGEON \n- BMW_TYPE_BOX\n\nonly Body Type BMW_TYPE_HUMAN (0) is affected by these parameters.\n- Body Structure\n- Weight\n- Nervousness\n- Happiness\n\nCat as no Line Markers\n\n## functions to do with timing.\n\nwalker.getFrequency() == ${walker.getFrequency()} \nwalker.getTranslationSpeed() == ${walker.getTranslationSpeed()} \nwalker.calcTranslationSpeed() == ${walker.calcTranslationSpeed()}\n\nwalker.calcTime(number)\n\n #### Description of the 15 marker types for BMW_TYPE_HUMAN\n> \"Head\" \n\"Clavicles\" \n\"L-Shoulder\" \"L-Elbow\" \"L-Hand\" \n\"R-Shoulder\" \"R-Elbow\" \"R-Hand\" \n\"Belly\" \n\"L-Hip\" \"L-Knee\" \"L-Ankle\" \n\"R-Hip\" \"R-Knee\" \"R-Ankle\" \n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":418,"value":"---\n# [getMarkers](https://github.com/tetunori/BMWalker.js#getmarkers)()\n**_getMarkers_**( **walkerHeight** Number, [**tmsec** Number] )\n\nGet all markers that make up 'Walker'.\n\n**walkerHeight**\tNumber. \n>Height size of the 'Walker'. \nThis method returns the coordinates as the height of 'Walker' fits into this value.\n\n**_Optional_**. \n**tmsec** Number. \n> Specify the time in msec for which you would like to get markers. \nIf unspecified, this method returns current marker coordinates.\n\n### Returns:\n> Array of the marker data Object at the specified time. \nEach data Object has properties below. \n**x**\tNumber: _x-coordinate_ of the marker. \n**y**\tNumber: _y-coordinate_ of the marker. \n**z**\tNumber: _z-coordinate_ of the marker. \n**desc** String: Description of the marker _'Head'_, _'Clavicles'_ and so on.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":779,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1815,"value":" ---\n # [setCameraParam](https://github.com/tetunori/BMWalker.js#setcameraparam)()\n\n

\nsetCameraParam(azimuth: Number, \n               angularVelocity: Number, \n               elevation: Number, \n               roll: Number)\n

\n\n**Overview:** Set parameters on the camera.\n\n**azimuth**\tNumber. \n>The rotation angle(in radians) of the 'Walker' around the vertical axis. \n Set values from -PI to PI. Default value is 0.\n\n**angularVelocity**\tNumber.\n> The rotation speed(radians/sec) of the 'Walker'. \n **0** would mean the 'Walker' that does not rotate over a trial. \n Default value is **0** and recommendation settings are from -2\\*PI to 2\\*PI.\n\n**elevation**\tNumber. \n> The elevation of the camera with respect to the 'Walker'. \nEssentially a rotation angle(in radians) around the horizontal axis. \nSet values from -PI to PI. Default value is 0.\n\n**roll**\tNumber. \n> The roll angle of the camera. \n Set values from -PI to PI. Default value is 0.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1490,"value":"walker.getPeriod() // lenght of the loop animation","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"# Walker specific arrays\n\n- **bodyStructureaxis**\n- **weightaxis**\n- **nervousaxis**\n- **happyaxis**\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2204,"value":"# points sorted into the x y z \n## but not transformed via matrix\n\nThis is looking top down, kind of\n\ntodo: plot onto thee charts top, front, left. That would show the z positions better.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1955,"value":"Plot.plot({\n width:400,\n height:500,\n margin:40,\n grid: true,\n\n x: {domain: [ -80, 80]},\n y: {domain: [-300, 300]},\n r: {domain: [-40,40], range: [1, 20], type: \"identity\"} ,\n\n marks: [\n Plot.dot(markersXYZ , { x: \"x\", y: \"y\", r: d=> zScale(d.z)/50}),\n Plot.text(markersXYZ, {x: \"x\", y: \"y\", text: \"desc\", textAnchor: \"end\",dy:12}),\n \n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2440,"value":"These have a scale between -6 and 6 and the size represents the amount of influence as model point has over a points movement.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2258,"value":"Plot.plot({\n width,\n height: 600,\n grid: true,\n margin:30,\n r: {type: \"identity\"} ,\n facet: {\n data: variants,\n x: \"model\",\n },\n marks: [\n Plot.frame(),\n Plot.dot(variants, {\n x: \"x\",\n y: \"y\",\n r: d=> vScale(d.z),\n stroke: \"#00A\",\n fill: \"#ACC\"\n }),\n Plot.text(variants, {x: \"x\", y: \"y\", text: \"desc\", textAnchor: \"end\",dy:12}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2369,"value":"The lines below are not a useful vis as the data is badly, see [above](https://observablehq.com/@hellonearthis/biological-motion-walker-demo#cell-403) \nThe black lines is the data for the base positions and the variance data is the coloured lines. That is slightly interesting but context isn't portable to positioning.\n\n`for (let i = 0; i < walker.nummarkers * 3 + 1; i++) { // 46 (45?)` this is how the data is divided in relation to 15 body part.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1753,"value":"Plot.plot({\n width,\n marks: [\n Plot.line(walker.meanwalker[0], {x: (d,i)=>i, y: d=>d}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1796,"value":"viewof varian = Inputs.checkbox([\"Body Structure\", \"Weight\",\"Nervous\",\"Happyness\"], {label: \"Hide variances:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1759,"value":"Plot.plot({\n width,\n marks: [\n Plot.line(walker.bodyStructureaxis, {x: (d,i)=>i, y: d=>d, stroke: 'green',opacity: d=> varian.includes(\"Body Structure\")?0:1 }),\n Plot.line(walker.weightaxis, {x: (d,i)=>i, y: d=>d, stroke: 'steelblue', opacity: d=> varian.includes(\"Weight\")?0:1 }),\n Plot.line(walker.nervousaxis, {x: (d,i)=>i, y: d=>d, stroke: 'goldenrod', opacity: d=> varian.includes(\"Nervous\")?0:1}),\n Plot.line(walker.happyaxis, {x: (d,i)=>i, y: d=>d, stroke: '#f15c80', opacity: d=> varian.includes(\"Happyness\")?0:1})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2333,"value":"vScale = d3.scaleLinear()\n .domain(d3.extent(variants, d=> d.z))\n .range([2, 18]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2236,"value":"function makeXYZ(poze) {\n let w = []\n for (let i = 0; i < walker.nummarkers; ++i) {\n let x = poze[i]\n let y = poze[i+walker.nummarkers]\n let z = poze[i+walker.nummarkers*2]\n w.push({x,y,z,desc:desc[i]})\n }\nreturn w\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2123,"value":"markersXYZ= makeXYZ(walker.meanwalker[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2283,"value":"variants ={\n let xyz = []\n \n makeXYZ(walker.bodyStructureaxis).map( d =>{\n let x = d\n x.model = 'bodyStructure'\n xyz.push(x)\n })\n\n makeXYZ(walker.weightaxis).map( d =>{\n let x = d\n x.model = 'weight'\n xyz.push(x)\n })\n\n makeXYZ(walker.nervousaxis).map( d =>{\n let x = d\n x.model = 'nervous'\n xyz.push(x)\n })\n\n makeXYZ(walker.happyaxis).map( d =>{\n let x = d\n x.model = 'happy'\n xyz.push(x)\n })\n return xyz\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2076,"value":"desc= [\n 'Head',\n 'Clavicles',\n 'L-Shoulder',\n 'L-Elbow',\n 'L-Hand',\n 'R-Shoulder',\n 'R-Elbow',\n 'R-Hand',\n 'Belly',\n 'L-Hip',\n 'L-Knee',\n 'L-Ankle',\n 'R-Hip',\n 'R-Knee',\n 'R-Ankle',\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1151,"value":"walker.meanwalker[0] // human","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":813,"value":"walker.bodyStructureaxis","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":811,"value":"walker.weightaxis","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":809,"value":"walker.nervousaxis","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":807,"value":"walker.happyaxis","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1153,"value":"walker.markers","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"walker.getFrequency() ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"walker.calcTranslationSpeed()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"walker.getTranslationSpeed()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"walker.calcTime(walker.getFrequency() )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"walker.setTranslationParam(false) // true means they are moving Human and chickens only","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"walker.resetTimer() // reset the Translation position","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1887,"value":"# Matrix bits functions","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1891,"value":"walker.mtrx.newMatrix()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1897,"value":"walker.mtrx.newIdentMatrix()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1900,"value":"walker.mtrx.dotProd(1,1,1, 10,10,10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1911,"value":"# Timer class\n\nconst precision = 10; // 10msec as described in the bmwalker.js","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1905,"value":"walker.tm.getTimer()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1909,"value":"walker.tm","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1741,"value":"### consts not exported from BMWalker.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":252,"value":"BMW_TYPE_HUMAN = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"BMW_TYPE_CAT = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"BMW_TYPE_PIGEON = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"BMW_TYPE_BOX = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1842,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1846,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2211,"value":"angles = {\n let a = d3.range(-3.14, 3.14, 0.02).map(d => Math.floor(d * 10000) / 10000)\n arrayRotate(a,a.length/2)\n return a\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2230,"value":"// thanks https://stackoverflow.com/a/33451102/45966\n\nfunction arrayRotate(arr, count) {\n count -= arr.length * Math.floor(count / arr.length);\n arr.push.apply(arr, arr.splice(0, count));\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2484,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2468,"value":"# looking at what BMWalker is doing\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2511,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3051,"value":"step = d3.range(0, walker.getPeriod(), 0.005) // huge array that is read every request animationframe ('now' in observable)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2652,"value":"tm = {\n let teMarkers = []\n \n for (let i = 0; i < walker.nummarkers * 3 + 1; i++) { // 46\n teMarkers[i] = walker.sample(i, step[~~(now%step.length)] , true); // not the best way to do this but its a test\n }\n\n let w = []\n for (let i = 0; i < walker.nummarkers; ++i) {\n let x = teMarkers[i]\n let y = teMarkers[i+walker.nummarkers]\n let z = teMarkers[i+walker.nummarkers*2]\n\n w.push( {x: x, y:y+600, z:z, desc:desc[i], view:'top'})\n w.push( {x: y, y:z, z:x, desc:desc[i], view:'front'})\n w.push( {x: x, y:z, z:y, desc:desc[i], view:'side'})\n \n }\n return w\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2862,"value":"Top view has the y shifted by 600 to give it a better positioning.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2664,"value":"Plot.plot({\n width,\n height: 600,\n grid: true,\n margin:30,\n x: {domain: [-500, 500]},\n y: {domain: [0, 1800]},\n facet: {\n data: tm,\n x: \"view\",\n },\n marks: [\n Plot.frame(),\n Plot.dot(tm, {\n x: \"x\", y: \"y\", r: 10,\n stroke: \"view\",\n }),\n Plot.rect(tm, {x1: 'x', y1: 'y', x2: 0, y2: 700, stroke: \"rgba(0,0,0,0.5)\"}),\n\n Plot.text(tm, {x: \"x\", y: \"y\", text: \"desc\", textAnchor: \"end\",dy:12}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"