'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const BASE_PAIRS_COUNT = 24; const HELIX_RADIUS = 100; const HELIX_HEIGHT = 460; const ROTATION_SPEED = 0.02; export const DnaHelixAnimation = () => { const [rotation, setRotation] = useState(0); const requestRef = useRef(); // Animation Loop const animate = () => { setRotation(prev => prev + ROTATION_SPEED); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // Generate 3D points and project them const renderData = useMemo(() => { const elements = []; const centerX = VIEW_WIDTH / 2; const centerY = VIEW_HEIGHT / 2; const startY = (VIEW_HEIGHT - HELIX_HEIGHT) / 2; const stepY = HELIX_HEIGHT / BASE_PAIRS_COUNT; // Helper to calculate properties based on Z-depth (-1 to 1) const getDepthProps = (z: number) => { // z ranges from -1 (back) to 1 (front) const scale = 0.6 + (z + 1) * 0.4; // Scale: 0.6x to 1.4x const opacity = 0.3 + (z + 1) * 0.35; // Opacity: 0.3 to 1.0 const strokeWidth = 2 + (z + 1) * 2.5; // Thickness: 2px to 7px return { scale, opacity, strokeWidth, z }; }; // Pre-calculate positions for all base pairs to generate segments const points = []; for (let i = 0; i <= BASE_PAIRS_COUNT; i++) { const y = startY + i * stepY; // 2.5 full twists (5 PI) distributed over the height const angleBase = (i / BASE_PAIRS_COUNT) * Math.PI * 5; const currentAngle = angleBase + rotation; // Strand 1 (Blue) const x1 = Math.cos(currentAngle) * HELIX_RADIUS; const z1 = Math.sin(currentAngle); // Normalized Z (-1 to 1) // Strand 2 (Red) - Offset by PI (180 degrees) const x2 = Math.cos(currentAngle + Math.PI) * HELIX_RADIUS; const z2 = Math.sin(currentAngle + Math.PI); points.push({ x1, z1, x2, z2, y }); } // Create renderable elements (Rungs, Nodes, Backbone Segments) for (let i = 0; i < points.length; i++) { const p = points[i]; const centerXProj = centerX; // 1. Rungs (Base Pairs) - connecting the two strands // The z-depth of the rung is the average of the two strands const rungZ = (p.z1 + p.z2) / 2; const rungProps = getDepthProps(rungZ); elements.push({ type: 'rung', z: rungZ, // Rungs are generally in the "middle" key: `rung-${i}`, props: { x1: centerXProj + p.x1, y1: p.y, x2: centerXProj + p.x2, y2: p.y, opacity: rungProps.opacity, strokeWidth: rungProps.strokeWidth * 0.8, // Rungs slightly thinner } }); // 2. Backbone Segments (connecting i to i+1) if (i < points.length - 1) { const nextP = points[i + 1]; // Strand 1 Segment (Blue) const seg1Z = (p.z1 + nextP.z1) / 2; const seg1Props = getDepthProps(seg1Z); elements.push({ type: 'segment', color: '#3b82f6', // Blue z: seg1Z, key: `seg1-${i}`, props: { x1: centerXProj + p.x1, y1: p.y, x2: centerXProj + nextP.x1, y2: nextP.y, strokeWidth: seg1Props.strokeWidth, opacity: seg1Props.opacity } }); // Strand 2 Segment (Red) const seg2Z = (p.z2 + nextP.z2) / 2; const seg2Props = getDepthProps(seg2Z); elements.push({ type: 'segment', color: '#ef4444', // Red z: seg2Z, key: `seg2-${i}`, props: { x1: centerXProj + p.x2, y1: p.y, x2: centerXProj + nextP.x2, y2: nextP.y, strokeWidth: seg2Props.strokeWidth, opacity: seg2Props.opacity } }); } // 3. Nodes (The actual atoms/points) // Strand 1 Node const n1Props = getDepthProps(p.z1); elements.push({ type: 'node', color: '#60a5fa', // Lighter Blue z: p.z1, key: `node1-${i}`, props: { cx: centerXProj + p.x1, cy: p.y, r: 6 * n1Props.scale, opacity: n1Props.opacity } }); // Strand 2 Node const n2Props = getDepthProps(p.z2); elements.push({ type: 'node', color: '#f87171', // Lighter Red z: p.z2, key: `node2-${i}`, props: { cx: centerXProj + p.x2, cy: p.y, r: 6 * n2Props.scale, opacity: n2Props.opacity } }); } // Sort by Z (Painter's Algorithm) - Draw back items first return elements.sort((a, b) => a.z - b.z); }, [rotation]); return (

); };