@jjlmoya/utils-science 1.21.0 → 1.22.0

package/src/tool/lorenz-attractor/i18n/zh.ts

@@ -0,0 +1,113 @@
+const slug = 'lorenz-attractor';
+const title = '洛伦兹吸引子混沌模拟器：3D蝴蝶效应';
+const description = '通过这个交互式3D洛伦兹吸引子模拟探索混沌理论。可视化蝴蝶效应。';
+
+const howTo = [
+  {
+    "name": "旋转画布",
+    "text": "在3D视口上点击并拖动以旋转吸引子。"
+  },
+  {
+    "name": "调节滑块",
+    "text": "修改Sigma、Rho和Beta参数以观察混沌的产生。"
+  },
+  {
+    "name": "观察发散",
+    "text": "观察两条轨迹之间的距离是如何呈指数级增长的。"
+  },
+  {
+    "name": "暂停与重置",
+    "text": "使用控制按钮暂停模拟或重置参数。"
+  }
+];
+
+const faq = [
+  {
+    "question": "什么是洛伦兹吸引子？",
+    "answer": "洛伦兹吸引子是洛伦兹方程组的一组混沌解。"
+  },
+  {
+    "question": "什么是蝴蝶效应？",
+    "answer": "非线性系统中对初始条件的敏感依赖性，微小的初始差异会导致巨大的长期差异。"
+  },
+  {
+    "question": "参数代表什么？",
+    "answer": "Sigma代表普朗特数，Rho代表瑞利数，Beta与物理尺寸几何比相关。"
+  }
+];
+
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent } from '../../../types';
+
+export const content: ToolLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+  "copied": "已复制",
+  "noHistory": "无历史记录",
+  "load": "加载",
+  "delete": "删除",
+  "title": "洛伦兹吸引子",
+  "subTitle": "决定论混沌",
+  "parameterControls": "系统参数",
+  "simulationSpeed": "速度 (dt)",
+  "initialPerturbation": "初始微扰 (dx)",
+  "trajectories": "轨迹",
+  "distance": "发散距离",
+  "exponentialGrowth": "指数发散",
+  "resetDefault": "Reset",
+  "clearPath": "Clear",
+  "play": "Resume",
+  "pause": "Pause",
+  "coords": "坐标",
+  "divergenceExplanation": "发散图显示了两条轨迹之间的欧几里得距离随时间的变化。"
+},
+  seo: [
+  {
+    "type": "title",
+    "text": "决定论混沌：理解洛伦兹方程",
+    "level": 2
+  },
+  {
+    "type": "paragraph",
+    "html": "洛伦兹方程组是非线性动力学和混沌理论研究中的里程碑。"
+  }
+],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: title,
+      description: description,
+      applicationCategory: 'ScientificApplication',
+      operatingSystem: 'Any',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: {
+          '@type': 'Answer',
+          text: item.answer,
+        },
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: title,
+      step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        stepValue: step.name,
+        text: step.text,
+      })),
+    },
+  ],
+};

package/src/tool/lorenz-attractor/index.ts

@@ -0,0 +1,9 @@
+import { lorenzAttractor } from './entry';
+import type { ToolDefinition } from '../../types';
+export * from './entry';
+export const LORENZ_ATTRACTOR_TOOL: ToolDefinition = {
+  entry: lorenzAttractor,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/lorenz-attractor/logic/LorenzEngine.ts

@@ -0,0 +1,32 @@
+export interface Point3D {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export interface LorenzParams {
+  sigma: number;
+  rho: number;
+  beta: number;
+}
+
+export class LorenzEngine {
+  static nextPoint(point: Point3D, params: LorenzParams, dt: number): Point3D {
+    const dx = params.sigma * (point.y - point.x) * dt;
+    const dy = (point.x * (params.rho - point.z) - point.y) * dt;
+    const dz = (point.x * point.y - params.beta * point.z) * dt;
+
+    return {
+      x: point.x + dx,
+      y: point.y + dy,
+      z: point.z + dz,
+    };
+  }
+
+  static getDistance(p1: Point3D, p2: Point3D): number {
+    const dx = p1.x - p2.x;
+    const dy = p1.y - p2.y;
+    const dz = p1.z - p2.z;
+    return Math.sqrt(dx * dx + dy * dy + dz * dz);
+  }
+}

package/src/tool/lorenz-attractor/lorenz-attractor.css

@@ -0,0 +1,335 @@
+:root {
+  --lorenz-primary: #2563eb;
+  --lorenz-secondary: #7c3aed;
+  --lorenz-accent: #c084fc;
+  --lorenz-t1: #00f0ff;
+  --lorenz-t2: #ff007f;
+  --lorenz-bg-card: #fff;
+  --lorenz-bg-canvas: transparent;
+  --lorenz-border: #e2e8f0;
+  --lorenz-text: #0f172a;
+  --lorenz-text-muted: #64748b;
+  --lorenz-slider-track: #e2e8f0;
+  --lorenz-shadow-color: rgba(0, 0, 0, 0.04);
+  --lorenz-font-mono: consolas, monaco, 'Courier New', monospace;
+}
+
+.theme-dark {
+  --lorenz-primary: #3b82f6;
+  --lorenz-secondary: #8b5cf6;
+  --lorenz-accent: #a78bfa;
+  --lorenz-t1: #00f0ff;
+  --lorenz-t2: #ff007f;
+  --lorenz-bg-card: rgba(31, 41, 55, 0.45);
+  --lorenz-bg-canvas: transparent;
+  --lorenz-border: rgba(255, 255, 255, 0.06);
+  --lorenz-text: #f3f4f6;
+  --lorenz-text-muted: #9ca3af;
+  --lorenz-slider-track: #374151;
+  --lorenz-shadow-color: rgba(255, 255, 255, 0.03);
+}
+
+.lorenz-app {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  color: var(--lorenz-text);
+  box-sizing: border-box;
+}
+
+.lorenz-card {
+  background: var(--lorenz-bg-card);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--lorenz-border);
+  border-radius: 24px;
+  padding: 24px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
+}
+
+.theme-dark .lorenz-card {
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+}
+
+.lorenz-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+
+@media (min-width: 992px) {
+  .lorenz-grid {
+    grid-template-columns: 1.5fr 1fr;
+  }
+}
+
+.lorenz-canvas-container {
+  position: relative;
+  background: var(--lorenz-bg-canvas);
+  border-radius: 20px;
+  overflow: hidden;
+  aspect-ratio: 4 / 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.lorenz-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+}
+
+.lorenz-canvas:active {
+  cursor: grabbing;
+}
+
+.lorenz-controls-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  justify-content: space-between;
+}
+
+.lorenz-sliders-block {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.lorenz-slider-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.lorenz-slider-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--lorenz-text-muted);
+}
+
+.lorenz-slider-val {
+  color: var(--lorenz-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.lorenz-slider {
+  width: 100%;
+  height: 20px;
+  background: transparent;
+  outline: none;
+  -webkit-appearance: none;
+  margin: 0;
+  cursor: pointer;
+}
+
+.lorenz-slider::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 2px;
+  background: var(--lorenz-slider-track);
+  border-radius: 1px;
+}
+
+.lorenz-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 2px;
+  height: 12px;
+  background: var(--lorenz-primary);
+  margin-top: -5px;
+  border-radius: 0;
+  transition: transform 0.1s ease;
+}
+
+.lorenz-slider::-moz-range-track {
+  width: 100%;
+  height: 2px;
+  background: var(--lorenz-slider-track);
+  border-radius: 1px;
+}
+
+.lorenz-slider::-moz-range-thumb {
+  width: 2px;
+  height: 12px;
+  background: var(--lorenz-primary);
+  border-radius: 0;
+  border: none;
+}
+
+.lorenz-button-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
+}
+
+.lorenz-btn {
+  padding: 10px 0;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+  background: transparent;
+  color: var(--lorenz-text-muted);
+  border: 1px solid var(--lorenz-border);
+}
+
+.lorenz-btn:hover {
+  color: var(--lorenz-text);
+  background: rgba(120, 120, 120, 0.08);
+}
+
+.lorenz-btn-active-state {
+  border-color: var(--lorenz-primary);
+  color: var(--lorenz-primary);
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
+}
+
+.lorenz-btn-active-state:hover {
+  background: rgba(59, 130, 246, 0.08);
+  color: var(--lorenz-primary);
+}
+
+.lorenz-stats-block {
+  border-top: 1px solid var(--lorenz-border);
+  padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.lorenz-coords-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.lorenz-coord-item {
+  font-size: 0.72rem;
+  color: var(--lorenz-text-muted);
+}
+
+.lorenz-coord-val {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.lorenz-divergence-display {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.lorenz-divergence-title {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--lorenz-text-muted);
+}
+
+.lorenz-divergence-main {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.lorenz-divergence-num {
+  font-size: 2.8rem;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--lorenz-accent);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.05em;
+}
+
+.lorenz-divergence-delta {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--lorenz-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.lorenz-chart-block {
+  border-top: 1px solid var(--lorenz-border);
+  padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lorenz-chart-header {
+  display: flex;
+  align-items: center;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--lorenz-text-muted);
+}
+
+.lorenz-tooltip-container {
+  position: relative;
+  display: inline-flex;
+  margin-left: 6px;
+  cursor: help;
+}
+
+.lorenz-info-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1px solid var(--lorenz-text-muted);
+  font-size: 9px;
+  color: var(--lorenz-text-muted);
+  font-weight: bold;
+}
+
+.lorenz-tooltip-text {
+  visibility: hidden;
+  position: absolute;
+  bottom: 130%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--lorenz-text);
+  color: var(--lorenz-bg-card);
+  text-align: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 0.7rem;
+  line-height: 1.3;
+  width: 200px;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.lorenz-tooltip-container:hover .lorenz-tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+.lorenz-chart-canvas-wrapper {
+  position: relative;
+  width: 100%;
+  height: 80px;
+}
+
+.lorenz-chart-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/src/tool/lorenz-attractor/renderer.ts

@@ -0,0 +1,136 @@
+import type { Point3D } from './logic/LorenzEngine';
+
+export interface RenderContext {
+  ctx: CanvasRenderingContext2D;
+  w: number;
+  h: number;
+  rx: number;
+  ry: number;
+}
+
+export function getCssVariable(name: string, fallback: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+
+export function project(p: Point3D, rx: number, ry: number, dims: { w: number; h: number }): { x: number; y: number } {
+  const scale = Math.min(dims.w, dims.h) * 0.0135;
+  const cx = dims.w / 2;
+  const cy = dims.h / 2;
+  const cosX = Math.cos(rx);
+  const sinX = Math.sin(rx);
+  const cosY = Math.cos(ry);
+  const sinY = Math.sin(ry);
+  const px = p.x;
+  const py = p.y;
+  const pz = p.z - 25;
+  const x1 = px * cosY - pz * sinY;
+  const z1 = px * sinY + pz * cosY;
+  const y2 = py * cosX - z1 * sinX;
+  return {
+    x: cx + x1 * scale,
+    y: cy - y2 * scale,
+  };
+}
+
+function drawGridLine(ctx: CanvasRenderingContext2D, p1: Point3D, p2: Point3D, opts: { rx: number; ry: number; w: number; h: number }) {
+  const dist1 = Math.sqrt(p1.x * p1.x + p1.y * p1.y);
+  const dist2 = Math.sqrt(p2.x * p2.x + p2.y * p2.y);
+  const avgDist = (dist1 + dist2) / 2;
+  const alpha = Math.max(0, 0.22 - avgDist / 120);
+  if (alpha <= 0) return;
+  ctx.strokeStyle = `rgba(100, 116, 139, ${alpha})`;
+  ctx.beginPath();
+  const pt1 = project(p1, opts.rx, opts.ry, opts);
+  const pt2 = project(p2, opts.rx, opts.ry, opts);
+  ctx.moveTo(pt1.x, pt1.y);
+  ctx.lineTo(pt2.x, pt2.y);
+  ctx.stroke();
+}
+
+export function drawGrid(config: RenderContext) {
+  const step = 8;
+  const limit = 40;
+  const opts = { rx: config.rx, ry: config.ry, w: config.w, h: config.h };
+  config.ctx.lineWidth = 1 * window.devicePixelRatio;
+  for (let x = -limit; x <= limit; x += step) {
+    for (let y = -limit; y < limit; y += step) {
+      drawGridLine(config.ctx, { x, y, z: 0 }, { x, y: y + step, z: 0 }, opts);
+    }
+  }
+  for (let y = -limit; y <= limit; y += step) {
+    for (let x = -limit; x < limit; x += step) {
+      drawGridLine(config.ctx, { x, y, z: 0 }, { x: x + step, y, z: 0 }, opts);
+    }
+  }
+}
+
+export function drawShadowPath(config: RenderContext, history: Point3D[]) {
+  if (history.length < 2) return;
+  const { ctx, w, h, rx, ry } = config;
+  const dims = { w, h };
+  ctx.strokeStyle = getCssVariable('--lorenz-shadow-color', 'rgba(0, 0, 0, 0.05)');
+  ctx.lineWidth = 1.5 * window.devicePixelRatio;
+  ctx.beginPath();
+  const p0 = project({ x: history[0].x, y: history[0].y, z: 0 }, rx, ry, dims);
+  ctx.moveTo(p0.x, p0.y);
+  for (let i = 1; i < history.length; i++) {
+    const p = project({ x: history[i].x, y: history[i].y, z: 0 }, rx, ry, dims);
+    ctx.lineTo(p.x, p.y);
+  }
+  ctx.stroke();
+}
+
+export function drawPath(config: RenderContext, history: Point3D[], color: string) {
+  if (history.length < 2) return;
+  const { ctx, w, h, rx, ry } = config;
+  const dims = { w, h };
+  ctx.strokeStyle = color;
+  ctx.beginPath();
+  const p0 = project(history[0], rx, ry, dims);
+  ctx.moveTo(p0.x, p0.y);
+  for (let i = 1; i < history.length; i++) {
+    const p = project(history[i], rx, ry, dims);
+    ctx.lineTo(p.x, p.y);
+  }
+  ctx.stroke();
+}
+
+export function drawHead(config: RenderContext, p: Point3D, color: string) {
+  const { ctx, w, h, rx, ry } = config;
+  const pt = project(p, rx, ry, { w, h });
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.arc(pt.x, pt.y, 5 * window.devicePixelRatio, 0, Math.PI * 2);
+  ctx.fill();
+}
+
+export function drawAxes(config: RenderContext) {
+  const { ctx, h, rx, ry } = config;
+  const ox = 50 * window.devicePixelRatio;
+  const oy = h - 50 * window.devicePixelRatio;
+  const axisLen = 20 * window.devicePixelRatio;
+  const cosX = Math.cos(rx);
+  const sinX = Math.sin(rx);
+  const cosY = Math.cos(ry);
+  const sinY = Math.sin(ry);
+  const projectVector = (vx: number, vy: number, vz: number) => {
+    const x1 = vx * cosY - vz * sinY;
+    const z1 = vx * sinY + vz * cosY;
+    const y2 = vy * cosX - z1 * sinX;
+    return { dx: x1 * axisLen, dy: -y2 * axisLen };
+  };
+  ctx.lineWidth = 1 * window.devicePixelRatio;
+  ctx.font = `${Math.round(9 * window.devicePixelRatio)}px var(--lorenz-font-mono)`;
+  const drawAxisLine = (ax: { dx: number; dy: number }, label: string, color: string) => {
+    ctx.strokeStyle = color;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ox, oy);
+    ctx.lineTo(ox + ax.dx, oy + ax.dy);
+    ctx.stroke();
+    ctx.fillText(label, ox + ax.dx + 4, oy + ax.dy + 3);
+  };
+  drawAxisLine(projectVector(1, 0, 0), 'X', 'rgba(239, 68, 68, 0.4)');
+  drawAxisLine(projectVector(0, 1, 0), 'Y', 'rgba(34, 197, 94, 0.4)');
+  drawAxisLine(projectVector(0, 0, 1), 'Z', 'rgba(59, 130, 246, 0.4)');
+}