Published
Edited
Aug 8, 2021
1 fork
1 star
m = 30 // kg
k = 20 // N/m
c = 2.9 // (N*s)/m
function freeMotion(t, x) {
var F = 0; // N
var xdotdot = (F - c * x[1] - k * x[0]) / m;
return [x[1], xdotdot];
};
initX = [1, 0] // x = [initial position in m, initial velocity in m/s]
tmax = 100 // s
sol_free = numeric.dopri(0, tmax, initX, freeMotion);
{
const x_motion = numeric.rep([sol_free.x.length, 2], 0);
for (var i = 0; i < sol_free.x.length; i++) {
x_motion[i][0] = sol_free.x[i];
x_motion[i][1] = sol_free.y[i][0];
}
$.plot("#x_motion", [x_motion], {
xaxis: {
tickFormatter: function(val, axis) {
return val < axis.max ? val.toFixed(2) : "time (s)";
}
},
yaxis: {
tickFormatter: function(val, axis) {
return val < axis.max ? val.toFixed(2) : "position (m)";
},
}
});
}
clock = new THREE.Clock()
{
const renderer = new THREE.WebGLRenderer({antialias: true});
invalidation.then(() => renderer.dispose());
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
var tprev = 0;
var posX = initX;
while (true) {
mutable time = clock.getElapsedTime();
if (time !== tprev) {
// solve ODE for the time step
posX = numeric.dopri(tprev, time, posX, freeMotion).at(time);
cube.position.x = posX[0];
tprev = time;
}
spring.position.x = (cube.position.x + base.position.x) / 2;
spring.scale.y = (cube.position.x - base.position.x) / 2;
damper.position.x = (cube.position.x + base.position.x) / 2;
damper.scale.y = (cube.position.x - base.position.x) / 2;
renderer.render(scene, camera);
yield renderer.domElement;
}
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xA9CCE3);
scene.add(cube);
scene.add(base);
scene.add(spring);
scene.add(damper);
return scene;
}
cube = {
//Add cube
const geometryCube = new THREE.BoxGeometry(1, 1, 1);
const materialCube = new THREE.MeshBasicMaterial({
color: "blue"
});
return new THREE.Mesh(geometryCube, materialCube);
}
camera = {
const fov = 50;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.up.set(0, 0, 1);
scene.add(camera);
camera.position.set(0.5, -5, 0);
return camera;
}
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.
