// illustrations12b.jsx — Capítulo 12 · Escenas 4 y 5 (principio realista)
const { SceneFrame, SkyBackdrop, LuminousChrist, useRun, globeDots } = window;
// ════════════════════════════════════════════════════════════════════════
// ─── PORTADA · ENVIADO CON UNA MISIÓN ────────────────────────────────────
// Un hijo sale de la casa del Padre (puerta encendida) y, lámpara en mano,
// camina por el sendero hacia el mundo — que se va encendiendo a su paso.
// ════════════════════════════════════════════════════════════════════════
function ScenePortada({ pal, active }) {
const run = useRun(active);
// Mundo (a la derecha) — esfera tenue que se enciende a la llegada
const wx = 1330, wy = 270, wR = 150;
const wdots = globeDots(wx, wy, wR, 20, 13);
const NN = 13, ga = Math.PI * (3 - Math.sqrt(5)), tilt = -0.2;
const wnodes = [];
for (let i = 0; i < NN; i++) {
const yy = 1 - (i / (NN - 1)) * 2;
const rr = Math.sqrt(Math.max(0, 1 - yy * yy));
const th = i * ga;
const px = Math.cos(th) * rr, py0 = yy, pz0 = Math.sin(th) * rr;
const py = py0 * Math.cos(tilt) - pz0 * Math.sin(tilt);
const pz = py0 * Math.sin(tilt) + pz0 * Math.cos(tilt);
if (pz <= 0.22) continue;
wnodes.push({ x: wx + wR * px * 0.88, y: wy - wR * py * 0.88, i: wnodes.length });
}
return (
{/* suelo / horizonte */}
{/* MUNDO — a la derecha, tenue; se enciende al llegar el hijo */}
{wdots.map((d, i) => )}
{wnodes.map((c) => (
))}
{/* SENDERO de la casa al mundo (perspectiva) */}
{/* LA CASA del Padre — puerta encendida */}
{/* muro */}
{/* techo */}
{/* ventana encendida */}
{/* puerta abierta, luz que sale */}
{/* derrame de luz hacia el sendero */}
{/* motas de luz que el hijo va dejando en el camino */}
{[{ x: 560, d: 2.2 }, { x: 800, d: 4.1 }, { x: 1020, d: 5.8 }].map((m, i) => (
))}
{/* EL HIJO ENVIADO — sale de la casa y recorre el sendero, lámpara en mano */}
{/* sombra */}
{/* pierna trasera */}
{/* pierna delantera (paso) */}
{/* túnica / torso */}
{/* manto sobre el hombro */}
{/* rim cálido del lado de la lámpara */}
{/* brazo trasero */}
{/* brazo delantero levantando la lámpara */}
{/* cuello + cabeza (mira al mundo) */}
{/* LÁMPARA — la luz que lleva al mundo */}
);
}
// ════════════════════════════════════════════════════════════════════════
// ─── ESCENA 4 · A LOS PIES DE LA CRUZ ────────────────────────────────────
// El joven ve la cruz; detrás de la cruz reconoce al Padre. Se acerca y se
// sienta a Sus pies a contemplarlo — quedan unidos, como familia.
// ════════════════════════════════════════════════════════════════════════
function SceneRegazo({ pal, active }) {
const run = useRun(active);
const Cx = 592, Cy = 330; // centro de la figura de Jesús
const Yx = 556, Yy = 602; // joven sentado a sus pies
return (
{/* bloom que une al Padre y al hijo, como familia */}
{/* Jesús (la cruz y, detrás, el Padre) aparece / se reconoce */}
{/* mirada de contemplación: del joven hacia el rostro del Padre */}
{/* EL JOVEN — se acerca y se sienta a los pies de la cruz a contemplar */}
{/* piernas cruzadas en el suelo */}
{/* torso, recostado un poco hacia atrás para mirar arriba */}
{/* manto sobre el hombro */}
{/* rim cálido (luz de la cruz arriba) */}
{/* brazos descansando sobre las rodillas */}
{/* cuello + cabeza levantada, contemplando */}
{/* mejilla iluminada + ojo contemplativo */}
);
}
// ════════════════════════════════════════════════════════════════════════
// ─── ESCENA 5 · UN ALTAR EN MEDIO DE ELLOS ───────────────────────────────
// Personas de rodillas, en círculo, tomadas de la mano, levantando un altar
// con una CRUZ — y Dios brilla en medio de ellos.
// ════════════════════════════════════════════════════════════════════════
function SceneCirculo({ pal, active }) {
const run = useRun(active);
const cx = 500, cy = 552, rx = 332, ry = 148;
const N = 9;
const figs = Array.from({ length: N }, (_, k) => {
const theta = (k / N) * Math.PI * 2 + Math.PI / 2;
const x = cx + rx * Math.cos(theta);
const y = cy + ry * Math.sin(theta);
const front = (Math.sin(theta) + 1) / 2;
return { x, y, s: 0.62 + 0.55 * front, depth: front };
}).sort((a, b) => a.depth - b.depth);
const ellipsePath = `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 1 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 1 ${cx - rx} ${cy} Z`;
// Figura claramente ARRODILLADA, inclinada hacia el centro, con rim cálido
const Kneel = ({ f, i }) => (
{/* talones/pies que asoman detrás */}
{/* piernas dobladas — rodillas apoyadas en el suelo */}
{/* torso erguido con leve reverencia */}
{/* manto sobre los hombros */}
{/* rim cálido del lado del altar */}
{/* cabeza inclinada */}
{/* brazos hacia los lados (manos tomadas con el de al lado) */}
);
return (
{/* halo del altar */}
{/* columna de luz que asciende detrás de la cruz */}
{[-42, -22, 22, 42].map((a, i) => (
))}
{/* ALTAR de piedra */}
{/* CRUZ sobre el altar */}
{/* motas que ascienden */}
{Array.from({ length: 10 }, (_, i) => (
))}
{/* figuras de rodillas alrededor */}
{figs.map((f, i) => )}
{/* anillo de manos tomadas + pulsos */}
);
}
Object.assign(window, { ScenePortada, SceneRegazo, SceneCirculo });