md`# Euclid’s proof of Pythagoras’s Theorem
`
viewof sierp_steps = {
let sierp_steps = Inputs.range([1, 20], {
step: 1,
value: 0,
label: "width:"
});
d3.select(sierp_steps).select('input[type="number"]').style("width", "60px");
d3.select(sierp_steps).select("label").style("width", "50px");
return sierp_steps;
}
viewof sierp_steps1 = {
let sierp_steps1 = Inputs.range([1, 30], {
step: 1,
value: 0,
label: "height:"
});
d3.select(sierp_steps1).select('input[type="number"]').style("width", "60px");
d3.select(sierp_steps1).select("label").style("width", "50px");
return sierp_steps1;
}
cy = 5
{
const ct = canvas.ct;
ct.save();
ct.clearRect(0, 0, sierp_steps, HEIGHT);
ct.transform(1, 0, 0, -1, 0, HEIGHT);
const L = a * sin;
ct.beginPath();
ct.moveTo(L, c + 10);
ct.lineTo(c + L, c + 10);
ct.lineTo(L + a * cos, c + 10 + a * sin);
ct.closePath();
ct.lineWidth = 1;
ct.strokeStyle = "#999";
ct.stroke();
// ct.beginPath();
// ct.moveTo(L, 10);
// ct.lineTo(c + L, 10);
// ct.lineTo(c + L, c + 10);
// ct.lineTo(L, c + 10);
// ct.lineTo(L, 10);
// ct.lineWidth = 1;
// ct.strokeStyle = "#999";
// ct.stroke();
ct.save();
ct.translate(L, c + 10);
ct.rotate(-Math.PI/2 * t[1]);
ct.beginPath();
ct.moveTo(0, 0);
ct.lineTo(a * cos + t[0] * b * sin, a * sin - t[0] * b * cos);
ct.lineTo(a * (cos + sin * (t[2] - 1)) + t[0] * b * sin, a * (sin + cos) - t[0] * b * cos);
ct.lineTo(a * sin * (t[2] - 1), a * cos);
ct.closePath();
ct.fillStyle = "rgba(255,244,0,0.5)";
ct.fill();
ct.restore();
ct.save();
ct.translate(L + c, c + 10);
ct.rotate(Math.PI/2 * t[4]);
ct.beginPath();
ct.moveTo(0, 0);
ct.lineTo(a * cos * (1 - t[3]) - c, a * sin * (1 - t[3]));
ct.lineTo(a * cos * (1 - t[3]) + b * cos * (1 - t[5]) - c, a * sin * (1 - t[3]) + b * sin);
ct.lineTo(b * cos * (1 - t[5]), b * sin);
ct.closePath();
ct.fillStyle = "rgba(0,0,255,0.3)";
ct.fill();
ct.restore();
ct.restore();
return this || html`(<i>the drawing function</i>)`;
}
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.
