Published
Edited
Nov 25, 2019
1 fork
Insert cell
Insert cell
viewof c = {
var c = DOM.context2d(w, h);
c.canvas.value = c;
return c.canvas; // a canvas has nothing on it
}
Insert cell
Insert cell
Insert cell
mutable ball = ({r: 10, x: 0, y: 0}); // mutable, define it first
Insert cell
gameloop = {
let n = 0;
let {r, x, y} = mutable ball; // destructuring & mutable & let (generate new values)
while (n < h) { // h is const and global by viewof
x++;
y++;
n++;
mutable ball = {r, x, y};
yield true; // try comment this line out ! Generator!!!
}
}
Insert cell
draw = {
gameloop; // receive data from the generator
// draw the canvas
c.fillStyle="black";
c.fillRect(0,0,w,h);
const {r, x, y} = mutable ball; // destructuring, mutable, const (not let here)
// return x
// draw a ball or circle: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc
c.beginPath();
c.fillStyle = "red";
c.arc(x, y, r, 0, 2 * Math.PI);
c.fill();
}
Insert cell
videoyt("Aznz6oLbuFQ")
Insert cell
import {videoyt, slider} 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