Connecting people to art and culture through meaningful application of creative technology
{
let canvas, ctx;
if (this) {
canvas = this, ctx = this.getContext("2d");
ctx.clearRect(0, 0, width, height);
} else {
ctx = DOM.context2d(width, height), canvas = ctx.canvas;
canvas.style.width = "100%";
canvas.style.height = "auto";
}
// target is mouse pos relative to canvas
// 1. via Generators.observe (https://beta.observablehq.com/@mbostock/eyes)
let {left: cx, top: cy} = canvas.getBoundingClientRect();
let {x: mx, y: my} = mouse;
let target = {x: mouse.x - cx, y: mouse.y - cy};
// 2. via mutable object (https://beta.observablehq.com/@jashkenas/simple-canvas-with-mousemove)
// ctx.canvas.onmousemove = (e) => {
// mutable mousePos = {x: e.offsetX, y: e.offsetY};
// }
// let target = mousePos;
let vehicle1 = new Vehicle(50, 50);
while (playing) {
ctx.clearRect(0, 0, width, height);
// target
ctx.beginPath();
ctx.arc(target.x, target.y, 10, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
// vehicle
vehicle1.seek(Victor.fromObject(target));
vehicle1.update();
ctx.fillStyle = "black";
vehicle1.display(ctx);
yield canvas;
}
}
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.
