@brandonlukas/luminar 0.2.0 → 0.2.1

package/src/modules/controls.ts

@@ -0,0 +1,424 @@
+import type { ColorPreset, ParticleParams, SliderHandle } from '../lib/types'
+import { COLOR_PRESETS, defaultParams, FIELD_BORDER_MIN, FIELD_BORDER_MAX } from '../lib/constants'
+import { PointsMaterial } from 'three'
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'
+
+export class ControlPanel {
+    private panel!: HTMLDivElement
+    private controlHandles = new Map<string, SliderHandle>()
+    private selectHandles = new Map<string, HTMLSelectElement>()
+    private trailToggle?: HTMLInputElement
+    private container: HTMLElement
+    private params: ParticleParams
+    private material: PointsMaterial
+    private bloomPass: UnrealBloomPass
+    private callbacks: {
+        onParticleCountChange: (count: number) => void
+        onLifetimeChange: () => void
+        onTrailToggle: (enabled: boolean) => void
+        onTrailDecayChange: (value: number) => void
+        onClearFieldA: () => void
+        onClearFieldB: () => void
+        onColorChange: () => void
+    }
+
+    constructor(
+        container: HTMLElement,
+        params: ParticleParams,
+        material: PointsMaterial,
+        bloomPass: UnrealBloomPass,
+        callbacks: {
+            onParticleCountChange: (count: number) => void
+            onLifetimeChange: () => void
+            onTrailToggle: (enabled: boolean) => void
+            onTrailDecayChange: (value: number) => void
+            onClearFieldA: () => void
+            onClearFieldB: () => void
+            onColorChange: () => void
+        },
+    ) {
+        this.container = container
+        this.params = params
+        this.material = material
+        this.bloomPass = bloomPass
+        this.callbacks = callbacks
+    }
+
+    create() {
+        this.panel = document.createElement('div')
+        this.panel.className = 'controls'
+
+        const header = document.createElement('div')
+        header.className = 'controls__header'
+
+        const title = document.createElement('div')
+        title.className = 'controls__title'
+        title.textContent = 'Controls'
+
+        const toggleBtn = document.createElement('button')
+        toggleBtn.className = 'controls__toggle'
+        toggleBtn.textContent = '−'
+        toggleBtn.type = 'button'
+        toggleBtn.addEventListener('click', () => {
+            this.panel.classList.toggle('controls--collapsed')
+            toggleBtn.textContent = this.panel.classList.contains('controls--collapsed') ? '+' : '−'
+            // Trigger resize to recalculate field offset
+            window.dispatchEvent(new Event('resize'))
+        })
+
+        header.appendChild(title)
+        header.appendChild(toggleBtn)
+        this.panel.appendChild(header)
+
+        // Field colors
+        const colorControlA = this.addSelect('Field A color', COLOR_PRESETS, this.params.colorPresetA, (key) => {
+            this.params.colorPresetA = key
+            this.callbacks.onColorChange()
+        })
+        const colorControlB = this.addSelect('Field B color', COLOR_PRESETS, this.params.colorPresetB, (key) => {
+            this.params.colorPresetB = key
+            this.callbacks.onColorChange()
+        })
+        this.selectHandles.set('colorA', colorControlA)
+        this.selectHandles.set('colorB', colorControlB)
+
+        // Speed
+        const speedControl = this.addSlider(
+            this.panel,
+            'Speed',
+            0.1,
+            8,
+            0.1,
+            this.params.speed,
+            (value: number) => {
+                this.params.speed = value
+            },
+        )
+        this.controlHandles.set('speed', speedControl)
+
+        // Advanced section
+        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'
+
+        // Noise strength
+        const noiseControl = this.addSlider(advancedSection, 'Noise', 0, 1, 0.01, this.params.noiseStrength, (value) => {
+            this.params.noiseStrength = value
+        })
+        this.controlHandles.set('noiseStrength', noiseControl)
+
+        // Size
+        const sizeControl = this.addSlider(advancedSection, 'Size', 0.5, 4, 0.1, this.params.size, (value) => {
+            this.params.size = value
+            this.material.size = value
+        })
+        this.controlHandles.set('size', sizeControl)
+
+        // Particle count
+        const particleCountControl = this.addSlider(
+            advancedSection,
+            'Particle count',
+            100,
+            8000,
+            100,
+            this.params.particleCount,
+            (value) => {
+                this.params.particleCount = Math.round(value)
+                this.callbacks.onParticleCountChange(this.params.particleCount)
+            },
+        )
+        this.controlHandles.set('particleCount', particleCountControl)
+
+        // Bloom strength
+        const bloomStrengthControl = this.addSlider(
+            advancedSection,
+            'Bloom strength',
+            0.2,
+            2.5,
+            0.05,
+            this.params.bloomStrength,
+            (value) => {
+                this.params.bloomStrength = value
+                this.updateBloom()
+            },
+        )
+        this.controlHandles.set('bloomStrength', bloomStrengthControl)
+
+        // Bloom radius
+        const bloomRadiusControl = this.addSlider(
+            advancedSection,
+            'Bloom radius',
+            0.0,
+            1.2,
+            0.02,
+            this.params.bloomRadius,
+            (value) => {
+                this.params.bloomRadius = value
+                this.updateBloom()
+            },
+        )
+        this.controlHandles.set('bloomRadius', bloomRadiusControl)
+
+        // Life min
+        const lifeMinControl = this.addSlider(advancedSection, 'Life min (s)', 0.1, 2.0, 0.05, this.params.lifeMin, (value) => {
+            this.params.lifeMin = value
+            if (this.params.lifeMin > this.params.lifeMax) {
+                this.params.lifeMax = value
+                const lifeMaxHandle = this.controlHandles.get('lifeMax')
+                if (lifeMaxHandle) this.syncSlider(lifeMaxHandle, this.params.lifeMax)
+            }
+            this.callbacks.onLifetimeChange()
+        })
+        this.controlHandles.set('lifeMin', lifeMinControl)
+
+        // Life max
+        const lifeMaxControl = this.addSlider(advancedSection, 'Life max (s)', 0.2, 5.0, 0.05, this.params.lifeMax, (value) => {
+            this.params.lifeMax = value
+            if (this.params.lifeMax < this.params.lifeMin) {
+                this.params.lifeMin = value
+                const lifeMinHandle = this.controlHandles.get('lifeMin')
+                if (lifeMinHandle) this.syncSlider(lifeMinHandle, this.params.lifeMin)
+            }
+            this.callbacks.onLifetimeChange()
+        })
+        this.controlHandles.set('lifeMax', lifeMaxControl)
+
+        // Field border
+        const fieldDistControl = this.addSlider(
+            advancedSection,
+            'Field border',
+            FIELD_BORDER_MIN,
+            FIELD_BORDER_MAX,
+            0.01,
+            this.params.fieldValidDistance,
+            (value) => {
+                this.params.fieldValidDistance = value
+            },
+        )
+        this.controlHandles.set('fieldDist', fieldDistControl)
+
+        // Trails toggle
+        const trailsToggle = this.addToggle(advancedSection, 'Trails', this.params.trailsEnabled, (enabled) => {
+            this.params.trailsEnabled = enabled
+            this.callbacks.onTrailToggle(enabled)
+        })
+        this.trailToggle = trailsToggle
+
+        // Trail decay
+        const trailDecayControl = this.addSlider(
+            advancedSection,
+            'Trail decay',
+            0.7,
+            0.99,
+            0.005,
+            this.params.trailDecay,
+            (value) => {
+                this.params.trailDecay = value
+                this.callbacks.onTrailDecayChange(value)
+            },
+        )
+        this.controlHandles.set('trailDecay', trailDecayControl)
+
+        advancedToggle.addEventListener('click', () => {
+            const isHidden = advancedSection.style.display === 'none'
+            advancedSection.style.display = isHidden ? 'block' : 'none'
+            advancedToggle.textContent = isHidden ? 'Hide advanced' : 'Show advanced'
+        })
+
+        this.panel.appendChild(advancedToggle)
+        this.panel.appendChild(advancedSection)
+
+        // Reset button (right after advanced section)
+        const resetBtn = document.createElement('button')
+        resetBtn.type = 'button'
+        resetBtn.className = 'controls__button'
+        resetBtn.textContent = 'Reset to defaults'
+        resetBtn.addEventListener('click', () => this.reset())
+        this.panel.appendChild(resetBtn)
+
+        // Field management
+        const fieldSection = document.createElement('div')
+        fieldSection.className = 'controls__section'
+        const fieldSubtitle = document.createElement('div')
+        fieldSubtitle.className = 'controls__subtitle'
+        fieldSubtitle.textContent = 'Fields'
+        fieldSection.appendChild(fieldSubtitle)
+
+        const clearARow = document.createElement('div')
+        clearARow.className = 'controls__row'
+        const clearALabel = document.createElement('span')
+        clearALabel.textContent = 'Clear Field A'
+        const clearABtn = document.createElement('button')
+        clearABtn.type = 'button'
+        clearABtn.className = 'controls__button'
+        clearABtn.textContent = 'Clear'
+        clearABtn.addEventListener('click', () => this.callbacks.onClearFieldA())
+        clearARow.appendChild(clearALabel)
+        clearARow.appendChild(clearABtn)
+        fieldSection.appendChild(clearARow)
+
+        const clearBRow = document.createElement('div')
+        clearBRow.className = 'controls__row'
+        const clearBLabel = document.createElement('span')
+        clearBLabel.textContent = 'Clear Field B'
+        const clearBBtn = document.createElement('button')
+        clearBBtn.type = 'button'
+        clearBBtn.className = 'controls__button'
+        clearBBtn.textContent = 'Clear'
+        clearBBtn.addEventListener('click', () => this.callbacks.onClearFieldB())
+        clearBRow.appendChild(clearBLabel)
+        clearBRow.appendChild(clearBBtn)
+        fieldSection.appendChild(clearBRow)
+
+        this.panel.appendChild(fieldSection)
+
+        this.container.appendChild(this.panel)
+    }
+
+    syncFieldValidDistance(value: number) {
+        this.params.fieldValidDistance = value
+        const handle = this.controlHandles.get('fieldDist')
+        if (handle) {
+            this.syncSlider(handle, value)
+        }
+    }
+
+    private reset() {
+        Object.assign(this.params, defaultParams)
+        this.material.size = this.params.size
+        this.updateBloom()
+        this.callbacks.onLifetimeChange()
+        this.callbacks.onTrailToggle(this.params.trailsEnabled)
+        this.callbacks.onTrailDecayChange(this.params.trailDecay)
+
+        // Sync all controls
+        for (const [key, handle] of this.controlHandles.entries()) {
+            const paramKey = key as keyof ParticleParams
+            if (typeof this.params[paramKey] === 'number') {
+                this.syncSlider(handle, this.params[paramKey] as number)
+            }
+        }
+
+        for (const [key, select] of this.selectHandles.entries()) {
+            if (key === 'colorA') {
+                select.value = this.params.colorPresetA
+            }
+            if (key === 'colorB') {
+                select.value = this.params.colorPresetB
+            }
+        }
+
+        if (this.trailToggle) {
+            this.trailToggle.checked = this.params.trailsEnabled
+        }
+    }
+
+    private addToggle(parent: HTMLDivElement | HTMLElement, label: string, value: boolean, onChange: (value: boolean) => void) {
+        const row = document.createElement('label')
+        row.className = 'controls__row'
+
+        const text = document.createElement('span')
+        text.textContent = label
+
+        const input = document.createElement('input')
+        input.type = 'checkbox'
+        input.checked = value
+        input.addEventListener('change', (event) => {
+            const next = (event.target as HTMLInputElement).checked
+            onChange(next)
+        })
+
+        row.appendChild(text)
+        row.appendChild(input)
+        parent.appendChild(row)
+
+        return input
+    }
+
+    private addSlider(
+        parent: HTMLDivElement | HTMLElement,
+        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 = this.formatValue(value, step)
+
+        input.addEventListener('input', (event) => {
+            const next = parseFloat((event.target as HTMLInputElement).value)
+            valueTag.textContent = this.formatValue(next, step)
+            onChange(next)
+        })
+
+        row.appendChild(text)
+        row.appendChild(input)
+        row.appendChild(valueTag)
+        parent.appendChild(row)
+
+        return { input, valueTag }
+    }
+
+    private addSelect(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)
+        })
+
+        row.appendChild(text)
+        row.appendChild(select)
+        this.panel.appendChild(row)
+
+        return select
+    }
+
+    private updateBloom() {
+        this.bloomPass.strength = this.params.bloomStrength
+        this.bloomPass.radius = this.params.bloomRadius
+    }
+
+    private formatValue(value: number, step: number) {
+        return step >= 1 ? value.toFixed(0) : value.toFixed(2)
+    }
+
+    private syncSlider(control: SliderHandle, value: number) {
+        control.input.value = String(value)
+        control.valueTag.textContent = this.formatValue(value, parseFloat(control.input.step))
+    }
+}

package/src/modules/field-loader.ts

@@ -0,0 +1,71 @@
+import type { VectorDatum, FieldTransform } from '../lib/types'
+import { WORLD_EXTENT } from '../lib/constants'
+
+export class FieldLoader {
+    private fieldStatusEl: HTMLElement | null = null
+    private onFieldLoaded: (data: VectorDatum[], transform: FieldTransform) => void
+
+    constructor(
+        onFieldLoaded: (data: VectorDatum[], transform: FieldTransform) => void,
+    ) {
+        this.onFieldLoaded = onFieldLoaded
+    }
+
+    setStatusElement(el: HTMLElement | null) {
+        this.fieldStatusEl = el
+    }
+
+    async load() {
+        try {
+            const res = await fetch('/vector-field.json', { cache: 'no-store' })
+            if (!res.ok) {
+                this.updateStatus('default (built-in)')
+                return
+            }
+            const data = (await res.json()) as VectorDatum[]
+            if (Array.isArray(data) && data.length > 0) {
+                const { transform, bounds } = this.computeFieldTransform(data)
+                this.onFieldLoaded(data, transform)
+                this.updateStatus(`loaded ${data.length} vectors (${bounds.width.toFixed(1)}×${bounds.height.toFixed(1)})`)
+                console.log('Field bounds:', bounds, 'scale:', transform.scale)
+            } else {
+                this.updateStatus('default (empty file)')
+            }
+        } catch (error) {
+            console.error('Failed to load vector field', error)
+            this.updateStatus('default (load error)')
+        }
+    }
+
+    computeFieldTransform(data: VectorDatum[]) {
+        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)
+
+        const targetSize = WORLD_EXTENT * 1.8
+        const scale = dataSize > 0 ? targetSize / dataSize : 1
+        const offsetX = -(minX + maxX) * 0.5 * scale
+        const offsetY = -(minY + maxY) * 0.5 * scale
+
+        return {
+            transform: { scale, offsetX, offsetY },
+            bounds: { minX, maxX, minY, maxY, width: dataWidth, height: dataHeight },
+        }
+    }
+
+    updateStatus(label: string) {
+        if (this.fieldStatusEl) this.fieldStatusEl.textContent = label
+    }
+}