viewof scale = slider({min: 5, max: 10, value: 5, step: 1, title: "ball size"});
viewof speed = slider({min: 1, max: 10, value: 1, step: 1, title: "ball speed"});
viewof canvas = {
const c = DOM.context2d(w, h);
c.canvas.value = c;
return c.canvas;
}
mutable ball = ({x: 2, y: 2, r: scale, xSpeed: speed, ySpeed: speed})
ball
viewof b = button({value: "reverse", description: "reverse the ball values"})
b
reverse = {
b;
return !this;
}
gameloop = {
let { x, y, r, xSpeed, ySpeed } = mutable ball;
while (true) {
if (!reverse) {
x = x + xSpeed;
y = y + ySpeed;
// r = r + 1
} else {
x = Math.max(0, x - xSpeed);
y = Math.max(0, y - ySpeed);
// r = Math.max(0, r - 1);
}
mutable ball = {x, y, r} //, xSpeed, ySpeed}
// 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"
FileAttachment("visualizer.png").image()
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.
