Mandelbrot 设置旋转 JS

问题描述

有一个简单的 JS 代码可以呈现一个非常基本的 Mandelbrot 分形。

let canvas = document.getElementsByTagName("canvas")[0],canvasWidth = canvas.width,canvasHeight = canvas.height,ctx = canvas.getContext("2d");

const maxIterations = 100,magnificationFactor = 200,panX = 2,panY = 1.25;

let drawPoint = (x,y,color) => {
  var pointSize = 1;
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(x,pointSize,Math.PI * 2,true);
  ctx.fill();
}

let mandelbrot = (c,z = 0) => z ^ 2 + c;

let BelongsToMandelbrotSet = (x,y) => {
  let realComponentOfResult = x,imaginaryComponentOfResult = y;

  for (let i = 0; i < maxIterations; i++) {

    let tempRealComponent = realComponentOfResult * realComponentOfResult - imaginaryComponentOfResult * imaginaryComponentOfResult + x,tempImaginaryComponent = 2 * realComponentOfResult * imaginaryComponentOfResult + y;

    realComponentOfResult = tempRealComponent;
    imaginaryComponentOfResult = tempImaginaryComponent;
  }

  if (realComponentOfResult * imaginaryComponentOfResult < 5)
    return true;

  return false;
}

for (let x = 0; x < canvasWidth; x++) {
  for (let y = 0; y < canvasHeight; y++) {

    let belongsToSet =
      BelongsToMandelbrotSet(x / magnificationFactor - panX,y / magnificationFactor - panY);
    if (belongsToSet)
      drawPoint(x,'#000')

  }
}

body {
  margin: 0;
}

<canvas width="800" height="800"></canvas>

任务是将这个分形沿着它的轴随机旋转一个角度。它不应该是画布旋转或其图像数据，但我必须调整初始分形公式才能做到这一点。

例如，如果角度为 45 度或 PI / 4 弧度，则输出应如下所示

我曾尝试与 x = center.x + 500 * Math.cos(theta),y = center.y + 500 * Math.sin(theta) 一起玩，但没有成功。

解决方法

您可以尝试在主循环中直接转换坐标，您可以在其中进行缩放和平移：

 let x1 = x * Math.cos(theta) - y * Math.sin(theta)
 let y1 = x * Math.sin(theta) + y * Math.cos(theta)

 let belongsToSet = BelongsToMandelbrotSet(x1/magnificationFactor - panX,...
 ...drawPoint(x,y,'#000')

为了进一步简化此操作，请为各种变换创建一个 affine transformation matrix 并应用一次。

fractals javascript mandelbrot math rotation