Published
Edited
Mar 24, 2018
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
radius
Insert cell
Insert cell
count
Insert cell
Insert cell
class Circle {
constructor({x, y, r, color}) {
this.x = x;
this.y = y;
this.r = r;
this.color = color;
}
distance({x, y}) {
return Math.hypot(this.x - x, this.y - y); // :)
//return Math.sqrt((this.x - x) ** 2 + (this.y - y) ** 2);
}
render(context) {
context.beginPath();
context.moveTo(this.x + this.r, this.y);
context.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
context.fillStyle = this.color;
context.fill();
if (this.active) {
context.lineWidth = 1;
context.stroke();
}
}
}
Insert cell
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