Design, tech, engineering and science. Head of Design and User Research.
[isRunning, ms, d]
canvasWidth = width
canvasHeight = 400
scaleFactor = 1 / window.devicePixelRatio
backgroundColor = "#000"
sunRadius = earthOrbitRadius * 0.55
earthOrbitRadius = canvasHeight * 0.75
earthRadius = earthOrbitRadius * 0.175
moonOrbitRadius = canvasHeight * 0.2
moonRadius = canvasHeight * 0.02
planets = [sun, earth, moon]
sun = new Planet(
{ x: canvas.width * 0.5, y: canvas.height * 0.5 },
sunRadius,
0,
0,
"#FFD000"
)
earth = new Planet(
sun,
earthRadius,
earthOrbitRadius,
(0.03 * Math.PI) / 180,
"#00aaff"
)
moon = new Planet(
earth,
moonRadius,
moonOrbitRadius,
(0.1 * Math.PI) / 180,
"gray"
)
Planet = {
function Planet(center, radius, orbitRadius, velocity, color) {
this.center = center;
this.x = center.x + orbitRadius;
this.y = center.y;
this.lastX = this.x;
this.lastY = this.y;
this.radius = radius;
this.orbitRadius = orbitRadius || 0;
this.velocity = velocity || 0;
this.theta = 0;
this.color = color || "black";
}
Planet.prototype.update = function (delta) {
this.lastX = this.x;
this.lastY = this.y;
this.theta += this.velocity * delta;
this.x = this.center.x + Math.cos(this.theta) * this.orbitRadius;
this.y = this.center.y + Math.sin(this.theta) * this.orbitRadius;
};
Planet.prototype.draw = function (interpolationPercentage) {
var x = this.lastX + (this.x - this.lastX) * interpolationPercentage,
y = this.lastY + (this.y - this.lastY) * interpolationPercentage;
context.circle(x, y, this.radius, this.color);
};
return Planet;
}
function onUpdate(msTotal, msDelta) {
for (var i = 0, l = planets.length; i < l; i++) {
planets[i].update(msDelta);
}
}
function onRender(interpolationPercentage) {
// Clear previous image
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = backgroundColor;
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw planets
for (var i = 0, l = planets.length; i < l; i++) {
planets[i].draw(interpolationPercentage);
}
}
function onPanic(fps) {
var discardedTime = Math.round(resetFrameTime());
console.warn(
"Main loop panicked, probably because the browser tab was put in the background. Discarding " +
discardedTime +
"ms"
);
}
context = {
const context = DOM.context2d(canvasWidth, canvasHeight);
context.circle = function (x, y, r, fillStyle) {
this.beginPath();
this.arc(x, y, r, 0, 2 * Math.PI, false);
if (fillStyle) {
this.fillStyle = fillStyle;
}
this.fill();
};
context.fillStyle = backgroundColor;
context.fillRect(0, 0, canvasWidth, canvasHeight);
// Required for the canvas renderer to work correctly on high-resolution displays
context.scale(scaleFactor, scaleFactor);
return context;
}
start()
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.
