p5.js加载test123.pde画布至网页的路径问题求助

Let's break down what's likely going wrong and how to fix it step by step:

1. The Core Misunderstanding: data-processing-sources isn't a p5.js attribute #

First off, that data-processing-sources attribute you're using on the <canvas> tag belongs to the DataTables library (for table handling), not p5.js. p5.js doesn't recognize this attribute at all—so none of your path attempts were ever going to work. That's probably the biggest issue here!

2. Correct Ways to Load p5.js Code (from a .pde or .js file) #

p5.js doesn't natively load .pde files directly in a browser environment. The .pde format is used by the Processing IDE and p5.js Web Editor, but for self-hosted projects, you need to use one of these methods:

Option A: Convert the .pde to a .js file (recommended) #

• Open your test123.pde file, copy all its code (including setup(), draw(), variables, and helper functions).
• Paste the code into a new file named test123.js in your canvas folder.
• In your HTML, add a script tag to load this JS file after loading the p5.js library:

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

  The relative path ./canvas/test123.js should work if your HTML/PHP file is located in /home/sites/site55/web/subs/kreativ (since canvas is a sibling folder to your main project directory).

Option B: Load and evaluate the .pde file (testing only) #

If you need to load the raw .pde file for testing, you can use p5.js's loadStrings() function to read the file content and evaluate it. Add this to a script tag in your HTML:

function preload() {
  // Load the .pde file as an array of strings, then join into one block
  const pdeCode = loadStrings('./canvas/test123.pde').join('\n');
  // Evaluate the code so p5.js recognizes setup()/draw()
  eval(pdeCode);
}

Note: Using eval() carries security risks, so this isn't recommended for production.

3. Verify File Accessibility First #

Before tweaking code, confirm the file is actually reachable:

• Paste the full URL you tried (like https://www.fazzke.net/subs/kreativ/canvas/test123.pde) into your browser's address bar. If you can view the code or download the file, the path is valid. If you get a 404 error:
  • Double-check folder/file names (Linux servers are case-sensitive—make sure Canvas vs canvas isn't the issue)
  • Check file permissions: Ensure the canvas folder has 755 permissions and test123.pde has 644 permissions (so the server can read them)

4. Fix Default Canvas Behavior #

If you're seeing a 150x300 empty canvas, that's p5.js's default fallback. To make it use your desired canvas, update the setup() function in your code to explicitly create the canvas size you want:

function setup() {
  createCanvas(400, 400); // Replace with your desired dimensions
  // If you have a custom canvas tag with an ID, use:
  // const canvas = createCanvas(400, 400);
  // canvas.parent('#your-custom-canvas-id');
}

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