使用p5.js绘制网格图遇报错：grid重赋值及width/height未定义问题求助

Hey there, let's break down and fix the issues you're facing with your p5.js grid code—first the initial undefined variables, then the current "reassignment of 'grid' which is a function" error.

First: Why You're Seeing the Current Error #

That Reassignment of 'grid', which is a function message has two key causes:

• p5.js has a built-in grid() function in its scope, so when you try to reassign grid to be an object, you're creating a naming conflict.
• In your draw() function, you're calling grid() like it's a function—but you just turned grid into an object. That mismatch is what's throwing the error.

Step-by-Step Fixes for Your Code #

Let's rewrite your code to fix these problems, plus address the initial undefined variable issue you mentioned.

1. Avoid Naming Conflicts #

First, rename your grid variable to something that won't clash with p5.js built-ins—let's use gridSettings instead.

2. Fix Your Grid Configuration Initialization #

You can't reference properties like grid.x1 inside the same object literal you're creating—at that point, the object doesn't fully exist yet. Instead, calculate your values first, then assemble them into the config object.

3. Remove the Invalid Function Call #

Since gridSettings is now an object, delete the grid() line in draw()—it doesn't make sense to call an object like a function.

Here's the Corrected Full Code #

let gridSettings; // Use let instead of var for cleaner scoping
function setup() {
  createCanvas(800, 800);
  
  // Calculate base values first
  const edgeOffset = width / 10;
  const x1 = edgeOffset;
  const y1 = edgeOffset;
  const x2 = width - edgeOffset;
  const y2 = height - edgeOffset;
  const gridWidth = x2 - x1;
  const gridHeight = y2 - y1;
  const lineMargin = gridWidth / 10;

  // Build the settings object
  gridSettings = {
    x1,
    y1,
    x2,
    y2,
    width: gridWidth,
    height: gridHeight,
    margin: lineMargin
  };
  
  background(255);
}

function draw() {
  // Call your DDA function with the correct settings
  DDA(gridSettings.x1, gridSettings.y1, gridSettings.margin, gridSettings.margin);
}

// Make sure you have your DDA function implemented (example below)
function DDA(startX, startY, stepX, stepY) {
  // Draw vertical grid lines
  for (let x = startX; x <= gridSettings.x2; x += stepX) {
    line(x, gridSettings.y1, x, gridSettings.y2);
  }
  // Draw horizontal grid lines
  for (let y = startY; y <= gridSettings.y2; y += stepY) {
    line(gridSettings.x1, y, gridSettings.x2, y);
  }
}

Fixing the Initial "random(), height, width Undefined" Issue #

That original error happened because you were trying to use p5.js global variables (like width/height) or functions (like random()) outside of p5.js lifecycle functions (setup()/draw()). These variables only get initialized once setup() runs, so moving all your grid configuration inside setup() (like we did above) fixes this problem.

Quick Extra Tips #

• Use let or const instead of var—they have clearer scoping rules and prevent accidental bugs.
• If you only need to draw your grid once, move the DDA call into setup() and add noLoop() to avoid redrawing every frame.

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