如何将p5.js中draw函数内的translate语句移至branch函数？

我有一段用于绘制树形的p5.js代码，希望把draw函数内的translate(width / 2, height / 2);语句移到branch函数内，后续计划将代码放入for循环进行开发。以下是原代码：

function setup() 
{
    createCanvas(windowWidth, windowHeight);
}

function draw ()
{
    background (100);
    translate (width / 2, height / 2 );
    branch(80);
}

function branch (len)
{
    // 此处存在bug：用函数名branch作为数组名，会覆盖函数导致递归失败
    for (var j = 0; j < 10; j++)
    {
        branch[j] = 
        {
            xPos: -2000 + (j * 200),
            yPos: height/2 + 95
        };    
    }
    
    noLoop ();
    angleMode(DEGREES);
    push ();
    if (len > 10)
    {   
        strokeWeight (map(len, 10, 100, 1, 15));
        stroke (70, 40, 20);
        line (0,0,0, -len);
        
        translate (0, -len);
        rotate (random (-20, -30));
        branch (len * random(0.7, 0.9));
        rotate (random (50, 60));
        branch (len * random(0.7, 0.9));
    }
    else
    {
        var r = 80 + random (-20, 20);
        var g = 120 + random (-20, 20);
        var b = 40 + random (-20, 20);
        fill (r, g, b, 150);
        noStroke();
        ellipse (0, 0, 10);
        beginShape ();
        for (var i = 135; i > 40; i--)
        {
            var rad = 15;
            var x = rad * cos (i);
            var y = rad * sin (-i) +20;
            vertex (x,y)
        }
        endShape (CLOSE);
    }
    pop ();
}

修改方案 #

要实现需求，需注意递归调用的边界：只有首次调用branch时才执行居中平移，否则递归过程中重复平移会导致树形位置错乱。同时修复原代码中覆盖函数的bug，具体修改如下：

function setup() 
{
    createCanvas(windowWidth, windowHeight);
}

function draw ()
{
    background (100);
    // 首次调用时传入第二个参数标记为根分支
    branch(80, true);
}

// 增加isRoot参数，默认false，仅根分支执行居中平移
function branch (len, isRoot = false)
{
    // 修复bug：将数组名改为branches，避免覆盖branch函数
    let branches = [];
    for (var j = 0; j < 10; j++)
    {
        branches[j] = 
        {
            xPos: -2000 + (j * 200),
            yPos: height/2 + 95
        };    
    }
    
    noLoop ();
    angleMode(DEGREES);
    push ();
    
    // 仅根分支执行居中平移
    if (isRoot) {
        translate(width / 2, height / 2);
    }
    
    if (len > 10)
    {   
        strokeWeight (map(len, 10, 100, 1, 15));
        stroke (70, 40, 20);
        line (0,0,0, -len);
        
        translate (0, -len);
        rotate (random (-20, -30));
        // 递归调用时不传入isRoot，默认false
        branch (len * random(0.7, 0.9));
        rotate (random (50, 60));
        branch (len * random(0.7, 0.9));
    }
    else
    {
        var r = 80 + random (-20, 20);
        var g = 120 + random (-20, 20);
        var b = 40 + random (-20, 20);
        fill (r, g, b, 150);
        noStroke();
        ellipse (0, 0, 10);
        beginShape ();
        for (var i = 135; i > 40; i--)
        {
            var rad = 15;
            var x = rad * cos (i);
            var y = rad * sin (-i) +20;
            vertex (x,y)
        }
        endShape (CLOSE);
    }
    pop ();
}

修改说明 #

1. 新增isRoot参数：给branch函数添加可选参数isRoot，默认值为false。只有首次调用（绘制树根时）传入true，此时执行居中平移操作；递归调用时不传入该参数，避免重复平移。
2. 修复函数覆盖bug：原代码中使用函数名branch作为数组变量名，会覆盖branch函数导致递归失败，将数组名改为branches解决此问题。
3. 调整draw函数：移除draw内的translate语句，改为调用branch(80, true)触发根分支的平移逻辑。

内容的提问来源于stack exchange，提问作者Josef Alkhuzanie