@classytic/labs 0.1.0 → 0.3.0

package/dist/three/biology/mitosis-explorer.mjs

@@ -0,0 +1,721 @@
+'use client';
+
+import { MitosisExplorerLab, MitosisSemanticScene } from "../../biology/cell-division/preset.mjs";
+import { useScenePalette } from "../palette.mjs";
+import { ThreeSceneSurface } from "../surface.mjs";
+import { SceneAtom, SceneBond, SceneContactShadow, SceneEnvironment, SceneOrbit } from "../primitives.mjs";
+import { TranslucentShell } from "./cell-world.mjs";
+import { useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useThree } from "@react-three/fiber";
+
+//#region src/three/biology/mitosis-explorer.tsx
+const CAMERA = {
+	cell: [
+		0,
+		0,
+		5.25
+	],
+	nucleus: [
+		0,
+		0,
+		3.9
+	],
+	prophase: [
+		0,
+		0,
+		4.6
+	],
+	metaphase: [
+		0,
+		0,
+		5.2
+	],
+	anaphase: [
+		0,
+		0,
+		5.6
+	]
+};
+function Chromatin({ palette }) {
+	const strands = [
+		[
+			[
+				-.62,
+				.36,
+				.28
+			],
+			[
+				-.3,
+				.54,
+				.34
+			],
+			[
+				.06,
+				.34,
+				.38
+			],
+			[
+				.46,
+				.5,
+				.24
+			]
+		],
+		[
+			[
+				-.58,
+				-.12,
+				.4
+			],
+			[
+				-.24,
+				.06,
+				.46
+			],
+			[
+				.12,
+				-.2,
+				.42
+			],
+			[
+				.55,
+				.02,
+				.3
+			]
+		],
+		[
+			[
+				-.42,
+				-.48,
+				.24
+			],
+			[
+				-.08,
+				-.3,
+				.42
+			],
+			[
+				.28,
+				-.54,
+				.35
+			],
+			[
+				.52,
+				-.32,
+				.18
+			]
+		]
+	];
+	return /* @__PURE__ */ jsxs("group", { children: [strands.flatMap((points, strandIndex) => points.slice(0, -1).map((point, index) => /* @__PURE__ */ jsx(SceneBond, {
+		from: point,
+		to: points[index + 1],
+		color: strandIndex === 1 ? palette.warning : palette.accent,
+		radius: .035
+	}, `${strandIndex}-${index}`))), strands.flatMap((points, strandIndex) => points.map((position, index) => /* @__PURE__ */ jsx(SceneAtom, {
+		position,
+		radius: .055,
+		color: strandIndex === 1 ? palette.warning : palette.accent,
+		detail: "low"
+	}, `n-${strandIndex}-${index}`)))] });
+}
+function Mitochondrion({ position, rotation, palette }) {
+	return /* @__PURE__ */ jsxs("group", {
+		position,
+		rotation: [
+			0,
+			0,
+			rotation
+		],
+		children: [
+			/* @__PURE__ */ jsxs("mesh", {
+				scale: [
+					1.55,
+					.72,
+					.68
+				],
+				children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+					.48,
+					32,
+					20
+				] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+					color: palette.warning,
+					roughness: .5
+				})]
+			}),
+			/* @__PURE__ */ jsx(SceneBond, {
+				from: [
+					-.42,
+					.02,
+					.34
+				],
+				to: [
+					-.18,
+					.16,
+					.4
+				],
+				color: palette.background,
+				radius: .025
+			}),
+			/* @__PURE__ */ jsx(SceneBond, {
+				from: [
+					-.18,
+					.16,
+					.4
+				],
+				to: [
+					.04,
+					-.14,
+					.4
+				],
+				color: palette.background,
+				radius: .025
+			}),
+			/* @__PURE__ */ jsx(SceneBond, {
+				from: [
+					.04,
+					-.14,
+					.4
+				],
+				to: [
+					.28,
+					.12,
+					.38
+				],
+				color: palette.background,
+				radius: .025
+			}),
+			/* @__PURE__ */ jsx(SceneBond, {
+				from: [
+					.28,
+					.12,
+					.38
+				],
+				to: [
+					.45,
+					-.02,
+					.34
+				],
+				color: palette.background,
+				radius: .025
+			})
+		]
+	});
+}
+function Golgi({ palette }) {
+	return /* @__PURE__ */ jsx("group", {
+		position: [
+			1.35,
+			.75,
+			-.2
+		],
+		rotation: [
+			.2,
+			0,
+			-.2
+		],
+		children: [
+			0,
+			1,
+			2,
+			3
+		].map((index) => /* @__PURE__ */ jsxs("mesh", {
+			position: [
+				0,
+				(index - 1.5) * .13,
+				0
+			],
+			scale: [
+				1 - index * .08,
+				.55,
+				1
+			],
+			rotation: [
+				0,
+				0,
+				.35
+			],
+			children: [/* @__PURE__ */ jsx("torusGeometry", { args: [
+				.35,
+				.045,
+				8,
+				30,
+				Math.PI * 1.45
+			] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+				color: palette.secondary,
+				roughness: .52
+			})]
+		}, index))
+	});
+}
+function CellContext({ palette, visible }) {
+	if (!visible) return null;
+	return /* @__PURE__ */ jsxs("group", { children: [
+		/* @__PURE__ */ jsx(Mitochondrion, {
+			position: [
+				-1.4,
+				.8,
+				.05
+			],
+			rotation: .35,
+			palette
+		}),
+		/* @__PURE__ */ jsx(Mitochondrion, {
+			position: [
+				1.35,
+				-.72,
+				.15
+			],
+			rotation: -.28,
+			palette
+		}),
+		/* @__PURE__ */ jsx(Golgi, { palette }),
+		/* @__PURE__ */ jsx(SceneAtom, {
+			position: [
+				-1.55,
+				-.7,
+				.35
+			],
+			radius: .15,
+			color: palette.secondary
+		}),
+		/* @__PURE__ */ jsx(SceneAtom, {
+			position: [
+				1.72,
+				.08,
+				-.28
+			],
+			radius: .11,
+			color: palette.accent
+		})
+	] });
+}
+function CheckpointCamera({ checkpoint }) {
+	const { camera, invalidate } = useThree();
+	useEffect(() => {
+		const [x, y, z] = CAMERA[checkpoint];
+		camera.position.set(x, y, z);
+		camera.lookAt(0, 0, 0);
+		camera.updateProjectionMatrix();
+		invalidate();
+	}, [
+		camera,
+		checkpoint,
+		invalidate
+	]);
+	return null;
+}
+function Chromosome({ position, separated = false, color }) {
+	const [x, y, z] = position;
+	if (separated) return /* @__PURE__ */ jsx(SceneBond, {
+		from: [
+			x - .08,
+			y - .3,
+			z
+		],
+		to: [
+			x + .08,
+			y + .3,
+			z
+		],
+		color,
+		radius: .065
+	});
+	return /* @__PURE__ */ jsxs("group", {
+		position,
+		rotation: [
+			0,
+			0,
+			Math.PI / 4
+		],
+		children: [
+			/* @__PURE__ */ jsx(SceneBond, {
+				from: [
+					-.34,
+					0,
+					0
+				],
+				to: [
+					.34,
+					0,
+					0
+				],
+				color,
+				radius: .065
+			}),
+			/* @__PURE__ */ jsx(SceneBond, {
+				from: [
+					0,
+					-.34,
+					0
+				],
+				to: [
+					0,
+					.34,
+					0
+				],
+				color,
+				radius: .065
+			}),
+			/* @__PURE__ */ jsx(SceneAtom, {
+				radius: .09,
+				color,
+				detail: "low"
+			})
+		]
+	});
+}
+function Fibres({ positions, color }) {
+	return /* @__PURE__ */ jsxs("lineSegments", { children: [/* @__PURE__ */ jsx("bufferGeometry", { children: /* @__PURE__ */ jsx("bufferAttribute", {
+		attach: "attributes-position",
+		args: [useMemo(() => new Float32Array(positions.flatMap((position) => [
+			-2.45,
+			0,
+			0,
+			...position,
+			2.45,
+			0,
+			0,
+			...position
+		])), [positions]), 3]
+	}) }), /* @__PURE__ */ jsx("lineBasicMaterial", {
+		color,
+		transparent: true,
+		opacity: .42
+	})] });
+}
+function Pole({ side, palette, onAttach }) {
+	return /* @__PURE__ */ jsxs("group", {
+		position: [
+			side === "left" ? -2.45 : 2.45,
+			0,
+			0
+		],
+		onClick: (event) => {
+			event.stopPropagation();
+			onAttach(side);
+		},
+		children: [/* @__PURE__ */ jsx(SceneAtom, {
+			radius: .17,
+			color: palette.secondary
+		}), /* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+			.34,
+			18,
+			12
+		] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+			transparent: true,
+			opacity: 0,
+			depthWrite: false
+		})] })]
+	});
+}
+function TargetSister({ id, x, selected, color, onSelect }) {
+	return /* @__PURE__ */ jsxs("group", {
+		position: [
+			x,
+			.72,
+			.2
+		],
+		onClick: (event) => {
+			event.stopPropagation();
+			onSelect(id);
+		},
+		children: [
+			/* @__PURE__ */ jsx(SceneBond, {
+				from: [
+					-.05,
+					-.34,
+					0
+				],
+				to: [
+					.05,
+					.34,
+					0
+				],
+				color,
+				radius: selected ? .085 : .065
+			}),
+			/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				.24,
+				18,
+				12
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				transparent: true,
+				opacity: 0,
+				depthWrite: false
+			})] }),
+			selected && /* @__PURE__ */ jsxs("mesh", {
+				rotation: [
+					Math.PI / 2,
+					0,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("torusGeometry", { args: [
+					.2,
+					.025,
+					10,
+					28
+				] }), /* @__PURE__ */ jsx("meshBasicMaterial", { color })]
+			})
+		]
+	});
+}
+function MetaphaseChallenge({ attachments, selectedSister, onSelectSister, onAttach, palette }) {
+	const sisterPosition = {
+		a: [
+			-.11,
+			.72,
+			.2
+		],
+		b: [
+			.11,
+			.72,
+			.2
+		]
+	}, poleX = {
+		left: -2.45,
+		right: 2.45
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Pole, {
+			side: "left",
+			palette,
+			onAttach
+		}),
+		/* @__PURE__ */ jsx(Pole, {
+			side: "right",
+			palette,
+			onAttach
+		}),
+		["a", "b"].map((id) => attachments[id] && /* @__PURE__ */ jsx(SceneBond, {
+			from: [
+				poleX[attachments[id]],
+				0,
+				0
+			],
+			to: [...sisterPosition[id]],
+			color: attachments.a === attachments.b ? palette.warning : palette.secondary,
+			radius: .018
+		}, id)),
+		/* @__PURE__ */ jsx(TargetSister, {
+			id: "a",
+			x: -.11,
+			selected: selectedSister === "a",
+			color: palette.accent,
+			onSelect: onSelectSister
+		}),
+		/* @__PURE__ */ jsx(TargetSister, {
+			id: "b",
+			x: .11,
+			selected: selectedSister === "b",
+			color: palette.warning,
+			onSelect: onSelectSister
+		}),
+		[
+			[
+				.1,
+				.2,
+				-.1
+			],
+			[
+				-.1,
+				-.3,
+				.1
+			],
+			[
+				.1,
+				-.78,
+				-.1
+			]
+		].map((position, index) => /* @__PURE__ */ jsx(Chromosome, {
+			position,
+			color: index % 2 ? palette.warning : palette.accent
+		}, index))
+	] });
+}
+function MitosisExplorerThreeScene({ state, attachments, selectedSister, onSelectSister, onAttach }) {
+	const ref = useRef(null), palette = useScenePalette(ref);
+	const anaphasePositions = [
+		[
+			-1.65,
+			.9,
+			.15
+		],
+		[
+			-1.4,
+			.35,
+			-.1
+		],
+		[
+			-1.55,
+			-.35,
+			.1
+		],
+		[
+			-1.3,
+			-.9,
+			-.15
+		],
+		[
+			1.65,
+			.9,
+			-.15
+		],
+		[
+			1.4,
+			.35,
+			.1
+		],
+		[
+			1.55,
+			-.35,
+			-.1
+		],
+		[
+			1.3,
+			-.9,
+			.15
+		]
+	];
+	const condensedPositions = [
+		[
+			-.15,
+			.72,
+			.12
+		],
+		[
+			.15,
+			.22,
+			-.12
+		],
+		[
+			-.15,
+			-.28,
+			.1
+		],
+		[
+			.15,
+			-.78,
+			-.1
+		]
+	];
+	const fallback = /* @__PURE__ */ jsx(MitosisSemanticScene, {
+		state,
+		attachments
+	});
+	const overview = state.checkpoint === "cell";
+	const nuclearFocus = state.checkpoint === "nucleus";
+	const legend = overview ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-tone": "pair" }), "cell membrane"] }),
+		/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-tone": "central" }), "nucleus"] }),
+		/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-tone": "outer" }), "organelles"] })
+	] }) : nuclearFocus ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-tone": "central" }), "chromatin"] }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-tone": "pair" }), "nuclear envelope"] })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-tone": "central" }), "chromosome"] }),
+		/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-tone": "outer" }), "spindle"] }),
+		/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-tone": "pair" }), "nuclear envelope"] })
+	] });
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		children: /* @__PURE__ */ jsxs(ThreeSceneSurface, {
+			label: `${state.title}. ${state.summary}`,
+			fallback,
+			camera: { position: [
+				0,
+				0,
+				8
+			] },
+			legend,
+			inspector: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h3", { children: state.title }), /* @__PURE__ */ jsx("p", { children: state.summary })] }),
+			children: [
+				/* @__PURE__ */ jsx(CheckpointCamera, { checkpoint: state.checkpoint }),
+				/* @__PURE__ */ jsx(SceneEnvironment, {
+					palette,
+					ambient: 1.4,
+					keyIntensity: 1.5
+				}),
+				overview && /* @__PURE__ */ jsx(SceneContactShadow, {
+					y: -2.65,
+					radius: 3.15,
+					opacity: .2,
+					color: palette.foreground
+				}),
+				/* @__PURE__ */ jsxs(SceneOrbit, { children: [
+					overview && /* @__PURE__ */ jsx("group", {
+						scale: [
+							1.12,
+							.92,
+							1
+						],
+						children: /* @__PURE__ */ jsx(TranslucentShell, {
+							radius: 2.55,
+							color: palette.secondary,
+							opacity: .13
+						})
+					}),
+					/* @__PURE__ */ jsx(CellContext, {
+						palette,
+						visible: overview
+					}),
+					state.nuclearEnvelope !== "absent" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(TranslucentShell, {
+							radius: state.checkpoint === "cell" ? 1.05 : 1.65,
+							color: palette.accent,
+							opacity: state.nuclearEnvelope === "breaking-down" ? .2 : .34
+						}),
+						/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+							state.checkpoint === "cell" ? .9 : 1.4,
+							32,
+							20
+						] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+							color: palette.accent,
+							transparent: true,
+							opacity: .08,
+							depthWrite: false
+						})] }),
+						!state.chromosomesCondensed && /* @__PURE__ */ jsx(Chromatin, { palette })
+					] }),
+					state.checkpoint === "metaphase" && /* @__PURE__ */ jsx(MetaphaseChallenge, {
+						attachments,
+						selectedSister,
+						onSelectSister,
+						onAttach,
+						palette
+					}),
+					state.checkpoint === "anaphase" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(Pole, {
+							side: "left",
+							palette,
+							onAttach
+						}),
+						/* @__PURE__ */ jsx(Pole, {
+							side: "right",
+							palette,
+							onAttach
+						}),
+						/* @__PURE__ */ jsx(Fibres, {
+							positions: anaphasePositions,
+							color: palette.secondary
+						}),
+						anaphasePositions.map((position, index) => /* @__PURE__ */ jsx(Chromosome, {
+							position,
+							separated: true,
+							color: index % 2 ? palette.warning : palette.accent
+						}, index))
+					] }),
+					state.checkpoint === "prophase" && condensedPositions.map((position, index) => /* @__PURE__ */ jsx(Chromosome, {
+						position,
+						color: index % 2 ? palette.warning : palette.accent
+					}, index))
+				] })
+			]
+		})
+	});
+}
+function MitosisExplorerThreeLab(props = {}) {
+	return /* @__PURE__ */ jsx(MitosisExplorerLab, {
+		...props,
+		sceneRenderer: MitosisExplorerThreeScene
+	});
+}
+
+//#endregion
+export { MitosisExplorerThreeLab, MitosisExplorerThreeScene };