p5.js递归树移植游戏代码后变形为圆形的问题求助

我有一段通过图层数组渲染递归树的代码，单独运行完全正常，但移植到包含山脉、树木、云朵等元素的p5.js游戏代码后出现异常。原本应呈现树状图形（对应图XWIBi.png），但移植后却变成了圆形（对应图zNLkX.png）。我尝试移除/重新添加游戏中的对象但未解决问题，现求助：

1. 可能导致该问题的原因是什么？
2. 如何让树显示原本的形状？
3. 此类问题的排查方法有哪些？

附树代码：

let branch1Layer;

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

function draw() 
{ 
  background(220);
  
  for (var i = 0; i < branch1Layer.length; i++) 
  {
    image(branch1Layer[i], 200*i, height/2);
  }
}

function branch1(depth, treeSize, firstTime=false, z) 
{
  branch1Layer[z].strokeWeight(10);
  
  if (firstTime) 
  {
    branch1Layer[z].translate(branch1Layer[z].width/2, branch1Layer[z].height);
    firstTime=true;
  }
  
  branch1Layer[z].push();
  
  if (depth < 10) 
  {
    branch1Layer[z].line(0, 0, 0, -treeSize/10); // draw a line going up
    branch1Layer[z].translate(0, -treeSize/10); // move the space upwards
    branch1Layer[z].rotate(branch1Layer[z].random(-0.05, 0.05));  // random wiggle

    if (branch1Layer[z].random(1.0) < 0.6) 
    { // branching
      branch1Layer[z].rotate(0.3); // rotate to the right
      branch1Layer[z].scale(0.8); // scale down

      branch1Layer[z].push(); // now save the transform state
      branch1(depth + 1, treeSize, false, z); // start a new branch!
      branch1Layer[z].pop(); // go back to saved state

      branch1Layer[z].rotate(-0.6); // rotate back to the left

      branch1Layer[z].push(); // save state
      branch1(depth + 1, treeSize, false, z); // start a second new branch
      branch1Layer[z].pop(); // back to saved state
    } 
    else 
    { // no branch - continue at the same depth
      branch1(depth, treeSize, false, z);
    }
    
    branch1Layer[z].endShape(CLOSE);
  }
  
  branch1Layer[z].pop ();
}
  
function branch1Setup ()
{
  branch1Layer = [];
  for (var i = 0; i < 10; i++) 
  {
    branch1Layer[i] = createGraphics(400, 400, P2D);
    branch1(-2, 300, true, i); 
  } 
}

1. 可能的原因 #

• 绘图状态冲突：p5.js的绘图状态（如fill、stroke、beginShape/endShape）全局共享。游戏代码若提前调用beginShape未闭合，或修改了ellipseMode等模式，会干扰树的绘制逻辑。你的代码里多余的endShape(CLOSE)无对应beginShape，单独运行时默认状态不影响，但游戏状态残留会触发错误闭合，形成圆形。
• 图层上下文污染：游戏中其他代码可能修改了createGraphics图层的状态，比如意外设置填充色、未恢复坐标变换（translate/rotate/scale），导致树的绘制偏离预期。
• 变量名冲突：游戏代码中存在同名变量（如branch1Layer、depth），覆盖了树代码的变量，引发逻辑异常。

2. 修复方案 #

• 清理绘图状态：
  • 在树的绘制函数开头显式设置branch1Layer[z].noFill()（树是线条，无需填充），直接删除多余的endShape(CLOSE)。
  • 游戏中绘制树前后，用push()/pop()保存恢复全局绘图状态，避免双向干扰。
• 隔离图层上下文：
  • 在branch1Setup创建图层后，初始化状态：branch1Layer[i].background(0, 0); branch1Layer[i].stroke(0); branch1Layer[i].noFill();，确保图层不受外部影响。
• 避免变量冲突：将树相关逻辑封装到独立对象中，示例：

  const TreeRenderer = {
    branchLayers: [],
    setup() {
      this.branchLayers = [];
      for (let i = 0; i < 10; i++) {
        this.branchLayers[i] = createGraphics(400, 400, P2D);
        this.branch(-2, 300, true, i);
      }
    },
    draw() {
      for (let i = 0; i < this.branchLayers.length; i++) {
        image(this.branchLayers[i], 200*i, height/2);
      }
    },
    branch(depth, treeSize, firstTime=false, z) {
      const g = this.branchLayers[z];
      g.strokeWeight(10);
      g.noFill();
      if (firstTime) {
        g.translate(g.width/2, g.height);
      }
      g.push();
      if (depth < 10) {
        g.line(0, 0, 0, -treeSize/10);
        g.translate(0, -treeSize/10);
        g.rotate(g.random(-0.05, 0.05));
        if (g.random(1.0) < 0.6) {
          g.rotate(0.3);
          g.scale(0.8);
          g.push();
          this.branch(depth + 1, treeSize, false, z);
          g.pop();
          g.rotate(-0.6);
          g.push();
          this.branch(depth + 1, treeSize, false, z);
          g.pop();
        } else {
          this.branch(depth, treeSize, false, z);
        }
      }
      g.pop();
    }
  }
  

• 修正递归逻辑：删除firstTime=true的无效赋值（参数是值传递，无法修改外部传入的参数）。

3. 排查方法 #

• 分步隔离测试：在游戏代码中只保留树的逻辑，逐步添加其他元素，每次添加后运行，定位触发异常的模块。
• 检查绘图状态：在树的draw函数前后打印关键状态（如console.log(fill(), strokeWeight(), ellipseMode())），对比单独运行与移植后的差异，找到被篡改的状态项。
• 调试变量与上下文：用console.log打印树代码的关键变量（如branch1Layer的图层状态、depth值），确认未被外部代码修改；在递归关键节点（绘制线条、旋转、分支）添加日志，检查坐标变换是否符合预期。
• 使用独立上下文：将树的渲染完全封装在createGraphics图层中，所有绘图操作仅针对该图层，不直接操作全局画布。

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