function MainComponent() { const [realPart, setRealPart] = React.useState(0); const [imaginaryPart, setImaginaryPart] = React.useState(0); const [zoomLevel, setZoomLevel] = React.useState(1); React.useEffect(()=>{ const canvas = document.getElementById('mandelbrotCanvas'); const ctx = canvas.getContext('2d'); drawMandelbrot(ctx, realPart, imaginaryPart, zoomLevel); }, [ realPart, imaginaryPart, zoomLevel ]); const drawMandelbrot = (ctx, real, imag, zoom)=>{ const width = ctx.canvas.width; const height = ctx.canvas.height; const imgData = ctx.createImageData(width, height); const maxIter = 1000; for(let x = 0; x < width; x++){ for(let y = 0; y < height; y++){ let zx = (x - width / 2) / (0.5 * zoom * width) + real; let zy = (y - height / 2) / (0.5 * zoom * height) + imag; let i = maxIter; while(zx * zx + zy * zy < 4 && i > 0){ let tmp = zx * zx - zy * zy + real; zy = 2.0 * zx * zy + imag; zx = tmp; i -= 1; } const pixelIndex = (x + y * width) * 4; imgData.data[pixelIndex] = i << 21 & 255; imgData.data[pixelIndex + 1] = i << 10 & 255; imgData.data[pixelIndex + 2] = i * 8 & 255; imgData.data[pixelIndex + 3] = 255; } } ctx.putImageData(imgData, 0, 0); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "マンデルブロ集合"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "realPart", className: "mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Real Part"), /*#__PURE__*/ React.createElement("input", { name: "realPart", type: "number", step: "any", value: realPart, onChange: (e)=>setRealPart(parseFloat(e.target.value)), className: "p-2 bg-gray-800 text-white border border-gray-700 rounded-md", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imaginaryPart", className: "mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Imaginary Part"), /*#__PURE__*/ React.createElement("input", { name: "imaginaryPart", type: "number", step: "any", value: imaginaryPart, onChange: (e)=>setImaginaryPart(parseFloat(e.target.value)), className: "p-2 bg-gray-800 text-white border border-gray-700 rounded-md", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "zoomLevel", className: "mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Zoom Level"), /*#__PURE__*/ React.createElement("input", { name: "zoomLevel", type: "number", step: "any", value: zoomLevel, onChange: (e)=>setZoomLevel(parseFloat(e.target.value)), className: "p-2 bg-gray-800 text-white border border-gray-700 rounded-md", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>drawMandelbrot, className: "mt-6 p-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, "描写"), /*#__PURE__*/ React.createElement("div", { className: "mt-10 w-full flex justify-center", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[600px] h-[600px] bg-black border border-gray-700", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { id: "mandelbrotCanvas", className: "w-full h-full", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })))); }