@brandonlukas/luminar 0.2.0 → 0.2.2

package/src/main.ts

@@ -1,70 +1,29 @@
 import './style.css'
-import {
-  AdditiveBlending,
-  BufferAttribute,
-  BufferGeometry,
-  Color,
-  OrthographicCamera,
-  Points,
-  PointsMaterial,
-  Scene,
-  Vector2,
-  WebGLRenderer,
-} from 'three'
+import { AdditiveBlending, BufferGeometry, Color, OrthographicCamera, Points, PointsMaterial, Scene, Vector2, WebGLRenderer } from 'three'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
 import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'
-
-type VectorSample = { x: number; y: number }
-type VectorDatum = { x: number; y: number; dx: number; dy: number }
-type SliderHandle = { input: HTMLInputElement; valueTag: HTMLSpanElement }
-type ColorPreset = { key: string; label: string; rgb: [number, number, number] }
-
-const WORLD_EXTENT = 1.25
-const FLOW_SCALE = 0.85
-const SPEED_TO_GLOW = 2.6
-const JITTER = 0.015
-const FIELD_BORDER_MIN = 0.01
-const FIELD_BORDER_MAX = 0.1
-const COLOR_PRESETS: ColorPreset[] = [
-  { key: 'luminous-violet', label: 'Luminous violet', rgb: [0.6, 0.25, 0.9] }, // current color
-  { key: 'pure-white', label: 'Pure white', rgb: [1, 1, 1] },
-  { key: 'neon-cyan', label: 'Neon cyan', rgb: [0.25, 0.95, 1] },
-  { key: 'electric-lime', label: 'Electric lime', rgb: [0.75, 1, 0.25] },
-  { key: 'solar-flare', label: 'Solar flare', rgb: [1, 0.55, 0.15] },
-  { key: 'aurora-mint', label: 'Aurora mint', rgb: [0.4, 1, 0.85] },
-  { key: 'magenta-nova', label: 'Magenta nova', rgb: [0.95, 0.2, 0.7] },
-  { key: 'glacier-blue', label: 'Glacier blue', rgb: [0.35, 0.75, 1] },
-  { key: 'sunrise-coral', label: 'Sunrise coral', rgb: [1, 0.6, 0.5] },
-  { key: 'ember-gold', label: 'Ember gold', rgb: [1, 0.8, 0.2] },
-]
-const DEFAULT_COLOR_PRESET = 'luminous-violet'
-const defaultParams = {
-  size: 2,
-  bloomStrength: 1.2,
-  bloomRadius: 0.35,
-  lifeMin: 0.5,
-  lifeMax: 1.4,
-  fieldValidDistance: 0.03,
-  speed: 3.0,
-  particleCount: 4200,
-  colorPreset: DEFAULT_COLOR_PRESET,
-}
-const params = { ...defaultParams }
-
-let positions = new Float32Array(params.particleCount * 3)
-let colors = new Float32Array(params.particleCount * 3)
-let lifetimes = new Float32Array(params.particleCount)
+import { AfterimagePass } from 'three/examples/jsm/postprocessing/AfterimagePass.js'
+import { ParticleSystem } from './modules/particle-system'
+import { FieldLoader } from './modules/field-loader'
+import { ControlPanel } from './modules/controls'
+import { RecordingManager } from './modules/recording'
+import { defaultParams, COLOR_PRESETS } from './lib/constants'
+import { parseCsv } from './lib/csv-parser'
+import type { ParticleParams } from './lib/types'
 
 const container = document.querySelector<HTMLDivElement>('#app')
 if (!container) throw new Error('Missing #app container')
 
-const app = container
+const params: ParticleParams = { ...defaultParams }
 
-app.innerHTML = ''
+// Camera framing constant
+const VIEW_SIZE = 1.8
+
+// Scene setup
 const renderer = new WebGLRenderer({ antialias: false, alpha: true })
 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-app.appendChild(renderer.domElement)
+container.appendChild(renderer.domElement)
 
 const scene = new Scene()
 scene.background = new Color(0x02040a)
@@ -75,14 +34,16 @@ camera.position.z = 2
 const composer = new EffectComposer(renderer)
 const renderPass = new RenderPass(scene, camera)
 const bloomPass = new UnrealBloomPass(new Vector2(1, 1), params.bloomStrength, 0.82, params.bloomRadius)
-updateBloom()
+const afterimagePass = new AfterimagePass(params.trailDecay)
 composer.addPass(renderPass)
 composer.addPass(bloomPass)
+composer.addPass(afterimagePass)
+afterimagePass.enabled = params.trailsEnabled
+afterimagePass.uniforms['damp'].value = params.trailDecay
 
-const geometry = new BufferGeometry()
-geometry.setAttribute('position', new BufferAttribute(positions, 3))
-geometry.setAttribute('color', new BufferAttribute(colors, 3))
-
+// Particle geometry and material
+const geometryA = new BufferGeometry()
+const geometryB = new BufferGeometry()
 const material = new PointsMaterial({
   size: params.size,
   sizeAttenuation: true,
@@ -92,686 +53,275 @@ const material = new PointsMaterial({
   blending: AdditiveBlending,
   depthWrite: false,
 })
-material.onBeforeCompile = (shader) => {
-  // Make points circular with a smooth falloff toward the edges
-  shader.fragmentShader = shader.fragmentShader.replace(
-    'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
-    `float d = length(gl_PointCoord - 0.5);
-     if (d > 0.5) discard;
-     float alpha = diffuseColor.a * smoothstep(0.5, 0.45, d);
-     gl_FragColor = vec4(outgoingLight, alpha);`,
-  )
-}
-
-const particles = new Points(geometry, material)
-scene.add(particles)
-
-let fieldData: VectorDatum[] | null = null
-let fieldStatusEl: HTMLElement | null = null
-let fieldTransform = { scale: 1, offsetX: 0, offsetY: 0 }
-let fieldDistControlHandle: SliderHandle | null = null
-
-let mediaRecorder: MediaRecorder | null = null
-let recordedChunks: Blob[] = []
-let isRecording = false
-let recordingStartTime = 0
-let recordingDuration = 5 // seconds
-let recordingResolution: 'current' | '1080p' | '1440p' | '4k' = 'current'
-let recordButton: HTMLButtonElement | null = null
-let recordStatus: HTMLDivElement | null = null
-let originalCanvasSize: { width: number; height: number } | null = null
-
-initParticles()
-resize()
-window.addEventListener('resize', resize)
-let lastTime = performance.now()
-animate(0)
-createOverlay()
-createControls()
-reseedLifetimes()
-loadVectorField()
-
-function initParticles() {
-  for (let i = 0; i < params.particleCount; i += 1) {
-    resetParticle(i)
-  }
-  geometry.attributes.position.needsUpdate = true
-  geometry.attributes.color.needsUpdate = true
-}
-
-function resetParticle(i: number) {
-  const i3 = i * 3
-  const palette = getActiveColorPreset()
-
-  // If field data exists, spawn particles near random data points (within valid region)
-  if (fieldData && fieldData.length > 0) {
-    const randomPoint = fieldData[Math.floor(Math.random() * fieldData.length)]
-    const jitterRange = params.fieldValidDistance * 0.3
-    const dataX = randomPoint.x + randomRange(-jitterRange, jitterRange) / fieldTransform.scale
-    const dataY = randomPoint.y + randomRange(-jitterRange, jitterRange) / fieldTransform.scale
-    positions[i3] = dataX * fieldTransform.scale + fieldTransform.offsetX
-    positions[i3 + 1] = dataY * fieldTransform.scale + fieldTransform.offsetY
-  } else {
-    // Fallback: uniform spawning across entire world
-    positions[i3] = randomRange(-WORLD_EXTENT, WORLD_EXTENT)
-    positions[i3 + 1] = randomRange(-WORLD_EXTENT, WORLD_EXTENT)
-  }
-  positions[i3 + 2] = 0
-
-  lifetimes[i] = randomRange(params.lifeMin, params.lifeMax)
-
-  const glow = 0.4 + Math.random() * 0.2
-  applyColor(i3, glow, palette, true)
-}
 
-function sampleField(x: number, y: number, _time: number): VectorSample | null {
-  if (fieldData && fieldData.length > 0) {
-    // Transform particle position to data coordinates
-    const dataX = (x - fieldTransform.offsetX) / fieldTransform.scale
-    const dataY = (y - fieldTransform.offsetY) / fieldTransform.scale
-
-    let nearest = fieldData[0]
-    let bestDist = Number.MAX_VALUE
-    for (let i = 0; i < fieldData.length; i += 1) {
-      const d = fieldData[i]
-      const dx = d.x - dataX
-      const dy = d.y - dataY
-      const dist = dx * dx + dy * dy
-      if (dist < bestDist) {
-        bestDist = dist
-        nearest = d
-      }
-    }
-    const threshold = params.fieldValidDistance / fieldTransform.scale
-    if (Math.sqrt(bestDist) > threshold) {
-      return null
-    }
-    // Scale the vector components by the same factor
-    return { x: nearest.dx * fieldTransform.scale, y: nearest.dy * fieldTransform.scale }
-  }
-
-  // Fallback: uniform rightward flow
-  return { x: 1, y: 0 }
-}
+const particlesA = new Points(geometryA, material)
+const particlesB = new Points(geometryB, material)
+scene.add(particlesA)
+scene.add(particlesB)
 
-function animate(timestamp: number) {
-  const now = timestamp || performance.now()
-  const dt = Math.min(0.033, (now - lastTime) / 1000)
-  lastTime = now
-  const time = now * 0.001
-  const palette = getActiveColorPreset()
-
-  for (let i = 0; i < params.particleCount; i += 1) {
-    const i3 = i * 3
-    let x = positions[i3]
-    let y = positions[i3 + 1]
-
-    const v = sampleField(x, y, time)
-    if (!v) {
-      resetParticle(i)
-      continue
-    }
+// Initialize modules
+const particleSystemA = new ParticleSystem(geometryA, params)
+const particleSystemB = new ParticleSystem(geometryB, params)
+particleSystemA.init()
+particleSystemB.init()
 
-    x += (v.x * FLOW_SCALE * params.speed + randomRange(-JITTER, JITTER)) * dt
-    y += (v.y * FLOW_SCALE * params.speed + randomRange(-JITTER, JITTER)) * dt
-
-    const speed = Math.hypot(v.x, v.y)
-    const glow = Math.min(1, speed * SPEED_TO_GLOW)
-
-    applyColor(i3, glow, palette, false)
-
-    lifetimes[i] -= dt
-
-    if (lifetimes[i] <= 0 || Math.abs(x) > WORLD_EXTENT || Math.abs(y) > WORLD_EXTENT) {
-      resetParticle(i)
-    } else {
-      positions[i3] = x
-      positions[i3 + 1] = y
-    }
-  }
-
-  geometry.attributes.position.needsUpdate = true
-  geometry.attributes.color.needsUpdate = true
-
-  composer.render()
+let hasFieldA = false
+let hasFieldB = false
 
-  if (isRecording) {
-    const elapsed = (performance.now() - recordingStartTime) / 1000
-    updateRecordingStatus(elapsed)
-    if (elapsed >= recordingDuration) {
-      stopRecording()
-    }
-  }
-
-  requestAnimationFrame(animate)
-}
+const fieldLoaderA = new FieldLoader((data, transform) => {
+  particleSystemA.setFieldData(data, transform)
+  hasFieldA = particleSystemA.hasFieldData()
+  updateLayout()
+})
 
-function resize() {
-  const width = window.innerWidth
-  const height = window.innerHeight
-  const aspect = width / height
-  const viewSize = 1.6
+const fieldLoaderB = new FieldLoader((data, transform) => {
+  particleSystemB.setFieldData(data, transform)
+  hasFieldB = particleSystemB.hasFieldData()
+  updateLayout()
+})
 
-  camera.left = -viewSize * aspect
-  camera.right = viewSize * aspect
-  camera.top = viewSize
-  camera.bottom = -viewSize
-  camera.updateProjectionMatrix()
+const controlPanel = new ControlPanel(container, params, material, bloomPass, {
+  onParticleCountChange: (count) => {
+    particleSystemA.resizeBuffers(count)
+    particleSystemB.resizeBuffers(count)
+  },
+  onLifetimeChange: () => {
+    particleSystemA.reseedLifetimes()
+    particleSystemB.reseedLifetimes()
+  },
+  onTrailToggle: (enabled) => updateTrails(enabled, params.trailDecay),
+  onTrailDecayChange: (value) => updateTrails(params.trailsEnabled, value),
+  onClearFieldA: () => clearField('left'),
+  onClearFieldB: () => clearField('right'),
+  onColorChange: () => updateColorPresetCache(),
+})
 
-  renderer.setSize(width, height, false)
-  composer.setSize(width, height)
-  bloomPass.setSize(width, height)
+function updateColorPresetCache() {
+  cachedPresetA = COLOR_PRESETS.find((p) => p.key === params.colorPresetA) ?? COLOR_PRESETS[0]
+  cachedPresetB = COLOR_PRESETS.find((p) => p.key === params.colorPresetB) ?? COLOR_PRESETS[0]
 }
 
-function randomRange(min: number, max: number) {
-  return min + Math.random() * (max - min)
-}
+const recordingManager = new RecordingManager(renderer, composer, bloomPass, resize)
 
+// HUD overlay
 function createOverlay() {
+  if (!container) return
   const hud = document.createElement('div')
   hud.className = 'hud'
-  hud.innerHTML = `<div class="title">luminar</div><div class="subtitle">2D vector field bloom study</div><div class="status">Field: <span id="field-status">default (built-in)</span></div>`
-  app.appendChild(hud)
-  fieldStatusEl = document.getElementById('field-status')
+  hud.innerHTML = `<div class="title">luminar</div><div class="subtitle">2D vector field bloom study</div><div class="status">Field A: <span id="field-status-a">default (built-in)</span> · Field B: <span id="field-status-b">default (built-in)</span></div>`
+  container.appendChild(hud)
+  fieldLoaderA.setStatusElement(document.getElementById('field-status-a'))
+  fieldLoaderB.setStatusElement(document.getElementById('field-status-b'))
 }
 
-function createControls() {
-  const panel = document.createElement('div')
-  panel.className = 'controls'
-
-  const header = document.createElement('div')
-  header.className = 'controls__title'
-  header.textContent = 'Controls'
-  panel.appendChild(header)
-
-  const colorControl = addSelect(panel, 'Color', COLOR_PRESETS, params.colorPreset, (key) => {
-    params.colorPreset = key
-  })
-
-  const speedControl = addSlider(panel, 'Speed', 0.1, 6, 0.1, params.speed, (value) => {
-    params.speed = value
-  })
-
-  const advancedToggle = document.createElement('button')
-  advancedToggle.type = 'button'
-  advancedToggle.className = 'controls__button'
-  advancedToggle.textContent = 'Show advanced'
-
-  const advancedSection = document.createElement('div')
-  advancedSection.className = 'controls__advanced'
-  advancedSection.style.display = 'none'
-
-  const sizeControl = addSlider(advancedSection, 'Size', 0.5, 4, 0.1, params.size, (value) => {
-    params.size = value
-    material.size = value
-  })
-
-  const particleCountControl = addSlider(advancedSection, 'Particle count', 100, 8000, 100, params.particleCount, (value) => {
-    params.particleCount = Math.round(value)
-    resizeParticleBuffers()
-  })
-
-  const bloomStrengthControl = addSlider(advancedSection, 'Bloom strength', 0.2, 2.5, 0.05, params.bloomStrength, (value) => {
-    params.bloomStrength = value
-    updateBloom()
-  })
-
-  const bloomRadiusControl = addSlider(advancedSection, 'Bloom radius', 0.0, 1.2, 0.02, params.bloomRadius, (value) => {
-    params.bloomRadius = value
-    updateBloom()
-  })
-
-  let lifeMinControl: SliderHandle
-  let lifeMaxControl: SliderHandle
-
-  lifeMinControl = addSlider(advancedSection, 'Life min (s)', 0.1, 2.0, 0.05, params.lifeMin, (value) => {
-    params.lifeMin = value
-    if (params.lifeMin > params.lifeMax) {
-      params.lifeMax = value
-      syncSlider(lifeMaxControl, params.lifeMax)
+function setupDragAndDrop() {
+  if (!container) return
+
+  // Create side-specific overlays
+  const dropOverlayLeft = document.createElement('div')
+  dropOverlayLeft.className = 'drop-overlay drop-overlay--left'
+  dropOverlayLeft.textContent = 'Drop to load Field A (left)'
+  dropOverlayLeft.style.display = 'none'
+  container.appendChild(dropOverlayLeft)
+
+  const dropOverlayRight = document.createElement('div')
+  dropOverlayRight.className = 'drop-overlay drop-overlay--right'
+  dropOverlayRight.textContent = 'Drop to load Field B (right)'
+  dropOverlayRight.style.display = 'none'
+  container.appendChild(dropOverlayRight)
+
+  const showOverlay = (side: 'left' | 'right') => {
+    if (side === 'left') {
+      dropOverlayLeft.style.display = 'flex'
+      dropOverlayRight.style.display = 'none'
+    } else {
+      dropOverlayLeft.style.display = 'none'
+      dropOverlayRight.style.display = 'flex'
     }
-    reseedLifetimes()
-  })
+  }
+  const hideOverlay = () => {
+    dropOverlayLeft.style.display = 'none'
+    dropOverlayRight.style.display = 'none'
+  }
 
-  lifeMaxControl = addSlider(advancedSection, 'Life max (s)', 0.2, 5.0, 0.05, params.lifeMax, (value) => {
-    params.lifeMax = value
-    if (params.lifeMax < params.lifeMin) {
-      params.lifeMin = value
-      syncSlider(lifeMinControl, params.lifeMin)
+  const handleFiles = async (file: File, target: 'left' | 'right') => {
+    try {
+      const text = await file.text()
+      const rows = parseCsv(text)
+      if (!rows.length) {
+        if (target === 'left') {
+          fieldLoaderA.updateStatus('CSV empty or invalid')
+        } else {
+          fieldLoaderB.updateStatus('CSV empty or invalid')
+        }
+        hideOverlay()
+        return
+      }
+      const loader = target === 'left' ? fieldLoaderA : fieldLoaderB
+      const { transform, bounds } = loader.computeFieldTransform(rows)
+      if (target === 'left') {
+        particleSystemA.setFieldData(rows, transform)
+        hasFieldA = particleSystemA.hasFieldData()
+      } else {
+        particleSystemB.setFieldData(rows, transform)
+        hasFieldB = particleSystemB.hasFieldData()
+      }
+      loader.updateStatus(`loaded ${rows.length} vectors (${bounds.width.toFixed(1)}×${bounds.height.toFixed(1)})`)
+      updateLayout()
+    } catch (error) {
+      console.error('Failed to load dropped CSV', error)
+      if (target === 'left') {
+        fieldLoaderA.updateStatus('CSV load error')
+      } else {
+        fieldLoaderB.updateStatus('CSV load error')
+      }
+    } finally {
+      hideOverlay()
     }
-    reseedLifetimes()
-  })
+  }
 
-  const fieldDistControl = addSlider(advancedSection, 'Field border', FIELD_BORDER_MIN, FIELD_BORDER_MAX, 0.01, params.fieldValidDistance, (value) => {
-    params.fieldValidDistance = value
+  window.addEventListener('dragover', (e) => {
+    e.preventDefault()
+    const target = e.clientX < window.innerWidth * 0.5 ? 'left' : 'right'
+    showOverlay(target)
   })
-  fieldDistControlHandle = fieldDistControl
 
-  advancedToggle.addEventListener('click', () => {
-    const isHidden = advancedSection.style.display === 'none'
-    advancedSection.style.display = isHidden ? 'block' : 'none'
-    advancedToggle.textContent = isHidden ? 'Hide advanced' : 'Show advanced'
+  window.addEventListener('dragleave', (e) => {
+    e.preventDefault()
+    hideOverlay()
   })
 
-  panel.appendChild(advancedToggle)
-  panel.appendChild(advancedSection)
-
-  // Recording controls
-  const recordingSection = document.createElement('div')
-  recordingSection.className = 'controls__section'
-  recordingSection.innerHTML = '<div class="controls__subtitle">Export (WebM)</div>'
-
-  const resolutionRow = document.createElement('label')
-  resolutionRow.className = 'controls__row'
-  const resolutionLabel = document.createElement('span')
-  resolutionLabel.textContent = 'Resolution'
-  const resolutionSelect = document.createElement('select')
-  resolutionSelect.className = 'controls__select'
-  resolutionSelect.innerHTML = '<option value="current">Current window</option><option value="1080p">1080p (Full HD)</option><option value="1440p">1440p (2K)</option><option value="4k">4K (Ultra HD)</option>'
-  resolutionSelect.value = recordingResolution
-  resolutionSelect.addEventListener('change', (e) => {
-    recordingResolution = (e.target as HTMLSelectElement).value as typeof recordingResolution
-  })
-  resolutionRow.appendChild(resolutionLabel)
-  resolutionRow.appendChild(resolutionSelect)
-  recordingSection.appendChild(resolutionRow)
-
-  const durationRow = document.createElement('label')
-  durationRow.className = 'controls__row'
-  const durationLabel = document.createElement('span')
-  durationLabel.textContent = 'Duration'
-  const durationSelect = document.createElement('select')
-  durationSelect.className = 'controls__select'
-  durationSelect.innerHTML = '<option value="3">3 seconds</option><option value="5">5 seconds</option><option value="10">10 seconds</option><option value="15">15 seconds</option>'
-  durationSelect.value = String(recordingDuration)
-  durationSelect.addEventListener('change', (e) => {
-    recordingDuration = parseInt((e.target as HTMLSelectElement).value)
-  })
-  durationRow.appendChild(durationLabel)
-  durationRow.appendChild(durationSelect)
-  recordingSection.appendChild(durationRow)
-
-  recordButton = document.createElement('button')
-  recordButton.type = 'button'
-  recordButton.className = 'controls__button controls__button--record'
-  recordButton.textContent = '⏺ Start recording'
-  recordButton.addEventListener('click', () => {
-    if (isRecording) {
-      stopRecording()
-    } else {
-      startRecording()
+  window.addEventListener('drop', (e) => {
+    e.preventDefault()
+    const dt = e.dataTransfer
+    if (dt && dt.files && dt.files[0]) {
+      const target = e.clientX < window.innerWidth * 0.5 ? 'left' : 'right'
+      handleFiles(dt.files[0], target)
     }
   })
-  recordingSection.appendChild(recordButton)
-
-  recordStatus = document.createElement('div')
-  recordStatus.className = 'controls__status'
-  recordStatus.style.display = 'none'
-  recordingSection.appendChild(recordStatus)
-
-  panel.appendChild(recordingSection)
-
-  const resetBtn = document.createElement('button')
-  resetBtn.type = 'button'
-  resetBtn.className = 'controls__button'
-  resetBtn.textContent = 'Reset to defaults'
-  resetBtn.addEventListener('click', () => {
-    Object.assign(params, defaultParams)
-    material.size = params.size
-    updateBloom()
-    reseedLifetimes()
-    syncSlider(sizeControl, params.size)
-    syncSlider(speedControl, params.speed)
-    syncSlider(particleCountControl, params.particleCount)
-    syncSlider(bloomStrengthControl, params.bloomStrength)
-    syncSlider(bloomRadiusControl, params.bloomRadius)
-    syncSlider(lifeMinControl, params.lifeMin)
-    syncSlider(lifeMaxControl, params.lifeMax)
-    syncSlider(fieldDistControl, params.fieldValidDistance)
-    syncSelect(colorControl, params.colorPreset)
-  })
-  panel.appendChild(resetBtn)
-
-  app.appendChild(panel)
 }
 
-function addSlider(
-  panel: HTMLDivElement,
-  label: string,
-  min: number,
-  max: number,
-  step: number,
-  value: number,
-  onChange: (value: number) => void,
-): SliderHandle {
-  const row = document.createElement('label')
-  row.className = 'controls__row'
-
-  const text = document.createElement('span')
-  text.textContent = label
-
-  const input = document.createElement('input')
-  input.type = 'range'
-  input.min = String(min)
-  input.max = String(max)
-  input.step = String(step)
-  input.value = String(value)
-
-  const valueTag = document.createElement('span')
-  valueTag.className = 'controls__value'
-  valueTag.textContent = formatValue(value, step)
-
-  input.addEventListener('input', (event) => {
-    const next = parseFloat((event.target as HTMLInputElement).value)
-    valueTag.textContent = formatValue(next, step)
-    onChange(next)
-  })
+function computeViewOffset(): number {
+  const aspect = window.innerWidth / window.innerHeight
+  const cameraWidth = VIEW_SIZE * aspect * 2
 
-  row.appendChild(text)
-  row.appendChild(input)
-  row.appendChild(valueTag)
-  panel.appendChild(row)
+  // Visual sweet spot: fields shouldn't spread beyond this on wide windows
+  const maxVisualOffset = 1.4
 
-  return { input, valueTag }
-}
+  // Minimum separation
+  const minOffset = 1.0
 
-function addSelect(
-  panel: HTMLDivElement,
-  label: string,
-  options: ColorPreset[],
-  value: string,
-  onChange: (key: string) => void,
-): HTMLSelectElement {
-  const row = document.createElement('label')
-  row.className = 'controls__row'
-
-  const text = document.createElement('span')
-  text.textContent = label
-
-  const select = document.createElement('select')
-  select.className = 'controls__select'
-  for (const option of options) {
-    const optEl = document.createElement('option')
-    optEl.value = option.key
-    optEl.textContent = option.label
-    select.appendChild(optEl)
-  }
-  select.value = value
-  select.addEventListener('change', (event) => {
-    const next = (event.target as HTMLSelectElement).value
-    onChange(next)
-  })
+  // Calculate desired offset based on window width
+  // Each field should take ~45% of camera width, leaving ~10% gap
+  const desiredOffset = (cameraWidth * 0.45) / 2
 
-  row.appendChild(text)
-  row.appendChild(select)
-  panel.appendChild(row)
+  // Account for controls panel (240px + 18px margin = 258px on right side)
+  // Only apply panel constraint if window is narrow
+  const panelPixels = 258
+  const panelCameraUnits = (panelPixels / window.innerWidth) * cameraWidth
+  const availableWidth = cameraWidth - panelCameraUnits - 0.5
+  const offsetWithPanelConstraint = availableWidth / 2
 
-  return select
-}
+  // Final offset: respect visual maximum, but reduce if panel constrains space
+  const maxOffset = Math.min(maxVisualOffset, offsetWithPanelConstraint)
 
-function updateBloom() {
-  bloomPass.strength = params.bloomStrength
-  bloomPass.radius = params.bloomRadius
+  return Math.max(minOffset, Math.min(desiredOffset, maxOffset))
 }
 
-function formatValue(value: number, step: number) {
-  return step >= 1 ? value.toFixed(0) : value.toFixed(2)
+function clearField(target: 'left' | 'right') {
+  const transform = { scale: 1, offsetX: 0, offsetY: 0 }
+  if (target === 'left') {
+    particleSystemA.setFieldData(null, transform)
+    particleSystemA.reseedLifetimes()
+    fieldLoaderA.updateStatus('default (cleared)')
+    hasFieldA = false
+  } else {
+    particleSystemB.setFieldData(null, transform)
+    particleSystemB.reseedLifetimes()
+    fieldLoaderB.updateStatus('default (cleared)')
+    hasFieldB = false
+  }
+  updateLayout()
 }
 
-function syncSlider(control: { input: HTMLInputElement; valueTag: HTMLSpanElement }, value: number) {
-  control.input.value = String(value)
-  control.valueTag.textContent = formatValue(value, parseFloat(control.input.step))
-}
+// Resize handler
+function resize() {
+  const width = window.innerWidth
+  const height = window.innerHeight
+  const aspect = width / height
 
-function syncSelect(select: HTMLSelectElement, value: string) {
-  select.value = value
-}
+  camera.left = -VIEW_SIZE * aspect
+  camera.right = VIEW_SIZE * aspect
+  camera.top = VIEW_SIZE
+  camera.bottom = -VIEW_SIZE
+  camera.updateProjectionMatrix()
 
-function getActiveColorPreset(): ColorPreset {
-  return COLOR_PRESETS.find((preset) => preset.key === params.colorPreset) ?? COLOR_PRESETS[0]
+  renderer.setSize(width, height, false)
+  composer.setSize(width, height)
+  bloomPass.setSize(width, height)
+  updateLayout()
 }
 
-function applyColor(i3: number, glow: number, palette: ColorPreset, isSpawn: boolean) {
-  const clampedGlow = Math.min(1, Math.max(0, glow))
-
-  // Preserve legacy look for the default palette
-  if (palette.key === DEFAULT_COLOR_PRESET) {
-    if (isSpawn) {
-      colors[i3] = 0.6 * clampedGlow
-      colors[i3 + 1] = 0.25 * clampedGlow
-      colors[i3 + 2] = 0.9 * clampedGlow
+function updateLayout() {
+  const count = (hasFieldA ? 1 : 0) + (hasFieldB ? 1 : 0)
+  const offset = computeViewOffset()
+
+  if (count === 2) {
+    particlesA.visible = true
+    particlesB.visible = true
+    particleSystemA.setViewOffset(-offset)
+    particleSystemB.setViewOffset(offset)
+  } else if (count === 1) {
+    if (hasFieldA) {
+      particlesA.visible = true
+      particlesB.visible = false
+      particleSystemA.setViewOffset(0)
     } else {
-      colors[i3] = 0.35 + clampedGlow * 0.9
-      colors[i3 + 1] = 0.18 + clampedGlow * 0.45
-      colors[i3 + 2] = 0.6 + clampedGlow * 0.35
+      particlesA.visible = false
+      particlesB.visible = true
+      particleSystemB.setViewOffset(0)
     }
-    return
-  }
-
-  // For other palettes, scale their hue by brightness without white mixing
-  const brightness = isSpawn ? clampedGlow : 0.35 + clampedGlow * 0.65
-  const [r, g, b] = palette.rgb
-  colors[i3] = r * brightness
-  colors[i3 + 1] = g * brightness
-  colors[i3 + 2] = b * brightness
-}
-
-function reseedLifetimes() {
-  for (let i = 0; i < params.particleCount; i += 1) {
-    lifetimes[i] = randomRange(params.lifeMin, params.lifeMax)
+  } else {
+    particlesA.visible = true
+    particlesB.visible = false
+    particleSystemA.setViewOffset(0)
+    particleSystemB.setViewOffset(0)
   }
 }
 
-function resizeParticleBuffers() {
-  positions = new Float32Array(params.particleCount * 3)
-  colors = new Float32Array(params.particleCount * 3)
-  lifetimes = new Float32Array(params.particleCount)
-  geometry.setAttribute('position', new BufferAttribute(positions, 3))
-  geometry.setAttribute('color', new BufferAttribute(colors, 3))
-  initParticles()
+function updateTrails(enabled: boolean, decay: number) {
+  params.trailsEnabled = enabled
+  params.trailDecay = decay
+  afterimagePass.enabled = enabled
+  afterimagePass.uniforms['damp'].value = decay
 }
 
-function startRecording() {
-  if (isRecording) return
-
-  try {
-    const canvas = renderer.domElement
-
-    // Determine recording resolution
-    let recordWidth: number, recordHeight: number
-    const currentAspect = canvas.width / canvas.height
-
-    if (recordingResolution === 'current') {
-      recordWidth = canvas.width
-      recordHeight = canvas.height
-    } else {
-      // Save original size and resize for recording
-      originalCanvasSize = { width: canvas.width, height: canvas.height }
-
-      switch (recordingResolution) {
-        case '1080p':
-          recordHeight = 1080
-          recordWidth = Math.round(recordHeight * currentAspect)
-          break
-        case '1440p':
-          recordHeight = 1440
-          recordWidth = Math.round(recordHeight * currentAspect)
-          break
-        case '4k':
-          recordHeight = 2160
-          recordWidth = Math.round(recordHeight * currentAspect)
-          break
-      }
-
-      // Resize canvas for recording
-      renderer.setSize(recordWidth, recordHeight, false)
-      composer.setSize(recordWidth, recordHeight)
-      bloomPass.setSize(recordWidth, recordHeight)
-    }
-
-    const stream = canvas.captureStream(60) // 60 fps
-
-    // Calculate bitrate based on resolution (higher res = higher bitrate)
-    const pixelCount = recordWidth * recordHeight
-    const bitrate = Math.min(25000000, Math.max(8000000, pixelCount * 4)) // 4 bits per pixel, capped at 25 Mbps
-
-    recordedChunks = []
-    mediaRecorder = new MediaRecorder(stream, {
-      mimeType: 'video/webm;codecs=vp9',
-      videoBitsPerSecond: bitrate,
-    })
-
-    mediaRecorder.ondataavailable = (event) => {
-      if (event.data.size > 0) {
-        recordedChunks.push(event.data)
-      }
-    }
-
-    mediaRecorder.onstop = () => {
-      // Restore original canvas size if we resized
-      if (originalCanvasSize) {
-        renderer.setSize(originalCanvasSize.width, originalCanvasSize.height, false)
-        composer.setSize(originalCanvasSize.width, originalCanvasSize.height)
-        bloomPass.setSize(originalCanvasSize.width, originalCanvasSize.height)
-        originalCanvasSize = null
-        resize() // Trigger full resize to ensure proper state
-      }
-
-      const blob = new Blob(recordedChunks, { type: 'video/webm' })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = `luminar-${recordWidth}x${recordHeight}-${Date.now()}.webm`
-      a.click()
-      URL.revokeObjectURL(url)
-
-      if (recordStatus) {
-        recordStatus.textContent = 'Recording complete! Download started.'
-        setTimeout(() => {
-          if (recordStatus) recordStatus.style.display = 'none'
-        }, 3000)
-      }
-    }
-
-    mediaRecorder.start()
-    isRecording = true
-    recordingStartTime = performance.now()
-
-    if (recordButton) {
-      recordButton.textContent = '⏹ Stop recording'
-      recordButton.style.opacity = '1'
-    }
-    if (recordStatus) {
-      recordStatus.style.display = 'block'
-      recordStatus.textContent = `Recording at ${recordWidth}x${recordHeight} (${(bitrate / 1000000).toFixed(0)} Mbps): 0.0s / ${recordingDuration}s`
-    }
-  } catch (error) {
-    console.error('Failed to start recording:', error)
-    // Restore size if recording failed
-    if (originalCanvasSize) {
-      renderer.setSize(originalCanvasSize.width, originalCanvasSize.height, false)
-      composer.setSize(originalCanvasSize.width, originalCanvasSize.height)
-      bloomPass.setSize(originalCanvasSize.width, originalCanvasSize.height)
-      originalCanvasSize = null
-      resize()
-    }
-    if (recordStatus) {
-      recordStatus.style.display = 'block'
-      recordStatus.textContent = 'Recording not supported in this browser.'
-    }
-  }
-}
-
-function stopRecording() {
-  if (!isRecording || !mediaRecorder) return
-
-  isRecording = false
-  mediaRecorder.stop()
-  mediaRecorder = null
+// Animation loop
+let lastTime = performance.now()
+let cachedPresetA = COLOR_PRESETS.find((p) => p.key === params.colorPresetA) ?? COLOR_PRESETS[0]
+let cachedPresetB = COLOR_PRESETS.find((p) => p.key === params.colorPresetB) ?? COLOR_PRESETS[0]
 
-  if (recordButton) {
-    recordButton.textContent = '▶ Start recording'
-    recordButton.style.opacity = '1'
-  }
-}
+function animate(timestamp: number) {
+  const now = timestamp || performance.now()
+  const dt = Math.min(0.033, (now - lastTime) / 1000)
+  lastTime = now
 
-function updateRecordingStatus(elapsed: number) {
-  if (recordStatus) {
-    const current = elapsed.toFixed(1)
-    const canvas = renderer.domElement
-    const bitrate = Math.min(25000000, Math.max(8000000, canvas.width * canvas.height * 4))
-    recordStatus.textContent = `Recording at ${canvas.width}x${canvas.height} (${(bitrate / 1000000).toFixed(0)} Mbps): ${current}s / ${recordingDuration}s`
-  }
-}
+  particleSystemA.update(dt, cachedPresetA)
+  particleSystemB.update(dt, cachedPresetB)
 
-async function loadVectorField() {
-  try {
-    const res = await fetch('/vector-field.json', { cache: 'no-store' })
-    if (!res.ok) {
-      updateFieldStatus('default (built-in)')
-      return
-    }
-    const data = (await res.json()) as VectorDatum[]
-    if (Array.isArray(data) && data.length > 0) {
-      // Compute bounding box
-      let minX = data[0].x
-      let maxX = data[0].x
-      let minY = data[0].y
-      let maxY = data[0].y
-      for (const d of data) {
-        if (d.x < minX) minX = d.x
-        if (d.x > maxX) maxX = d.x
-        if (d.y < minY) minY = d.y
-        if (d.y > maxY) maxY = d.y
-      }
-      const dataWidth = maxX - minX
-      const dataHeight = maxY - minY
-      const dataSize = Math.max(dataWidth, dataHeight)
-
-      // Normalize to fit within [-WORLD_EXTENT, WORLD_EXTENT]
-      const targetSize = WORLD_EXTENT * 1.8 // leave some margin
-      fieldTransform.scale = dataSize > 0 ? targetSize / dataSize : 1
-      fieldTransform.offsetX = -(minX + maxX) * 0.5 * fieldTransform.scale
-      fieldTransform.offsetY = -(minY + maxY) * 0.5 * fieldTransform.scale
-
-      // Auto-compute field valid distance from average nearest-neighbor spacing
-      let sumDist = 0
-      const sampleSize = Math.min(data.length, 200) // sample subset for efficiency
-      for (let i = 0; i < sampleSize; i += 1) {
-        const pt = data[i]
-        let minDist = Number.MAX_VALUE
-        for (let j = 0; j < data.length; j += 1) {
-          if (i === j) continue
-          const dx = data[j].x - pt.x
-          const dy = data[j].y - pt.y
-          const dist = Math.sqrt(dx * dx + dy * dy)
-          if (dist < minDist) minDist = dist
-        }
-        sumDist += minDist
-      }
-      const avgSpacing = sumDist / sampleSize
-      const autoThreshold = Math.min(
-        FIELD_BORDER_MAX,
-        Math.max(FIELD_BORDER_MIN, avgSpacing * fieldTransform.scale * 0.7),
-      ) // 70% of avg spacing, clamped to UI range
-      params.fieldValidDistance = autoThreshold
-      if (fieldDistControlHandle) {
-        syncSlider(fieldDistControlHandle, params.fieldValidDistance)
-      }
-      console.log('Auto field border:', autoThreshold.toFixed(4), 'avg spacing:', avgSpacing.toFixed(4))
+  composer.render()
+  recordingManager.update()
 
-      fieldData = data
-      updateFieldStatus(`loaded ${data.length} vectors (${dataWidth.toFixed(1)}×${dataHeight.toFixed(1)})`)
-      console.log('Field bounds:', { minX, maxX, minY, maxY, scale: fieldTransform.scale })
-    } else {
-      updateFieldStatus('default (empty file)')
-    }
-  } catch (error) {
-    console.error('Failed to load vector field', error)
-    updateFieldStatus('default (load error)')
-  }
+  requestAnimationFrame(animate)
 }
 
-function updateFieldStatus(label: string) {
-  if (fieldStatusEl) fieldStatusEl.textContent = label
-}
+// Initialize
+createOverlay()
+controlPanel.create()
+recordingManager.createControls(container.querySelector('.controls')!)
+resize()
+window.addEventListener('resize', resize)
+fieldLoaderA.load()
+fieldLoaderB.load()
+setupDragAndDrop()
+animate(0)