Javascript P5.js中的分形树

function setup() {
  // Use browser information to set size (see also CSS settings for body)
  createCanvas(screen.width, screen.height);
  // Call stroke before drawing
  stroke(255,255,255);
}

function draw() {
  background(10);
  // Define variables with const 
  const x = width >> 1; // Use integer division
  const y = height >> 1;
  // Pass the initial offset instead of the number of nodes
  fractalDraw(x, y, width >> 2, 0);
  noLoop(); // Avoid repeating calls to draw()
}

function fractalDraw(nodeX, nodeY, offset, sideFlag){
  // Define variables with const (here was the most dramatic bug) 
  const leftNodeX = nodeX - offset;
  const rightNodeX = nodeX + offset;
  const topNodeY = nodeY - offset;
  const botNodeY = nodeY + offset;
  
  if(sideFlag === -1){
    line(nodeX, nodeY, leftNodeX, topNodeY);
    line(nodeX, nodeY, leftNodeX, botNodeY);
  }
  else if(sideFlag === 1){
    line(nodeX, nodeY, rightNodeX, topNodeY);
    line(nodeX, nodeY, rightNodeX, botNodeY);
  }
  else{
    line(nodeX, nodeY, leftNodeX, topNodeY);
    line(nodeX, nodeY, leftNodeX, botNodeY);
    line(nodeX, nodeY, rightNodeX, topNodeY);
    line(nodeX, nodeY, rightNodeX, botNodeY);
  }
  
  if(offset <= 1){
    return 1;
  }
  else{
    // The offset should decrease by a factor, not by a constant
    offset >>= 1; // For example: integer divide by 2
    fractalDraw(leftNodeX, topNodeY, offset, -1);
    fractalDraw(leftNodeX, botNodeY, offset, -1);
    fractalDraw(rightNodeX, topNodeY, offset, 1);
    fractalDraw(rightNodeX, botNodeY, offset, 1);
  }
}

html, body { margin: 0; height: 100%; overflow: hidden; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>

function setup() {
  createCanvas(screen.width, screen.height);
  stroke(255,255,255);
}

function draw() {
  background(10);
  const x = width >> 1
  const y = height >> 1;
  fractalDraw(x, y, x, y, width >> 2);
  noLoop();
}

function fractalDraw(fromX, fromY, nodeX, nodeY, offset){
  line(fromX, fromY, nodeX, nodeY);
  if (offset < 1) {
    return;
  }
  const leftNodeX = nodeX - offset;
  const rightNodeX = nodeX + offset;
  const topNodeY = nodeY - offset;
  const botNodeY = nodeY + offset;

  offset >>= 1;
  fractalDraw(nodeX, nodeY, leftNodeX, topNodeY, offset);
  fractalDraw(nodeX, nodeY, leftNodeX, botNodeY, offset);
  fractalDraw(nodeX, nodeY, rightNodeX, topNodeY, offset);
  fractalDraw(nodeX, nodeY, rightNodeX, botNodeY, offset);
}

html, body { margin: 0; height: 100%; overflow: hidden; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>