Hugging Face's logo

Spaces:
arirajuns
/
gradient-simulator-glsl
Running

App Files Community
gradient-simulator-glsl / index.html
arirajuns's picture
arirajuns
Add 2 files
3cb47bb verified
Raw
History Blame Contribute Delete
36.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Advanced Mathematical Gradient Simulator</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.7/build/dat.gui.min.js"></script>
 <style>
 body {
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
 }
 canvas {
display: block;
}
 #control-panel {
 position: absolute;
 top: 20px;
 right: 20px;
 background: rgba(0,0,0,0.7);
 color: white;
 padding: 15px;
 border-radius: 10px;
 max-width: 300px;
 backdrop-filter: blur(5px);
 max-height: 90vh;
 overflow-y: auto;
 }
 #title {
 position: absolute;
 top: 20px;
 left: 20px;
 color: white;
 font-size: 2rem;
 text-shadow: 0 0 10px rgba(0,0,0,0.5);
 z-index: 100;
 }
 .control-group {
 margin-bottom: 15px;
 border-bottom: 1px solid rgba(255,255,255,0.1);
 padding-bottom: 10px;
 }
 .control-group h3 {
 margin-top: 0;
 margin-bottom: 10px;
 font-weight: 600;
 }
 .gradient-control {
 display: flex;
 align-items: center;
 margin-bottom: 8px;
 }
 .gradient-control label {
 min-width: 120px;
 font-size: 0.9rem;
 }
 .gradient-control input[type="color"] {
 margin-right: 10px;
 width: 30px;
 height: 30px;
 border: none;
 border-radius: 50%;
 cursor: pointer;
 }
 .gradient-control input[type="range"] {
 flex-grow: 1;
 }
 select {
 width: 100%;
 padding: 5px;
 border-radius: 4px;
 background: rgba(255,255,255,0.1);
 color: white;
 border: 1px solid rgba(255,255,255,0.2);
 }
 button {
 width: 100%;
 padding: 8px;
 margin-top: 5px;
 background: rgba(59, 130, 246, 0.7);
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 transition: background 0.2s;
 }
 button:hover {
 background: rgba(59, 130, 246, 1);
 }
 .tab-content {
 display: none;
 }
 .tab-content.active {
 display: block;
 }
 .tabs {
 display: flex;
 margin-bottom: 10px;
 }
 .tab {
 padding: 5px 10px;
 cursor: pointer;
 background: rgba(255,255,255,0.1);
 margin-right: 5px;
 border-radius: 4px 4px 0 0;
 font-size: 0.8rem;
 }
 .tab.active {
 background: rgba(59, 130, 246, 0.7);
 }
 </style>
</head>
<body class="bg-gray-900">
 <div id="title" class="font-bold">Math Gradient Simulator</div>
<div id="control-panel">
 <div class="tabs">
 <div class="tab active" onclick="switchTab('gradient-tab')">Gradient</div>
 <div class="tab" onclick="switchTab('math-tab')">Math</div>
 <div class="tab" onclick="switchTab('physics-tab')">Physics</div>
 </div>
<div id="gradient-tab" class="tab-content active">
 <div class="control-group">
 <h3>Color Gradient</h3>
 <div class="gradient-control">
 <label for="color1">Color 1</label>
 <input type="color" id="color1" value="#ff0000">
 <input type="range" id="color1Pos" min="0" max="1" step="0.01" value="0">
 </div>
 <div class="gradient-control">
 <label for="color2">Color 2</label>
 <input type="color" id="color2" value="#00ff00">
 <input type="range" id="color2Pos" min="0" max="1" step="0.01" value="0.5">
 </div>
 <div class="gradient-control">
 <label for="color3">Color 3</label>
 <input type="color" id="color3" value="#0000ff">
 <input type="range" id="color3Pos" min="0" max="1" step="0.01" value="1">
 </div>
 <button id="randomize">Randomize Colors</button>
 </div>
<div class="control-group">
 <h3>Gradient Type</h3>
 <select id="gradientType">
 <option value="linear">Linear</option>
 <option value="radial">Radial</option>
 <option value="angular">Angular</option>
 <option value="spiral">Spiral</option>
 </select>
 </div>
 </div>
<div id="math-tab" class="tab-content">
 <div class="control-group">
 <h3>Mathematical Functions</h3>
 <select id="mathFunction">
 <option value="sine">Sine Waves</option>
 <option value="fractal">Fractal Noise</option>
 <option value="mandelbrot">Mandelbrot</option>
 <option value="julia">Julia Set</option>
 <option value="lorenz">Lorenz Attractor</option>
 <option value="quantum">Quantum Interference</option>
 </select>
 </div>
<div class="control-group">
 <h3>Sine Wave Parameters</h3>
 <div class="gradient-control">
 <label for="waveFrequency">Frequency</label>
 <input type="range" id="waveFrequency" min="0.1" max="20" step="0.1" value="5">
 </div>
 <div class="gradient-control">
 <label for="waveAmplitude">Amplitude</label>
 <input type="range" id="waveAmplitude" min="0" max="1" step="0.01" value="0.2">
 </div>
 </div>
<div class="control-group">
 <h3>Fractal Parameters</h3>
 <div class="gradient-control">
 <label for="fractalOctaves">Octaves</label>
 <input type="range" id="fractalOctaves" min="1" max="8" step="1" value="4">
 </div>
 <div class="gradient-control">
 <label for="fractalLacunarity">Lacunarity</label>
 <input type="range" id="fractalLacunarity" min="1" max="4" step="0.1" value="2">
 </div>
 <div class="gradient-control">
 <label for="fractalGain">Gain</label>
 <input type="range" id="fractalGain" min="0" max="1" step="0.05" value="0.5">
 </div>
 </div>
<div class="control-group">
 <h3>Complex System Parameters</h3>
 <div class="gradient-control">
 <label for="complexReal">Real Constant</label>
 <input type="range" id="complexReal" min="-2" max="2" step="0.01" value="-0.7">
 </div>
 <div class="gradient-control">
 <label for="complexImag">Imaginary Constant</label>
 <input type="range" id="complexImag" min="-2" max="2" step="0.01" value="0.27">
 </div>
 <div class="gradient-control">
 <label for="complexIterations">Iterations</label>
 <input type="range" id="complexIterations" min="10" max="200" step="1" value="100">
 </div>
 </div>
 </div>
<div id="physics-tab" class="tab-content">
 <div class="control-group">
 <h3>Physics Simulation</h3>
 <select id="physicsType">
 <option value="fluid">Fluid Dynamics</option>
 <option value="particles">Particle System</option>
 <option value="gravity">Gravity Well</option>
 <option value="magnetic">Magnetic Field</option>
 <option value="quantum">Quantum Field</option>
 </select>
 </div>
<div class="control-group">
 <h3>Fluid Parameters</h3>
 <div class="gradient-control">
 <label for="fluidViscosity">Viscosity</label>
 <input type="range" id="fluidViscosity" min="0" max="1" step="0.01" value="0.5">
 </div>
 <div class="gradient-control">
 <label for="fluidVelocity">Velocity</label>
 <input type="range" id="fluidVelocity" min="0" max="2" step="0.05" value="0.8">
 </div>
 </div>
<div class="control-group">
 <h3>Particle Parameters</h3>
 <div class="gradient-control">
 <label for="particleCount">Count</label>
 <input type="range" id="particleCount" min="10" max="1000" step="10" value="200">
 </div>
 <div class="gradient-control">
 <label for="particleSize">Size</label>
 <input type="range" id="particleSize" min="0.1" max="5" step="0.1" value="1">
 </div>
 </div>
<div class="control-group">
 <h3>Field Parameters</h3>
 <div class="gradient-control">
 <label for="fieldStrength">Strength</label>
 <input type="range" id="fieldStrength" min="0" max="2" step="0.05" value="1">
 </div>
 <div class="gradient-control">
 <label for="fieldFalloff">Falloff</label>
 <input type="range" id="fieldFalloff" min="0.1" max="3" step="0.1" value="1.5">
 </div>
 </div>
<div class="control-group">
 <h3>Quantum Parameters</h3>
 <div class="gradient-control">
 <label for="quantumProbability">Probability</label>
 <input type="range" id="quantumProbability" min="0" max="1" step="0.01" value="0.5">
 </div>
 <div class="gradient-control">
 <label for="quantumEntanglement">Entanglement</label>
 <input type="range" id="quantumEntanglement" min="0" max="1" step="0.01" value="0.3">
 </div>
 </div>
 </div>
 </div>
<script>
 // Initialize Three.js scene
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 const renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setPixelRatio(window.devicePixelRatio);
 document.body.appendChild(renderer.domElement);
 // Create a full-screen plane for our shader
 const geometry = new THREE.PlaneGeometry(2, 2);
// Advanced shader with multiple mathematical concepts
 const shaderMaterial = new THREE.ShaderMaterial({
 uniforms: {
 time: { value: 0 },
 resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
 mouse: { value: new THREE.Vector2(0, 0) },
 color1: { value: new THREE.Color(0xff0000) },
 color2: { value: new THREE.Color(0x00ff00) },
 color3: { value: new THREE.Color(0x0000ff) },
 pos1: { value: 0 },
 pos2: { value: 0.5 },
 pos3: { value: 1 },
// Gradient parameters
 gradientType: { value: 0 },
// Wave parameters
 waveFrequency: { value: 5.0 },
 waveAmplitude: { value: 0.2 },
// Fractal parameters
 fractalOctaves: { value: 4 },
 fractalLacunarity: { value: 2.0 },
 fractalGain: { value: 0.5 },
// Complex system parameters
 complexReal: { value: -0.7 },
 complexImag: { value: 0.27 },
 complexIterations: { value: 100 },
// Physics parameters
 physicsType: { value: 0 },
 fluidViscosity: { value: 0.5 },
 fluidVelocity: { value: 0.8 },
 particleCount: { value: 200 },
 particleSize: { value: 1.0 },
 fieldStrength: { value: 1.0 },
 fieldFalloff: { value: 1.5 },
 quantumProbability: { value: 0.5 },
 quantumEntanglement: { value: 0.3 }
 },
 vertexShader: `
 varying vec2 vUv;
 void main() {
 vUv = uv;
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 }
 `,
 fragmentShader: `
 #define PI 3.14159265358979323846
uniform float time;
 uniform vec2 resolution;
 uniform vec2 mouse;
 uniform vec3 color1;
 uniform vec3 color2;
 uniform vec3 color3;
 uniform float pos1;
 uniform float pos2;
 uniform float pos3;
uniform int gradientType;
uniform float waveFrequency;
 uniform float waveAmplitude;
uniform int fractalOctaves;
 uniform float fractalLacunarity;
 uniform float fractalGain;
uniform float complexReal;
 uniform float complexImag;
 uniform int complexIterations;
uniform int physicsType;
 uniform float fluidViscosity;
 uniform float fluidVelocity;
 uniform float particleCount;
 uniform float particleSize;
 uniform float fieldStrength;
 uniform float fieldFalloff;
 uniform float quantumProbability;
 uniform float quantumEntanglement;
varying vec2 vUv;
// Hash function for random numbers
 float hash(vec2 p) {
 return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
 }
// Simplex noise function
 vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
 vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
 vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
 vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
float snoise(vec3 v) {
 const vec2 C = vec2(1.0/6.0, 1.0/3.0);
 const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
vec3 i = floor(v + dot(v, C.yyy));
 vec3 x0 = v - i + dot(i, C.xxx);
vec3 g = step(x0.yzx, x0.xyz);
 vec3 l = 1.0 - g;
 vec3 i1 = min(g.xyz, l.zxy);
 vec3 i2 = max(g.xyz, l.zxy);
vec3 x1 = x0 - i1 + C.xxx;
 vec3 x2 = x0 - i2 + C.yyy;
 vec3 x3 = x0 - D.yyy;
i = mod289(i);
 vec4 p = permute(permute(permute(
 i.z + vec4(0.0, i1.z, i2.z, 1.0))
 + i.y + vec4(0.0, i1.y, i2.y, 1.0))
 + i.x + vec4(0.0, i1.x, i2.x, 1.0));
float n_ = 0.142857142857;
 vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
vec4 x_ = floor(j * ns.z);
 vec4 y_ = floor(j - 7.0 * x_);
vec4 x = x_ * ns.x + ns.yyyy;
 vec4 y = y_ * ns.x + ns.yyyy;
 vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4(x.xy, y.xy);
 vec4 b1 = vec4(x.zw, y.zw);
vec4 s0 = floor(b0)*2.0 + 1.0;
 vec4 s1 = floor(b1)*2.0 + 1.0;
 vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
 vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
vec3 p0 = vec3(a0.xy, h.x);
 vec3 p1 = vec3(a0.zw, h.y);
 vec3 p2 = vec3(a1.xy, h.z);
 vec3 p3 = vec3(a1.zw, h.w);
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
 p0 *= norm.x;
 p1 *= norm.y;
 p2 *= norm.z;
 p3 *= norm.w;
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
 m = m * m;
 return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
 }
// Fractional Brownian Motion (fBm)
 float fbm(vec3 p) {
 float value = 0.0;
 float amplitude = 0.5;
 float frequency = 1.0;
for (int i = 0; i < 8; i++) {
 if (i >= fractalOctaves) break;
value += amplitude * snoise(p * frequency);
 frequency *= fractalLacunarity;
 amplitude *= fractalGain;
 }
return value;
 }
// Complex number operations
 vec2 complexMul(vec2 a, vec2 b) {
 return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
 }
// Mandelbrot/Julia set calculation
 float mandelbrot(vec2 c, vec2 offset, int maxIter) {
 vec2 z = c;
 float iter = 0.0;
for (int i = 0; i < 200; i++) {
 if (i >= maxIter) break;
z = complexMul(z, z) + offset;
 if (dot(z, z) > 4.0) {
 return float(i) / float(maxIter);
 }
 iter += 1.0;
 }
return 0.0;
 }
// Quantum probability wave function
 float quantumWave(vec2 p, float prob, float ent) {
 float wave1 = sin(p.x * 10.0 + time) * 0.5 + 0.5;
 float wave2 = sin(p.y * 10.0 + time * 1.3) * 0.5 + 0.5;
 float interference = wave1 * wave2;
float collapse = step(prob, interference);
 float entangled = mix(interference, collapse, ent);
return entangled;
 }
// Fluid simulation function
 float fluidSim(vec2 p, float visc, float vel) {
 vec2 coord = p * 5.0 + vec2(time * vel, time * vel * 0.7);
 float f1 = fbm(vec3(coord, time * 0.1));
coord = p * 3.0 + vec2(time * vel * 0.7, time * vel * 0.3);
 float f2 = fbm(vec3(coord, time * 0.2));
float f = mix(f1, f2, visc);
 return f * 0.5 + 0.5;
 }
// Particle system simulation
 float particleSystem(vec2 p, float count, float size) {
 float particleEffect = 0.0;
 float particleScale = count / 1000.0;
for (float i = 1.0; i <= 10.0; i++) {
 if (i > count / 100.0) break;
vec2 pos = vec2(
 sin(time * 0.2 * i) * 0.5 + 0.5,
 cos(time * 0.3 * i) * 0.5 + 0.5
 );
float dist = distance(p, pos);
 float particle = smoothstep(size * 0.1, 0.0, dist);
 particleEffect += particle * particleScale;
 }
return clamp(particleEffect, 0.0, 1.0);
 }
// Gravity well simulation
 float gravityWell(vec2 p, float strength, float falloff) {
 vec2 center = vec2(0.5, 0.5);
 vec2 mousePos = mouse;
float dist = distance(p, center);
 float mouseDist = distance(p, mousePos);
float gravity = 1.0 - pow(dist, falloff);
 float mouseGravity = 1.0 - pow(mouseDist, falloff);
return (gravity + mouseGravity) * strength * 0.5;
 }
void main() {
 vec2 uv = vUv;
 vec2 p = uv * 2.0 - 1.0;
 p.x *= resolution.x / resolution.y;
// Mouse influence
 vec2 mousePos = (mouse * 2.0 - 1.0);
 mousePos.x *= resolution.x / resolution.y;
 float mouseDist = length(p - mousePos);
 float mouseInfluence = smoothstep(0.5, 0.0, mouseDist) * 0.5;
// Base position for gradient
 vec2 gradientPos = uv;
// Apply gradient type
 if (gradientType == 1) { // Radial
 gradientPos = vec2(length(uv - 0.5), 0.0);
 } else if (gradientType == 2) { // Angular
 gradientPos = vec2(atan(uv.y - 0.5, uv.x - 0.5) / (2.0 * PI) + 0.5, 0.0);
 } else if (gradientType == 3) { // Spiral
 float angle = atan(uv.y - 0.5, uv.x - 0.5) / (2.0 * PI);
 float radius = length(uv - 0.5);
 gradientPos = vec2(angle + radius * 2.0, 0.0);
 }
// Apply mathematical functions
 float mathEffect = 0.0;
 float mathFunction = 0.0;
if (mathFunction == 0) { // Sine waves
 mathEffect = sin(uv.x * waveFrequency * 10.0 + time) *
sin(uv.y * waveFrequency * 10.0 + time * 1.3) *
waveAmplitude;
 } else if (mathFunction == 1) { // Fractal noise
 mathEffect = fbm(vec3(uv * 5.0, time * 0.5)) * 0.5;
 } else if (mathFunction == 2) { // Mandelbrot
 vec2 c = (uv - 0.5) * 4.0;
 mathEffect = mandelbrot(c, c, complexIterations);
 } else if (mathFunction == 3) { // Julia set
 vec2 c = (uv - 0.5) * 4.0;
 mathEffect = mandelbrot(c, vec2(complexReal, complexImag), complexIterations);
 } else if (mathFunction == 4) { // Lorenz attractor
 // Simplified Lorenz attractor effect
 mathEffect = fbm(vec3(uv * 10.0, time * 0.2)) * 0.5;
 } else if (mathFunction == 5) { // Quantum interference
 mathEffect = quantumWave(uv, quantumProbability, quantumEntanglement);
 }
// Apply physics simulation
 float physicsEffect = 0.0;
if (physicsType == 0) { // Fluid dynamics
 physicsEffect = fluidSim(uv, fluidViscosity, fluidVelocity);
 } else if (physicsType == 1) { // Particle system
 physicsEffect = particleSystem(uv, particleCount, particleSize);
 } else if (physicsType == 2) { // Gravity well
 physicsEffect = gravityWell(uv, fieldStrength, fieldFalloff);
 } else if (physicsType == 3) { // Magnetic field
 // Simplified magnetic field effect
 physicsEffect = sin(uv.x * 10.0 + time) * 0.5 + 0.5;
 } else if (physicsType == 4) { // Quantum field
 physicsEffect = quantumWave(uv, quantumProbability, quantumEntanglement);
 }
// Combine effects
 float combinedEffect = gradientPos.x + mathEffect * 0.3 + physicsEffect * 0.3 + mouseInfluence * 0.2;
// Three-color gradient
 vec3 color;
 if (combinedEffect < pos2) {
 float t = (combinedEffect - pos1) / (pos2 - pos1);
 color = mix(color1, color2, t);
 } else {
 float t = (combinedEffect - pos2) / (pos3 - pos2);
 color = mix(color2, color3, t);
 }
// Add highlights from effects
 color += vec3(mathEffect * 0.2, physicsEffect * 0.2, mouseInfluence * 0.2);
gl_FragColor = vec4(color, 1.0);
 }
 `
 });
 const plane = new THREE.Mesh(geometry, shaderMaterial);
 scene.add(plane);
 camera.position.z = 1;
 // Mouse interaction
 const mouse = new THREE.Vector2();
 document.addEventListener('mousemove', (event) => {
 mouse.x = (event.clientX / window.innerWidth);
 mouse.y = 1 - (event.clientY / window.innerHeight);
 shaderMaterial.uniforms.mouse.value = mouse;
 });
 // Handle window resize
 window.addEventListener('resize', () => {
 camera.aspect = window.innerWidth / window.innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize(window.innerWidth, window.innerHeight);
 shaderMaterial.uniforms.resolution.value.set(window.innerWidth, window.innerHeight);
 });
 // Tab switching
 function switchTab(tabId) {
 document.querySelectorAll('.tab-content').forEach(tab => {
 tab.classList.remove('active');
 });
 document.querySelectorAll('.tab').forEach(tab => {
 tab.classList.remove('active');
 });
document.getElementById(tabId).classList.add('active');
 event.target.classList.add('active');
 }
 // Color controls
 const color1Input = document.getElementById('color1');
 const color2Input = document.getElementById('color2');
 const color3Input = document.getElementById('color3');
 const pos1Input = document.getElementById('color1Pos');
 const pos2Input = document.getElementById('color2Pos');
 const pos3Input = document.getElementById('color3Pos');
 const randomizeBtn = document.getElementById('randomize');
 const gradientTypeSelect = document.getElementById('gradientType');
 color1Input.addEventListener('input', () => {
 shaderMaterial.uniforms.color1.value.set(color1Input.value);
 });
color2Input.addEventListener('input', () => {
 shaderMaterial.uniforms.color2.value.set(color2Input.value);
 });
color3Input.addEventListener('input', () => {
 shaderMaterial.uniforms.color3.value.set(color3Input.value);
 });
pos1Input.addEventListener('input', () => {
 shaderMaterial.uniforms.pos1.value = parseFloat(pos1Input.value);
 });
pos2Input.addEventListener('input', () => {
 shaderMaterial.uniforms.pos2.value = parseFloat(pos2Input.value);
 });
pos3Input.addEventListener('input', () => {
 shaderMaterial.uniforms.pos3.value = parseFloat(pos3Input.value);
 });
gradientTypeSelect.addEventListener('change', () => {
 const types = ['linear', 'radial', 'angular', 'spiral'];
 shaderMaterial.uniforms.gradientType.value = types.indexOf(gradientTypeSelect.value);
 });
 // Math controls
 const mathFunctionSelect = document.getElementById('mathFunction');
 const waveFrequencyInput = document.getElementById('waveFrequency');
 const waveAmplitudeInput = document.getElementById('waveAmplitude');
 const fractalOctavesInput = document.getElementById('fractalOctaves');
 const fractalLacunarityInput = document.getElementById('fractalLacunarity');
 const fractalGainInput = document.getElementById('fractalGain');
 const complexRealInput = document.getElementById('complexReal');
 const complexImagInput = document.getElementById('complexImag');
 const complexIterationsInput = document.getElementById('complexIterations');
 mathFunctionSelect.addEventListener('change', () => {
 shaderMaterial.uniforms.mathFunction.value = mathFunctionSelect.selectedIndex;
 });
waveFrequencyInput.addEventListener('input', () => {
 shaderMaterial.uniforms.waveFrequency.value = parseFloat(waveFrequencyInput.value);
 });
waveAmplitudeInput.addEventListener('input', () => {
 shaderMaterial.uniforms.waveAmplitude.value = parseFloat(waveAmplitudeInput.value);
 });
fractalOctavesInput.addEventListener('input', () => {
 shaderMaterial.uniforms.fractalOctaves.value = parseInt(fractalOctavesInput.value);
 });
fractalLacunarityInput.addEventListener('input', () => {
 shaderMaterial.uniforms.fractalLacunarity.value = parseFloat(fractalLacunarityInput.value);
 });
fractalGainInput.addEventListener('input', () => {
 shaderMaterial.uniforms.fractalGain.value = parseFloat(fractalGainInput.value);
 });
complexRealInput.addEventListener('input', () => {
 shaderMaterial.uniforms.complexReal.value = parseFloat(complexRealInput.value);
 });
complexImagInput.addEventListener('input', () => {
 shaderMaterial.uniforms.complexImag.value = parseFloat(complexImagInput.value);
 });
complexIterationsInput.addEventListener('input', () => {
 shaderMaterial.uniforms.complexIterations.value = parseInt(complexIterationsInput.value);
 });
 // Physics controls
 const physicsTypeSelect = document.getElementById('physicsType');
 const fluidViscosityInput = document.getElementById('fluidViscosity');
 const fluidVelocityInput = document.getElementById('fluidVelocity');
 const particleCountInput = document.getElementById('particleCount');
 const particleSizeInput = document.getElementById('particleSize');
 const fieldStrengthInput = document.getElementById('fieldStrength');
 const fieldFalloffInput = document.getElementById('fieldFalloff');
 const quantumProbabilityInput = document.getElementById('quantumProbability');
 const quantumEntanglementInput = document.getElementById('quantumEntanglement');
 physicsTypeSelect.addEventListener('change', () => {
 shaderMaterial.uniforms.physicsType.value = physicsTypeSelect.selectedIndex;
 });
fluidViscosityInput.addEventListener('input', () => {
 shaderMaterial.uniforms.fluidViscosity.value = parseFloat(fluidViscosityInput.value);
 });
fluidVelocityInput.addEventListener('input', () => {
 shaderMaterial.uniforms.fluidVelocity.value = parseFloat(fluidVelocityInput.value);
 });
particleCountInput.addEventListener('input', () => {
 shaderMaterial.uniforms.particleCount.value = parseFloat(particleCountInput.value);
 });
particleSizeInput.addEventListener('input', () => {
 shaderMaterial.uniforms.particleSize.value = parseFloat(particleSizeInput.value);
 });
fieldStrengthInput.addEventListener('input', () => {
 shaderMaterial.uniforms.fieldStrength.value = parseFloat(fieldStrengthInput.value);
 });
fieldFalloffInput.addEventListener('input', () => {
 shaderMaterial.uniforms.fieldFalloff.value = parseFloat(fieldFalloffInput.value);
 });
quantumProbabilityInput.addEventListener('input', () => {
 shaderMaterial.uniforms.quantumProbability.value = parseFloat(quantumProbabilityInput.value);
 });
quantumEntanglementInput.addEventListener('input', () => {
 shaderMaterial.uniforms.quantumEntanglement.value = parseFloat(quantumEntanglementInput.value);
 });
 // Randomize colors
 randomizeBtn.addEventListener('click', () => {
 const randomColor = () => {
 return '#' + Math.floor(Math.random()*16777215).toString(16);
 };
color1Input.value = randomColor();
 color2Input.value = randomColor();
 color3Input.value = randomColor();
shaderMaterial.uniforms.color1.value.set(color1Input.value);
 shaderMaterial.uniforms.color2.value.set(color2Input.value);
 shaderMaterial.uniforms.color3.value.set(color3Input.value);
 });
 // Animation loop
 function animate() {
 requestAnimationFrame(animate);
 shaderMaterial.uniforms.time.value += 0.01;
 renderer.render(scene, camera);
 }
 animate();
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=arirajuns/gradient-simulator-glsl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>