Skip to content

Commit 35afbf9

Browse files
hyperb1isshyperb1iss
committed
🎛️ Reorganize effect controls into logical sections
Groups decorator controls across all effects by category (Style, Animation, Audio, etc.) to improve UI organization and usability. Maintains original ordering within each section while adding clear visual separators.
1 parent 0b3b710 commit 35afbf9

File tree

11 files changed

+613
-431
lines changed

11 files changed

+613
-431
lines changed

‎src/effects/audio-pulse/main.ts‎

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,30 @@ export interface AudioPulseControls {
5151
name: 'Audio Pulse',
5252
})
5353
export class AudioPulseEffect extends WebGLEffect<AudioPulseControls> {
54+
// ═══════════════════════════════════════════════════════════════
55+
// STYLE
56+
// ═══════════════════════════════════════════════════════════════
57+
58+
@ComboboxControl({
59+
default: 'Pulse Field',
60+
label: 'Style',
61+
tooltip: 'Visualization style',
62+
values: ['Pulse Field', 'Grid', 'Waveform', 'Vortex'],
63+
})
64+
visualStyle!: string
65+
66+
@ComboboxControl({
67+
default: 'Cyberpunk',
68+
label: 'Colors',
69+
tooltip: 'Color scheme preset',
70+
values: ['Cyberpunk', 'Lava', 'Aurora', 'Vaporwave', 'Toxic', 'Prism'],
71+
})
72+
colorScheme!: string
73+
74+
// ═══════════════════════════════════════════════════════════════
75+
// AUDIO
76+
// ═══════════════════════════════════════════════════════════════
77+
5478
@NumberControl({
5579
default: 50,
5680
label: 'Sensitivity',
@@ -78,6 +102,10 @@ export class AudioPulseEffect extends WebGLEffect<AudioPulseControls> {
78102
})
79103
bassBoost!: number
80104

105+
// ═══════════════════════════════════════════════════════════════
106+
// VISUAL
107+
// ═══════════════════════════════════════════════════════════════
108+
81109
@NumberControl({
82110
default: 30,
83111
label: 'Color Speed',
@@ -105,6 +133,19 @@ export class AudioPulseEffect extends WebGLEffect<AudioPulseControls> {
105133
})
106134
glowIntensity!: number
107135

136+
@NumberControl({
137+
default: 30,
138+
label: 'Flow',
139+
max: 100,
140+
min: -100,
141+
tooltip: 'Negative = inward pull, positive = outward burst',
142+
})
143+
flow!: number
144+
145+
// ═══════════════════════════════════════════════════════════════
146+
// ADVANCED
147+
// ═══════════════════════════════════════════════════════════════
148+
108149
@NumberControl({
109150
default: 0,
110151
label: 'Direction',
@@ -123,31 +164,6 @@ export class AudioPulseEffect extends WebGLEffect<AudioPulseControls> {
123164
})
124165
bend!: number
125166

126-
@NumberControl({
127-
default: 30,
128-
label: 'Flow',
129-
max: 100,
130-
min: -100,
131-
tooltip: 'Negative = inward pull, positive = outward burst',
132-
})
133-
flow!: number
134-
135-
@ComboboxControl({
136-
default: 'Pulse Field',
137-
label: 'Style',
138-
tooltip: 'Visualization style',
139-
values: ['Pulse Field', 'Grid', 'Waveform', 'Vortex'],
140-
})
141-
visualStyle!: string
142-
143-
@ComboboxControl({
144-
default: 'Cyberpunk',
145-
label: 'Colors',
146-
tooltip: 'Color scheme preset',
147-
values: ['Cyberpunk', 'Lava', 'Aurora', 'Vaporwave', 'Toxic', 'Prism'],
148-
})
149-
colorScheme!: string
150-
151167
constructor() {
152168
super({
153169
audioReactive: true, // Enable audio uniforms

‎src/effects/black-hole/main.ts‎

Lines changed: 45 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -51,35 +51,9 @@ export interface BlackHoleControls {
5151
name: 'Black Hole Spaghettification',
5252
})
5353
export class BlackHoleEffect extends WebGLEffect<BlackHoleControls> {
54-
@NumberControl({ default: 120, label: 'Mass', max: 200, min: 20, tooltip: 'Gravitational strength' })
55-
mass!: number
56-
57-
@NumberControl({ default: 60, label: 'Spin', max: 100, min: 0, tooltip: 'Frame dragging (swirl)' })
58-
spin!: number
59-
60-
@NumberControl({ default: 130, label: 'Disk Intensity', max: 200, min: 0, tooltip: 'Accretion disk brightness' })
61-
diskIntensity!: number
62-
63-
@NumberControl({ default: 50, label: 'Disk Thickness', max: 100, min: 0, tooltip: 'Accretion disk width' })
64-
diskThickness!: number
65-
66-
@NumberControl({ default: 100, label: 'Lensing', max: 200, min: 0, tooltip: 'Warp amount' })
67-
lensing!: number
68-
69-
@NumberControl({ default: 80, label: 'Star Density', max: 200, min: 0, tooltip: 'Background star density' })
70-
starDensity!: number
71-
72-
@NumberControl({ default: 70, label: 'Relativity', max: 100, min: 0, tooltip: 'Relativistic effects strength' })
73-
relativity!: number
74-
75-
@NumberControl({ default: 120, label: 'Saturation', max: 200, min: 0, tooltip: 'Color saturation' })
76-
saturation!: number
77-
78-
@NumberControl({ default: 110, label: 'Brightness', max: 200, min: 10, tooltip: 'Overall brightness' })
79-
brightness!: number
80-
81-
@NumberControl({ default: 35, label: 'Highlights', max: 100, min: 0, tooltip: 'Roll-off for bright highlights' })
82-
highlight!: number
54+
// ═══════════════════════════════════════════════════════════════
55+
// STYLE
56+
// ═══════════════════════════════════════════════════════════════
8357

8458
@ComboboxControl({
8559
default: 'Aurora',
@@ -106,6 +80,48 @@ export class BlackHoleEffect extends WebGLEffect<BlackHoleControls> {
10680
})
10781
palette!: string
10882

83+
// ═══════════════════════════════════════════════════════════════
84+
// BLACK HOLE
85+
// ═══════════════════════════════════════════════════════════════
86+
87+
@NumberControl({ default: 120, label: 'Mass', max: 200, min: 20, tooltip: 'Gravitational strength' })
88+
mass!: number
89+
90+
@NumberControl({ default: 60, label: 'Spin', max: 100, min: 0, tooltip: 'Frame dragging (swirl)' })
91+
spin!: number
92+
93+
@NumberControl({ default: 100, label: 'Lensing', max: 200, min: 0, tooltip: 'Warp amount' })
94+
lensing!: number
95+
96+
@NumberControl({ default: 70, label: 'Relativity', max: 100, min: 0, tooltip: 'Relativistic effects strength' })
97+
relativity!: number
98+
99+
// ═══════════════════════════════════════════════════════════════
100+
// ACCRETION DISK
101+
// ═══════════════════════════════════════════════════════════════
102+
103+
@NumberControl({ default: 130, label: 'Disk Intensity', max: 200, min: 0, tooltip: 'Accretion disk brightness' })
104+
diskIntensity!: number
105+
106+
@NumberControl({ default: 50, label: 'Disk Thickness', max: 100, min: 0, tooltip: 'Accretion disk width' })
107+
diskThickness!: number
108+
109+
@NumberControl({ default: 80, label: 'Star Density', max: 200, min: 0, tooltip: 'Background star density' })
110+
starDensity!: number
111+
112+
// ═══════════════════════════════════════════════════════════════
113+
// COLOR
114+
// ═══════════════════════════════════════════════════════════════
115+
116+
@NumberControl({ default: 120, label: 'Saturation', max: 200, min: 0, tooltip: 'Color saturation' })
117+
saturation!: number
118+
119+
@NumberControl({ default: 110, label: 'Brightness', max: 200, min: 10, tooltip: 'Overall brightness' })
120+
brightness!: number
121+
122+
@NumberControl({ default: 35, label: 'Highlights', max: 100, min: 0, tooltip: 'Roll-off for bright highlights' })
123+
highlight!: number
124+
109125
constructor() {
110126
super({ debug: true, fragmentShader, id: 'black-hole', name: 'Black Hole Spaghettification' })
111127
}

‎src/effects/cyber-descent/cyber-descent-effect.ts‎

Lines changed: 65 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -41,23 +41,9 @@ declare global {
4141
name: 'Cyber Descent',
4242
})
4343
export class CyberDescentEffect extends WebGLEffect<CyberDescentControls> {
44-
@NumberControl({
45-
default: 5,
46-
label: 'Flight Speed',
47-
max: 10,
48-
min: 1,
49-
tooltip: 'Controls the speed of movement through the city (1=Slow, 10=Fast)',
50-
})
51-
speed!: number
52-
53-
@NumberControl({
54-
default: 10,
55-
label: 'Camera Zoom',
56-
max: 20,
57-
min: 5,
58-
tooltip: 'Adjusts the field of view (5=Wide, 20=Narrow)',
59-
})
60-
zoom!: number
44+
// ═══════════════════════════════════════════════════════════════
45+
// STYLE
46+
// ═══════════════════════════════════════════════════════════════
6147

6248
@ComboboxControl({
6349
default: 'Standard',
@@ -75,44 +61,30 @@ export class CyberDescentEffect extends WebGLEffect<CyberDescentControls> {
7561
})
7662
colorPalette!: string
7763

78-
@NumberControl({
79-
default: 100,
80-
label: 'Fog Density',
81-
max: 200,
82-
min: 10,
83-
tooltip: 'Controls the density of the atmospheric fog effect',
84-
})
85-
fogDensity!: number
86-
87-
@NumberControl({
88-
default: 100,
89-
label: 'Light Intensity',
90-
max: 200,
91-
min: 10,
92-
tooltip: 'Controls the brightness of the city lights',
93-
})
94-
lightIntensity!: number
64+
// ═══════════════════════════════════════════════════════════════
65+
// ANIMATION
66+
// ═══════════════════════════════════════════════════════════════
9567

9668
@NumberControl({
97-
default: 100,
98-
label: 'Color Saturation',
99-
max: 200,
100-
min: 0,
101-
tooltip: 'Adjust color saturation level (0=B&W, 100=Normal)',
69+
default: 5,
70+
label: 'Flight Speed',
71+
max: 10,
72+
min: 1,
73+
tooltip: 'Controls the speed of movement through the city (1=Slow, 10=Fast)',
10274
})
103-
colorSaturation!: number
75+
speed!: number
10476

10577
@NumberControl({
106-
default: 100,
107-
label: 'Color Intensity',
108-
max: 200,
109-
min: 10,
110-
tooltip: 'Adjust color brightness (100=Normal)',
78+
default: 10,
79+
label: 'Camera Zoom',
80+
max: 20,
81+
min: 5,
82+
tooltip: 'Adjusts the field of view (5=Wide, 20=Narrow)',
11183
})
112-
colorIntensity!: number
84+
zoom!: number
11385

11486
// ═══════════════════════════════════════════════════════════════
115-
// MOVEMENT CONTROLS
87+
// CAMERA
11688
// ═══════════════════════════════════════════════════════════════
11789

11890
@NumberControl({
@@ -143,7 +115,7 @@ export class CyberDescentEffect extends WebGLEffect<CyberDescentControls> {
143115
cameraYaw!: number
144116

145117
// ═══════════════════════════════════════════════════════════════
146-
// STYLE CONTROLS
118+
// CITY
147119
// ═══════════════════════════════════════════════════════════════
148120

149121
@NumberControl({
@@ -155,6 +127,15 @@ export class CyberDescentEffect extends WebGLEffect<CyberDescentControls> {
155127
})
156128
buildingHeight!: number
157129

130+
@NumberControl({
131+
default: 2,
132+
label: 'Building Fill',
133+
max: 10,
134+
min: 0,
135+
tooltip: 'Surface detail for RGB (0=Dark gaps, 10=Full glow)',
136+
})
137+
buildingFill!: number
138+
158139
@NumberControl({
159140
default: 5,
160141
label: 'Neon Flash',
@@ -173,14 +154,45 @@ export class CyberDescentEffect extends WebGLEffect<CyberDescentControls> {
173154
})
174155
streetLights!: number
175156

157+
// ═══════════════════════════════════════════════════════════════
158+
// COLOR
159+
// ═══════════════════════════════════════════════════════════════
160+
176161
@NumberControl({
177-
default: 2,
178-
label: 'Building Fill',
179-
max: 10,
162+
default: 100,
163+
label: 'Color Intensity',
164+
max: 200,
165+
min: 10,
166+
tooltip: 'Adjust color brightness (100=Normal)',
167+
})
168+
colorIntensity!: number
169+
170+
@NumberControl({
171+
default: 100,
172+
label: 'Color Saturation',
173+
max: 200,
180174
min: 0,
181-
tooltip: 'Surface detail for RGB (0=Dark gaps, 10=Full glow)',
175+
tooltip: 'Adjust color saturation level (0=B&W, 100=Normal)',
182176
})
183-
buildingFill!: number
177+
colorSaturation!: number
178+
179+
@NumberControl({
180+
default: 100,
181+
label: 'Light Intensity',
182+
max: 200,
183+
min: 10,
184+
tooltip: 'Controls the brightness of the city lights',
185+
})
186+
lightIntensity!: number
187+
188+
@NumberControl({
189+
default: 100,
190+
label: 'Fog Density',
191+
max: 200,
192+
min: 10,
193+
tooltip: 'Controls the density of the atmospheric fog effect',
194+
})
195+
fogDensity!: number
184196

185197
constructor() {
186198
super({

0 commit comments

Comments
 (0)