Robotics.university
viewof boxWidth = Inputs.range([0, 1], {label: "Box width"})
canvas = {
let x = 0; // Initialize rectangle x position
let y = 50; // Initialize rectangle y position
const context = DOM.context2d(width, height);
context.fillStyle = "hsl(216deg 100% 13%)";
context.canvas.style.background = "hsl(216deg 20% 90%)";
const div = document.createElement("div");
const img = html`<img alt="" loading="lazy" decoding="async" data-nimg="fill" sizes="(min-width: 760px) 50vw, (min-width: 1000px); z-index: 9999; position: absolute; top: 0px; opacity: 0.3;" src="https://files.hashirama.blog/blog/floorplan.jpg" />`;
context.canvas.style.position = "absolute";
context.canvas.style.zIndex = "123";
img.style.opacity = 1.5;
div.appendChild(context.canvas);
div.appendChild(img);
context.canvas.style.opacity = 0.5;
function animate() {
const idk = Math.random() * x;
context.fillRect(x, y, 10, 20);
x += 1; // Update rectangle x position
if (x > width) {
x = 0; // Reset rectangle x position to 0 when it exceeds canvas width
}
context.canvas.style.background = "hsl(216deg 20% 90%)";
setTimeout(animate, 1000); // Call animate function every 1 second
}
animate(); // Start animation
return div;
}
height = 200
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.
