viewof mocap_csv = Inputs.file({ label: "Data" })
mocap_text = mocap_csv.text()
viewof timestep = Inputs.range([0, mocap_raw[0].length], {
label: "timestep",
step: 1,
width
})
renderer.domElement
height = 500
Object.values(mocap_raw[0][0]).join(" ")
Object.values(mocap_raw[0][0]).slice(2).length / 3
mocap_raw = {
let text = mocap_text;
let header = text.split("\n").slice(0, 7);
let data = text.split("\n").slice(8);
let boneNames = header[3]
.split(",")
.map((e) => (e.split(":")[1] == undefined ? "" : e.split(":")[1]));
let operationName = header[5].split(",").map((e) => e.slice(0, 1));
let coordName = header[6].split(",");
let attrs = boneNames.map((e, i) => {
return `${boneNames[i]}_${operationName[i]}_${coordName[i]}`;
});
let res = [];
for (let line of data) {
let row = {};
line.split(",").map((e, i) => {
row[`${attrs[i]}_${i}`] = parseFloat(e);
// row[`${attrs[i]}`] = parseFloat(e);
});
res.push(row);
}
return [res, attrs];
}
mocap_raw[1].join(" ")
typeof mocap_raw[0][0]["Hip_R_X"]
mocap = mocap_debug[1]
mocap_debug = {
let res = mocap_raw[0];
let attrs = mocap_raw[1];
// get just the important bone attributes
let boneAttrs = attrs.slice(2);
// go through them by 7s and get a
let boneCount = boneAttrs.length / 7;
let row = timestep;
let vec_res = [];
for (let i = 0; i < boneCount; i++) {
let offset = i * 7;
let specBoneAttrs = boneAttrs.slice(offset, offset + 7);
// console.log(specBoneAttrs);
// make a quaternion out of the first 4 starting with the w
// then a vector form the last 3
// apply the quaternion to the vector and output it's updated position
let quaternion = new THREE.Quaternion();
quaternion.w = res[row][specBoneAttrs[3]];
quaternion.x = res[row][specBoneAttrs[0]];
quaternion.y = res[row][specBoneAttrs[1]];
quaternion.z = res[row][specBoneAttrs[2]];
// console.log(quaternion);
let vector = new THREE.Vector3(1, 0, 0);
vector.x = res[row][specBoneAttrs[4]];
vector.y = res[row][specBoneAttrs[5]];
vector.z = res[row][specBoneAttrs[6]];
let unmodified = new THREE.Vector3(0, 0, 0);
unmodified.copy(vector);
// console.log(vector);
//vector.applyQuaternion(quaternion);
vec_res.push({
x: vector.x,
y: vector.y,
z: vector.z,
name: specBoneAttrs[0].split("_")[0],
attrs: specBoneAttrs,
unmodifiedVector: unmodified,
quaternion
});
}
return [res[row], vec_res];
}
THREE = {
const THREE = (window.THREE =
await require("three@0.130.0/build/three.min.js"));
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(
() => {}
);
return THREE;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
for (let pt of mocap) {
let mesh = cube();
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.05;
mesh.position.x = pt.x;
mesh.position.y = pt.y;
mesh.position.z = pt.z;
mesh.quaternion.x = pt.quaternion.x;
mesh.quaternion.y = pt.quaternion.y;
mesh.quaternion.z = pt.quaternion.z;
mesh.quaternion.w = pt.quaternion.w;
scene.add(mesh);
}
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, -5);
camera.lookAt(new THREE.Vector3(mocap[4].x, mocap[4].y, mocap[4].z));
return camera;
}
// Continuously updates
{
while (true) {
// cube.rotation.z += 0.01;
renderer.render(scene, camera);
yield null;
}
}
{
return timestep;
}
function cube() {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);
return cube;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
{
let text = await FileAttachment("Take 2020-01-21 12.42.43 AM_007.csv").text();
return text.split("\n").slice(0, 27);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
