Published
Edited
Jul 6, 2022
1 fork
29 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = {
walkerParams // causes this cell to run when body parameters change
cam
azimuth
let teData = {lines: []}
let stepGap = walker.getFrequency()/(1000/120)

walker.getMarkers(walkerHeight,0).map( d => _.set(teData,_.camelCase(d.desc),[]))
for (let i = 0; i < walker.getPeriod(); i+=stepGap) {
teData.lines.push(...walker.getLineMarkers(walkerHeight, i)
.map(([a, b]) => ({x1: a.x, y1: a.y, x2: b.x, y2: b.y })))
walker.getMarkers(walkerHeight,i).map( walk => teData[_.camelCase(walk.desc)].push({x:walk.x,y:walk.y,z:walk.z,c:walk.desc}))
}
return teData
}
Insert cell
walker.setSpeed(walkerSpeed) // updates the walking speed
Insert cell
paramBounds = {
let tmpWalker = new BMWalker();
return {
bodyStructure: [tmpWalker.minBodyStructure, tmpWalker.maxBodyStructure],
weight: [tmpWalker.minWeight, tmpWalker.maxWeight],
nervousness: [tmpWalker.minNervousness, tmpWalker.maxNervousness],
happiness: [tmpWalker.minHappiness, tmpWalker.maxHappiness]
};
}
Insert cell
walker = {
let walker = new BMWalker(bodyType);
return walker;
}
Insert cell
{
walker.setWalkerParam(
walkerParams.bodyStructure,
walkerParams.weight,
walkerParams.nervousness,
walkerParams.happiness
);
return walkerParams;
}
Insert cell
{
walker.setCameraParam(azimuth, cam.spin ? 1 : 0, cam.elevation, cam.roll);
return cam;
}
Insert cell
markers = {
while (true) {
yield {
point: walker.getMarkers(walkerHeight,animate?markerIndex:undefined),
line: walker.getLineMarkers(walkerHeight,animate?markerIndex:undefined)
};
}
}
Insert cell
dotOptions = ({x: "x", y: "y", r: d=> zScale(d.z), stroke:'c', opacity:0.1})
Insert cell
BMWalker = fetch("https://tetunori.github.io/BMWalker.js/dist/v0.6.1/bmwalker.js")
.then((r) => r.text())
.then((src) => new Function(` let abs = Math.abs;
${src};
return BMWalker`)())
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
walker.getPeriod() // lenght of the loop animation
Insert cell
Insert cell
Insert cell
Plot.plot({
width:400,
height:500,
margin:40,
grid: true,

x: {domain: [ -80, 80]},
y: {domain: [-300, 300]},
r: {domain: [-40,40], range: [1, 20], type: "identity"} ,

marks: [
Plot.dot(markersXYZ , { x: "x", y: "y", r: d=> zScale(d.z)/50}),
Plot.text(markersXYZ, {x: "x", y: "y", text: "desc", textAnchor: "end",dy:12}),
]
})
Insert cell
Insert cell
Plot.plot({
width,
height: 600,
grid: true,
margin:30,
r: {type: "identity"} ,
facet: {
data: variants,
x: "model",
},
marks: [
Plot.frame(),
Plot.dot(variants, {
x: "x",
y: "y",
r: d=> vScale(d.z),
stroke: "#00A",
fill: "#ACC"
}),
Plot.text(variants, {x: "x", y: "y", text: "desc", textAnchor: "end",dy:12}),
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function makeXYZ(poze) {
let w = []
for (let i = 0; i < walker.nummarkers; ++i) {
let x = poze[i]
let y = poze[i+walker.nummarkers]
let z = poze[i+walker.nummarkers*2]
w.push({x,y,z,desc:desc[i]})
}
return w
}
Insert cell
markersXYZ= makeXYZ(walker.meanwalker[0])
Insert cell
Insert cell
Insert cell
walker.meanwalker[0] // human
Insert cell
walker.bodyStructureaxis
Insert cell
walker.weightaxis
Insert cell
walker.nervousaxis
Insert cell
walker.happyaxis
Insert cell
walker.markers
Insert cell
walker.getFrequency()
Insert cell
walker.calcTranslationSpeed()
Insert cell
walker.getTranslationSpeed()
Insert cell
walker.calcTime(walker.getFrequency() )
Insert cell
walker.setTranslationParam(false) // true means they are moving Human and chickens only
Insert cell
walker.resetTimer() // reset the Translation position
Insert cell
# Matrix bits functions
Insert cell
walker.mtrx.newMatrix()
Insert cell
walker.mtrx.newIdentMatrix()
Insert cell
walker.mtrx.dotProd(1,1,1, 10,10,10)
Insert cell
# Timer class

const precision = 10; // 10msec as described in the bmwalker.js
Insert cell
walker.tm.getTimer()
Insert cell
walker.tm
Insert cell
Insert cell
BMW_TYPE_HUMAN = 0
Insert cell
BMW_TYPE_CAT = 1
Insert cell
BMW_TYPE_PIGEON = 2
Insert cell
BMW_TYPE_BOX = 3
Insert cell
PI = Math.PI
Insert cell
import {Scrubber} from "@mbostock/scrubber"
Insert cell
angles = {
let a = d3.range(-3.14, 3.14, 0.02).map(d => Math.floor(d * 10000) / 10000)
arrayRotate(a,a.length/2)
return a
}
Insert cell
// thanks https://stackoverflow.com/a/33451102/45966

function arrayRotate(arr, count) {
count -= arr.length * Math.floor(count / arr.length);
arr.push.apply(arr, arr.splice(0, count));
return arr;
}
Insert cell
Insert cell
Insert cell
Insert cell
step = d3.range(0, walker.getPeriod(), 0.005) // huge array that is read every request animationframe ('now' in observable)
Insert cell
tm = {
let teMarkers = []
for (let i = 0; i < walker.nummarkers * 3 + 1; i++) { // 46
teMarkers[i] = walker.sample(i, step[~~(now%step.length)] , true); // not the best way to do this but its a test
}

let w = []
for (let i = 0; i < walker.nummarkers; ++i) {
let x = teMarkers[i]
let y = teMarkers[i+walker.nummarkers]
let z = teMarkers[i+walker.nummarkers*2]

w.push( {x: x, y:y+600, z:z, desc:desc[i], view:'top'})
w.push( {x: y, y:z, z:x, desc:desc[i], view:'front'})
w.push( {x: x, y:z, z:y, desc:desc[i], view:'side'})
}
return w
}
Insert cell
Insert cell
Plot.plot({
width,
height: 600,
grid: true,
margin:30,
x: {domain: [-500, 500]},
y: {domain: [0, 1800]},
facet: {
data: tm,
x: "view",
},
marks: [
Plot.frame(),
Plot.dot(tm, {
x: "x", y: "y", r: 10,
stroke: "view",
}),
Plot.rect(tm, {x1: 'x', y1: 'y', x2: 0, y2: 700, stroke: "rgba(0,0,0,0.5)"}),

Plot.text(tm, {x: "x", y: "y", text: "desc", textAnchor: "end",dy:12}),
]
})
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more