char.build

\n {label}: {value.toFixed(2)}\n onChange(parseFloat(e.target.value))}\n />\n

\n );\n}\n\n// --- React Component ---\nfunction App() {\n const canvasRef = useRef(null);\n const [cloudscale, setCloudscale] = useState(1.1);\n const [speed, setSpeed] = useState(0.03);\n const [cloudcover, setCloudcover] = useState(0.2);\n const [cloudalpha, setCloudalpha] = useState(8.0);\n const [skytint, setSkytint] = useState(0.5);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) {\n console.error(\"Canvas ref not found\");\n return;\n }\n\n const gl = canvas.getContext(\"webgl\");\n if (!gl) {\n console.error(\"WebGL not supported\");\n alert(\"WebGL not supported\");\n return;\n }\n console.log(\"WebGL Context obtained.\");\n\n // --- Shader Compilation & Linking ---\n const vertexShader = gl.createShader(gl.VERTEX_SHADER)!;\n gl.shaderSource(vertexShader, vertexShaderSource);\n gl.compileShader(vertexShader);\n if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {\n console.error(\"VS Compile Error:\", gl.getShaderInfoLog(vertexShader));\n return;\n }\n\n const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)!;\n gl.shaderSource(fragmentShader, fragmentShaderSource);\n gl.compileShader(fragmentShader);\n if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {\n console.error(\"FS Compile Error:\", gl.getShaderInfoLog(fragmentShader));\n console.log(\n \"--- Fragment Shader Source ---\\n\"\n + fragmentShaderSource.split(\"\\n\").map((l, i) => `${i + 1}: ${l}`).join(\"\\n\"),\n );\n return;\n }\n console.log(\"Shaders compiled successfully.\");\n\n const program = gl.createProgram()!;\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n console.error(\"Link Error:\", gl.getProgramInfoLog(program));\n gl.deleteShader(vertexShader);\n gl.deleteShader(fragmentShader);\n gl.deleteProgram(program);\n return;\n }\n console.log(\"Program linked successfully.\");\n gl.detachShader(program, vertexShader);\n gl.detachShader(program, fragmentShader);\n gl.deleteShader(vertexShader);\n gl.deleteShader(fragmentShader);\n\n // --- Get Locations ---\n const positionAttributeLocation = gl.getAttribLocation(program, \"aVertexPosition\");\n const resolutionUniformLocation = gl.getUniformLocation(program, \"iResolution\");\n const timeUniformLocation = gl.getUniformLocation(program, \"iTime\");\n const cloudscaleUniformLocation = gl.getUniformLocation(program, \"cloudscale\");\n const speedUniformLocation = gl.getUniformLocation(program, \"speed\");\n const cloudcoverUniformLocation = gl.getUniformLocation(program, \"cloudcover\");\n const cloudalphaUniformLocation = gl.getUniformLocation(program, \"cloudalpha\");\n const skytintUniformLocation = gl.getUniformLocation(program, \"skytint\");\n\n let errorFound = false;\n if (positionAttributeLocation < 0) {\n console.error(\"Attrib 'aVertexPosition' not found\");\n errorFound = true;\n }\n if (!resolutionUniformLocation || !timeUniformLocation || \n !cloudscaleUniformLocation || !speedUniformLocation || \n !cloudcoverUniformLocation || !cloudalphaUniformLocation || \n !skytintUniformLocation) {\n console.error(\"One or more uniforms not found\");\n errorFound = true;\n }\n if (errorFound) return;\n console.log(\"Attribute and Uniform locations obtained.\");\n\n // --- Buffer Setup ---\n const positionBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n const positions = [-1, -1, 1, -1, -1, 1, 1, 1];\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);\n console.log(\"Position buffer created.\");\n\n // --- Resize Function ---\n const resizeCanvasToDisplaySize = () => {\n if (!canvas) return false;\n const displayWidth = canvas.clientWidth;\n const displayHeight = canvas.clientHeight;\n if (canvas.width !== displayWidth || canvas.height !== displayHeight) {\n canvas.width = displayWidth;\n canvas.height = displayHeight;\n gl.viewport(0, 0, canvas.width, canvas.height);\n return true;\n }\n return false;\n };\n\n // --- Render Loop ---\n let animationFrameId: number | null = null;\n const render = (time: number) => {\n resizeCanvasToDisplaySize();\n gl.clearColor(0.0, 0.0, 0.0, 1.0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.useProgram(program);\n gl.enableVertexAttribArray(positionAttributeLocation);\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);\n\n // Set Uniforms\n gl.uniform3f(resolutionUniformLocation, canvas.width, canvas.height, 1.0);\n gl.uniform1f(timeUniformLocation, time * 0.001);\n gl.uniform1f(cloudscaleUniformLocation, cloudscale);\n gl.uniform1f(speedUniformLocation, speed);\n gl.uniform1f(cloudcoverUniformLocation, cloudcover);\n gl.uniform1f(cloudalphaUniformLocation, cloudalpha);\n gl.uniform1f(skytintUniformLocation, skytint);\n\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n animationFrameId = requestAnimationFrame(render);\n };\n\n console.log(\"Starting render loop...\");\n resizeCanvasToDisplaySize();\n animationFrameId = requestAnimationFrame(render);\n\n // --- Cleanup ---\n return () => {\n console.log(\"Cleaning up Murieron...\");\n if (animationFrameId) cancelAnimationFrame(animationFrameId);\n if (gl) {\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n gl.deleteBuffer(positionBuffer);\n gl.deleteProgram(program);\n }\n console.log(\"Murieron cleanup complete.\");\n };\n }, [cloudscale, speed, cloudcover, cloudalpha, skytint]);\n\n return (\n

\n );\n}\n\n// --- Client Entry ---\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (!rootElement) {\n console.error(\"Failed to find root element '#root'.\");\n return;\n }\n createRoot(rootElement).render();\n}\nif (typeof document !== \"undefined\") {\n console.log(\"Running client script...\");\n client();\n}\n\n// --- Server & CSS (Standard Val Town Setup) ---\nconst css = `\n body, html { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; background: #000; }\n #root { width: 100%; height: 100%; }\n canvas { display: block; width: 100%; height: 100%; }\n @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');\n .char-build {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-weight: 300;\n font-size: 10vw;\n color: #FFD700;\n white-space: nowrap;\n text-align: center;\n width: 100%;\n }\n .controls {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(0, 0, 0, 0.5);\n padding: 20px;\n border-radius: 15px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n max-width: 400px;\n width: 90%;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 215, 0, 0.3);\n }\n .slider-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n color: #FFD700;\n font-family: 'Playfair Display', serif;\n font-style: italic;\n }\n .slider-container label {\n margin-bottom: 8px;\n font-size: 1.2em;\n }\n input[type=\"range\"] {\n width: 100%;\n -webkit-appearance: none;\n background: rgba(255, 215, 0, 0.2);\n outline: none;\n opacity: 0.7;\n transition: opacity .2s;\n border-radius: 10px;\n height: 8px;\n }\n input[type=\"range\"]:hover {\n opacity: 1;\n }\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 25px;\n height: 25px;\n background: #FFD700;\n cursor: pointer;\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);\n }\n input[type=\"range\"]::-moz-range-thumb {\n width: 25px;\n height: 25px;\n background: #FFD700;\n cursor: pointer;\n border-radius: 50%;\n box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);\n }\n`;\n\nexport default async function server(request: Request): Promise {\n const valUrl = import.meta.url;\n return new Response(\n `\n \n \n \n \n char.build\n \n \n \n

\n \n \n `,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/cloudAdjuster/code/main.tsx","extension","actionData","errors"]