Working with p5.js Web Editor

For this course, we are going to use p5.js Editor to write our code. p5.js Editor is a web-based editor that allows you to write and run p5.js code in your browser. It is a great tool for learning and experimenting with p5.js.

You might want to create an account on your p5.js Editor profile to make sure all your work is saved. It also doesn’t hurt to manually save your work by clicking on the File > Save (or Ctrl/Cmd + S) in the top left corner of the editor.

If you prefer videos, here’s my favourite Dan Shiffman walking through the p5.js web editor.

Submitting weekly assignments

Your weekly tasks are designed to encourage you to experiment with the material and to challenge you to think critically about the material. Each week we will have both coding and writing tasks. We can organise all of this as part of the same sketch on the p5.js Editor.

For your Runme, the editor already setup everything for you every time we create a new sketch - the html file, css file, and js file. You can find them in the file tree on the left. Although for the most part we are only going to be working with the sketch.js file.

Now for the Readme part of your works, which is the space for reflection and writing, we are going to create a new file and call it readme.txt. You can find it in the file tree on the left.

Once you have finished your tasks, you can submit your work by clicking on the File > Save (or Ctrl/Cmd + S) in the top left corner of the editor. This will save your work to your p5.js Editor profile. You can grab the link to your sketch from the browser’s address bar and submit it on sketches page.

Tip

If you prefer to work with a different format that’s not a .txt file, you are welcome to do so with any open file formats. Instead of creating a readme.txt file, you can instead directly upload your file to p5.js editor using the Upload button in the top left corner of the editor.