<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mandelbrot Fractal</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="mandelbrotCanvas"></canvas>
<script>
const canvas = document.getElementById('mandelbrotCanvas');
const ctx = canvas.getContext('2d');
// Set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Mandelbrot parameters
const maxIterations = 100;
const zoom = 300; // Zoom level
const panX = -0.5; // Horizontal shift
const panY = 0; // Vertical shift
// Function to generate Mandelbrot set
function drawMandelbrot() {
const imgData = ctx.createImageData(canvas.width, canvas.height);
const width = canvas.width;
const height = canvas.height;
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
// Map pixel to Mandelbrot coordinates
const mandelX = (x - width / 2) / zoom + panX;
const mandelY = (y - height / 2) / zoom + panY;
let zx = 0, zy = 0;
let iteration = 0;
// Mandelbrot equation: z = z^2 + c
while (zx * zx + zy * zy < 4 && iteration < maxIterations) {
const tmp = zx * zx - zy * zy + mandelX;
zy = 2 * zx * zy + mandelY;
zx = tmp;
iteration++;
}
// Color based on iterations
const color = iteration === maxIterations ? 0 : (iteration / maxIterations) * 255;
const pixelIndex = (y * width + x) * 4;
imgData.data[pixelIndex] = color; // Red
imgData.data[pixelIndex + 1] = color; // Green
imgData.data[pixelIndex + 2] = color; // Blue
imgData.data[pixelIndex + 3] = 255; // Alpha
}
}
ctx.putImageData(imgData, 0, 0);
}
drawMandelbrot();
// Resize canvas and redraw on window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawMandelbrot();
});
</script>
</body>
</html>