@brandonlukas/luminar 0.1.0 → 0.2.0

package/src/main.ts

@@ -111,6 +111,16 @@ 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)
@@ -224,6 +234,15 @@ function animate(timestamp: number) {
   geometry.attributes.color.needsUpdate = true
 
   composer.render()
+
+  if (isRecording) {
+    const elapsed = (performance.now() - recordingStartTime) / 1000
+    updateRecordingStatus(elapsed)
+    if (elapsed >= recordingDuration) {
+      stopRecording()
+    }
+  }
+
   requestAnimationFrame(animate)
 }
 
@@ -337,6 +356,61 @@ function createControls() {
   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()
+    }
+  })
+  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'
@@ -497,6 +571,139 @@ function resizeParticleBuffers() {
   initParticles()
 }
 
+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
+
+  if (recordButton) {
+    recordButton.textContent = '▶ Start recording'
+    recordButton.style.opacity = '1'
+  }
+}
+
+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`
+  }
+}
+
 async function loadVectorField() {
   try {
     const res = await fetch('/vector-field.json', { cache: 'no-store' })

package/src/style.css

@@ -133,4 +133,59 @@ canvas {
 
 .controls__button:active {
   transform: translateY(1px);
+}
+
+.controls__button--record {
+  background: linear-gradient(120deg, rgba(255, 80, 120, 0.22), rgba(200, 80, 120, 0.14));
+  border-color: rgba(255, 120, 150, 0.4);
+}
+
+.controls__button--record:hover {
+  border-color: rgba(255, 140, 170, 0.8);
+  box-shadow: 0 0 18px rgba(255, 120, 150, 0.3);
+}
+
+.controls__section {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(120, 180, 255, 0.15);
+}
+
+.controls__subtitle {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 8px;
+  color: #9fb7ff;
+  opacity: 0.85;
+}
+
+.controls__status {
+  font-size: 11px;
+  margin-top: 8px;
+  padding: 6px 8px;
+  background: rgba(100, 180, 255, 0.1);
+  border: 1px solid rgba(120, 180, 255, 0.2);
+  border-radius: 6px;
+  color: #b3d4ff;
+  text-align: center;
+}
+
+.controls__select {
+  width: 100%;
+  padding: 4px 6px;
+  background: rgba(20, 30, 50, 0.5);
+  border: 1px solid rgba(120, 180, 255, 0.25);
+  border-radius: 6px;
+  color: #dfe8ff;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.controls__select:hover {
+  border-color: rgba(140, 200, 255, 0.5);
+}
+
+.controls__advanced {
+  margin-top: 8px;
 }