Spaces:

Mooooonk
/

shader-playground-0

Running

File size: 9,895 Bytes

8f23c64

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShaderPlayground</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        #editor {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            background-color: rgba(30, 41, 59, 0.9);
            transition: background-color 0.3s ease;
        }
        
        #preview {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .control-panel {
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 20;
            background: rgba(15, 23, 42, 0.8);
            border-radius: 8px;
            padding: 10px;
            backdrop-filter: blur(5px);
        }
        
        .gradient-border {
            border: 2px solid transparent;
            background-clip: padding-box;
            position: relative;
        }
        
        .gradient-border::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899);
            z-index: -1;
            border-radius: inherit;
        }
    </style>
</head>
<body class="bg-slate-900 text-slate-200 overflow-hidden h-screen">
    <div id="preview"></div>
    
    <div id="editor"></div>
    
    <div class="control-panel gradient-border">
        <div class="flex items-center space-x-4">
            <div class="flex items-center">
                <span class="text-sm mr-2">Editor Opacity:</span>
                <input type="range" id="opacitySlider" min="0.1" max="1" step="0.1" value="0.9" class="w-24">
            </div>
            <button id="toggleEditor" class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 rounded-md text-sm font-medium transition-colors">
                Toggle Editor
            </button>
            <button id="runShader" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-700 rounded-md text-sm font-medium transition-colors">
                Run Shader
            </button>
        </div>
    </div>
    
    <script>
        // Initialize ACE Editor
        const editor = ace.edit("editor");
        editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/glsl");
        editor.setFontSize(14);
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true
        });
        
        // Default shader code
        const defaultShader = `
// Based on https://www.shadertoy.com/view/XslGRr
// Created by inigo quilez - iq/2013
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 p = (2.0*fragCoord-iResolution.xy)/iResolution.y;
    
    // background color
    vec3 col = vec3(0.3 + 0.05*p.y);
    
    // animate
    float tt = mod(iTime,2.0)/2.0;
    float ss = pow(tt,.2)*0.5 + 0.5;
    ss = 1.0 + ss*0.5*sin(tt*6.2831*3.0 + p.y*0.5)*exp(-tt*4.0);
    p *= vec2(0.5,1.5) + ss*vec2(0.5,-0.5);
    
    // shape
    float a = atan(p.x,p.y);
    float r = length(p);
    float h = abs(a);
    float d = (13.0*h - 22.0*h*h + 10.0*h*h*h)/(6.0-5.0*h);
    
    // color
    float s = 1.0-0.5*clamp(r/d,0.0,1.0);
    s = 0.75 + 0.75*p.x;
    s *= 1.0-0.25*r;
    s = 0.5 + 0.6*s;
    s *= 0.5+0.5*pow( 1.0-clamp(r/d, 0.0, 1.0 ), 0.1 );
    vec3 hcol = vec3(1.0,0.5*r,0.3)*s;
    
    col = mix( col, hcol, smoothstep( -0.06, 0.06, d-r) );

    fragColor = vec4(col,1.0);
}`;
        
        editor.setValue(defaultShader.trim(), -1);
        
        // Three.js setup for shader preview
        let scene, camera, renderer, shaderMaterial;
        const preview = document.getElementById('preview');
        
        function initThreeJS() {
            scene = new THREE.Scene();
            camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
            
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            preview.appendChild(renderer.domElement);
            
            const geometry = new THREE.PlaneGeometry(2, 2);
            
            shaderMaterial = new THREE.ShaderMaterial({
                uniforms: {
                    iTime: { value: 0 },
                    iResolution: { value: new THREE.Vector3() }
                },
                vertexShader: `
                    void main() {
                        gl_Position = vec4(position, 1.0);
                    }
                `,
                fragmentShader: defaultShader
            });
            
            const mesh = new THREE.Mesh(geometry, shaderMaterial);
            scene.add(mesh);
            
            window.addEventListener('resize', onWindowResize);
            onWindowResize();
            
            animate();
        }
        
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            shaderMaterial.uniforms.iResolution.value.set(
                window.innerWidth * window.devicePixelRatio,
                window.innerHeight * window.devicePixelRatio,
                1
            );
        }
        
        function animate() {
            requestAnimationFrame(animate);
            shaderMaterial.uniforms.iTime.value = performance.now() / 1000;
            renderer.render(scene, camera);
        }
        
        // Control panel functionality
        const opacitySlider = document.getElementById('opacitySlider');
        const toggleEditor = document.getElementById('toggleEditor');
        const runShader = document.getElementById('runShader');
        let editorVisible = true;
        
        opacitySlider.addEventListener('input', () => {
            const opacity = opacitySlider.value;
            document.getElementById('editor').style.backgroundColor = `rgba(30, 41, 59, ${opacity})`;
        });
        
        toggleEditor.addEventListener('click', () => {
            editorVisible = !editorVisible;
            document.getElementById('editor').style.display = editorVisible ? 'block' : 'none';
            toggleEditor.textContent = editorVisible ? 'Hide Editor' : 'Show Editor';
        });
        
        runShader.addEventListener('click', () => {
            const shaderCode = editor.getValue();
            try {
                shaderMaterial.fragmentShader = `
                    uniform vec3 iResolution;
                    uniform float iTime;
                    
                    void mainImage(out vec4 fragColor, in vec2 fragCoord);
                    
                    void main() {
                        vec2 fragCoord = gl_FragCoord.xy;
                        vec4 fragColor;
                        mainImage(fragColor, fragCoord);
                        gl_FragColor = fragColor;
                    }
                    
                    ${shaderCode}
                `;
                shaderMaterial.needsUpdate = true;
                
                // Show success message
                const notification = document.createElement('div');
                notification.className = 'fixed top-4 right-4 bg-emerald-600 text-white px-4 py-2 rounded-md shadow-lg z-50 animate-fade-in-out';
                notification.textContent = 'Shader compiled successfully!';
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
                    setTimeout(() => notification.remove(), 300);
                }, 2000);
            } catch (e) {
                // Show error message
                const notification = document.createElement('div');
                notification.className = 'fixed top-4 right-4 bg-rose-600 text-white px-4 py-2 rounded-md shadow-lg z-50';
                notification.textContent = 'Shader error: ' + e.message;
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
                    setTimeout(() => notification.remove(), 300);
                }, 3000);
            }
        });
        
        // Initialize everything
        window.addEventListener('load', () => {
            initThreeJS();
        });
    </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=Mooooonk/shader-playground-0" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>