{
const context = DOM.context2d(500, 600);
while (true) {
const t = Date.now() / 1000;
const x = 500/2 + 200*(Math.cos(t));
const y = 500/2 + 200*(Math.sin(t));
const xp = x + 60*Math.cos(t/10);
const yp = y + 60*Math.sin(t/10);
const xs = 500/2 + 200*(Math.cos(t + Math.PI/2));
const ys = 500/2 + 200*(Math.sin(t + Math.PI/2));
context.clearRect(0, 0, 500, 600);
context.beginPath();
context.fillStyle="green";
context.arc(500/2, 500/2, 20, 0, 2 * Math.PI);
context.fill();
context.beginPath();
context.fillStyle="orange";
context.arc(xs, ys, 10, 0, 2 * Math.PI);
context.fill();
context.beginPath();
context.fillStyle="red";
context.arc(xp, yp, 10, 0, 2 * Math.PI);
context.fill();
context.beginPath();
context.moveTo(500/2,500/2);
context.lineTo(xs,ys);
context.stroke();
context.beginPath();
context.moveTo(500/2,500/2);
context.lineTo(x,y);
context.lineTo(xp,yp);
context.stroke();
yield context.canvas;
}
}