2b:null 2c:["$","title",null,{"children":"BMwalker to Open Pose | Brett Cooper | Observable"}] 31:T5d4,p5_poseWalk = p5js(p5 => { p5.setup = function() { let teImage = p5.createCanvas(512, 512); p5.ellipseMode(p5.CENTER) } p5.draw = function() { p5.background("#000") p5.translate(255,255) p5.strokeWeight(1) te_pose(walker.getMarkers(walkerHeight)).map((bones,i)=>{ if(bones.type == 'bone') { // check if it's of type 'bone' or a 'joint'. p5.stroke(bones.bone_colour) p5.fill(bones.bone_colour) let distMath = distance(bones.x0, bones.y0, bones.x1, bones.y1) let midpoint = {x:(bones.x0 + bones.x1) / 2, y:(bones.y0 + bones.y1) / 2 } let f = distMath.dist * 0.035 f = (f<2)?2.5:f midpoint.x0 = midpoint.x + f * Math.sin(distMath.angle); midpoint.y0 = midpoint.y - f * Math.cos(distMath.angle); midpoint.x1 = midpoint.x - f * Math.sin(distMath.angle); midpoint.y1 = midpoint.y + f * Math.cos(distMath.angle); p5.beginShape() p5.curveVertex(midpoint.x, midpoint.y ) p5.vertex(bones.x0, bones.y0,) p5.curveVertex(midpoint.x0, midpoint.y0 ) p5.vertex(bones.x1, bones.y1); p5.curveVertex(midpoint.x1, midpoint.y1 ) p5.vertex(bones.x0, bones.y0,); p5.curveVertex(midpoint.x, midpoint.y) p5.endShape() } else { p5.stroke(bones.jointColour) p5.fill(bones.jointColour) p5.circle(bones.x0, bones.y0, walkerHeight*0.015); } }) } })32:T6c4,## Body bits _Open Pose_ doesn't have a belly, **open pose might, So I need to ask about that.** The head in BWalker has no features, so I would also have to add those onto the head location. These are RGB colours and correspond to the body keypoints ``` coco_body_keypoints BWalker connect_color default_keypoints 0: "nose", 0: "Head" 0: [0, 0, 255] 0: [241, 77] *** 1: "neck", 1: "Clavicles" 1: [255, 0, 0] 1: [241, 120] 2: "right_shoulder", 5: "R-Shoulder" 2: [255, 170, 0] 2: [191, 118] 3: "right_elbow", 6: "R-Elbow" 3: [255, 255, 0] 3: [177, 183] 4: "right_wrist", 7: "R-Hand" 4: [255, 85, 0] 4: [163, 252] 5: "left_shoulder", 2: "L-Shoulder" 5: [170, 255, 0] 5: [298, 118] 6: "left_elbow", 3: "L-Elbow" 6: [85, 255, 0] 6: [317, 182] 7: "left_wrist", 4: "L-Hand" 7: [0, 255, 0] 7: [332, 245] 8: "right_hip", 12: "R-Hip" 8: [0, 255, 85] 8: [225, 241] 9: "right_knee", 13: "R-Knee" 9: [0, 255, 170] 9: [213, 359] 10: "right_ankle", 14: "R-Ankle" 10: [0, 255, 255] 10: [215, 454] 12: "left_hip", 9: "L-Hip" 11: [0, 170, 255] 11: [270, 240] 13: "left_knee", 10: "L-Knee" 12: [0, 85, 255] 12: [282, 360] 13: "left_ankle", 11: "L-Ankle" 13: [85, 0, 255] 13: [286, 456] 14: "right_eye", 0: "Head" 14: [170, 0, 255] 14: [232, 59] *** 15: "left_eye", 0: "Head" 15: [255, 0, 255] 15: [253, 60] *** 16: "right_ear", 0: "Head" 16: [255, 0, 170] 16: [225, 70] *** 17: "left_ear", 0: "Head" 17: [255, 0, 85] 17: [260, 72] *** 8: "Belly" ```33:Tdb5,# Openpose COCO 18 Color Reference Chart | point | joint | HEX | ▪◾◼⬛◼◾▪ | pairs | bone (line) | HEX | |-------|----------------|:-------:|:--------:|-------|:---------------------|:-------:| |0 | nose |

"#FF0000"

| ⬛| 1,2 | Right Shoulderblade|

"#990000"

| |1 | neck |

"#FF5500"

| ⬛| 1,5 | Left Shoulderblade |

"#993300"

| |2 | Right Shoulder |

"#FFAA00"

| ⬛| 2,3 | Right Arm |

"#996600"

| |3 | Right Elbow |

"#FFFF00"

| ⬛| 3,4 | Right Forearm |

"#999900"

| |4 | Right Wrist |

"#AAFF00"

| ⬛| 5,6 | Left Arm |

"#669900"

| |5 | Left Shoulder |

"#55FF00"

| ⬛| 6,7 | Left Forearm |

"#339900"

| |6 | Left Elbow |

"#00FF00"

| ⬛| 1,8 | Right Torso |

"#009900"

| |7 | Left Wrist |

"#00FF55"

| ⬛| 8,9 | Right Upper Leg |

"#009933"

| |8 | Right Hip |

"#00FFAA"

| ⬛| 9,10 | Right Lower Leg |

"#009966"

| |9 | Right Knee |

"#00FFFF"

| ⬛| 1,11 | Left Torso |

"#009999"

| |10 | Right Ankle |

"#00AAFF"

| ⬛| 11,12 | Left Upper Leg |

"#006699"

| |11 | Left Hip |

"#0055FF"

| ⬛| 12,13 | Left Lower Leg |

"#003399"

| |12 | Left Knee |

"#0000FF"

| ⬛| 1,0 | Head |

"#000099"

| |13 | Left Ankle |

"#5500FF"

| ⬛| 0,14 | Right Eyebrow |

"#330099"

| |14 | Right Eye |

"#AA00FF"

| ⬛| 14,16 | Right Ear |

"#660099"

| |15 | Left Eye |

"#FF00FF"

| ⬛| 0,15 | Left Eyebrow |

"#990099"

| |16 | Right Ear |

"#FF00AA"

| ⬛| 15,17 | Left Ear |

"#990066"

| |17 | Left Ear |

"#FF0055"

| | | | | ### from https://github.com/lllyasviel/ControlNet/discussions/266 34:T4ba,draw_order = [ ["nose", "neck", "#000099"], // 'head' ["nose", "right_eye", "#330099"], // 'right_eyebrow' ["right_eye", "right_ear", "#660099"], // right_ear **** duplicate name ["nose", "left_eye", "#990099"], // Left Eyebrow ["left_eye", "left_ear","#990066"], // Left Ear **** duplicate name ["right_elbow", "right_wrist","#999900"], // 'right_forearm' ["right_shoulder", "right_elbow","#996600"], // 'right_arm' ["neck", "right_shoulder","#990000"], // 'right_shoulderblade' ["left_elbow", "left_wrist","#339900"], // 'left_forearm' ["left_shoulder", "left_elbow","#669900"], // 'left_arm' ["neck", "left_shoulder","#993300"], // 'left_shoulderblade' ["neck", "right_hip","#009900"], // 'right_torso' ["right_hip", "right_knee","#009933"], // 'right_upper_leg' ["right_knee", "right_ankle","#009966"], // 'right_lower_leg' ["neck", "left_hip","#009999"], // 'left_torso' ["left_hip", "left_knee","#006699"], // 'left_upper_leg' ["left_knee", "left_ankle","#003399"], // 'left_lower_leg' ]35:T4ae,# building The head workout eyes and ears positions in relation to the nose. Min 59 Max 456 When drawn the 'default_keypoints' fit into the center of a 512x512 window default_keypoints = [[241,77],[241,120],[191,118],[177,183],[163,252],[298,118],[317,182],[332,245],[225,241],[213,359],[215,454],[270,240],[282,360],[286,456],[232,59],[253,60],[225,70],[260,72]] - need to add these as well as subing 255 - 0 = nose [241, 77] -14,-178 - 14 = Right Eye [232, 59] -23,-196 - 15 = Left Eye [253, 60] -2, -195 - 16 = Right Ear [225, 70] -30, -185 - 17 = Left Ear [260, 72] 5, -183 ``` 1, 0 Head "#000099" 0,14 Right Eyebrow "#330099" nose, right_eye 14,16 Right Ear "#660099" right_eye, right_ear 0,15 Left Eyebrow "#990099" nose, left_eye 15,17 Left Ear "#990066" left_eye,left_ear 0 nose "#FF0000" 1 neck "#FF5500" 14 Right Eye "#AA00FF" 15 Left Eye "#FF00FF" 16 Right Ear "#FF00AA" 17 Left Ear "#FF0055" ``` i need to subtract 255 from those positions. That is so the translate will position them correctly. These need to be added to the function **te_pose(walker.getMarkers(walkerHeight))** or to **draw_order** 36:Tb64,# BMWalker to Open Pose data I scale the head to the bodysize and rotate match the azimuth of BMWalker. BMWalker has a much longer neck than open pose, so I reduce that. ### open pose scale points. gap between Shoulders is _**107**_ gap between neck and nose **43** ### bmwalker scale points. gap between Shoulders_ **105.8587948616252**_ gap between Head and Clavicles **79.08005055893813** The scaling of the Open Pose head is 1% off the size of BMWalker based on the shoulder width. op = 107 vs bmw = 106 This scaling was calculated on a walker height of 512 and when the walker is a position zero (**walker.getMarkers(walkerHeight,0)**) so the figure is facing the camera. The length of the neck in _BMWalke_r is almost double that of _Open Pose_. op = 43 vs bmw = 79. So I reduce it by around 50% percentage of its length. I go through the **draw_order[]** pulling out the **x, y, z** positions of of each BMWalker joints from **_walker.getMarkers()_** to build the new pose data structure. **z** is used for the draw order. ``` ------------------------------------------------------------------------------------------------- 17: "left_ear" [260, 72] 16: "right_ear" [225, 70] ------------------------------------------------------------------------------------------------- 5: "left_shoulder" [298, 118] 2: "right_shoulder" [191, 118] ------------------------------------------------------------------------------------------------- 0: nose [241, 77] 1: neck [241,120] ------------------------------------------------------------------------------------------------- {x: -0.11515101090752344, y: -151.688247692229, z: -2.3960445682756886, desc: "Clavicles"} {x: 1.4903237002062455, y: -230.76829825116712, z: -4.700883416079497, desc: "Head"} ------------------------------------------------------------------------------------------------- {x: 53.12630017470836, y: -160.65005048396648, z: -9.262757132227888, desc: "L-Shoulder"} {x: -52.73249468691682, y: -163.55396903329037, z: -3.143443621523793, desc: "R-Shoulder"} ------------------------------------------------------------------------------------------------- ``` The position of BMWalker to Open Pose default positions is off and needs to be recentered based on the position of the neck and nose: xoff = bmw.x - po.x0 // 15.114831986677718 yoff = bmw.y - po.y0 // 5.374495644146492 Open Pose has the nose at the top of the neck. So the eyes and ears need to be behind this point. default nose position = 241 default eyes position = 253 The **z** position for the nose the default based on BMWalker's Head.z position The **z** position for the eyes is based on half the distance from the eye to the nose. eye.z = - 6 The **z** position for the ear.z is - 9 There looks like there are issues with the draw order on the head. It should be ok, but might need photoshop to tweak frames. 37:T416,scaledHead = { const SCALE_FACTOR = (walkerHeight / 512) const rotated_head_information = {} // calculate the scaling factor for each point for (let key in base_head_infomation) { if (key === 'nose') { rotated_head_information[key] = base_head_infomation[key] } else { // Calculate the delta x, y, and z values for the current key const deltaX = (base_head_infomation[key].x - base_head_infomation['nose'].x) * Math.cos(azimuth+Math.PI) - base_head_infomation[key].z * Math.sin(azimuth+Math.PI) const deltaY = (base_head_infomation[key].y - base_head_infomation['nose'].y) const deltaZ = (base_head_infomation[key].z - base_head_infomation['nose'].z) rotated_head_information[key] = { x: base_head_infomation['nose'].x + (deltaX * SCALE_FACTOR), y: base_head_infomation['nose'].y + (deltaY * SCALE_FACTOR), z: base_head_infomation['nose'].z + (deltaZ * SCALE_FACTOR), jc: base_head_infomation[key].jc }; } } return rotated_head_information }38:T16a2,function te_pose(bmw) { // change the neck length let v1 = (_.find(bmw, { desc: 'Head'})) let v2 = (_.find(bmw, { desc: 'Clavicles'})) let v = parametricPointVector(v1, v2, 0.544) Object.assign(v1, {...v}) // ------------------------------------------------------------------------------------------ let bones = draw_order.map( (joint) => { const joint0 = bmw.find((item) => item.desc === equilivants[joint[0]] ) const joint1 = bmw.find((item) => item.desc === equilivants[joint[1]]) const boneColour = joint[2] return {x0:joint0.x, y0:joint0.y, z0:joint0.z, desc0:joint0.desc, // xyz joint 0 x1:joint1.x, y1:joint1.y, z1:joint1.z, desc1:joint1.desc, // xyz joint 1 bone_colour: boneColour , type: 'bone'} }) // add joints to them_bones let joints = _.uniq(_.flattenDeep(draw_order)) .filter((el) => !el.startsWith('#')) .map(joint_name => { let joint = _.find(bmw, {desc:equilivants[joint_name]}) return {x0:joint.x, y0:joint.y, z0:joint.z, jointColour:jointColour[_.findKey(equilivants, (value) => value === joint.desc)], type:'joint', desc:joint.desc } }) //=========================================================================== // Add head elements // this could be refactored to use a updateBones() and updateJoints() functions // all head features have desc0 and desc1 == to 'Head', The code below changes them to a new descriptions based on head part. let whereB = _.findIndex(bones, obj => obj.desc0 === obj.desc1); let off_x = (bones[whereB].x0 - scaledHead.nose.x) // work out nose, eyes and ears offset. let off_y = (bones[whereB].y0 - scaledHead.nose.y) // bmwalker x,y - pose default x,y bones[whereB].x0 = scaledHead.nose.x + off_x bones[whereB].y0 = scaledHead.nose.y + off_y bones[whereB].z0 += scaledHead.nose.z bones[whereB].jc0 = scaledHead.nose.jc bones[whereB].desc0 = "nose" bones[whereB].x1 = scaledHead.right_eye.x + off_x bones[whereB].y1 = scaledHead.right_eye.y + off_y bones[whereB].z1 = scaledHead.right_eye.z bones[whereB].jc1 = scaledHead.right_eye.jc bones[whereB].desc1 = "right_eye" bones[whereB].bone_colour = "#330099" // nose let whereJ = _.findIndex(joints, obj => obj.desc === 'Head') joints[whereJ].jointColour = jointColour.nose joints[whereJ].x0 = bones[whereB].x0 joints[whereJ].y0 = bones[whereB].y0 joints[whereJ].z0 += scaledHead.nose.z joints[whereJ].desc = "nose" // right eye whereJ = _.findIndex(joints, obj => obj.desc === 'Head') joints[whereJ].jointColour = jointColour.right_eye joints[whereJ].x0 = bones[whereB].x1 joints[whereJ].y0 = bones[whereB].y1 joints[whereJ].z0 = scaledHead.right_eye.z joints[whereJ].desc = "right_eye" //--- Right Ear * dup name whereB = _.findIndex(bones, obj => obj.desc0 === obj.desc1) bones[whereB].x0 = scaledHead.right_eye.x + off_x bones[whereB].y0 = scaledHead.right_eye.y + off_y bones[whereB].z0 = scaledHead.right_eye.z bones[whereB].jc0 = scaledHead.right_eye.jc bones[whereB].desc0 = "right_eye" bones[whereB].x1 = scaledHead.right_ear.x + off_x bones[whereB].y1 = scaledHead.right_ear.y + off_y bones[whereB].z1 = scaledHead.right_ear.z bones[whereB].jc1 = scaledHead.right_ear.jc bones[whereB].desc1 = "right_ear" bones[whereB].bone_colour = "#660099" // right ear whereJ = _.findIndex(joints, obj => obj.desc === 'Head') joints[whereJ].jointColour = jointColour.right_ear joints[whereJ].x0 = bones[whereB].x1 joints[whereJ].y0 = bones[whereB].y1 joints[whereJ].z0 = bones[whereB].z1 joints[whereJ].desc = "right_ear" //--- Left Eyebrow whereB = _.findIndex(bones, obj => obj.desc0 === obj.desc1) bones[whereB].x0 = scaledHead.nose.x + off_x bones[whereB].y0 = scaledHead.nose.y + off_y bones[whereB].z0 = scaledHead.nose.z bones[whereB].jc0 = scaledHead.nose.jc bones[whereB].desc0 = "nose" bones[whereB].x1 = scaledHead.left_eye.x + off_x bones[whereB].y1 = scaledHead.left_eye.y + off_y bones[whereB].z1 = scaledHead.left_eye.z bones[whereB].jc1 = scaledHead.left_eye.jc bones[whereB].desc1 = "left_eye" bones[whereB].bone_colour = "#990099" // left eye whereJ = _.findIndex(joints, obj => obj.desc === 'Head'); joints[whereJ].jointColour = jointColour.left_eye joints[whereJ].x0 = bones[whereB].x1 joints[whereJ].y0 = bones[whereB].y1 joints[whereJ].z0 = bones[whereB].z1 joints[whereJ].desc = "left_eye" //--- Left Ear * dup name whereB = _.findIndex(bones, obj => obj.desc0 === obj.desc1); bones[whereB].x0 = scaledHead.left_eye.x + off_x bones[whereB].y0 = scaledHead.left_eye.y + off_y bones[whereB].z0 = scaledHead.left_eye.z bones[whereB].jc0 = scaledHead.left_eye.jc bones[whereB].desc0 = "left_eye" bones[whereB].x1 = scaledHead.left_ear.x + off_x bones[whereB].y1 = scaledHead.left_ear.y + off_y bones[whereB].z1 = scaledHead.left_ear.z bones[whereB].jc1 = scaledHead.left_ear.jc bones[whereB].desc1 = "left_ear" bones[whereB].bone_colour = "#990066" // left ear whereJ = _.findIndex(joints, obj => obj.desc === 'Head'); joints[whereJ].jointColour = jointColour.left_ear joints[whereJ].x0 = bones[whereB].x1 joints[whereJ].y0 = bones[whereB].y1 joints[whereJ].z0 = bones[whereB].z1 joints[whereJ].desc = "left_ear" let them_bones = [...bones,...joints] return _.orderBy(them_bones, [ (obj) => _.min([obj.z0, obj.z1 !== undefined ? obj.z1 : obj.z0])]); // sort the bones by depth }39:T9f6,p5_frame = p5js(p5 => { let teImage = 0 p5.setup = async function() { p5.pixelDensity(1); teImage = p5.createCanvas(512, 512); p5.ellipseMode(p5.CENTER) p5.noLoop() p5.background("#000") p5.fill(255, 200, 200) p5.textSize(32); // set the font size p5.textAlign(p5.CENTER, p5.CENTER); // set the text alignment to center p5.text("This is the save frame canvas", 256, 256); } p5.draw = async function() { if( saveFile > 0){ p5.strokeWeight(1) p5.translate(255,255) for (let frame = 0; frame < numberOfFrames; frame++) { p5.background("#000") te_pose(walker.getMarkers(walkerHeight,frameGap*frame)).map((bones,i)=>{ if(bones.type == 'bone') { // check if it's of type 'bone' or a 'joint'. p5.stroke(bones.bone_colour) p5.fill(bones.bone_colour) let distMath = distance(bones.x0, bones.y0, bones.x1, bones.y1) let midpoint = {x:(bones.x0 + bones.x1) / 2, y:(bones.y0 + bones.y1) / 2 } let f = distMath.dist * 0.035 f = (f<2)?2.5:f midpoint.x0 = midpoint.x + f * Math.sin(distMath.angle); midpoint.y0 = midpoint.y - f * Math.cos(distMath.angle); midpoint.x1 = midpoint.x - f * Math.sin(distMath.angle); midpoint.y1 = midpoint.y + f * Math.cos(distMath.angle); p5.beginShape() p5.curveVertex(midpoint.x, midpoint.y ) p5.vertex(bones.x0, bones.y0,) p5.curveVertex(midpoint.x0, midpoint.y0 ) p5.vertex(bones.x1, bones.y1); p5.curveVertex(midpoint.x1, midpoint.y1 ) p5.vertex(bones.x0, bones.y0,); p5.curveVertex(midpoint.x, midpoint.y) p5.endShape() } else { p5.stroke(bones.jointColour) p5.fill(bones.jointColour) p5.circle(bones.x0, bones.y0, walkerHeight*0.015); } }) p5.saveCanvas(teImage,`poseStep_0${frame}`,'png',512,512) await sleep(300) // wait between file downloads } mutable saveFile = 0 } p5.background("#000") p5.fill(255, 200, 200) p5.textSize(32); // set the font size p5.textAlign(p5.CENTER, p5.CENTER); // set the text alignment to center p5.text("This is the save frame canvas", 256, 256); } })3a:[{"id":"c732235f24d4cf0149c88dac1595dfff584c38d5a063e36aeb638fe27f64f4a6fff69d48854a9c393dfa5e24c8c564a7f0f5ac11c1d083cd8ded20fbe423cb19","href":"https://static.observableusercontent.com/files/c732235f24d4cf0149c88dac1595dfff584c38d5a063e36aeb638fe27f64f4a6fff69d48854a9c393dfa5e24c8c564a7f0f5ac11c1d083cd8ded20fbe423cb19","name":"normal_62c725e989840.webp","type":"image/webp","lastModified":1680378984096.073,"size":9460},{"id":"1829d747623286accd404b842171b80e3700ef14f52a5949655adcb50f02390fb1c2b5d83d3b626a7f88836910c7ce3c1b00b6b9ccc9e417b783a275f8ed742b","href":"https://static.observableusercontent.com/files/1829d747623286accd404b842171b80e3700ef14f52a5949655adcb50f02390fb1c2b5d83d3b626a7f88836910c7ce3c1b00b6b9ccc9e417b783a275f8ed742b","name":"image.png","type":"image/png","lastModified":1680456830382.94,"size":145318}] 2f:{"id":"2ea4ad6230c49c31","slug":"bwalker-to-open-pose","title":"BMwalker to Open Pose","thumbnail":"4db8586a77e195131a11b043a1ea741b7f3fd881aae39ca0ad9fbe5e4753586c","access_level":"public","create_time":"$D2023-03-31T15:10:53.453Z","update_time":"$D2026-03-28T06:30:41.782Z","view_time":null,"first_public_time":"$D2023-04-02T19:40:24.694Z","fork":{"id":"3ee505cd5d388730","slug":"biological-motion-walker-demo","title":"Biological Motion Walker Demo","owner":{"id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper"}},"stars":2,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":7156,"publish_version":null,"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":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"BMwalker to Open Pose","cells":[{"id":7006,"value":"# [BMwalker](https://github.com/tetunori/BMWalker.js) to Open Pose\n\nhttps://github.com/tetunori/BMWalker.js\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3401,"value":"\n## Open Pose editor\n\n- https://huggingface.co/lllyasviel/sd-controlnet-openpose\n- https://github.com/lllyasviel/ControlNet\n- https://github.com/CMU-Perceptual-Computing-Lab/openpose\n- https://github.com/fkunn1326/openpose-editor\n\nhttps://www.csimmslab.com/blog/introduction-to-openpose\n\n# ways to draw\n\n\nPose Images can be tested on [SD on huggingface](https://huggingface.co/spaces/hysts/ControlNet). \n\n## Videos that might help with using these poses.\n[Install controlNet](https://www.youtube.com/watch?v=OxFcIv8Gq8o) \n\n[Example of generating similar character in different poses.](https://www.youtube.com/watch?v=xMmCZ1EqMVA) \n","pinned":false,"hidden":false,"mode":"md","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":7025,"value":"# concept:\n\nThe basic generation is done with BMwalker and then converted into Open Pose when button clicked.\n\nThe number of frames to make can be defined using **walker.getPeriod()** Length of the animation loop.\n\nI want to have one p5 cell for the walker that is animated, it shows what the walk will look like and can be edited with the sliders. That uses the basic BMWalker bone model. \n\nI want to have a 2nd p5 cell that is run by a render button. It draws the Walker with Pose bone structure. \n(hope to display side by side)\n\nA 3rd p5 cell is also used to generate and save the animation images.\n\n### to controls the frames\nI use **getLineMarkers(walkerHeight, tmsec = frame_timestamp_index)** with a timestamp to get the frame with the BMWalker bone and joint positions.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3416,"value":"# todo\n\n1. Add text boxes for the number of frames to draw/output.\n - preview of animated frames\n \n2. save images, possible to a zip file.\n - https://observablehq.com/@triptych/save-and-load-content-to-zip\n - https://observablehq.com/@fil/jszip\n - https://github.com/Stuk/jszip#jszip\n\n---\nI should refactor the code, https://observablehq.com/@hellonearthis/bwalker-to-open-pose#te_pose \nto use functions like updateBone() and updateJoint() but it works, so...\n\nhttps://editor.p5js.org/hellonearthisman/sketches/cEUgEsPn_\n\n# desired end result\n\nInstead of using this notebook as the User Interface, I plan to use an embedded url with just the needed cells, that will give a much more app like fell.\n\nA possible grid style design\n```\n

\n \n

\n```\n\n\nhttps://observablehq.com/@mootari/export-duckdb -- save zip files","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3274,"value":"viewof roll = Inputs.range([-3.14, 3.14], {\n label: \"Camera roll\",\n step: 0.01,\n value: 0,\n disabled: true\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3622,"value":"viewof elevation = Inputs.range([-3.14, 3.14], {\n label: \"Camera elevation\",\n step: 0.01,\n value: 0,\n disabled: true\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"viewof walkerHeight = Inputs.range([64, 512], {\n label: \"Walker Height\",\n value: 512,\n step: 1,\n // disabled:true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"viewof walkerSpeed = Inputs.range([0, 2], { // -2,2 but we don't want the walker to walk backwards.\n label: \"Walker Speed\",\n value: 1,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3613,"value":"viewof azimuth = Inputs.range([-3.14, 3.14], {\n label: \"Camera azimuth\",\n step: 0.05,\n value: 1.5 // 0.5\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4263,"value":"- **Body Structure** (-6.0 to 6.0) **Type A** to **Type B**\n- **Weight** (-6.0 to 6.0) **Light** to **Heavy**\n- **Nervousness** (-6.0 to 6.0) **Nervous** to **Relaxed**\n- **Happiness** (-6.0 to 6.0) **Happy** to **Sad**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3335,"value":"viewof walkerBodyStructure = Inputs.range(paramBounds.bodyStructure, {\n label: \"Body Structure\",\n value: 0,\n step: 0.1\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3281,"value":"viewof walkerWeight = Inputs.range(paramBounds.weight, {\n label: \"Weight\",\n value: 0,\n step: 0.1\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3286,"value":"viewof walkerNervousness = Inputs.range(paramBounds.nervousness, {\n label: \"Nervousness\",\n value: 0,\n step: 0.1\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3289,"value":"viewof walkerHappiness = Inputs.range(paramBounds.happiness, {\n label: \"Happiness\",\n value: 0,\n step: 0.1\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3457,"value":"p5_bmwalker = p5js(p5 => { \n\n p5.setup = function() {\n p5.createCanvas(512, 512);\n p5.ellipseMode(p5.CENTER) \n }\n \n p5.draw = function() {\n p5.background(\"#000\")\n p5.translate(255,255)\n\n p5.strokeWeight(8)\n const bones = walker.getLineMarkers(walkerHeight);\n\n let sortedBones = _.sortBy(bones, a => a[0].z); // sort bones so closest bones are drawn last.\n \n // let c = _.values(jointColour);\n \n sortedBones.forEach((m,i) => {\n p5.stroke(connect_color[BW_to_OP_index[m[0].i]]) // needs to be recoded\n // p5.stroke(c[i]) \n\n p5.line(m[0].x, m[0].y, m[1].x, m[1].y);\n });\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5263,"value":"When walking in a circle the loop time is unknown. \nTurning it **on** won't save all the frames for walking in a circle. \nAnd the head doesn't turn.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3619,"value":" viewof spin = Inputs.toggle({ label: \"Animate camera\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4434,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5725,"value":"# Save walking animation to drive.\n\nThe frame rate is how many frames per seconded are generated. \nThe default of 25 produces 26 frames because settings for the default waker is ${walker.getPeriod()}ms long.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5250,"value":"viewof frameRate = Inputs.radio([\"25\", \"30\",\"50\",\"60\"], {label: \"Frames Per Second\", value: \"25\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5421,"value":"viewof button = Inputs.button(`Save ${numberOfFrames} walking images to drive.`, {reduce: () => mutable saveFile++})","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":7,"value":"walker = {\n let walker = new BMWalker(0); // BMW_TYPE_HUMAN = 0\n return walker;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3630,"value":"# Update the BMWalker\n\nThese functions/cells update the **walker** when the sliders above change.\n\n- Speed.\n- walker.setTranslationParam(false) false, means the walker, walks in place.\n- Camera angle.\n- The style attributes of the walker.","pinned":false,"hidden":false,"mode":"md","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":3832,"value":"walker.setTranslationParam(false) // true means they are moving Human and chickens only","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3270,"value":"{\n walker.setCameraParam(azimuth, spin ? 1 : 0, elevation, roll);\n return 'updating cam when sliders change' // could return something better that could be used to position head.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3157,"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":3716,"value":"# Setup BWalker body","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3333,"value":"{\n walker.setWalkerParam(\n walkerBodyStructure,\n walkerWeight,\n walkerNervousness,\n walkerHappiness\n );\n return {bodyStructure:walkerBodyStructure,\n weight:walkerWeight,\n nervousness:walkerNervousness,\n happiness:walkerHappiness\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3430,"value":"## Bwalker to Open Pose colours","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2440,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4467,"value":"

\n\nPose is facing screen camera.\n\nSo i need to make a new connection data for pose\n\n\nhead: 0: \"nose\" 14: \"right_eye\" 15: \"left_eye\" 16: \"right_ear\" 17: \"left_ear\"\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4974,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5176,"value":"# bones \n\nThis contains the connection between the bones and the open pose colour of each bone.\n\nTwo joint positions are use to make a bone line and assigned a bone colour\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4824,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4993,"value":"jointColour = ({\n nose: \"#ff0000\", neck: \"#ff5500\", \n right_shoulder:\t\"#ffaa00\", right_elbow:\"#ffff00\", right_wrist: \"#aaff00\",\n left_shoulder:\t\"#55ff00\", left_elbow: \"#00ff00\", left_wrist:\t \"#00ff55\",\n right_hip:\t \"#00ffaa\", right_knee: \"#00ffff\", right_ankle: \"#00aaff\",\n left_hip:\t \"#0055ff\", left_knee:\t \"#0000ff\", left_ankle:\t \"#5500ff\",\n right_eye:\t \"#aa00ff\", left_eye:\t \"#ff00ff\",\n right_ear:\t \"#ff00aa\", left_ear:\t \"#ff0055\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4863,"value":"Lookup the name of the point we want to draw with. This can be reversed by looking up value and returning key name.\nNote that the head features are not present and are called head.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4832,"value":"equilivants = ({\n nose: \"Head\",\n neck: \"Clavicles\",\n right_shoulder: \"R-Shoulder\",\n right_elbow: \"R-Elbow\",\n right_wrist: \"R-Hand\",\n left_shoulder: \"L-Shoulder\" ,\n left_elbow: \"L-Elbow\",\n left_wrist: \"L-Hand\",\n right_hip: \"R-Hip\",\n right_knee: \"R-Knee\",\n right_ankle: \"R-Ankle\",\n left_hip: \"L-Hip\",\n left_knee: \"L-Knee\",\n left_ankle: \"L-Ankle\",\n right_eye: \"Head\", // right_eye \n left_eye: \"Head\", // left_eye\n right_ear: \"Head\", // right_ear\n left_ear: \"Head\", // left_ear\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5729,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4627,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6732,"value":"base_head_infomation = ({\n nose: {x:-14, y:-178, z:0, jc:\"#ff0000\" },\n right_eye: {x:-23, y:-193, z:-6, jc:\"#aa00ff\" },\n right_ear: {x:-38, y:-185, z:-6, jc:\"#ff00aa\" },\n left_eye: {x: -2, y:-193, z:-9, jc:\"#ff00ff\" },\n left_ear: {x: 12, y:-185, z:-9, jc:\"#990066\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7143,"value":"8-14","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7144,"value":"-33-14","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6875,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4868,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6644,"value":"function parametricPointVector(v1, v2, percentage) { // if percent = 0.5 the Vector returned is at 50% of the line length \n const x = (1 - percentage) * v1.x + percentage * v2.x;\n const y = (1 - percentage) * v1.y + percentage * v2.y;\n const z = (1 - percentage) * v1.z + percentage * v2.z;\n\n return {x: x, y: y, z: z};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7075,"value":" // calculate distance between the two points and work out the lines angle as they share maths\n // used in the p5 draw.\ndistance = (bx0,by0,bx1,by1) => {\n let dx = bx1 - bx0\n let dy = by1 - by0\n let angle = Math.atan2(dy, dx)\n return {dist:Math.sqrt(dx*dx + dy*dy),angle:angle}\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3438,"value":"# body data points\n\nthe BW_to_OP_index needs to be updated as other references could be used","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3442,"value":"BW_to_OP_index = [0, 1, 5, 6, 7, 2, 3, 4, 12, 13, 14, 9, 10, 11, 0, 0, 0, 0] // no belly point - could be wrong -- used to find colour","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4589,"value":"BMWalker bone description.","pinned":false,"hidden":false,"mode":"md","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":3365,"value":"coco_body_keypoints = [\n \"nose\",\n \"neck\",\n \"right_shoulder\",\n \"right_elbow\",\n \"right_wrist\",\n \"left_shoulder\",\n \"left_elbow\",\n \"left_wrist\",\n \"right_hip\",\n \"right_knee\",\n \"right_ankle\",\n \"left_hip\",\n \"left_knee\",\n \"left_ankle\",\n \"right_eye\",\n \"left_eye\",\n \"right_ear\",\n \"left_ear\",\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4486,"value":"BoneColours = \n connect_color.map((colorArray,i) => {\n return {colour: d3.rgb(colorArray[0], colorArray[1], colorArray[2]).formatHex(),i:i}\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3368,"value":"connect_color = [[0, 0, 255], [255, 0, 0], [255, 170, 0], [255, 255, 0], [255, 85, 0], [170, 255, 0], [85, 255, 0], [0, 255, 0],\n[0, 255, 85], [0, 255, 170], [0, 255, 255], [0, 170, 255], [0, 85, 255], [85, 0, 255],\n[170, 0, 255], [255, 0, 255], [255, 0, 170], [255, 0, 85]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5159,"value":"# pose key joint data\n\nfrom this I need to extract the eyes and ears positions that are built around the nose","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3372,"value":"default_keypoints = [[241,77],[241,120],[191,118],[177,183],[163,252],[298,118],[317,182],[332,245],[225,241],[213,359],[215,454],[270,240],[282,360],[286,456],[232,59],[253,60],[225,70],[260,72]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5638,"value":"# save images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5408,"value":"mutable saveFile = 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5228,"value":"numberOfFrames = Math.floor((walker.getPeriod()/ 1000)* frameRate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5272,"value":"frameGap = walker.getPeriod()/numberOfFrames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5270,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5479,"value":"sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms)) // adds a delay so we don't flood the browsers save functions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3390,"value":"# Appendix \n\nBased on the notebook by [@mythmon](https://observablehq.com/@mythmon/bmwalker-demo). \nwith 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)\n\nhttps://github.com/tetunori/BMWalker.js by https://twitter.com/tetunori_lego\n\nhttps://www.biomotionlab.ca/projects/ \n[Decomposing biological motion: A framework for analysis and synthesis of human gait patterns](https://jov.arvojournals.org/article.aspx?articleid=2192503).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3329,"value":"# Load libraries\nBMWalker and p5.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4212,"value":"# How to control the position of the walker\n\nThe **walker.getPeriod()** returns the time in ms it takes to do one complete step loop.\n\nwalker.getPeriod() == ${walker.getPeriod()} \n\nThe **walker.getTranslationSpeed()** I think is the length of time a movement takes for one frame of animation.\n\nwalker.getTranslationSpeed() == ${walker.getTranslationSpeed()} \n\nThe **walker.getFrequency()** I don't know. \n\nwalker.getFrequency() == ${walker.getFrequency()} \n\n\n\n \n\n\n\n**getMarkers(walkerHeight, tmsec = undefined) **\n\n** getLineMarkers(walkerHeight, tmsec = undefined) **","pinned":false,"hidden":false,"mode":"md","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":3474,"value":"import {p5 as p5js} from \"@hellonearthis/p5_s2\" // temp as there where issues with unpkg and this version of p5 is newer\n// import {p5 as p5js} from \"@tmcw/p5\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6995,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"