小丁剧场

// 心形：标准心形曲线，转一个小角度，落在冥王星左下那片平原上
const HEART_PTS = (() => {
  const pts = [];
  for (let k = 0; k < 360; k++) {
    const th = k / 360 * 6.283,
      xr = 16 * Math.pow(Math.sin(th), 3) / 17,
      yr = (13 * Math.cos(th) - 5 * Math.cos(2 * th)
          - 2 * Math.cos(3 * th) - Math.cos(4 * th)) / 17;
    const u = xr * .96 + yr * .26, v = -xr * .26 + yr * .96;   // 反旋转
    pts.push([u / 2.05 + .14, -(v - .15) / 2.05 + .12]);
  }
  return pts;
})();

// 冥王星：预先画进一张离屏图（带那颗"心"），之后可以整体缩放，
// 也可以先缩小再放大做出"像素化"的效果
const PL = document.createElement('canvas'); PL.width = PL.height = 800;
(() => {
  const g = PL.getContext('2d'), R = 400, img = g.createImageData(800, 800);
  for (let py = 0; py < 800; py++) for (let px = 0; px < 800; px++) {
    const x = (px - R) / R, y = (py - R) / R, r2 = x * x + y * y, i = (py * 800 + px) * 4;
    if (r2 > 1) { img.data[i + 3] = 0; continue; }
    const z = Math.sqrt(1 - r2);
    let c = [196, 160, 124];
    const n = .55 * Math.sin(x * 5.3 + 1.7 * Math.sin(y * 3.1))
            + .3 * Math.sin(y * 7.7 + 2.3 * Math.sin(x * 4.2))
            + .15 * (hash(Math.floor(px / 6), Math.floor(py / 6)) - .5);
    c = mix(c, [150, 110, 86], clamp(n * .3 + .25));
    // 赤道附近一条暗红色的带（克苏鲁区一带），心形区域里是很亮的冰
    const dark = clamp(1 - Math.abs(y - .22 - .15 * Math.sin(x * 3)) / .16) * clamp((-.05 - x) * 4);
    c = mix(c, [92, 48, 38], dark * .85);
    if (inPoly(HEART_PTS, x, y)) c = mix(c, [236, 220, 200], .85);
    const shade = .25 + .75 * Math.pow(z, .6);   // 边缘变暗
    img.data[i] = c[0] * shade; img.data[i + 1] = c[1] * shade;
    img.data[i + 2] = c[2] * shade; img.data[i + 3] = 255;
  }
  g.putImageData(img, 0, 0);
})();

function drawPluto(cx, cy, R, a, pixel = 0) {
  if (a <= 0) return;
  ctx.save(); ctx.globalAlpha = a;
  if (pixel > 1) {
    // 先缩到 (2R/pixel) 见方，再关掉平滑放大回来：越早，格子越粗
    const n = Math.max(1, Math.round(2 * R / pixel));
    PIX.width = PIX.height = n;
    const pg = PIX.getContext('2d'); pg.clearRect(0, 0, n, n); pg.drawImage(PL, 0, 0, n, n);
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(PIX, cx - R, cy - R, 2 * R, 2 * R);
    ctx.imageSmoothingEnabled = true;
  } else ctx.drawImage(PL, cx - R, cy - R, 2 * R, 2 * R);
  ctx.restore();
  // 大气层：一圈很薄的蓝色雾（新视野号拍到过冥王星的蓝色霾层）
  lx.strokeStyle = rgba([150, 190, 255], .3 * a); lx.lineWidth = 4;
  lx.beginPath(); lx.arc(cx, cy, R + 3, 0, 6.283); lx.stroke();
}

function heartLine(cx, cy, R, a, glow = 1) {
  if (a <= 0) return;
  lx.strokeStyle = rgba(COL.heart, .5 * a); lx.lineWidth = 2;
  lx.beginPath();
  HEART_PTS.forEach(([x, y], i) => {
    const X = cx + x * R, Y = cy + y * R;
    i ? lx.lineTo(X, Y) : lx.moveTo(X, Y);
  });
  lx.closePath(); lx.stroke();
  if (glow) {
    const [x, y] = [cx + .2 * R, cy + .1 * R];
    const g = lx.createRadialGradient(x, y, 0, x, y, R * .6);
    g.addColorStop(0, rgba(COL.heart, .07 * a * glow));
    g.addColorStop(1, rgba(COL.heart, 0));
    lx.fillStyle = g; lx.fillRect(x - R, y - R, 2 * R, 2 * R);
  }
}