Introduction to Creative Computing 2026/2027: 👻: Individual Work 10: Rita.js and p5.gui
Back to slide index.

For this workshop we are going to spend 30 minutes each on making p5.js sketches that include the following libraries:

1. RiTa.js
2. p5.gui

For the next 30 minutes, let's take a look at RiTa.js by Daniel Howe. Let's have a look at the collection of examples on the p5.js online editor (don't forget to show all complete file structure Joel!)and also some of the projects that have been made with RiTa.js.

Helpfully, Allison Parrish has posted a great tutorial on how to use external JavaScript libraries with p5.js (with rita.js as the example library), let's go through it together and get it going in the p5.js editor. STOP PRESS! Due to the new version of p5.js, I had to make some changes to Allison's code, see the updated example I made.

For the final 30 minutes, let's put everything together by duplicating some of the p5.gui examples from GitHub, adding them to a new editor.p5js sketch, and coming up with some new things to do with our GUI. STOP PRESS! Due to the new version of p5.js, I had to make some changes to bitcraftlab's code, see the updated example I made.

Have you started making your portfolio of sketches and your reflective statement? See the unit wiki for links to places to help you make your own if you get stuck. I'd REALLY recommend adding to your GitHub page every week, and your reflective statement. An hour a week in these individual sessions will make a BIG difference and you won't be in a rush at the end of the unit. Have you tried the Share option in the File menu of editor.p5js.org? It's a great way of getting URLs to add to your portfolio of sketches.

Thanks! Please give me a shout via email or Instagram with any feedback or if there is anything I can help you with - my practice is about helping other people make the things they want to.
Back to slide index.