dynamic = {
replayButton;
const { maxVertices } = drawParams;
const d = [];
for (let i = 0; i < maxVertices; i++) {
d.push(0);
}
return Object.assign({
speed: d,
min: 0,
max: 0.0035,
highest: 0,
currentVertex: 0
});
}
machine = {
// The body1 is fixed to the earth by the two revolute joint
const body1 = world.CreateBody(earth.bd);
addRevoluteJoint(body1, -1, -2);
addRevoluteJoint(body1, 1, -2);
addBox(body1, 1.7, 2, 2, 0.05, 45);
addBox(body1, -1.7, 2, 2, 0.05, -45);
addBox(body1, 0.28, -4.4, 5, 0.05, 90);
addBox(body1, -0.28, -4.4, 5, 0.05, 90);
{
const length = 0.2,
width = 0.03,
xOffset = 0.22,
yOffsets = [0.0, -0.4, -0.8, -1.2, -1.6, -2.0],
directionFactor = directionToggle ? 1 : -1;
yOffsets.map((yOffset) => {
addBox(body1, xOffset, yOffset, length, width, directionFactor * 45);
addBox(
body1,
-xOffset,
yOffset,
length,
width,
-1 * directionFactor * 45
);
});
}
// The body3
// const body3 = world.CreateBody(earth.bd);
// addBox(body3, 2, -1.75, 0.25, 0.25);
// The particle system
const particleSystem = world.CreateParticleSystem(psd);
addPraticleGroup(particleSystem, 1, 1.2, 0, 5);
return { world };
}
addPraticleGroup = (system, w, h, cx, cy, a = 0) => {
const box = new b2.PolygonShape();
box.SetAsBoxXYCenterAngle(w, h, new b2.Vec2(cx, cy), a);
const particleGroupDef = new b2.ParticleGroupDef();
particleGroupDef.shape = box;
system.CreateParticleGroup(particleGroupDef);
}
addDistanceJoint = (body, dx, dy, cx, cy, length = 3, realJoint = true) => {
const jd = new b2.DistanceJointDef();
jd.length = length;
jd.dampingRatio = 1;
const joint = jd.InitializeAndCreate(
earth.ground,
body,
new b2.Vec2(dx, dy),
new b2.Vec2(cx, cy)
);
if (realJoint) {
addBox(earth.ground, dx, dy, 0.03, 0.03);
addBox(body, dx, dy, 0.03, 0.03);
}
return jd;
}
addRevoluteJoint = (body, cx, cy, realJoint = true) => {
const jd = new b2.RevoluteJointDef();
jd.maxMotorTorque = 1e7;
jd.enableMotor = false;
const joint = jd.InitializeAndCreate(earth.ground, body, new b2.Vec2(cx, cy));
if (realJoint) addBox(body, cx, cy, 0.03, 0.03);
return jd;
}
{
const p = new b2.PolygonShape();
p.SetAsBoxXYCenterAngle(20, 10, new b2.Vec2(0, 0), (30 / 180) * Math.PI);
return p;
}
addBox = (body, cx, cy, w, h, a = 0) => {
const p = new b2.PolygonShape();
p.SetAsBoxXYCenterAngle(w, h, new b2.Vec2(cx, cy), (a / 180) * Math.PI);
body.CreateFixtureFromShape(p, 5);
return p;
}
earth = {
const bd = new b2.BodyDef();
const ground = world.CreateBody(bd);
bd.type = b2._dynamicBody;
bd.allowSleep = false;
bd.position.Set(0, 0);
return { bd, ground };
}
world = {
replayButton;
directionToggle;
return (window.world = new b2.World(new b2.Vec2(0, -1)));
}
psd = {
const psd = new b2.ParticleSystemDef();
psd.radius = 0.025;
psd.dampingStrength = 0.2;
return psd;
}
Old Script
b2 = {
await require("https://google.github.io/liquidfun/testbed/liquidfun.js").catch(
() => {}
);
const b2 = {};
for (const k in window) if (/^b2/.test(k)) b2[k.slice(2)] = window[k];
return b2;
}
norm = (a, b) => {
return (a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2 + (a[2] - b[2]) ** 2;
}
THREE = require("three@0.95/build/three.js")
d3 = require("d3")
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.
