// illustrations12.jsx — Capítulo 12 · "La revolución de los hijos de Dios"
// Escenas 1–3 + helpers compartidos. Principio realista: volumen, sombreado,
// luz cálida que emana de Jesús (rim-light), proporciones humanas.
// ─── Hook: reinicia animaciones al activar el slide ───────────────────────
function useRun(active) {
const [run, setRun] = React.useState(0);
React.useEffect(() => { if (active) setRun((r) => r + 1); }, [active]);
return run;
}
// ─── Marco oscuro de la escena ────────────────────────────────────────────
function SceneFrame({ pal, children, viewBox = '0 0 1000 900' }) {
return (
);
}
// ─── Cielo estrellado de fondo ────────────────────────────────────────────
function SkyBackdrop({ pal, w = 1000, h = 900, n = 64 }) {
const stars = Array.from({ length: n }, (_, i) => ({
x: (i * 97.13 + (i % 5) * 31) % w,
y: (i * 53.77 + (i % 7) * 113) % h,
r: 0.5 + (i % 4) * 0.35,
d: ((i * 7) % 30) / 10,
dur: 2.4 + (i % 5) * 0.6,
}));
return (
{stars.map((s, i) => (
))}
);
}
// ─── Malla de puntos de un globo (hemisferio frontal) ─────────────────────
function globeDots(cx, cy, R, centerLon, latStep = 11) {
const dots = [];
for (let lat = -78; lat <= 78; lat += latStep) {
const ring = Math.max(0.22, Math.cos(lat * Math.PI / 180));
const step = latStep / ring;
for (let lon = -180; lon < 180; lon += step) {
const a = lat * Math.PI / 180, b = (lon - centerLon) * Math.PI / 180;
const z = Math.cos(a) * Math.cos(b);
if (z <= 0.05) continue;
dots.push({
x: cx + R * Math.cos(a) * Math.sin(b),
y: cy - R * Math.sin(a),
op: 0.1 + 0.42 * z, r: (1.2 + 1.6 * z) * (R / 300),
});
}
}
return dots;
}
// ─── Cristo luminoso (la figura "de la cruz") — reutilizable ──────────────
// Reverente: cruz de luz detrás, halo, rayos, túnica con volumen, brazos
// abiertos en acogida. Coords locales centradas en (0,0).
function LuminousChrist({ pal, cx, cy, scale = 1, rayDelay = 0 }) {
const id = `${Math.round(cx)}_${Math.round(cy)}`;
const rays = [];
for (let i = 0; i < 16; i++) {
const a = (i / 16) * Math.PI * 2;
const r1 = 70, r2 = 210 + (i % 3) * 36;
rays.push({
x1: Math.cos(a) * r1, y1: -90 + Math.sin(a) * r1,
x2: Math.cos(a) * r2, y2: -90 + Math.sin(a) * r2,
d: (i % 5) * 0.4,
});
}
return (
{/* Gran resplandor */}
{/* CRUZ de luz detrás de la figura */}
{/* Rayos */}
{rays.map((r, i) => (
))}
{/* Halo del rostro */}
{/* Túnica de luz con volumen */}
{/* pliegue central — volumen */}
{/* Rostro */}
{/* Brazos abiertos / acogida */}
);
}
// ════════════════════════════════════════════════════════════════════════
// ─── ESCENA 1 · EL MUNDO SE ENCIENDE (RED NEURONAL) ──────────────────────
// Muchas luces se encienden por toda la tierra y se conectan entre sí en una
// malla viva — como una red neuronal de hijos de Dios.
// ════════════════════════════════════════════════════════════════════════
function SceneMundo({ pal, active }) {
const run = useRun(active);
const cx = 500, cy = 440, R = 300;
const dots = globeDots(cx, cy, R, 22, 11);
// Nodos distribuidos sobre la esfera (espiral áureo) — hemisferio frontal
const N = 64, ga = Math.PI * (3 - Math.sqrt(5)), tilt = -0.24;
const nodes = [];
for (let i = 0; i < N; i++) {
const yy = 1 - (i / (N - 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.16) continue;
nodes.push({ x: cx + R * px * 0.9, y: cy - R * py * 0.9, z: pz, i: nodes.length });
}
// Arcos a vecinos cercanos (malla neuronal)
const arc = (a, b) => {
const mx = (a.x + b.x) / 2, my = (a.y + b.y) / 2;
const dx = mx - cx, dy = my - cy, dl = Math.hypot(dx, dy) || 1;
const span = Math.hypot(b.x - a.x, b.y - a.y);
const bow = 16 + span * 0.16;
const ctx = mx + dx / dl * bow, cty = my + dy / dl * bow;
return {
d: `M ${a.x.toFixed(1)} ${a.y.toFixed(1)} Q ${ctx.toFixed(1)} ${cty.toFixed(1)} ${b.x.toFixed(1)} ${b.y.toFixed(1)}`,
len: span * 1.1 + bow, mid: (a.i + b.i),
};
};
const links = [];
const seen = new Set();
nodes.forEach((a) => {
const near = nodes.filter((b) => b !== a)
.map((b) => ({ b, d: Math.hypot(b.x - a.x, b.y - a.y) }))
.sort((p, q) => p.d - q.d).slice(0, 3);
near.forEach(({ b, d }) => {
if (d > 215) return;
const key = a.i < b.i ? `${a.i}-${b.i}` : `${b.i}-${a.i}`;
if (seen.has(key)) return;
seen.add(key);
links.push(arc(a, b));
});
});
return (
{dots.map((d, i) => )}
{/* Conexiones de la red neuronal */}
{links.map((l, j) => (
{j % 3 === 0 &&
}
))}
{/* Luces de las naciones (muchas) */}
{nodes.map((c) => {
const delay = 0.25 + c.i * 0.07;
const rad = 18 + (c.i % 3) * 6;
return (
);
})}
);
}
// ════════════════════════════════════════════════════════════════════════
// ─── ESCENA 2 · DIOS DESCIENDE Y ENTRA EN LA TIERRA ──────────────────────
// El tiempo corre hacia Su venida: Jesús desciende del cielo y entra en la
// Tierra; al llegar, Su presencia inunda de luz cálida a toda la creación.
// ════════════════════════════════════════════════════════════════════════
function SceneOrbita({ pal, active }) {
const run = useRun(active);
const ex = 500, ey = 620, eR = 165;
const dots = globeDots(ex, ey, eR, 18, 12);
// Nodos sobre la Tierra (red que se enciende y conecta)
const NN = 30, ga2 = Math.PI * (3 - Math.sqrt(5)), tilt2 = -0.2;
const eNodes = [];
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 * ga2;
const px = Math.cos(th) * rr, py0 = yy, pz0 = Math.sin(th) * rr;
const py = py0 * Math.cos(tilt2) - pz0 * Math.sin(tilt2);
const pz = py0 * Math.sin(tilt2) + pz0 * Math.cos(tilt2);
if (pz <= 0.2) continue;
eNodes.push({ x: ex + eR * px * 0.88, y: ey - eR * py * 0.88, i: eNodes.length });
}
const eArc = (a, b) => {
const mx = (a.x + b.x) / 2, my = (a.y + b.y) / 2;
const dx = mx - ex, dy = my - ey, dl = Math.hypot(dx, dy) || 1;
const span = Math.hypot(b.x - a.x, b.y - a.y);
const bow = 8 + span * 0.14;
return { d: `M ${a.x.toFixed(1)} ${a.y.toFixed(1)} Q ${(mx + dx / dl * bow).toFixed(1)} ${(my + dy / dl * bow).toFixed(1)} ${b.x.toFixed(1)} ${b.y.toFixed(1)}`, len: span * 1.1 + bow };
};
const eLinks = [];
const eSeen = new Set();
eNodes.forEach((a) => {
eNodes.filter((b) => b !== a).map((b) => ({ b, d: Math.hypot(b.x - a.x, b.y - a.y) }))
.sort((p, q) => p.d - q.d).slice(0, 2).forEach(({ b, d }) => {
if (d > 150) return;
const k = a.i < b.i ? `${a.i}-${b.i}` : `${b.i}-${a.i}`;
if (eSeen.has(k)) return; eSeen.add(k);
eLinks.push(eArc(a, b));
});
});
return (
{/* Línea de tiempo */}
{[0, 0.2, 0.4, 0.6, 0.8, 1].map((p, i) => (
))}
la creación gime
su regreso
{/* TIERRA */}
{dots.map((d, i) => )}
{/* Red de luces sobre la Tierra — se encienden y conectan, más al acercarse Él */}
{eLinks.map((l, j) => (
))}
{eNodes.map((c) => {
const delay = 0.6 + c.i * 0.34;
return (
);
})}
{/* marcador del tiempo que avanza hacia Su regreso */}
{/* presencia cálida que inunda la Tierra al llegar Él */}
{/* haz de luz que desciende del cielo a la Tierra */}
{/* Jesús desciende y entra en la Tierra */}
);
}
// ════════════════════════════════════════════════════════════════════════
// ─── ESCENA 3 · LA MIRADA FIJA ───────────────────────────────────────────
// Una persona (figura con túnica, sombreada) camina entre el caos y fija la
// mirada en Jesús — un haz firme que el ruido no rompe.
// ════════════════════════════════════════════════════════════════════════
function SceneMirada({ pal, active }) {
const run = useRun(active);
const chaos = [
{ type: 'screen', x: 150, y: 210, rot: -12, anim: 'c12-buzz', dur: 1.6 },
{ type: 'screen', x: 250, y: 700, rot: 8, anim: 'c12-driftB', dur: 3.4 },
{ type: 'bell', x: 120, y: 440, anim: 'c12-buzz', dur: 1.2 },
{ type: 'play', x: 470, y: 150, anim: 'c12-driftB', dur: 3 },
{ type: 'money', x: 110, y: 610, anim: 'c12-driftA', dur: 2.8 },
{ type: 'clock', x: 540, y: 780, anim: 'c12-buzz', dur: 1.5 },
{ type: 'scribble', x: 380, y: 270, anim: 'c12-driftA', dur: 3.6 },
{ type: 'play', x: 200, y: 330, anim: 'c12-buzz', dur: 1.4 },
{ type: 'bell', x: 650, y: 230, anim: 'c12-driftC', dur: 2.6 },
];
// Distracciones que cruzan rápido por delante de su vista
const streaks = [
{ y: 332, dir: 'R', dur: 2.6, delay: 0.3, kind: 'play' },
{ y: 416, dir: 'L', dur: 3.0, delay: 1.5, kind: 'screen' },
{ y: 300, dir: 'L', dur: 2.1, delay: 2.9, kind: 'bell' },
{ y: 470, dir: 'R', dur: 2.8, delay: 2.0, kind: 'money' },
{ y: 384, dir: 'R', dur: 1.8, delay: 3.9, kind: 'play' },
{ y: 350, dir: 'L', dur: 2.4, delay: 5.0, kind: 'screen' },
];
const eye = { x: 352, y: 470 }, target = { x: 748, y: 372 };
const beamLen = Math.hypot(target.x - eye.x, target.y - eye.y);
const beamD = `M ${eye.x} ${eye.y} L ${target.x} ${target.y}`;
const ChaosIcon = ({ c }) => {
const col = pal.medium;
const common = { style: { animation: `${c.anim} ${c.dur}s ease-in-out ${(c.x % 5) * 0.3}s infinite`, transformOrigin: `${c.x}px ${c.y}px` } };
const flick = { animation: `c12-flick ${3 + (c.x % 3)}s ease-in-out infinite` };
if (c.type === 'screen') return (
);
if (c.type === 'play') return (
);
if (c.type === 'bell') return (
);
if (c.type === 'money') return (
$
);
if (c.type === 'clock') return (
);
return (
);
};
// Icono que cruza la pantalla (dibujado en 0,0)
const StreakIcon = ({ kind }) => {
const col = pal.medium;
if (kind === 'screen') return (
);
if (kind === 'bell') return (
);
if (kind === 'money') return ($);
return (
);
};
return (
{chaos.map((c, i) => )}
{/* Distracciones que cruzan rápido por delante de la vista */}
{streaks.map((s, i) => (
))}
{/* Persona realista, túnica, caminando — rim-light cálido del lado de Jesús */}
{/* pierna trasera */}
{/* pierna delantera (paso) */}
{/* túnica / torso */}
{/* pliegues */}
{/* rim-light cálido del borde derecho (luz de Jesús) */}
{/* brazo */}
{/* hombro/manto */}
{/* cuello */}
{/* cabeza (mira hacia la luz) */}
{/* cabello */}
{/* rim cálido en la mejilla derecha */}
{/* ojo encendido mirando a Jesús */}
);
}
Object.assign(window, {
useRun, SceneFrame, SkyBackdrop, LuminousChrist, globeDots,
SceneMundo, SceneOrbita, SceneMirada,
});