viewof canvas = {
const c = DOM.context2d(w, h);
c.canvas.value = c;
return c.canvas;
}
mutable ball = ({x: 2, y: 2, r: 2})
ball
viewof b = button({value: "reverse", description: "reverse the ball values"})
b
reverse = {
b;
return !this;
}
gameloop = {
let { x, y, r } = mutable ball;
while (true) {
if (!reverse) {
x++;
y++;
r++;
} else {
x = Math.max(0, x - 1);
y = Math.max(0, y - 1);
r = Math.max(0, r - 1);
}
mutable ball = {x, y, r}
// return mutable ball
yield false
}
}
gameloop
drawing = {
gameloop
const {x, y, r} = mutable ball;
// let {x, y, r} = ball;
canvas.fillStyle = "purple";
canvas.fillRect(0, 0, w, h);
canvas.beginPath();
canvas.fillStyle = "red";
canvas.arc(x, y, r, 0, 2 * Math.PI);
canvas.fill();
}
import { slider, videoyt, button} from "@embracelife/tutorial-utilities"
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.
