{
const [motor0, motor1, motor2, target] = nodes;
const dom = html`
<svg class="main-chart" viewBox="0 0 400 200">
<g>
<line id="line0" x1="${motor0.fx}" y1="${motor0.fy}" x2="${motor1.fx}" y2="${motor1.fy}" style="stroke:rgb(255,0,0, 0.4);stroke-width:2" />
<line id="line1" x1="${motor1.fx}" y1="${motor1.fy}" x2="${motor2.fx}" y2="${motor2.fy}" style="stroke:rgb(255,0,0, 0.4);stroke-width:2" />
<circle
id="motor0"
r="${motor0.r}"
cx="${motor0.x}"
cy="${motor0.y}"
fill="rgba(255, 0, 0, 0.7)"
/>
<circle
id="motor1"
r="${motor1.r}"
cx="${motor1.x}"
cy="${motor1.y}"
fill="rgba(0, 255, 255, 0.7)"
/>
<circle
id="motor2"
r="${motor2.r}"
cx="${motor2.x}"
cy="${motor2.y}"
fill="rgba(0, 255, 0, 0.7)"
/>
<circle id="target" r="${target.r}" cx="${target.x}" cy="${target.y}" fill="rgba(0, 0, 255, 0.5)" />
</g>
</svg>`;
const vMotor0 = dom.querySelector("#motor0");
const vMotor1 = dom.querySelector("#motor1");
const vMotor2 = dom.querySelector("#motor2");
const vLine0 = dom.querySelector("#line0");
const vLine1 = dom.querySelector("#line1");
const vTarget = dom.querySelector("#target");
drag(target)(d3.select(vTarget));
//motor1.fx = null;
//motor1.fx = null;
while (true) {
let [newM1Pos, newM2Pos] = updatePos(target);
motor1.fx = newM1Pos[0];
motor1.fy = newM1Pos[1];
motor2.fx = newM2Pos[0];
motor2.fy = newM2Pos[1];
vTarget.setAttribute("cx", target.fx);
vTarget.setAttribute("cy", target.fy);
vMotor0.setAttribute("cx", motor0.fx);
vMotor0.setAttribute("cy", motor0.fy);
vMotor1.setAttribute("cx", motor1.fx);
vMotor1.setAttribute("cy", motor1.fy);
vMotor2.setAttribute("cx", motor2.fx);
vMotor2.setAttribute("cy", motor2.fy);
vLine0.setAttribute("x2", motor1.fx);
vLine0.setAttribute("y2", motor1.fy);
vLine1.setAttribute("x1", motor1.fx);
vLine1.setAttribute("y1", motor1.fy);
vLine1.setAttribute("x2", motor2.fx);
vLine1.setAttribute("y2", motor2.fy);
//yield Promises.delay(3000);
yield dom;
}
}
t1 = tf.variable(tf.scalar(Math.random()))
t2 = tf.variable(tf.scalar(Math.random()))
makeRotMat = theta => {
let cosPart = tf.cos(theta).mul(
tf.tensor2d([
[1, 0],
[0, 1]
])
);
let sinPart = tf.sin(theta).mul(
tf.tensor2d([
[0, -1],
[1, 0]
])
);
return cosPart.add(sinPart); //t1Rot.dataSync()
}
m0Pos = {
let [m0] = nodes;
return tf.tensor2d([m0.fx, m0.fy], [1, 2]);
}
vec0 = tf.tensor2d([armLen, 0], [1, 2])
function predict(startPos, theta) {
return tf.tidy(() => {
let vecRot = tf.matMul(vec0, makeRotMat(theta));
return startPos.add(vecRot);
});
}
function distance(p1, p2) {
return p1.sub(p2).square().sum().sqrt();
}
Optimizer = tf.train.adam(0.06)
updatePos = (target) => {
// let [m0, m1, target] = nodes;
// 初始值 t1, 输入 px, py，输出新的 t1
// update m1 pos
// const predsYs = predict(m0Pos);
// return distance(predsYs, pPos).dataSync();
const pPos = tf.tensor2d([target.fx, target.fy], [1, 2]);
Optimizer.minimize(() => {
const m1Pos = predict(m0Pos, t1);
const m2Pos = predict(m1Pos, t2);
return distance(m2Pos, pPos);
});
let newM1Pos = predict(m0Pos, t1);
let newM2Pos = predict(newM1Pos, t2);
return [newM1Pos.dataSync(), newM2Pos.dataSync()];
}
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.
