/** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function MandelbrotFractal() { const canvasRef = useRef(null); const [zoom, setZoom] = useState(1); const [color, setColor] = useState('#0000FF'); const [iterations, setIterations] = useState(100); const drawMandelbrot = (ctx, width, height) => { const maxIterations = iterations; const xMin = -2 * zoom, xMax = 1 * zoom; const yMin = -1.5 * zoom, yMax = 1.5 * zoom; for (let px = 0; px < width; px++) { for (let py = 0; py < height; py++) { const x0 = xMin + (xMax - xMin) * px / width; const y0 = yMin + (yMax - yMin) * py / height; let x = 0, y = 0, iteration = 0; while (x*x + y*y <= 4 && iteration < maxIterations) { const xTemp = x*x - y*y + x0; y = 2*x*y + y0; x = xTemp; iteration++; } if (iteration < maxIterations) { const brightness = iteration / maxIterations; ctx.fillStyle = `${color}${Math.floor(brightness * 255).toString(16).padStart(2, '0')}`; ctx.fillRect(px, py, 1, 1); } } } }; useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); canvas.width = 600; canvas.height = 400; drawMandelbrot(ctx, 600, 400); }, [zoom, color, iterations]); return (

🌈 Fraktal Mandelbrota

); } function App() { return ; } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Fraktal Mandelbrota

`, { headers: { "content-type": "text/html" } }); }

madaju