Spaces:

arirajuns
/

gradient-simulator-glsl

Running

App Files Files Community

arirajuns commited on May 20, 2025

Commit

538fd91

verified ·

1 Parent(s): 8c8c5f1

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +309 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Gradient Simulator Glsl
-emoji: 🐨
-colorFrom: green
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: gradient-simulator-glsl
+emoji: 🐳
+colorFrom: purple
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,309 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fluid 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;
+        }
+        #info-panel {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            max-width: 300px;
+            backdrop-filter: blur(5px);
+        }
+        #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;
+        }
+        .gradient-control {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .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;
+        }
+    </style>
+</head>
+<body class="bg-gray-900">
+    <div id="title" class="font-bold">Fluid Gradient Simulator</div>
+    <div id="info-panel">
+        <h3 class="text-lg font-semibold mb-2">Interactive Controls</h3>
+        <p class="text-sm mb-4">Move your mouse to disturb the gradient. Scroll to zoom in/out.</p>
+        <div id="controls">
+            <div class="gradient-control">
+                <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">
+                <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">
+                <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" class="mt-3 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">Randomize Colors</button>
+        </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);
+        // Fluid simulation shader
+        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 },
+                turbulence: { value: 0.5 },
+                speed: { value: 0.5 }
+            },
+            vertexShader: `
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                }
+            `,
+            fragmentShader: `
+                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 float turbulence;
+                uniform float speed;
+                varying vec2 vUv;
+                // Simplex noise function (simplified)
+                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)));
+                }
+                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;
+                    // Fluid simulation with noise
+                    float noise = snoise(vec3(uv * 5.0, time * speed)) * turbulence;
+                    noise += mouseInfluence * (snoise(vec3(uv * 10.0, time * speed * 2.0)) * 0.5 + 0.5);
+                    // Gradient with noise influence
+                    float gradientPos = uv.y + noise * 0.2;
+                    // Three-color gradient
+                    vec3 color;
+                    if (gradientPos < pos2) {
+                        float t = (gradientPos - pos1) / (pos2 - pos1);
+                        color = mix(color1, color2, t);
+                    } else {
+                        float t = (gradientPos - pos2) / (pos3 - pos2);
+                        color = mix(color2, color3, t);
+                    }
+                    // Add some subtle highlights
+                    float highlight = snoise(vec3(uv * 20.0, time * 0.5)) * 0.1;
+                    color += highlight;
+                    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);
+        });
+        // 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');
+        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);
+        });
+        // 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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Shader toy, three.js,GLSL, type script, physics simulation of gradients