echarts 二維散點圖 Julia 分形

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

https://learnopengl-cn.github.io/
https://www.jianshu.com/p/75af9e1c39e1?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
https://github.com/d0t451/d0fractal
https://www.chenshaowen.com/blog/drawing-2d-fractal-graph-using-python.html
https://github.com/d0t451/d0fractal
https://www.jianshu.com/p/75af9e1c39e1?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
 

固定c, 使用z進行迭代

 

<template>
  <div class="">
    <div>Julia</div>
    <canvas id="chart"></canvas>
  </div>
</template>
<script lang="ts" setup>
// https://learnopengl-cn.github.io/
// https://www.jianshu.com/p/75af9e1c39e1?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
// https://github.com/d0t451/d0fractal
// https://www.chenshaowen.com/blog/drawing-2d-fractal-graph-using-python.html
// https://github.com/d0t451/d0fractal
// https://www.jianshu.com/p/75af9e1c39e1?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
import { onMounted } from "vue";
import * as echarts from "echarts";
// const ca = 0.34;
// const cb = -0.05;
// const [ca, cb] = [-1.38, 0];
// const [ca, cb] = [0.285, -0.01];
const [ca, cb] = [0.42413, 0.20753];
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] + ca;
    b = c[1] + cb;
    const z = getLength(a, b);
    if (z >= 2) return false;
  }
  return true;
};
const getLength = (i = 0, j = 0) => {
  return (i ** 2 + j ** 2) ** 0.5;
};
const getPoint = (n = 2000) => {
  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) {
      if (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: 5,
        data: pointList,
        type: "scatter",
        color: "deepskyblue",
      },
    ],
  };
  const myChart = echarts.init(canvas);
  // 使用剛指定的配置項和數據顯示圖表。
  myChart.setOption(option);
});
</script>



<style></style>