Published
Edited
Dec 2, 2019
Insert cell
Insert cell
Insert cell
Insert cell
viewof canvas = {
const c = DOM.context2d(w, h);
c.canvas.value = c;
return c.canvas;
}
Insert cell
mutable ball = ({x: w/2, y: h/2, r: 30})
Insert cell
viewof b = button({value: "OK", title: "button", description: "reverse"})
Insert cell
b
Insert cell
reverse = {
b;
return !this;
}
Insert cell
gameloop = {
let { x, y, r } = mutable ball;
x = x + 100;
y = y + 100;
r = r + 10;
mutable ball = { x, y, r };
return mutable ball;
}
Insert cell
drawing = {

canvas.fillStyle = "purple";
canvas.fillRect(0, 0, w, h);
let {x, y, r} = ball;
canvas.beginPath();
canvas.fillStyle = "red";
canvas.arc(x, y, r, 0, 2 * Math.PI);
canvas.fill();
}
Insert cell
import { slider, videoyt, button} from "@embracelife/tutorial-utilities"
Insert cell

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.
Learn more