如何在 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或openprocessing.org上的编辑器。

Answer 1

每当您询问有关 p5.js 草图或主题的问题时，如果可能的话，您应该使用 StackOverflow 的 JavaScript/HTML/CSS 片段功能。

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

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

单击“保存并插入帖子”按钮后，结果将如下所示：

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>

有关代码片段的更多信息，请参阅meta.stackoverflow.com 上的这个问题。另请记住，如果您在重现或演示您的问题时尽可能减少共享的代码，这会有所帮助。有关详细信息，请参阅帮助中心的这篇文章。

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

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

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

另一种选择是使用数据 URI。数据 URI 是一个可以用来代替普通 URL 的字符串，它将文件的内容编码为字符串中的 Base64。这很方便，因为您不必设置托管。但是，它仅适用于非常小的文件，因为大文件会导致您的问题超出 StackOverflow 长度限制。为了解决这个问题，您可能需要用非常小的/低分辨率占位符替换任何大图像，然后将其调整为正常大小。您可以使用此网站从文件生成数据 URI。

以下是使用 Data 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>