importance_canvas = {
const width = 760, height = 430;
const canvas = DOM.canvas(width, height);
const ctx = canvas.getContext("2d");
const rnd = rng32(424242);
function normal() {
const u1 = Math.max(rnd(), 1e-12);
const u2 = rnd();
return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
}
const L = 330;
const x0 = 60, y0 = 55;
const cx = x0 + 0.68 * L;
const cy = y0 + 0.42 * L;
const r = imp_sigma * L;
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "rgba(255,255,255,0.035)";
ctx.fillRect(x0, y0, L, L);
ctx.font = "22px system-ui, -apple-system, Segoe UI, sans-serif";
ctx.fillStyle = "#f2f2f2";
ctx.fillText("Точки из удобного распределения", x0, 34);
ctx.strokeStyle = "#d9d9d9";
ctx.lineWidth = 2;
ctx.strokeRect(x0, y0, L, L);
ctx.beginPath();
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(33, 99, 255, 0.16)";
ctx.fill();
ctx.strokeStyle = "rgba(33, 99, 255, 0.9)";
ctx.stroke();
let hit = 0;
for (let i = 0; i < imp_N; ++i) {
let x = 0.68 + imp_sigma * normal();
let y = 0.42 + imp_sigma * normal();
if (x < 0 || x > 1 || y < 0 || y > 1) continue;
const px = x0 + x * L;
const py = y0 + y * L;
const inside = (px - cx) ** 2 + (py - cy) ** 2 < r ** 2;
if (inside) hit += 1;
ctx.beginPath();
ctx.arc(px, py, inside ? 2.5 : 1.5, 0, 2 * Math.PI);
ctx.fillStyle = inside ? "rgba(33, 99, 255, 0.92)" : "rgba(255,255,255,0.22)";
ctx.fill();
}
ctx.fillStyle = "#f2f2f2";
ctx.font = "24px system-ui, -apple-system, Segoe UI, sans-serif";
ctx.fillText("Теперь точки чаще", 430, 115);
ctx.fillText("попадают в важную область.", 430, 150);
ctx.fillText("Цена — веса событий.", 430, 215);
ctx.font = "22px system-ui, -apple-system, Segoe UI, sans-serif";
ctx.fillText(`вблизи пика: ${hit} точек`, 430, 285);
ctx.fillText("если веса слишком разные,", 430, 340);
ctx.fillText("дисперсия снова растёт", 430, 370);
return canvas;
}