如何在 StackOverflow 问题中包含可运行的 p5.js 草图? [英] How do I include a runnable p5.js sketch in a StackOverflow question?

问题描述

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

我知道我可以使用 {} 工具栏按钮包含代码，该按钮使用 4 个空格的缩进语法来包含代码，或者使用三重反引号语法，如下所示:

function setup() {createCanvas(windowWidth, windowHeight);背景(100)；}函数绘制(){椭圆(mouseX, mouseY, 20, 20);}

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

当您插入代码段时，您将看到一个包含三个文本框的 UI:一个用于 JavaScript，一个用于 HTML，一个用于 CSS.这些文本框中的每一个都是可选的，您的草图 javascript 通常应该放在 Javascript 文本框中.但是，为了使 p5.js 草图可运行，您需要包含 p5.js 库.您可以通过单击添加外部库"来完成此操作.按钮并输入您正在使用的 p5.js 版本的

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

一旦你点击了保存&"插入帖子"按钮，这就是结果的样子:

function setup() {createCanvas(windowWidth, windowHeight);背景(100)；}函数绘制(){椭圆(mouseX, mouseY, 20, 20);}

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

有关代码段的更多信息，请参阅 meta.stackoverflow.com 上的这个问题.另请记住，如果您在重现或演示您的问题/问题的同时使您共享的代码尽可能少，它会有所帮助.如需了解详情，请参阅这篇来自帮助中心的文章.

If I have a question about a p5.js sketch, how can I include my code in the question such that people looking at the question can quickly test my code to see what I'm trying to do or what is wrong?

I know I can include code using the {} toolbar button, which uses the indent by 4 spaces syntax for including code, or use the triple back-tick syntax like so:

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

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

However, in order for someone reading or answering a question, they have to copy and paste this code into a p5.js editor such as the one on p5js.org or openprocessing.org.

解决方案

Any time you are asking a question about a p5.js sketch or topic, you should use the JavaScript/HTML/CSS snippet capability of StackOverflow if at all possible.

When you insert a Snippet you will see a UI with three textboxes: one for JavaScript, one for HTML, and one for CSS. Each of these textboxes are optional, and your sketch javascript should generally just go in the Javascript textbox. However, in order to make a p5.js sketch runnable, you will need to include the p5.js library. You can do this by clicking the "Add an external library" button and entering the hosted CDN url for the version of p5.js you are using (e.g. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js).

Once you have done that you should be able to enter your sketch code, click the run button, and see your sketch in action!

And once you click the "Save & insert into post" button, this is what the result will look like:

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>

For more information about Snippets see this question on meta.stackoverflow.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.

这篇关于如何在 StackOverflow 问题中包含可运行的 p5.js 草图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！