p5.js - 如何在 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 片段功能。

插入 Snippet 时，您将看到一个包含三个文本框的 UI:一个用于 JavaScript，一个用于 HTML，一个用于 CSS。这些文本框中的每一个都是可选的，您的草图 javascript 通常应该放在 Javascript 文本框中。但是，为了使 p5.js 草图可运行，您需要包含 p5.js 库。您可以通过单击“添加外部库”按钮并输入您正在使用的 p5.js 版本的 hosted CDN url(例如 https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.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.3.1/p5.min.js"></script>

有关代码段的更多信息，请参阅 this question on meta.stackoverflow.com 。另请记住，如果您在重现或演示您的问题/问题的同时使您共享的代码尽可能少，它会有所帮助。有关更多信息，请参阅 this article from the help center 。