@firecms/neat 0.4.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +365 -68
  2. package/dist/NeatGradient.d.ts +105 -0
  3. package/dist/NeatGradient.js +855 -200
  4. package/dist/NeatGradient.js.map +1 -1
  5. package/dist/index.es.js +619 -235
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/index.umd.js +139 -115
  8. package/dist/index.umd.js.map +1 -1
  9. package/package.json +3 -3
  10. package/src/NeatGradient.ts +1017 -204
package/dist/index.es.js CHANGED
@@ -1,6 +1,6 @@
1
- import * as i from "three";
2
- const _ = 50, g = 80, W = !0, S = 5, X = new i.Clock(), R = ee();
3
- class oe {
1
+ import * as l from "three";
2
+ const U = 50, D = 80, be = !0, j = 6, ze = new l.Clock(), Q = Te();
3
+ class Be {
4
4
  _ref;
5
5
  _speed = -1;
6
6
  _horizontalPressure = -1;
@@ -21,72 +21,159 @@ class oe {
21
21
  _wireframe = !1;
22
22
  _backgroundColor = "#FFFFFF";
23
23
  _backgroundAlpha = 1;
24
+ _flowDistortionA = 0;
25
+ _flowDistortionB = 0;
26
+ _flowScale = 1;
27
+ _flowEase = 0;
28
+ _flowEnabled = !0;
29
+ _mouseDistortionStrength = 0;
30
+ _mouseDistortionRadius = 0.25;
31
+ _mouseDecayRate = 0.96;
32
+ _mouseDarken = 0;
33
+ _mouse = new l.Vector2(-1e3, -1e3);
34
+ _mouseFBO = null;
35
+ _sceneMouse = null;
36
+ _cameraMouse = null;
37
+ _mouseObjects = [];
38
+ _currentBrush = 0;
39
+ _mouseBrushBaseScale = 1;
40
+ _enableProceduralTexture = !1;
41
+ _textureVoidLikelihood = 0.45;
42
+ _textureVoidWidthMin = 200;
43
+ _textureVoidWidthMax = 486;
44
+ _textureBandDensity = 2.15;
45
+ _textureColorBlending = 0.01;
46
+ _textureSeed = 333;
47
+ _textureEase = 0.5;
48
+ _proceduralTexture = null;
49
+ _proceduralBackgroundColor = "#000000";
50
+ _textureShapeTriangles = 20;
51
+ _textureShapeCircles = 15;
52
+ _textureShapeBars = 15;
53
+ _textureShapeSquiggles = 10;
24
54
  requestRef = -1;
25
55
  sizeObserver;
26
56
  sceneState;
57
+ _cachedUniforms = null;
58
+ _linkElement = null;
27
59
  _yOffset = 0;
60
+ _yOffsetWaveMultiplier = 4e-3;
61
+ _yOffsetColorMultiplier = 4e-3;
62
+ _yOffsetFlowMultiplier = 4e-3;
63
+ _tempClearColor = new l.Color();
64
+ _resizeTimeoutId = null;
65
+ _textureNeedsUpdate = !1;
66
+ _lastColorUpdate = 0;
67
+ _linkCheckCounter = 0;
68
+ _mouseUpdateScheduled = !1;
69
+ _pendingMousePosition = null;
70
+ _colorsChanged = !0;
28
71
  constructor(e) {
29
72
  const {
30
- ref: o,
31
- speed: n = 4,
32
- horizontalPressure: s = 3,
33
- verticalPressure: a = 3,
34
- waveFrequencyX: c = 5,
35
- waveFrequencyY: v = 5,
36
- waveAmplitude: f = 3,
37
- colors: l,
38
- highlights: u = 4,
39
- shadows: h = 4,
40
- colorSaturation: p = 0,
41
- colorBrightness: w = 1,
42
- colorBlending: z = 5,
43
- grainScale: E = 2,
44
- grainIntensity: B = 0.55,
45
- grainSparsity: D = 0,
46
- grainSpeed: k = 0.1,
47
- wireframe: K = !1,
48
- backgroundColor: L = "#FFFFFF",
49
- backgroundAlpha: U = 1,
50
- resolution: V = 1,
51
- seed: C,
52
- yOffset: G = 0
73
+ ref: s,
74
+ speed: t = 4,
75
+ horizontalPressure: f = 3,
76
+ verticalPressure: c = 3,
77
+ waveFrequencyX: o = 5,
78
+ waveFrequencyY: p = 5,
79
+ waveAmplitude: g = 3,
80
+ colors: d,
81
+ highlights: v = 4,
82
+ shadows: u = 4,
83
+ colorSaturation: x = 0,
84
+ colorBrightness: O = 1,
85
+ colorBlending: M = 5,
86
+ grainScale: z = 2,
87
+ grainIntensity: y = 0.55,
88
+ grainSparsity: F = 0,
89
+ grainSpeed: C = 0.1,
90
+ wireframe: a = !1,
91
+ backgroundColor: n = "#FFFFFF",
92
+ backgroundAlpha: h = 1,
93
+ resolution: _ = 1,
94
+ seed: S,
95
+ yOffset: B = 0,
96
+ yOffsetWaveMultiplier: N = 4,
97
+ yOffsetColorMultiplier: V = 4,
98
+ yOffsetFlowMultiplier: $ = 4,
99
+ flowDistortionA: ee = 0,
100
+ flowDistortionB: te = 0,
101
+ flowScale: oe = 1,
102
+ flowEase: se = 0,
103
+ flowEnabled: ie = !0,
104
+ mouseDistortionStrength: re = 0,
105
+ mouseDistortionRadius: ae = 0.25,
106
+ mouseDecayRate: le = 0.96,
107
+ mouseDarken: ne = 0,
108
+ enableProceduralTexture: ue = !1,
109
+ textureVoidLikelihood: ce = 0.45,
110
+ textureVoidWidthMin: _e = 200,
111
+ textureVoidWidthMax: he = 486,
112
+ textureBandDensity: fe = 2.15,
113
+ textureColorBlending: de = 0.01,
114
+ textureSeed: pe = 333,
115
+ textureEase: ve = 0.5,
116
+ proceduralBackgroundColor: xe = "#000000",
117
+ textureShapeTriangles: ge = 20,
118
+ textureShapeCircles: me = 15,
119
+ textureShapeBars: ye = 15,
120
+ textureShapeSquiggles: we = 10
53
121
  } = e;
54
- this._ref = o, this.destroy = this.destroy.bind(this), this._initScene = this._initScene.bind(this), this._buildMaterial = this._buildMaterial.bind(this), this.speed = n, this.horizontalPressure = s, this.verticalPressure = a, this.waveFrequencyX = c, this.waveFrequencyY = v, this.waveAmplitude = f, this.colorBlending = z, this.grainScale = E, this.grainIntensity = B, this.grainSparsity = D, this.grainSpeed = k, this.colors = l, this.shadows = h, this.highlights = u, this.colorSaturation = p, this.colorBrightness = w, this.wireframe = K, this.backgroundColor = L, this.backgroundAlpha = U, this.yOffset = G, this.sceneState = this._initScene(V);
55
- let b = C !== void 0 ? C : $();
56
- const q = () => {
57
- const { renderer: d, camera: m, scene: y, meshes: x } = this.sceneState;
58
- Math.floor(b * 10) % 5 === 0 && Z(o), d.setClearColor(this._backgroundColor, this._backgroundAlpha), x.forEach((r) => {
59
- const j = this._ref.width, Y = this._ref.height, H = [
60
- ...this._colors.map((P) => {
61
- let F = new i.Color();
62
- return F.setStyle(P.color, ""), {
63
- is_active: P.enabled,
64
- color: F,
65
- influence: P.influence
66
- };
67
- }),
68
- ...Array.from({ length: S - this._colors.length }).map(() => ({
69
- is_active: !1,
70
- color: new i.Color(0)
71
- }))
72
- ];
73
- b += X.getDelta() * this._speed, r.material.uniforms.u_time.value = b, r.material.uniforms.u_resolution = { value: new i.Vector2(j, Y) }, r.material.uniforms.u_color_pressure = { value: new i.Vector2(this._horizontalPressure, this._verticalPressure) }, r.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX }, r.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY }, r.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude }, r.material.uniforms.u_plane_width = { value: _ }, r.material.uniforms.u_plane_height = { value: g }, r.material.uniforms.u_color_blending = { value: this._colorBlending }, r.material.uniforms.u_colors = { value: H }, r.material.uniforms.u_colors_count = { value: S }, r.material.uniforms.u_shadows = { value: this._shadows }, r.material.uniforms.u_highlights = { value: this._highlights }, r.material.uniforms.u_saturation = { value: this._saturation }, r.material.uniforms.u_brightness = { value: this._brightness }, r.material.uniforms.u_grain_intensity = { value: this._grainIntensity }, r.material.uniforms.u_grain_sparsity = { value: this._grainSparsity }, r.material.uniforms.u_grain_speed = { value: this._grainSpeed }, r.material.uniforms.u_grain_scale = { value: this._grainScale }, r.material.uniforms.u_y_offset = { value: this._yOffset }, r.material.wireframe = this._wireframe;
74
- }), d.render(y, m), this.requestRef = requestAnimationFrame(q);
75
- }, T = () => {
76
- const { renderer: d } = this.sceneState, m = d.domElement, y = m.clientWidth, x = m.clientHeight;
77
- this.sceneState.renderer.setSize(y, x, !1), A(this.sceneState.camera, y, x);
122
+ this._ref = s, this.destroy = this.destroy.bind(this), this._initScene = this._initScene.bind(this), this._buildMaterial = this._buildMaterial.bind(this), this.speed = t, this.horizontalPressure = f, this.verticalPressure = c, this.waveFrequencyX = o, this.waveFrequencyY = p, this.waveAmplitude = g, this.colorBlending = M, this.grainScale = z, this.grainIntensity = y, this.grainSparsity = F, this.grainSpeed = C, this.colors = d, this.shadows = u, this.highlights = v, this.colorSaturation = x, this.colorBrightness = O, this.wireframe = a, this.backgroundColor = n, this.backgroundAlpha = h, this.yOffset = B, this.yOffsetWaveMultiplier = N, this.yOffsetColorMultiplier = V, this.yOffsetFlowMultiplier = $, this.flowDistortionA = ee, this.flowDistortionB = te, this.flowScale = oe, this.flowEase = se, this.flowEnabled = ie, this.mouseDistortionStrength = re, this.mouseDistortionRadius = ae, this.mouseDecayRate = le, this.mouseDarken = ne, this.enableProceduralTexture = ue, this.textureVoidLikelihood = ce, this.textureVoidWidthMin = _e, this.textureVoidWidthMax = he, this.textureBandDensity = fe, this.textureColorBlending = de, this.textureSeed = pe, this.textureEase = ve, this._proceduralBackgroundColor = xe, this._textureShapeTriangles = ge, this._textureShapeCircles = me, this._textureShapeBars = ye, this._textureShapeSquiggles = we, this._setupMouseInteraction(), this.sceneState = this._initScene(_);
123
+ let G = S !== void 0 ? S : Oe();
124
+ const X = () => {
125
+ const { renderer: w, camera: E, scene: T } = this.sceneState;
126
+ if (this._linkCheckCounter++, this._linkCheckCounter >= 300 && (this._linkCheckCounter = 0, (!this._linkElement || !document.contains(this._linkElement)) && (this._linkElement = Pe(s))), this._cachedUniforms) {
127
+ const i = this._cachedUniforms;
128
+ G += ze.getDelta() * this._speed, i.u_time.value = G, i.u_resolution.value.set(this._ref.width, this._ref.height), i.u_color_pressure.value.set(this._horizontalPressure, this._verticalPressure), i.u_wave_frequency_x.value = this._waveFrequencyX, i.u_wave_frequency_y.value = this._waveFrequencyY, i.u_wave_amplitude.value = this._waveAmplitude, i.u_color_blending.value = this._colorBlending, i.u_shadows.value = this._shadows, i.u_highlights.value = this._highlights, i.u_saturation.value = this._saturation, i.u_brightness.value = this._brightness, i.u_grain_intensity.value = this._grainIntensity, i.u_grain_sparsity.value = this._grainSparsity, i.u_grain_speed.value = this._grainSpeed, i.u_grain_scale.value = this._grainScale, i.u_y_offset.value = this._yOffset, i.u_y_offset_wave_multiplier.value = this._yOffsetWaveMultiplier, i.u_y_offset_color_multiplier.value = this._yOffsetColorMultiplier, i.u_y_offset_flow_multiplier.value = this._yOffsetFlowMultiplier, i.u_flow_distortion_a.value = this._flowDistortionA, i.u_flow_distortion_b.value = this._flowDistortionB, i.u_flow_scale.value = this._flowScale, i.u_flow_ease.value = this._flowEase, i.u_flow_enabled.value = this._flowEnabled ? 1 : 0, i.u_mouse_distortion_strength.value = this._mouseDistortionStrength, i.u_mouse_distortion_radius.value = this._mouseDistortionRadius, i.u_mouse_darken.value = this._mouseDarken, i.u_enable_procedural_texture.value = this._enableProceduralTexture ? 1 : 0, this._textureNeedsUpdate && this._enableProceduralTexture && (this._proceduralTexture && this._proceduralTexture.dispose(), this._proceduralTexture = this._createProceduralTexture(), this._textureNeedsUpdate = !1), i.u_procedural_texture.value = this._proceduralTexture, i.u_texture_ease.value = this._textureEase, this.sceneState.meshes[0].material.wireframe = this._wireframe;
129
+ const m = Date.now();
130
+ if (this._colorsChanged || m - this._lastColorUpdate > 100) {
131
+ this._lastColorUpdate = m, this._colorsChanged = !1;
132
+ const q = i.u_colors.value;
133
+ for (let P = 0; P < j; P++)
134
+ if (P < this._colors.length) {
135
+ const L = this._colors[P];
136
+ q[P].is_active = L.enabled ? 1 : 0, q[P].color.setStyle(L.color, ""), q[P].influence = L.influence || 0;
137
+ } else
138
+ q[P].is_active = 0;
139
+ i.u_colors_count.value = j;
140
+ }
141
+ }
142
+ if (this._mouseFBO && this._sceneMouse && this._cameraMouse && this._mouseDistortionStrength > 0) {
143
+ let i = !1;
144
+ for (let m = 0; m < this._mouseObjects.length; m++) {
145
+ const b = this._mouseObjects[m];
146
+ b.mesh.visible && (i = !0, b.mesh.rotation.z += 0.01, b.mesh.material instanceof l.MeshBasicMaterial && (b.mesh.material.opacity *= this._mouseDecayRate, b.mesh.material.opacity < 0.01 && (b.mesh.visible = !1)));
147
+ }
148
+ if (i) {
149
+ w.getClearColor(this._tempClearColor);
150
+ const m = w.getClearAlpha();
151
+ w.setClearColor(0, 0), w.setRenderTarget(this._mouseFBO), w.clear(), w.render(this._sceneMouse, this._cameraMouse), w.setRenderTarget(null), w.setClearColor(this._tempClearColor, m), this._cachedUniforms && (this._cachedUniforms.u_mouse_texture.value = this._mouseFBO.texture);
152
+ }
153
+ }
154
+ w.setClearColor(this._backgroundColor, this._backgroundAlpha), w.render(T, E), this.requestRef = requestAnimationFrame(X);
155
+ }, Se = () => {
156
+ const { renderer: w } = this.sceneState, E = w.domElement, T = E.clientWidth, i = E.clientHeight;
157
+ if (this.sceneState.renderer.setSize(T, i, !1), K(this.sceneState.camera, T, i), this._mouseFBO && this._cameraMouse) {
158
+ const m = i / 2, b = T / i;
159
+ this._mouseFBO.setSize(T / 2, i / 2), this._cameraMouse.left = -m * b, this._cameraMouse.right = m * b, this._cameraMouse.top = m, this._cameraMouse.bottom = -m, this._cameraMouse.updateProjectionMatrix();
160
+ }
78
161
  };
79
- this.sizeObserver = new ResizeObserver((d) => {
80
- T();
81
- }), this.sizeObserver.observe(o), q();
162
+ this.sizeObserver = new ResizeObserver(() => {
163
+ this._resizeTimeoutId !== null && clearTimeout(this._resizeTimeoutId), this._resizeTimeoutId = window.setTimeout(() => {
164
+ Se(), this._resizeTimeoutId = null;
165
+ }, 100);
166
+ }), this.sizeObserver.observe(s), X();
82
167
  }
83
168
  destroy() {
84
- this && (cancelAnimationFrame(this.requestRef), this.sizeObserver.disconnect());
169
+ this && (cancelAnimationFrame(this.requestRef), this.sizeObserver.disconnect(), this._resizeTimeoutId !== null && (clearTimeout(this._resizeTimeoutId), this._resizeTimeoutId = null), this.sceneState && (this.sceneState.renderer.dispose(), this.sceneState.meshes.forEach((e) => {
170
+ e.geometry.dispose(), Array.isArray(e.material) ? e.material.forEach((s) => s.dispose()) : e.material.dispose();
171
+ })), this._mouseFBO && this._mouseFBO.dispose(), this._proceduralTexture && this._proceduralTexture.dispose());
85
172
  }
86
173
  downloadAsPNG(e = "neat.png") {
87
174
  console.log("Downloading as PNG", this._ref);
88
- const o = this._ref.toDataURL("image/png");
89
- console.log("data", o), te(o, e);
175
+ const s = this._ref.toDataURL("image/png");
176
+ console.log("data", s), Fe(s, e);
90
177
  }
91
178
  set speed(e) {
92
179
  this._speed = e / 20;
@@ -107,7 +194,7 @@ class oe {
107
194
  this._waveAmplitude = e * 0.75;
108
195
  }
109
196
  set colors(e) {
110
- this._colors = e;
197
+ this._colors = e, this._colorsChanged = !0;
111
198
  }
112
199
  set highlights(e) {
113
200
  this._highlights = e / 100;
@@ -151,101 +238,392 @@ class oe {
151
238
  set yOffset(e) {
152
239
  this._yOffset = e;
153
240
  }
241
+ get yOffsetWaveMultiplier() {
242
+ return this._yOffsetWaveMultiplier * 1e3;
243
+ }
244
+ set yOffsetWaveMultiplier(e) {
245
+ this._yOffsetWaveMultiplier = e / 1e3;
246
+ }
247
+ get yOffsetColorMultiplier() {
248
+ return this._yOffsetColorMultiplier * 1e3;
249
+ }
250
+ set yOffsetColorMultiplier(e) {
251
+ this._yOffsetColorMultiplier = e / 1e3;
252
+ }
253
+ get yOffsetFlowMultiplier() {
254
+ return this._yOffsetFlowMultiplier * 1e3;
255
+ }
256
+ set yOffsetFlowMultiplier(e) {
257
+ this._yOffsetFlowMultiplier = e / 1e3;
258
+ }
259
+ set flowDistortionA(e) {
260
+ this._flowDistortionA = e;
261
+ }
262
+ set flowDistortionB(e) {
263
+ this._flowDistortionB = e;
264
+ }
265
+ set flowScale(e) {
266
+ this._flowScale = e;
267
+ }
268
+ set flowEase(e) {
269
+ this._flowEase = e;
270
+ }
271
+ set flowEnabled(e) {
272
+ this._flowEnabled = e;
273
+ }
274
+ get flowEnabled() {
275
+ return this._flowEnabled;
276
+ }
277
+ set mouseDistortionStrength(e) {
278
+ this._mouseDistortionStrength = Math.max(0, e);
279
+ }
280
+ set mouseDistortionRadius(e) {
281
+ this._mouseDistortionRadius = Math.max(0.01, Math.min(e, 1)), this._updateBrushScale();
282
+ }
283
+ _updateBrushScale() {
284
+ !this._mouseObjects || this._mouseObjects.length === 0 || (this._mouseBrushBaseScale = this._mouseDistortionRadius);
285
+ }
286
+ set mouseDecayRate(e) {
287
+ this._mouseDecayRate = Math.max(0.9, Math.min(e, 0.99));
288
+ }
289
+ set mouseDarken(e) {
290
+ this._mouseDarken = e;
291
+ }
292
+ set enableProceduralTexture(e) {
293
+ this._enableProceduralTexture = e, e && !this._proceduralTexture && (this._textureNeedsUpdate = !0);
294
+ }
295
+ set textureVoidLikelihood(e) {
296
+ this._textureVoidLikelihood = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
297
+ }
298
+ set textureVoidWidthMin(e) {
299
+ this._textureVoidWidthMin = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
300
+ }
301
+ set textureVoidWidthMax(e) {
302
+ this._textureVoidWidthMax = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
303
+ }
304
+ set textureBandDensity(e) {
305
+ this._textureBandDensity = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
306
+ }
307
+ set textureColorBlending(e) {
308
+ this._textureColorBlending = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
309
+ }
310
+ set textureSeed(e) {
311
+ this._textureSeed = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
312
+ }
313
+ get textureEase() {
314
+ return this._textureEase;
315
+ }
316
+ set textureEase(e) {
317
+ this._textureEase = e;
318
+ }
319
+ set proceduralBackgroundColor(e) {
320
+ this._proceduralBackgroundColor = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
321
+ }
322
+ set textureShapeTriangles(e) {
323
+ this._textureShapeTriangles = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
324
+ }
325
+ set textureShapeCircles(e) {
326
+ this._textureShapeCircles = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
327
+ }
328
+ set textureShapeBars(e) {
329
+ this._textureShapeBars = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
330
+ }
331
+ set textureShapeSquiggles(e) {
332
+ this._textureShapeSquiggles = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
333
+ }
154
334
  _initScene(e) {
155
- const o = this._ref.width, n = this._ref.height, s = new i.WebGLRenderer({
335
+ const s = this._ref.width, t = this._ref.height;
336
+ this.sceneState && this.sceneState.renderer && (this.sceneState.renderer.dispose(), this.sceneState.meshes.forEach((u) => {
337
+ u.geometry.dispose(), Array.isArray(u.material) ? u.material.forEach((x) => x.dispose()) : u.material.dispose();
338
+ }));
339
+ const f = new l.WebGLRenderer({
156
340
  alpha: !0,
157
341
  preserveDrawingBuffer: !0,
158
342
  canvas: this._ref
159
343
  });
160
- s.setClearColor(16711680, 0.5), s.setSize(o, n, !1);
161
- const a = [], c = new i.Scene(), v = this._buildMaterial(o, n), f = new i.PlaneGeometry(_, g, 240 * e, 240 * e), l = new i.Mesh(f, v);
162
- l.rotation.x = -Math.PI / 3.5, l.position.z = -1, a.push(l), c.add(l);
163
- const u = new i.OrthographicCamera(0, 0, 0, 0, 0, 0);
164
- return u.position.z = 5, A(u, o, n), {
165
- renderer: s,
166
- camera: u,
167
- scene: c,
168
- meshes: a,
344
+ f.setClearColor(16711680, 0.5), f.setSize(s, t, !1);
345
+ const c = [], o = new l.Scene(), p = this._buildMaterial(s, t), g = new l.PlaneGeometry(U, D, 240 * e, 240 * e), d = new l.Mesh(g, p);
346
+ d.rotation.x = -Math.PI / 3.5, d.position.z = -1, c.push(d), o.add(d);
347
+ const v = new l.OrthographicCamera(0, 0, 0, 0, 0, 0);
348
+ return v.position.z = 5, K(v, s, t), {
349
+ renderer: f,
350
+ camera: v,
351
+ scene: o,
352
+ meshes: c,
169
353
  resolution: e
170
354
  };
171
355
  }
172
- _buildMaterial(e, o) {
173
- const n = [
174
- ...this._colors.map((c) => ({
175
- is_active: c.enabled,
176
- color: new i.Color(c.color),
177
- influence: c.influence
178
- })),
179
- ...Array.from({ length: S - this._colors.length }).map(() => ({
180
- is_active: !1,
181
- color: new i.Color(0)
182
- }))
183
- ], s = {
356
+ _buildMaterial(e, s) {
357
+ const t = Array.from({ length: j }).map((o, p) => ({
358
+ is_active: p < this._colors.length && this._colors[p].enabled ? 1 : 0,
359
+ color: new l.Color(p < this._colors.length ? this._colors[p].color : 0),
360
+ influence: p < this._colors.length && this._colors[p].influence || 0
361
+ })), f = {
184
362
  u_time: { value: 0 },
185
- u_color_pressure: { value: new i.Vector2(this._horizontalPressure, this._verticalPressure) },
363
+ u_color_pressure: { value: new l.Vector2(this._horizontalPressure, this._verticalPressure) },
186
364
  u_wave_frequency_x: { value: this._waveFrequencyX },
187
365
  u_wave_frequency_y: { value: this._waveFrequencyY },
188
366
  u_wave_amplitude: { value: this._waveAmplitude },
189
- u_resolution: { value: new i.Vector2(e, o) },
190
- u_colors: { value: n },
367
+ u_resolution: { value: new l.Vector2(e, s) },
368
+ u_colors: { value: t },
191
369
  u_colors_count: { value: this._colors.length },
192
- u_plane_width: { value: _ },
193
- u_plane_height: { value: g },
370
+ u_plane_width: { value: U },
371
+ u_plane_height: { value: D },
194
372
  u_shadows: { value: this._shadows },
195
373
  u_highlights: { value: this._highlights },
196
374
  u_grain_intensity: { value: this._grainIntensity },
197
375
  u_grain_sparsity: { value: this._grainSparsity },
198
376
  u_grain_scale: { value: this._grainScale },
199
- u_grain_speed: { value: this._grainSpeed }
200
- }, a = new i.ShaderMaterial({
201
- uniforms: s,
202
- vertexShader: I() + M() + O() + J(),
203
- fragmentShader: I() + O() + M() + Q()
377
+ u_grain_speed: { value: this._grainSpeed },
378
+ u_flow_distortion_a: { value: this._flowDistortionA },
379
+ u_flow_distortion_b: { value: this._flowDistortionB },
380
+ u_flow_scale: { value: this._flowScale },
381
+ u_flow_ease: { value: this._flowEase },
382
+ u_flow_enabled: { value: this._flowEnabled ? 1 : 0 },
383
+ u_y_offset: { value: this._yOffset },
384
+ u_y_offset_wave_multiplier: { value: this._yOffsetWaveMultiplier },
385
+ u_y_offset_color_multiplier: { value: this._yOffsetColorMultiplier },
386
+ u_y_offset_flow_multiplier: { value: this._yOffsetFlowMultiplier },
387
+ u_mouse_distortion_strength: { value: this._mouseDistortionStrength },
388
+ u_mouse_distortion_radius: { value: this._mouseDistortionRadius },
389
+ u_mouse_darken: { value: this._mouseDarken },
390
+ u_mouse_texture: { value: this._mouseFBO ? this._mouseFBO.texture : null },
391
+ u_procedural_texture: { value: this._proceduralTexture },
392
+ u_enable_procedural_texture: { value: this._enableProceduralTexture ? 1 : 0 },
393
+ u_texture_ease: { value: this._textureEase },
394
+ u_saturation: { value: this._saturation },
395
+ u_brightness: { value: this._brightness },
396
+ u_color_blending: { value: this._colorBlending }
397
+ }, c = new l.ShaderMaterial({
398
+ uniforms: f,
399
+ vertexShader: H() + Y() + Z() + Ce(),
400
+ fragmentShader: H() + Z() + Y() + Me()
204
401
  });
205
- return a.wireframe = W, a;
402
+ return this._cachedUniforms = f, c.wireframe = be, c;
403
+ }
404
+ _setupMouseInteraction() {
405
+ if (!this._ref)
406
+ return;
407
+ const e = this._ref.width, s = this._ref.height;
408
+ this._mouseFBO = new l.WebGLRenderTarget(e / 2, s / 2), this._sceneMouse = new l.Scene();
409
+ const t = s / 2, f = e / s;
410
+ this._cameraMouse = new l.OrthographicCamera(
411
+ -t * f,
412
+ t * f,
413
+ t,
414
+ -t,
415
+ 0,
416
+ 1e4
417
+ ), this._cameraMouse.position.set(0, 0, 100);
418
+ const c = document.createElement("canvas");
419
+ c.width = 128, c.height = 128;
420
+ const o = c.getContext("2d");
421
+ if (o) {
422
+ const u = o.createRadialGradient(64, 64, 0, 64, 64, 64);
423
+ u.addColorStop(0, "rgba(255,255,255,0.8)"), u.addColorStop(0.5, "rgba(255,255,255,0.4)"), u.addColorStop(1, "rgba(255,255,255,0)"), o.fillStyle = u, o.fillRect(0, 0, 128, 128);
424
+ }
425
+ const p = new l.CanvasTexture(c), g = new l.MeshBasicMaterial({
426
+ map: p,
427
+ transparent: !0,
428
+ opacity: 1,
429
+ depthTest: !1,
430
+ blending: l.AdditiveBlending
431
+ }), d = new l.PlaneGeometry(200, 200), v = 50;
432
+ for (let u = 0; u < v; u++) {
433
+ const x = new l.Mesh(d, g.clone());
434
+ x.visible = !1, this._sceneMouse.add(x), this._mouseObjects.push({ mesh: x, active: !1 });
435
+ }
436
+ this._updateBrushScale(), this._ref.addEventListener("mousemove", this._onMouseMove.bind(this));
437
+ }
438
+ _onMouseMove(e) {
439
+ if (!this._ref || !this._sceneMouse)
440
+ return;
441
+ const s = this._ref.getBoundingClientRect(), t = this._ref.width, f = this._ref.height;
442
+ this._pendingMousePosition = {
443
+ x: e.clientX - s.left - t / 2,
444
+ y: -(e.clientY - s.top - f / 2)
445
+ }, this._mouseUpdateScheduled || (this._mouseUpdateScheduled = !0, requestAnimationFrame(() => {
446
+ if (this._mouseUpdateScheduled = !1, !this._pendingMousePosition)
447
+ return;
448
+ this._mouse.x = this._pendingMousePosition.x, this._mouse.y = this._pendingMousePosition.y;
449
+ const c = this._mouseObjects[this._currentBrush];
450
+ c.mesh.scale.set(this._mouseBrushBaseScale, this._mouseBrushBaseScale, 1), c.active = !0, c.mesh.visible = !0, c.mesh.position.set(this._mouse.x, this._mouse.y, 0), c.mesh.rotation.z = Math.random() * Math.PI * 2, c.mesh.material instanceof l.MeshBasicMaterial && (c.mesh.material.opacity = 1), this._currentBrush = (this._currentBrush + 1) % this._mouseObjects.length, this._pendingMousePosition = null;
451
+ }));
452
+ }
453
+ _createProceduralTexture() {
454
+ const s = document.createElement("canvas");
455
+ s.width = 1024, s.height = 1024;
456
+ const t = s.getContext("2d", { willReadFrequently: !0 });
457
+ if (!t)
458
+ return new l.Texture();
459
+ let f = this._textureSeed;
460
+ const c = this._textureSeed;
461
+ function o() {
462
+ const a = Math.sin(f++) * 1e4;
463
+ return a - Math.floor(a);
464
+ }
465
+ const p = (a) => {
466
+ f = c + a;
467
+ }, g = this._colors.filter((a) => a.enabled).map((a) => a.color);
468
+ if (g.length === 0)
469
+ return new l.Texture();
470
+ function d(a) {
471
+ const n = parseInt(a.replace("#", ""), 16);
472
+ return {
473
+ r: n >> 16 & 255,
474
+ g: n >> 8 & 255,
475
+ b: n & 255
476
+ };
477
+ }
478
+ function v(a, n, h) {
479
+ return "#" + ((1 << 24) + (Math.round(a) << 16) + (Math.round(n) << 8) + Math.round(h)).toString(16).slice(1);
480
+ }
481
+ const u = () => {
482
+ const a = g[Math.floor(o() * g.length)], n = g[Math.floor(o() * g.length)], h = o() * this._textureColorBlending, _ = d(a), S = d(n), B = _.r + (S.r - _.r) * h, N = _.g + (S.g - _.g) * h, V = _.b + (S.b - _.b) * h;
483
+ return v(B, N, V);
484
+ }, x = this._proceduralBackgroundColor || "#000000";
485
+ t.fillStyle = x, t.fillRect(0, 0, 1024, 1024);
486
+ const O = t.createLinearGradient(0, 0, 0, 1024);
487
+ O.addColorStop(0, u()), O.addColorStop(1, u()), t.fillStyle = O, t.fillRect(0, 0, 1024, 1024);
488
+ for (let a = 0; a < this._textureShapeTriangles; a++) {
489
+ t.fillStyle = u(), t.beginPath();
490
+ const n = o() * 1024, h = o() * 1024, _ = 100 + o() * 300;
491
+ t.moveTo(n, h), t.lineTo(n + (o() - 0.5) * _, h + (o() - 0.5) * _), t.lineTo(n + (o() - 0.5) * _, h + (o() - 0.5) * _), t.fill();
492
+ }
493
+ for (let a = 0; a < this._textureShapeCircles; a++) {
494
+ t.strokeStyle = u(), t.lineWidth = 10 + o() * 50, t.beginPath();
495
+ const n = o() * 1024, h = o() * 1024, _ = 50 + o() * 150;
496
+ t.arc(n, h, _, 0, Math.PI * 2), t.stroke();
497
+ }
498
+ for (let a = 0; a < this._textureShapeBars; a++)
499
+ t.fillStyle = u(), t.save(), t.translate(o() * 1024, o() * 1024), t.rotate(o() * Math.PI), t.fillRect(-150, -25, 300, 50), t.restore();
500
+ t.lineWidth = 15, t.lineCap = "round";
501
+ for (let a = 0; a < this._textureShapeSquiggles; a++) {
502
+ t.strokeStyle = u(), t.beginPath();
503
+ let n = o() * 1024, h = o() * 1024;
504
+ t.moveTo(n, h);
505
+ for (let _ = 0; _ < 4; _++)
506
+ t.bezierCurveTo(
507
+ n + (o() - 0.5) * 300,
508
+ h + (o() - 0.5) * 300,
509
+ n + (o() - 0.5) * 300,
510
+ h + (o() - 0.5) * 300,
511
+ n + (o() - 0.5) * 300,
512
+ h + (o() - 0.5) * 300
513
+ ), n += (o() - 0.5) * 300, h += (o() - 0.5) * 300;
514
+ t.stroke();
515
+ }
516
+ p(5e4);
517
+ const M = document.createElement("canvas");
518
+ M.width = 1024, M.height = 1024;
519
+ const z = M.getContext("2d", { willReadFrequently: !0 });
520
+ if (!z)
521
+ return new l.Texture();
522
+ z.fillStyle = x, z.fillRect(0, 0, 1024, 1024);
523
+ let y = 0;
524
+ const F = [];
525
+ for (; y < 1024; )
526
+ if (o() < this._textureVoidLikelihood) {
527
+ const n = this._textureVoidWidthMin + o() * (this._textureVoidWidthMax - this._textureVoidWidthMin);
528
+ F.push({ type: "void", x: y, width: n }), y += n;
529
+ } else {
530
+ const n = 50 + o() * 200;
531
+ F.push({ type: "matter", x: y, width: n }), y += n;
532
+ }
533
+ for (const a of F)
534
+ if (a.type === "matter") {
535
+ const n = a.x, h = Math.min(a.x + a.width, 1024);
536
+ let _ = n;
537
+ for (; _ < h; ) {
538
+ const S = (2 + o() * 20) / this._textureBandDensity, B = Math.floor(o() * 1024);
539
+ z.drawImage(
540
+ s,
541
+ B,
542
+ 0,
543
+ S,
544
+ 1024,
545
+ _,
546
+ 0,
547
+ S,
548
+ 1024
549
+ ), _ += S;
550
+ }
551
+ }
552
+ const C = new l.CanvasTexture(M);
553
+ return C.minFilter = l.LinearMipmapLinearFilter, C.magFilter = l.LinearFilter, C.wrapS = l.RepeatWrapping, C.wrapT = l.RepeatWrapping, C.anisotropy = 16, C.needsUpdate = !0, C;
206
554
  }
207
555
  }
208
- function A(t, e, o) {
209
- const a = e * o / 1e6 * _ * g / 1.5, c = e / o, v = Math.sqrt(a * c), f = a / v, l = -_ / 2, u = Math.min((l + v) / 1.5, _ / 2), h = g / 4, p = Math.max((h - f) / 2, -g / 4), w = -100, z = 1e3;
210
- t instanceof i.OrthographicCamera ? (t.left = l, t.right = u, t.top = h, t.bottom = p, t.near = w, t.far = z, t.updateProjectionMatrix()) : t instanceof i.PerspectiveCamera && (t.aspect = e / o, t.updateProjectionMatrix());
556
+ function K(r, e, s) {
557
+ const c = e * s / 1e6 * U * D / 1.5, o = e / s, p = Math.sqrt(c * o), g = c / p;
558
+ let d = -U / 2, v = Math.min((d + p) / 1.5, U / 2), u = D / 4, x = Math.max((u - g) / 2, -D / 4);
559
+ if (o < 1) {
560
+ const z = o;
561
+ d = d * z, v = v * z;
562
+ const y = 1.05;
563
+ d = d * y, v = v * y, u = u * y, x = x * y;
564
+ }
565
+ const O = -100, M = 1e3;
566
+ r instanceof l.OrthographicCamera ? (r.left = d, r.right = v, r.top = u, r.bottom = x, r.near = O, r.far = M, r.updateProjectionMatrix()) : r instanceof l.PerspectiveCamera && (r.aspect = e / s, r.updateProjectionMatrix());
211
567
  }
212
- function J() {
213
- return `
214
-
568
+ let R = null, A = null;
569
+ function Ce() {
570
+ return R || (R = `
215
571
  void main() {
216
-
217
572
  vUv = uv;
218
573
 
574
+ // SCROLLING LOGIC
575
+ // Separate multipliers for wave, color, and flow offsets
576
+ float waveOffset = -u_y_offset * u_y_offset_wave_multiplier;
577
+ float colorOffset = -u_y_offset * u_y_offset_color_multiplier;
578
+ float flowOffset = -u_y_offset * u_y_offset_flow_multiplier;
579
+
580
+ // 1. DISPLACEMENT (WAVES)
581
+ // We add waveOffset to Y to scroll the wave pattern
219
582
  v_displacement_amount = cnoise( vec3(
220
583
  u_wave_frequency_x * position.x + u_time,
221
- u_wave_frequency_y * position.y + u_time,
584
+ u_wave_frequency_y * (position.y + waveOffset) + u_time,
222
585
  u_time
223
586
  ));
224
587
 
225
- vec3 color;
588
+ // 2. FLOW FIELD
589
+ // Apply flow offset to scroll the flow field mask
590
+ vec2 baseUv = vUv;
591
+ baseUv.y += flowOffset / u_plane_height; // Scale to match wave speed
592
+ vec2 flowUv = baseUv;
593
+
594
+ if (u_flow_enabled > 0.5) {
595
+ if (u_flow_ease > 0.0 || u_flow_distortion_a > 0.0) {
596
+ vec2 ppp = -1.0 + 2.0 * baseUv;
597
+ ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
598
+ ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
599
+ ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
600
+ ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
601
+
602
+ float r = length(ppp);
603
+ flowUv = mix(baseUv, vec2(baseUv.x * (1.0 - u_flow_ease) + r * u_flow_ease, baseUv.y), u_flow_ease);
604
+ }
605
+ }
226
606
 
227
- // float t = mod(u_base_color, 100.0);
228
- color = u_colors[0].color;
607
+ // Pass the standard flow UV to fragment shader (for mouse/texture)
608
+ vFlowUv = flowUv;
229
609
 
230
- // Apply y_offset to the noise coordinates
231
- vec2 noise_cord = vUv * u_color_pressure;
232
- // Apply the y-offset to shift the pattern vertically (1:1 pixel ratio)
233
- // Scale the offset to match the UV coordinate space
234
- float scaledOffset = u_y_offset / u_resolution.y;
235
- noise_cord.y -= scaledOffset;
610
+ // 3. COLOR MIXING
611
+ // We take the computed flow UVs and apply the color offset
612
+ // Scale by plane height to match wave offset speed (world space vs UV space)
613
+ vec3 color = u_colors[0].color;
614
+ vec2 adjustedUv = flowUv;
615
+ adjustedUv.y += colorOffset / u_plane_height; // Scroll the color mixing pattern
236
616
 
617
+ vec2 noise_cord = adjustedUv * u_color_pressure;
237
618
  const float minNoise = .0;
238
619
  const float maxNoise = .9;
239
620
 
240
621
  for (int i = 1; i < u_colors_count; i++) {
241
-
242
- if(u_colors[i].is_active == 1.0){
622
+ if(u_colors[i].is_active > 0.5){
243
623
  float noiseFlow = (1. + float(i)) / 30.;
244
624
  float noiseSpeed = (1. + float(i)) * 0.11;
245
625
  float noiseSeed = 13. + float(i) * 7.;
246
626
 
247
- int reverseIndex = u_colors_count - i;
248
-
249
627
  float noise = snoise(
250
628
  vec3(
251
629
  noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
@@ -255,22 +633,21 @@ void main() {
255
633
  ) - (.1 * float(i)) + (.5 * u_color_blending);
256
634
 
257
635
  noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);
258
- vec3 nextColor = u_colors[i].color;
259
- color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
636
+ color = mix(color, u_colors[i].color, smoothstep(0.0, u_color_blending, noise));
260
637
  }
261
638
  }
262
639
 
263
640
  v_color = color;
264
641
 
642
+ // 4. VERTEX POSITION
265
643
  vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;
266
644
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
267
-
268
645
  v_new_position = gl_Position;
269
646
  }
270
- `;
647
+ `, R);
271
648
  }
272
- function Q() {
273
- return `
649
+ function Me() {
650
+ return A || (A = `
274
651
  float random(vec2 p) {
275
652
  return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
276
653
  }
@@ -288,34 +665,74 @@ float fbm(vec3 x) {
288
665
  }
289
666
 
290
667
  void main() {
291
- vec3 color = v_color;
668
+ // MOUSE DISTORTION
669
+ vec2 finalUv = vFlowUv;
670
+
671
+ if (u_mouse_distortion_strength > 0.0) {
672
+ vec4 mouseColor = texture2D(u_mouse_texture, vUv);
673
+ float mouseValue = mouseColor.r;
674
+
675
+ if (mouseValue > 0.001) {
676
+ float distortionAmount = mouseValue * u_mouse_distortion_strength;
677
+ vec2 mouseDisp = vec2(distortionAmount, distortionAmount);
678
+ finalUv -= mouseDisp;
679
+ }
680
+ }
681
+
682
+ vec3 baseColor;
683
+
684
+ if (u_enable_procedural_texture > 0.5) {
685
+ // Calculate flow field distance for ease effect
686
+ vec2 ppp = -1.0 + 2.0 * finalUv;
687
+ ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
688
+ ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
689
+ ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
690
+ ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
691
+ float r = length(ppp); // Flow distance
692
+
693
+ // Ease blending: 0 = topographic (flow), 1 = image (UV)
694
+ float vx = (finalUv.x * u_texture_ease) + (r * (1.0 - u_texture_ease));
695
+ float vy = (finalUv.y * u_texture_ease) + (0.0 * (1.0 - u_texture_ease));
696
+ vec2 texUv = vec2(vx, vy);
697
+
698
+ // PARALLAX SCROLLING
699
+ // We manually apply a smaller offset here to make the texture lag behind
700
+ float parallaxFactor = 0.25; // 25% speed of the color mixing
701
+ texUv.y -= (u_y_offset * u_y_offset_color_multiplier / u_plane_height) * parallaxFactor;
702
+
703
+ texUv *= 1.5; // Tiling scale
704
+
705
+ vec4 texSample = texture2D(u_procedural_texture, texUv);
706
+ baseColor = texSample.rgb;
707
+ } else {
708
+ baseColor = v_color;
709
+ }
710
+
711
+ vec3 color = baseColor;
712
+
713
+ // Post-processing
292
714
  color += pow(v_displacement_amount, 1.0) * u_highlights;
293
715
  color -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;
294
716
  color = saturation(color, 1.0 + u_saturation);
295
717
  color = color * u_brightness;
296
718
 
297
- // Generate grain using fbm
719
+ // Grain
298
720
  vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
299
721
  float grain = (u_grain_speed != 0.0) ? fbm(vec3(noiseCoords, u_time * u_grain_speed)) : fbm(vec3(noiseCoords, 0.0));
300
722
 
301
- // Center the grain around zero
302
723
  grain = grain * 0.5 + 0.5;
303
724
  grain -= 0.5;
304
-
305
- // Add sparsity control
306
725
  grain = (grain > u_grain_sparsity) ? grain : 0.0;
307
-
308
- // Apply grain intensity
309
726
  grain *= u_grain_intensity;
310
727
 
311
- // Add grain to color
312
728
  color += vec3(grain);
313
729
 
314
730
  gl_FragColor = vec4(color, 1.0);
315
731
  }
316
- `;
732
+ `, A);
317
733
  }
318
- const I = () => `
734
+ let k = null;
735
+ const H = () => k || (k = `
319
736
  precision highp float;
320
737
 
321
738
  struct Color {
@@ -347,81 +764,91 @@ uniform float u_brightness;
347
764
  uniform float u_color_blending;
348
765
 
349
766
  uniform int u_colors_count;
350
- uniform Color u_colors[5];
767
+ uniform Color u_colors[6];
351
768
  uniform vec2 u_resolution;
352
769
 
353
770
  uniform float u_y_offset;
771
+ uniform float u_y_offset_wave_multiplier;
772
+ uniform float u_y_offset_color_multiplier;
773
+ uniform float u_y_offset_flow_multiplier;
774
+
775
+ // Flow field uniforms
776
+ uniform float u_flow_distortion_a;
777
+ uniform float u_flow_distortion_b;
778
+ uniform float u_flow_scale;
779
+ uniform float u_flow_ease;
780
+ uniform float u_flow_enabled;
781
+
782
+ // Mouse interaction uniforms
783
+ uniform float u_mouse_distortion_strength;
784
+ uniform float u_mouse_distortion_radius;
785
+ uniform float u_mouse_darken;
786
+ uniform sampler2D u_mouse_texture;
787
+
788
+ // Procedural texture uniforms
789
+ uniform sampler2D u_procedural_texture;
790
+ uniform float u_enable_procedural_texture;
791
+ uniform float u_texture_ease;
354
792
 
355
793
  varying vec2 vUv;
794
+ varying vec2 vFlowUv;
356
795
  varying vec4 v_new_position;
357
796
  varying vec3 v_color;
358
797
  varying float v_displacement_amount;
359
798
 
360
- `, M = () => `
799
+ `, k);
800
+ let I = null;
801
+ const Y = () => I || (I = `
361
802
 
362
- vec3 mod289(vec3 x)
363
- {
364
- return x - floor(x * (1.0 / 289.0)) * 289.0;
803
+ // 1. REPLACEMENT PERMUTE:
804
+ // Uses a hash function (fract/sin) instead of a modular lookup table.
805
+ vec4 permute(vec4 x) {
806
+ return floor(fract(sin(x) * 43758.5453123) * 289.0);
365
807
  }
366
808
 
367
- vec4 mod289(vec4 x)
368
- {
369
- return x - floor(x * (1.0 / 289.0)) * 289.0;
370
- }
371
-
372
- vec4 permute(vec4 x)
373
- {
374
- return mod289(((x*34.0)+1.0)*x);
375
- }
376
-
377
- vec4 taylorInvSqrt(vec4 r)
378
- {
809
+ // Taylor Inverse Sqrt
810
+ vec4 taylorInvSqrt(vec4 r) {
379
811
  return 1.79284291400159 - 0.85373472095314 * r;
380
812
  }
381
813
 
814
+ // Fade function
382
815
  vec3 fade(vec3 t) {
383
816
  return t*t*t*(t*(t*6.0-15.0)+10.0);
384
817
  }
385
818
 
386
- float snoise(vec3 v)
387
- {
819
+ // 3D Simplex Noise
820
+ float snoise(vec3 v) {
388
821
  const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
389
822
  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
390
823
 
391
- // First corner
824
+ // First corner
392
825
  vec3 i = floor(v + dot(v, C.yyy) );
393
826
  vec3 x0 = v - i + dot(i, C.xxx) ;
394
827
 
395
- // Other corners
828
+ // Other corners
396
829
  vec3 g = step(x0.yzx, x0.xyz);
397
830
  vec3 l = 1.0 - g;
398
831
  vec3 i1 = min( g.xyz, l.zxy );
399
832
  vec3 i2 = max( g.xyz, l.zxy );
400
833
 
401
- // x0 = x0 - 0.0 + 0.0 * C.xxx;
402
- // x1 = x0 - i1 + 1.0 * C.xxx;
403
- // x2 = x0 - i2 + 2.0 * C.xxx;
404
- // x3 = x0 - 1.0 + 3.0 * C.xxx;
405
834
  vec3 x1 = x0 - i1 + C.xxx;
406
- vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
407
- vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
835
+ vec3 x2 = x0 - i2 + C.yyy;
836
+ vec3 x3 = x0 - D.yyy;
408
837
 
409
- // Permutations
410
- i = mod289(i);
838
+ // Permutations
411
839
  vec4 p = permute( permute( permute(
412
840
  i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
413
841
  + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
414
842
  + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
415
843
 
416
- // Gradients: 7x7 points over a square, mapped onto an octahedron.
417
- // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
844
+ // Gradients
418
845
  float n_ = 0.142857142857; // 1.0/7.0
419
846
  vec3 ns = n_ * D.wyz - D.xzx;
420
847
 
421
- vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
848
+ vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
422
849
 
423
850
  vec4 x_ = floor(j * ns.z);
424
- vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
851
+ vec4 y_ = floor(j - 7.0 * x_ );
425
852
 
426
853
  vec4 x = x_ *ns.x + ns.yyyy;
427
854
  vec4 y = y_ *ns.x + ns.yyyy;
@@ -430,8 +857,6 @@ float snoise(vec3 v)
430
857
  vec4 b0 = vec4( x.xy, y.xy );
431
858
  vec4 b1 = vec4( x.zw, y.zw );
432
859
 
433
- //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
434
- //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
435
860
  vec4 s0 = floor(b0)*2.0 + 1.0;
436
861
  vec4 s1 = floor(b1)*2.0 + 1.0;
437
862
  vec4 sh = -step(h, vec4(0.0));
@@ -444,14 +869,14 @@ float snoise(vec3 v)
444
869
  vec3 p2 = vec3(a1.xy,h.z);
445
870
  vec3 p3 = vec3(a1.zw,h.w);
446
871
 
447
- //Normalise gradients
872
+ // Normalise gradients
448
873
  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
449
874
  p0 *= norm.x;
450
875
  p1 *= norm.y;
451
876
  p2 *= norm.z;
452
877
  p3 *= norm.w;
453
878
 
454
- // Mix final noise value
879
+ // Mix final noise value
455
880
  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
456
881
  m = m * m;
457
882
  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
@@ -461,12 +886,11 @@ float snoise(vec3 v)
461
886
  // Classic Perlin noise
462
887
  float cnoise(vec3 P)
463
888
  {
464
- vec3 Pi0 = floor(P); // Integer part for indexing
465
- vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
466
- Pi0 = mod289(Pi0);
467
- Pi1 = mod289(Pi1);
468
- vec3 Pf0 = fract(P); // Fractional part for interpolation
469
- vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
889
+ vec3 Pi0 = floor(P);
890
+ vec3 Pi1 = Pi0 + vec3(1.0);
891
+
892
+ vec3 Pf0 = fract(P);
893
+ vec3 Pf1 = Pf0 - vec3(1.0);
470
894
  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
471
895
  vec4 iy = vec4(Pi0.yy, Pi1.yy);
472
896
  vec4 iz0 = Pi0.zzzz;
@@ -527,47 +951,9 @@ float cnoise(vec3 P)
527
951
  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
528
952
  return 2.2 * n_xyz;
529
953
  }
530
-
531
- // YUV to RGB matrix
532
- mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,
533
- 1.0, -0.39465, -0.58060,
534
- 1.0, 2.03211, 0.0);
535
-
536
- // RGB to YUV matrix
537
- mat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,
538
- -0.09991, -0.33609, 0.43600,
539
- 0.615, -0.5586, -0.05639);
540
-
541
- vec3 oklab2rgb(vec3 linear)
542
- {
543
- const mat3 im1 = mat3(0.4121656120, 0.2118591070, 0.0883097947,
544
- 0.5362752080, 0.6807189584, 0.2818474174,
545
- 0.0514575653, 0.1074065790, 0.6302613616);
546
-
547
- const mat3 im2 = mat3(+0.2104542553, +1.9779984951, +0.0259040371,
548
- +0.7936177850, -2.4285922050, +0.7827717662,
549
- -0.0040720468, +0.4505937099, -0.8086757660);
550
-
551
- vec3 lms = im1 * linear;
552
-
553
- return im2 * (sign(lms) * pow(abs(lms), vec3(1.0/3.0)));
554
- }
555
-
556
- vec3 rgb2oklab(vec3 oklab)
557
- {
558
- const mat3 m1 = mat3(+1.000000000, +1.000000000, +1.000000000,
559
- +0.396337777, -0.105561346, -0.089484178,
560
- +0.215803757, -0.063854173, -1.291485548);
561
-
562
- const mat3 m2 = mat3(+4.076724529, -1.268143773, -0.004111989,
563
- -3.307216883, +2.609332323, -0.703476310,
564
- +0.230759054, -0.341134429, +1.706862569);
565
- vec3 lms = m1 * oklab;
566
-
567
- return m2 * (lms * lms * lms);
568
- }
569
-
570
- `, O = () => `
954
+ `, I);
955
+ let W = null;
956
+ const Z = () => W || (W = `
571
957
 
572
958
  vec3 saturation(vec3 rgb, float adjustment) {
573
959
  const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -610,38 +996,36 @@ vec3 hsv2rgb(vec3 c)
610
996
  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
611
997
  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
612
998
  }
613
- `, N = (t) => {
614
- t.id = R, t.href = "https://neat.firecms.co", t.target = "_blank", t.style.position = "absolute", t.style.display = "block", t.style.bottom = "0", t.style.right = "0", t.style.padding = "10px", t.style.color = "#dcdcdc", t.style.opacity = "0.8", t.style.fontFamily = "sans-serif", t.style.fontSize = "16px", t.style.fontWeight = "bold", t.style.textDecoration = "none", t.style.zIndex = "10000", t.innerHTML = "NEAT";
615
- }, Z = (t) => {
616
- const e = t.parentElement?.getElementsByTagName("a");
999
+ `, W), J = (r) => {
1000
+ r.id = Q, r.href = "https://neat.firecms.co", r.target = "_blank", r.style.position = "absolute", r.style.display = "block", r.style.bottom = "0", r.style.right = "0", r.style.padding = "10px", r.style.color = "#dcdcdc", r.style.opacity = "0.8", r.style.fontFamily = "sans-serif", r.style.fontSize = "16px", r.style.fontWeight = "bold", r.style.textDecoration = "none", r.style.zIndex = "10000", r.innerHTML = "NEAT";
1001
+ }, Pe = (r) => {
1002
+ const e = r.parentElement?.getElementsByTagName("a");
617
1003
  if (e) {
618
- for (let n = 0; n < e.length; n++)
619
- if (e[n].id === R) {
620
- N(e[n]);
621
- return;
622
- }
1004
+ for (let t = 0; t < e.length; t++)
1005
+ if (e[t].id === Q)
1006
+ return J(e[t]), e[t];
623
1007
  }
624
- const o = document.createElement("a");
625
- N(o), t.parentElement?.appendChild(o);
1008
+ const s = document.createElement("a");
1009
+ return J(s), r.parentElement?.appendChild(s), s;
626
1010
  };
627
- function $() {
628
- const t = new Date(), e = t.getMinutes(), o = t.getSeconds();
629
- return e * 60 + o;
1011
+ function Oe() {
1012
+ const r = new Date(), e = r.getMinutes(), s = r.getSeconds();
1013
+ return e * 60 + s;
630
1014
  }
631
- function ee(t = 6) {
1015
+ function Te(r = 6) {
632
1016
  const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
633
- let o = "";
634
- for (let n = 0; n < t; n++) {
635
- const s = Math.floor(Math.random() * e.length);
636
- o += e.charAt(s);
1017
+ let s = "";
1018
+ for (let t = 0; t < r; t++) {
1019
+ const f = Math.floor(Math.random() * e.length);
1020
+ s += e.charAt(f);
637
1021
  }
638
- return o;
1022
+ return s;
639
1023
  }
640
- function te(t, e) {
641
- const o = document.createElement("a");
642
- o.download = e, o.href = t, document.body.appendChild(o), o.click(), document.body.removeChild(o);
1024
+ function Fe(r, e) {
1025
+ const s = document.createElement("a");
1026
+ s.download = e, s.href = r, document.body.appendChild(s), s.click(), document.body.removeChild(s);
643
1027
  }
644
1028
  export {
645
- oe as NeatGradient
1029
+ Be as NeatGradient
646
1030
  };
647
1031
  //# sourceMappingURL=index.es.js.map