Introduction to Creative Computing 2026/2027: 🛠: Individual Work 1: Using editor.p5js.org, Where to find information about other ways of running p5.js, duplicating a p5.js example on editor.p5js.org.
Back to slide index.

By the end of this session, you will have learnt about:

• Using editor.p5js.org with your GitHub login - this is the way we will make code for the rest of the unit
• Where to find information about other ways of running p5.js
• Duplicating a p5js example on editor.p5js.org

🥁 Drum roll please! This is the website we are going to be using to make creative code for the rest of the unit!

The easiest way of coding with p5.js is to use the amazing online editor that p5.js itself provides: https://editor.p5js.org. It's totally free and you can log into it with your GitHub login.

First, watch me complete the editor.p5js.org part of the p5.js setting up your environment tutorial on https://editor.p5js.org.

Second, give it a try yourself!

Now I'd like to take a moment to go over the structure of a p5.js sketch - showing how a webpage (index.html) combines with some javascript code (sketch.js) and a stylesheet (style.css) to make a complete program that runs on the web. Let's also talk about what a library, console and server are - a good place to bookmark for all of this information is the JavaScript basics tutorial on the p5.js GitHub wiki, which is like a Wikipedia, but just for p5.js.

I should say that there are two other ways of running p5.js code apart from using https://editor.p5js.org, you can add it to a webserver like any other bit of content on the web or you can run it on your own computer. We aren't going to do either on this course, but if you are curious about running p5.js on your own computer, Daniel Shiffman has made a video of his 2023 workflow, showing how he uses a variety of tools to work on his own computer and remotely. The p5.js wiki on GitHub has also has tips for working on p5.js on your own computer and on external servers.

Finally, I'd like you to pick a p5.js example and try it on the p5.js web editor (don't forget to check the File > Examples menu!), and I'll also show you some very useful things in the p5.js editor: errors, the console and comments too. A few "Coding Train" links there, all from the BRILLIANT AND HIGHLY RECOMMENDED Code! Programming with p5.js for beginners playlist, if you want to go into more detail. So let's start by me demonstrating how to run an example on editor.p5js.org, and show the console, errors and comments, before you pick an example for yourselves to try.

Thanks! Time for lunch. See you next week.
Back to slide index.