巴恩斯利蕨数学公式及源码实现—

巴恩斯利蕨数学公式及源码实现——JavaScript版

news2024/11/15 15:58:33

为什么要写这篇文章

本篇接《张侦毅：巴恩斯利蕨数学公式及源码实现》。之前文章中源码的编程语言用的是Java，JDK的版本为8，现在我的JDK版本已经升级到22了，在新版本JDK中，原来的JApplet方法已经被废弃，不能用了。

在JDK22中的说明是这样的：

JApplet自从JDK9版本已经被废弃

上面内容主要是说Java中的JApplet类自从JDK9已经被废弃，不能用了，因而我们在画巴恩斯利蕨时，就应该考虑换一种编程语言，恰好我很擅长JavaScript，所以就将用Java写的巴恩斯利蕨替换成了用JavaScrip写的版本（很多从事后端的程序开发者至少都会两种及以上的编程语言，我这也不例外，所以可以在至少两种编程语言间随意切换）。

巴恩斯利蕨数学公式

巴恩斯利蕨数学公式见下图：

巴恩斯利蕨数学公式

巴恩斯利蕨源码实现

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>巴恩斯利蕨</title>
    <meta charset="UTF-8">
</head>
<body>
<canvas id="myCanvas" width="700" height="700" style="border:1px solid #996633;"></canvas>
<script type="text/javascript">
    // 获取页面canvas节点
    const canvas = document.getElementById('myCanvas');
    // 背景颜色设置为黑色
    canvas.style.backgroundColor = "black";
    // 平面画图
    const ctx = canvas.getContext('2d');
    // 叶片颜色设置为绿色
    ctx.strokeStyle = "green";
    // 线条宽度
    ctx.lineWidth = 0.1;
    // 叶片位置
    const offsetX = 320, offsetY = -170;
    // 缓存数据
    let x2 = 0, y2 = 0;
    // 像素数目
    const pixelCounts = 4000000;
    // 图片放大倍数
    const mag = 56;
    // 图像翻转
    const overturnY = 400;
    // 函数出现概率
    const f1 = 1, f2 = 85,f3 = 7;
    // 定义map的键值对
    const X = "x",Y = "y";
    // 创建Map容器
    let map = new Map(),temp = new Map();  // 代替之前的entry

    /**
     * 图像上下翻转
     */
    function overturn(){
        y2 = y2 - (y2 - overturnY) * 2;
    }

    /**
     * 原图片计算数据为厘米，而我的绘图，单位却是像素，因而需要根据自己电脑需求，将厘米转换为像素
     * @param map 容器
     */
    function magnification(map){
        x2 = map.get(X) * mag;
        y2 = map.get(Y) * mag;
    }

    /**
     * 方程func4
     * @param map 容器
     */
    function func4(map){
        x = -0.15 * map.get(X) + 0.28 * map.get(Y);
        y = 0.26 * map.get(X) + 0.24 * map.get(Y) + 0.44;
        temp.set(X,x);
        temp.set(Y,y);
        deepCopy(map,temp);
    }

    /**
     * 方程func3
     * @param map 容器
     */
    function func3(map){
        x = 0.2 * map.get(X) - 0.26 * map.get(Y);
        y = 0.23 * map.get(X) + 0.22 * map.get(Y) + 1.6;
        temp.set(X,x);
        temp.set(Y,y);
        deepCopy(map,temp);
    }

    /**
     * 方程func2
     * @param map 容器
     */
    function func2(map){
        x = 0.85 * map.get(X) + 0.04 * map.get(Y);
        y = -0.04 * map.get(X) + 0.85 * map.get(Y) + 1.6;
        temp.set(X,x);
        temp.set(Y,y);
        deepCopy(map,temp);
    }

    /**
     * 深度复制
     * @param map 拷贝目的地
     * @param temp 源数据
     */
    function deepCopy(map,temp){
        map.set(X,temp.get(X));
        map.set(Y,temp.get(Y));
    }

    /**
     * 方程 func1
     * @param map
     */
    function func1(map){
        temp.set(X,0);
        temp.set(Y,0.16 * map.get(Y));
        deepCopy(map,temp);
    }

    /**
     * 画巴恩斯利蕨
     */
    function drawBarnsleyFern() {
        map.set(X,0);
        map.set(Y,0);
        // 像素数目
        for(let i = 0; i < pixelCounts; i ++){
            // 生成随机数（Math.random()生成大于等于 0.0 且小于 1.0 的伪随机 double 值，
            // 故在生成的数字后面 * 99,再 + 1，才是1 - 100的随机数）
            const randomNumber = Number.parseInt(Math.random() * 99 + 1);
            // 选择函数公式
            if(randomNumber === f1){
                // 主干
                func1(map);
            } else if(randomNumber > f1 && randomNumber <= (f1 + f2) ){
                // 叶片
                func2(map);
            } else if(randomNumber > (f1 + f2) && randomNumber <= (f1 + f2 + f3)){
                // 左侧树叶
                func3(map);
            } else {
                // 右侧树叶
                func4(map);
            }

            // 将原图像数据按比例尺放大
            magnification(map);

            // 图像翻转
            overturn();

            // 开始绘制路径
            ctx.beginPath();

            // 画点（也就是画圆）
            ctx.moveTo(x2 + offsetX, y2 + offsetY);
            ctx.lineTo(x2 + offsetX + 1, y2 + offsetY + 1);

            // 绘图
            ctx.stroke();
        }
    }

    // 画巴恩斯利蕨
    drawBarnsleyFern();
</script>
</body>
</html>