viewof canvas = {
const c = DOM.context2d(w, h);
c.canvas.value = c;
return c.canvas;
}
viewof scale = slider({min: 1, max: 10, value: 5, step: 1, title: "ball size"});
viewof speed = slider({min: 5, max: 20, value: 10, step: 1, title: "ball speed"});
mutable ball = ({ x: 2, y: 2, r: scale, xSpeed: speed, ySpeed: speed})
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) {
// moving
if (reverse) {
x = x + xSpeed;
y = y + ySpeed;
} else {
x = x - xSpeed;
y = y - ySpeed;
}
// reverse direction conditions
if ( x - r < 0) {
xSpeed = -xSpeed; // xSpeed = Math.abs(xSpeed)
mutable ball = {x, y, r, xSpeed, ySpeed};
yield Promises.delay(1000, true);
}
if ( x + r > w) {
xSpeed = -xSpeed; // xSpeed = -Math.abs(xSpeed)
mutable ball = {x, y, r, xSpeed, ySpeed};
yield Promises.delay(1000, false);
}
if ( y + r > h) {
ySpeed = -ySpeed;
mutable ball = {x, y, r, xSpeed, ySpeed};
yield Promises.delay(1000, mutable ball);
}
if ( y - r < 0) {
ySpeed = -ySpeed;
mutable ball = {x, y, r, xSpeed, ySpeed};
yield Promises.delay(1000, mutable ball);
}
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.
