{"spec_id":"line-parametric","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// line-parametric: Parametric Curve Plot\n// Library: highcharts 12.6.0 | JavaScript 22.22.3\n// Quality: 85/100 | Created: 2026-06-20\n\n//# anyplot-orientation: square\n\nconst tok = window.ANYPLOT_TOKENS;\n\n// --- Color interpolation (Imprint gradient along curve = direction cue) ----\nfunction hexToRgb(hex) {\n  return [\n    parseInt(hex.slice(1, 3), 16),\n    parseInt(hex.slice(3, 5), 16),\n    parseInt(hex.slice(5, 7), 16)\n  ];\n}\n\nfunction lerpHex(hex1, hex2, f) {\n  const [r1, g1, b1] = hexToRgb(hex1);\n  const [r2, g2, b2] = hexToRgb(hex2);\n  return (\n    'rgb(' +\n    Math.round(r1 + (r2 - r1) * f) + ',' +\n    Math.round(g1 + (g2 - g1) * f) + ',' +\n    Math.round(b1 + (b2 - b1) * f) + ')'\n  );\n}\n\n// --- Parametric curve data -------------------------------------------------\nconst N = 900;\n\n// Lissajous figure: x = sin(3t), y = sin(2t), t ∈ [0, 2π]\n// Direction: Imprint sequential (green → blue)\nconst lissData = [];\nfor (let i = 0; i <= N; i++) {\n  const p = (i / N) * 2 * Math.PI;\n  lissData.push({\n    x: Math.sin(3 * p),\n    y: Math.sin(2 * p),\n    color: lerpHex('#009E73', '#4467A3', i / N)\n  });\n}\n\n// Archimedean spiral: x = (t/T)·cos(t), y = (t/T)·sin(t), T=4π, radius ∈ [0,1]\n// Direction: Imprint lavender → ochre\nconst spiralData = [];\nconst T_SPIRAL = 4 * Math.PI;\nfor (let i = 0; i <= N; i++) {\n  const p = (i / N) * T_SPIRAL;\n  spiralData.push({\n    x: (p / T_SPIRAL) * Math.cos(p),\n    y: (p / T_SPIRAL) * Math.sin(p),\n    color: lerpHex('#C475FD', '#BD8233', i / N)\n  });\n}\n\n// --- Chart -----------------------------------------------------------------\nHighcharts.chart('container', {\n  chart: {\n    type: 'scatter',\n    backgroundColor: 'transparent',\n    animation: false,\n    style: { fontFamily: 'inherit' },\n    margin: [90, 40, 90, 75],\n    plotBorderWidth: 0\n  },\n  credits: { enabled: false },\n  colors: tok.palette,\n\n  title: {\n    text: 'line-parametric · javascript · highcharts · anyplot.ai',\n    style: { color: tok.ink, fontSize: '22px', fontWeight: '600' }\n  },\n  subtitle: {\n    text: 'Color gradient encodes direction of traversal — bright = t start, deep = t end',\n    style: { color: tok.inkSoft, fontSize: '13px' }\n  },\n\n  xAxis: {\n    title: { text: 'x(t)', style: { color: tok.inkSoft, fontSize: '16px' } },\n    min: -1.25, max: 1.25,\n    tickInterval: 0.5,\n    lineColor: tok.inkSoft,\n    tickColor: tok.inkSoft,\n    gridLineColor: tok.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: tok.inkSoft, fontSize: '14px' } },\n    plotLines: [{\n      value: 0, color: tok.inkSoft, width: 0.8, zIndex: 2,\n      dashStyle: 'Dot'\n    }]\n  },\n\n  yAxis: {\n    title: { text: 'y(t)', style: { color: tok.inkSoft, fontSize: '16px' } },\n    min: -1.25, max: 1.25,\n    tickInterval: 0.5,\n    lineColor: tok.inkSoft,\n    tickColor: tok.inkSoft,\n    gridLineColor: tok.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: tok.inkSoft, fontSize: '14px' } },\n    plotLines: [{\n      value: 0, color: tok.inkSoft, width: 0.8, zIndex: 2,\n      dashStyle: 'Dot'\n    }]\n  },\n\n  legend: {\n    enabled: true,\n    itemStyle: { color: tok.inkSoft, fontSize: '13px' },\n    itemHoverStyle: { color: tok.ink },\n    symbolRadius: 4\n  },\n\n  plotOptions: {\n    series: { animation: false, turboThreshold: 0, enableMouseTracking: false },\n    scatter: {\n      marker: { radius: 3, symbol: 'circle', lineWidth: 0 },\n      states: { hover: { enabled: false } }\n    }\n  },\n\n  series: [\n    // --- Lissajous figure (3:2) ---\n    {\n      name: 'Lissajous 3:2   x = sin(3t),  y = sin(2t)',\n      type: 'scatter',\n      data: lissData,\n      color: '#009E73',\n      showInLegend: true\n    },\n    // --- Archimedean spiral ---\n    {\n      name: 'Spiral   x = (t/4π)·cos(t),  y = (t/4π)·sin(t)',\n      type: 'scatter',\n      data: spiralData,\n      color: '#C475FD',\n      showInLegend: true\n    },\n    // --- Start marker (both curves begin at origin) ---\n    {\n      name: 'Start t = 0',\n      type: 'scatter',\n      data: [{ x: 0.0, y: 0.0 }],\n      color: tok.inkSoft,\n      marker: { radius: 7, symbol: 'circle', lineWidth: 2, lineColor: tok.ink },\n      dataLabels: {\n        enabled: true,\n        formatter: function () { return 't = 0'; },\n        style: { color: tok.inkSoft, fontSize: '13px', fontWeight: '400', textOutline: 'none' },\n        backgroundColor: tok.elevatedBg,\n        borderRadius: 2,\n        padding: 3,\n        x: 18, y: -20\n      },\n      showInLegend: false\n    },\n    // --- Spiral end marker at (1, 0) ---\n    {\n      name: 'Spiral end t = 4π',\n      type: 'scatter',\n      data: [{ x: 1.0, y: 0.0 }],\n      color: '#BD8233',\n      marker: { radius: 7, symbol: 'diamond', lineWidth: 2, lineColor: tok.ink },\n      dataLabels: {\n        enabled: true,\n        formatter: function () { return 't = 4π'; },\n        style: { color: tok.inkSoft, fontSize: '13px', fontWeight: '400', textOutline: 'none' },\n        x: 5, y: -18\n      },\n      showInLegend: false\n    }\n  ]\n});\n"}