如何在 StackOverflow 问题中包含可运行的 p5.js 草图？

Question

如果我有关于 p5.js 草图的问题，我如何将我的代码包含在问题中，以便查看问题的人可以快速测试我的代码以了解我正在尝试做什么或怎么了？

我知道我可以使用 {} 工具栏按钮包含代码，它使用 4 个空格缩进语法来包含代码，或者使用像这样的三重反引号语法：

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

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

但是，为了让某人阅读或回答问题，他们必须将此代码复制并粘贴到 p5.js 编辑器中，例如 p5js.org or openprocessing.org.

上的编辑器

Answer 1

任何时候你问一个关于 p5.js 草图或主题的问题，你应该尽可能使用 Whosebug 的 JavaScript/HTML/CSS 片段功能。

当您插入代码段时，您会看到一个包含三个文本框的 UI：一个用于 JavaScript，一个用于 HTML，一个用于 CSS。这些文本框中的每一个都是可选的，您的草图 javascript 通常应该放在 Javascript 文本框中。但是，为了使 p5.js 草图运行可用，您需要包含 p5.js 库。您可以通过单击“添加外部库”按钮并为您正在使用的 p5.js 版本输入 hosted CDN url（例如 https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js）来执行此操作。

完成后，您应该可以输入您的草图代码，单击运行按钮，然后查看您的草图！

点击“保存并插入 post”按钮后，结果如下所示：

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

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

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

有关代码段的详细信息，请参阅 this question on meta.whosebug.com. Also keep in mind that it helps if you make the code you share as minimal as possible while still reproducing or demonstrating your issue/question. For more information see this article from the help center。

附录：加载图像和其他文件资产

当草图使用图像、文本或声音等其他文件时，有必要对您的草图进行一些更改以使其在 Whosebug 上运行。首先，您需要使用绝对 URL（而不是您可能在编辑器上使用的本地相对路径。例如 p5js.org）。此外，托管文件的位置必须允许跨域请求。不幸的是，大多数托管位置不允许跨域请求。

一种选择是使用旨在充当 Web 主机的服务，例如 Google 云存储或 Amazon S3，并将文件配置为具有宽松的 Access-Control-Allow-Origin 设置，例如作为 *（参见 Google Cloud Storage Docs or Amazon S3 Docs）。

另一种选择是使用 Data URI. A Data URI is a string that you can use in place of a normal URL, that encodes the contents of the file as Base64 in the string. This is convenient because you don't have to set up hosting. However it is only appropriate for very small files, since large files will result in your question exceeding the Whosebug length limit. To deal with this you might want to substitute any large images with a very small/low resolution placeholder than you can then resize to the normal size. You can use this website 从文件生成数据 URI。

这是一个使用数据 URI 的简单示例 loadImage():

let img;

function preload() {
  img = loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAvElEQVRIx2NgGAWkAVeGSoZ6ImElUDUOsJjhP4lwMXbX/CcDYnFVJVhiP9Fe2w9WX4lpUD1Yop7o8MSpftSgUYPoYxAHdQwKZ9jNwESeQYJIbE2Gz0DZOnIM0mR4wWAIZfMwXAPL/mFwJNUgiNZHDOJg3kp4sfEMKkK0QaugGo8xsDMUoJRAe6AhRZRBhUgadzP8QivM6ok1yBZDKyr8w+BEnEHpBEvH9KGVRahW+FOtOqJaBUnFKnsUYAcAmXVbJzMnlHsAAAAASUVORK5CYII=");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  img.resize(64, 64);
}

function draw() {
  background(150);
  image(img, mouseX, mouseY);
}

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

如何在 StackOverflow 问题中包含可运行的 p5.js 草图？

How do I include a runnable p5.js sketch in a StackOverflow question?

p5.js

code-snippets

附录：加载图像和其他文件资产