echarts 二維散點圖 Mandelbrot 分形

原文鏈接: echarts 二維散點圖 Mandelbrot 分形

 

https://zh.wikipedia.org/wiki/%E6%9B%BC%E5%BE%B7%E5%8D%9A%E9%9B%86%E5%90%88
https://www.zhihu.com/question/20825938
https://www.chenshaowen.com/blog/drawing-2d-fractal-graph-using-python.html
https://zhuanlan.zhihu.com/p/25337234
https://github.com/d0t451/d0fractal

z=z^2+c, 尋找使得該數列收斂的c值, 可以根據一些推論來加速

 

<template>
  <div class="">
    <div>Mandelbrot</div>
    <canvas id="chart"></canvas>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

const cmul = (a = 0, b = 0) => {
  return [a ** 2 - b ** 2, 2 * a * b];
};
// 是否收斂
const check = (x = 0, y = 0, ITERATIONS = 64) => {
  let a = x;
  let b = y;
  for (let i = 0; i < ITERATIONS; i++) {
    const c = cmul(a, b);
    a = c[0] + x;
    b = c[1] + y;
    const z = getLength(a, b);
    if (a >= 1.42 || b >= 1.42 || z >= 2) return false;
  }
  return true;
};
const getLength = (i = 0, j = 0) => {
  return (i ** 2 + j ** 2) ** 0.5;
};
const getPoint = (n = 1000) => {
  const limit = 4;
  const dx = (2 * limit) / n;
  const point = [];
  const scale = 1;
  const cx = 0;
  const cy = 0;
  for (let i = -limit; i < limit; i += dx) {
    for (let j = -limit; j < limit; j += dx) {
      const length = getLength(i, j);
      if (length < 1 / 4 || check(i, j)) {
        const x = i * scale + cx;
        const y = j * scale + cy;
        point.push([x, y]);
      }
    }
  }
  return point;
};

onMounted(() => {
  const canvas = document.getElementById("chart") as HTMLCanvasElement;
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const pointList = getPoint();
  const option = {
    xAxis: {
      //   type: "value",
      //   min:
    },
    yAxis: {
      //   type: "value",
    },
    series: [
      {
        symbolSize: 2,
        data: pointList,
        type: "scatter",
        color: "deepskyblue",
      },
    ],
  };
  const myChart = echarts.init(canvas);
  // 使用剛指定的配置項和數據顯示圖表。
  myChart.setOption(option);
});
</script>

<style></style>