Github BMWalker.js library doesn't want to be required.

I was inspired by 「なぜ私たちは画面の中に質感を感じるか?」講師:中村勇吾 - YouTube and https://twitter.com/tetunori_lego and https://twitter.com/watabo_shi

To try out GitHub - tetunori/BMWalker.js: A JavaScript library of Biological motion "Walker"

But I can’t require this library into observable, It’s not on NPM.
BMWalker = require('https://tetunori.github.io/BMWalker.js/dist/v0.6.0/bmwalker.js') gives an invalid module.

I tried Module require debugger / Observable / Observable but it’s failed too.

1 Like

Hello!

Since bmwalker.js isn’t AMD compatible or an ES module, you’ll need to make a tweak to export the BMWalker class and upload as a file attachment. See this notebook: BMWalker / Observable / Observable

Note that you’ll need to further modify bmwalker.js if you need to export anything else (e.g. constants or other classes).

1 Like

How about rewriting it on the fly:

BMWalker = fetch('https://tetunori.github.io/BMWalker.js/dist/v0.6.0/bmwalker.js')
  .then(r => r.text())
  .then(src => new Function(`const {abs} = Math; ${src}; return BMWalker`)())

(edit: updated to fix missing abs variable)

3 Likes

I glued it all together, along with some d3 and inputs: BMWalker Demo / Mythmon / Observable

5 Likes

Thanks ALL, That worked great and @mythmon awesome usage.

I guess I better get in on the action!

If anyone has a clue as to why walker.setSpeed throws an error, yet seems to work, that would be interesting. I’m also pretty sure I should be using invalidation somewhere but not quite sure how.

2 Likes

I forked the @mythmon notebook and have been working on that. He also fixed the speed issue with this.

BMWalker = fetch("https://tetunori.github.io/BMWalker.js/dist/v0.6.0/bmwalker.js")
  .then((r) => r.text())
  .then((src) => new Function(` let abs = Math.abs; 
                                ${src}; 
                                return BMWalker`)())

I am hoping to make some data visualisations to see how setWalkerParam() settings affects the neutral data state.

1 Like

@hellonearthis I recommend to experiment with trails for each marker, either as Observable Plot or in 3D.

Thanks. Will be looking at using Observable Plot. I don’t know how to work out the length of the animation loop so currently have it hard coded for now.

There are 15 data points to track/plot,
“Head”
“Clavicles”
“L-Shoulder” “L-Elbow” “L-Hand”
“R-Shoulder” “R-Elbow” “R-Hand”
“Belly”
“L-Hip” “L-Knee” “L-Ankle”
“R-Hip” “R-Knee” “R-Ankle”

I’m still new to plot it’s happening very slowly.

The structure of the data I generate doesn’t seem like the best format, so might have to rework that. But the basics look ok

1 Like

There is a new version v0.6.1
That includes a .getPeriod() method, it returns the length of time for the animation to loop.

I asked Tetsunori NAKAYAMA | 中山 哲法 on twitter if the existing time related methods could do this and Tetsunori added this feature.

Plot showing the movement of the bodies points.

2 Likes

I can’t workout how to return the conts defined outside of the class.


const BMW_TYPE_HUMAN = 0;
const BMW_TYPE_CAT = 1;
const BMW_TYPE_PIGEON = 2;
const BMW_TYPE_BOX = 3; // (for debug)

class BMWalker { ...
```js
BMWalker = new Function(`const {abs} = Math; 
                         // adding here reports they are already defined
                         ${await FileAttachment("bmwalker.js").text()};
                         return BMWalker`)(); 

I currently redefine them in observable but fell that knowing how to do this correctly would help in other cases.

I updated my demo to include this original import cell:

bmwalker = fetch(
  "https://tetunori.github.io/BMWalker.js/dist/v0.6.0/bmwalker.js"
)
  .then((r) => r.text())
  .then((src) =>
    new Function(
      `var abs = Math.abs; ${src}; return {
        BMWalker,
        TYPE_HUMAN: BMW_TYPE_HUMAN,
        TYPE_CAT: BMW_TYPE_CAT,
        TYPE_PIGEON: BMW_TYPE_PIGEON,
        TYPE_BOX: BMW_TYPE_BOX
      }`
    )()
  )

then elsewhere I access those constants as bmwalker.TYPE_PIGEON and the class as bmwalker.BMWalker.

1 Like