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

Question

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.

Answer 1

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.4.0/p5.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.4.0/p5.js"></script>