How do I include a runnable p5.js sketch in a StackOverflow 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.

Solution 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>

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.

Addendum: Loading images and other file assets

When a sketch uses additional files such as images, text, or sounds it is necessary to make some changes to your sketch to have it work on StackOverflow. Firstly you will need to use absolute URLs for (as opposed to the local, relative paths you might use on editor.p5js.org for example). Additionally the place where the files are hosted must permit cross domain requests. Unfortunately most hosting locations do not permit cross domain requests.

One option is to use a service that is designed to act as a web host, such as Google Cloud Storage or Amazon S3, and configure the file to have a permissive Access-Control-Allow-Origin setting such as * (see Google Cloud Storage Docs or Amazon S3 Docs).

Another option is to use a 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 StackOverflow 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 to generate a Data URI from a file.

Here is a simple example of using a Data URI with 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>