henrik242/mandelbrot.html

## mandelbrot.html
<html>
<head>
  <title>Mandelbrot Set</title>
</head>
<body>
  <canvas id="canvas" width="1200" height="800"></canvas>
  <script>
    // Prompt:
    // Create a zoomable mandelbrot set with pretty colors in javascript and html,
    // without using external libraries. It should recalculate the mandelbrot on every zoom.

// Get the canvas element and its context
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Set the canvas size and the initial scale and position
const width = canvas.width;
const height = canvas.height;
let scale = 400;
let x0 = -2;
let y0 = -1;

// Define the maximum number of iterations and the escape radius
const maxIter = 200;
const escape = 4;

// Define a color palette as an array of RGB values
const palette = [
  [66, 30, 15],
  [25, 7, 26],
  [9, 1, 47],
  [4, 4, 73],
  [0, 7, 100],
  [12, 44, 138],
  [24, 82, 177],
  [57, 125, 209],
  [134, 181, 229],
  [211, 236, 248],
  [241, 233, 191],
  [248, 201, 95],
  [255, 170, 0],
  [204, 128, 0],
  [153, 87, 0],
  [106, 52, 3],
];

// Define a function to map a pixel coordinate to a complex number
function pixelToComplex(x, y) {
  return {
    x: x0 + x / scale,
    y: y0 + y / scale,
  };
}

// Define a function to compute the mandelbrot set for a given complex number
function mandelbrot(c) {
  let z = { x: 0, y: 0 };
  let n = 0;
  let d = 0;
  while (d <= escape && n < maxIter) {
    // z = z^2 + c
    let p = {
      x: z.x * z.x - z.y * z.y,
      y: 2 * z.x * z.y,
    };
    z = {
      x: p.x + c.x,
      y: p.y + c.y,
    };
    // d = |z|
    d = z.x * z.x + z.y * z.y;
    n++;
  }
  return n;
}

// Define a function to draw the mandelbrot set on the canvas
function draw() {
  // Loop through every pixel on the canvas
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      // Get the complex number corresponding to the pixel
      let c = pixelToComplex(x, y);
      // Get the number of iterations for the mandelbrot set
      let n = mandelbrot(c);
      // Get the color from the palette based on the number of iterations
      let color = palette[n % palette.length];
      // Set the pixel color on the canvas
      ctx.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
      ctx.fillRect(x, y, 1, 1);
    }
  }
}

// Define a function to handle mouse click events on the canvas
function handleClick(event) {
  // Get the mouse position relative to the canvas
  let rect = canvas.getBoundingClientRect();
  let x = event.clientX - rect.left;
  let y = event.clientY - rect.top;
  // Get the complex number corresponding to the mouse position
  let c = pixelToComplex(x, y);
  // Check if the left or right button was clicked
  if (event.button === 0) {
    // Left button: zoom in by a factor of 2
    scale *= 2;
    x0 = c.x - width / (2 * scale);
    y0 = c.y - height / (2 * scale);
  } else if (event.button === 2) {
    // Right button: zoom out by a factor of 2
    scale /= 2;
    x0 = c.x - width / (2 * scale);
    y0 = c.y - height / (2 * scale);
  }
  // Redraw the mandelbrot set with the new scale and position
  draw();
}

// Add an event listener for mouse clicks on the canvas
canvas.addEventListener("click", handleClick);

// Disable the context menu on the canvas
canvas.addEventListener("contextmenu", (event) => event.preventDefault());

// Draw the initial mandelbrot set
draw();

  </script>
</body>
</html>
	<html>
	<head>
	<title>Mandelbrot Set</title>
	</head>
	<body>
	<canvas id="canvas" width="1200" height="800"></canvas>
	<script>
	// Prompt:
	// Create a zoomable mandelbrot set with pretty colors in javascript and html,
	// without using external libraries. It should recalculate the mandelbrot on every zoom.

	// Get the canvas element and its context
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");

	// Set the canvas size and the initial scale and position
	const width = canvas.width;
	const height = canvas.height;
	let scale = 400;
	let x0 = -2;
	let y0 = -1;

	// Define the maximum number of iterations and the escape radius
	const maxIter = 200;
	const escape = 4;

	// Define a color palette as an array of RGB values
	const palette = [
	[66, 30, 15],
	[25, 7, 26],
	[9, 1, 47],
	[4, 4, 73],
	[0, 7, 100],
	[12, 44, 138],
	[24, 82, 177],
	[57, 125, 209],
	[134, 181, 229],
	[211, 236, 248],
	[241, 233, 191],
	[248, 201, 95],
	[255, 170, 0],
	[204, 128, 0],
	[153, 87, 0],
	[106, 52, 3],
	];

	// Define a function to map a pixel coordinate to a complex number
	function pixelToComplex(x, y) {
	return {
	x: x0 + x / scale,
	y: y0 + y / scale,
	};
	}

	// Define a function to compute the mandelbrot set for a given complex number
	function mandelbrot(c) {
	let z = { x: 0, y: 0 };
	let n = 0;
	let d = 0;
	while (d <= escape && n < maxIter) {
	// z = z^2 + c
	let p = {
	x: z.x * z.x - z.y * z.y,
	y: 2 * z.x * z.y,
	};
	z = {
	x: p.x + c.x,
	y: p.y + c.y,
	};
	// d = \|z\|
	d = z.x * z.x + z.y * z.y;
	n++;
	}
	return n;
	}

	// Define a function to draw the mandelbrot set on the canvas
	function draw() {
	// Loop through every pixel on the canvas
	for (let x = 0; x < width; x++) {
	for (let y = 0; y < height; y++) {
	// Get the complex number corresponding to the pixel
	let c = pixelToComplex(x, y);
	// Get the number of iterations for the mandelbrot set
	let n = mandelbrot(c);
	// Get the color from the palette based on the number of iterations
	let color = palette[n % palette.length];
	// Set the pixel color on the canvas
	ctx.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
	ctx.fillRect(x, y, 1, 1);
	}
	}
	}

	// Define a function to handle mouse click events on the canvas
	function handleClick(event) {
	// Get the mouse position relative to the canvas
	let rect = canvas.getBoundingClientRect();
	let x = event.clientX - rect.left;
	let y = event.clientY - rect.top;
	// Get the complex number corresponding to the mouse position
	let c = pixelToComplex(x, y);
	// Check if the left or right button was clicked
	if (event.button === 0) {
	// Left button: zoom in by a factor of 2
	scale *= 2;
	x0 = c.x - width / (2 * scale);
	y0 = c.y - height / (2 * scale);
	} else if (event.button === 2) {
	// Right button: zoom out by a factor of 2
	scale /= 2;
	x0 = c.x - width / (2 * scale);
	y0 = c.y - height / (2 * scale);
	}
	// Redraw the mandelbrot set with the new scale and position
	draw();
	}

	// Add an event listener for mouse clicks on the canvas
	canvas.addEventListener("click", handleClick);

	// Disable the context menu on the canvas
	canvas.addEventListener("contextmenu", (event) => event.preventDefault());

	// Draw the initial mandelbrot set
	draw();

	</script>
	</body>
	</html>