Workshop 10: Web Drawing and Games

Workshop External Resources

• Youtube Recording: Coming soon
• Slides: https://docs.google.com/presentation/d/1QQ8FBocd3prAF4ljjDcHufzkF8OKI8iRj4dR7Hfz5po/edit?usp=sharing
• Kahoot: Coming soon
• Oasis Starting Guide: https://github.com/northeastern-oasis/Ultimate-Oasis-Starting-Guide

Congratulations on making it to the final Oasis workshop! It's been a long journey full of different web concepts, programming languages, and of course, Kahoot. That being said, attendance at previous Oasis workshops is not a prerequisite for attendance at this one. All you'll need to know is some basic JavaScript and HTML :)

The interactive portion of this workshop will focus on testing out some functions provided by p5.js and making a cool game!

Getting Started

Method 1 (If you have Git installed)

1. Clone this workshop's Github repository into a new folder on your machine (in Terminal or Command Prompt, type git clone REPO_URL, where REPO_URL is the clone repository found on the top of this page under the green button).
2. Open the parent folder using your favorite IDE. This is important because we will be editing multiple files to work with p5.
3. You're all set! Just have the cloned folder easily accessible and follow along with the workshop to start writing React code

Method 2 (If you don't have Git installed)

1. p5.js provides an in-browser editor that works decently well. You can follow along and paste workshop code into it for testing/building. You can access it here: https://editor.p5js.org/

During the workshop

We will be start out by testing out the basics of p5.js by drawing some shapes. This will be in the intro folder.

Next, we will make a basic game where we keep Paws from getting a dog treat. The starter code is in the game folder--you must finish implementing it!

If you get stuck or want to try the game out before finishing, you can see the solution in the gamesolution folder

After the Workshop

Well done finishing the workshop! You now know the basics of creative coding and can continue making fun, novel experiences for yourself and others! To continue learning, we'd primarily recommend exploring the p5.js and Processing docs and continuing to create new interactive visualizations

• p5.js main docs
• p5.js quickstart guide
• Cool p5.js examples
• Processing docs

If you couldn't make the workshop

If you were not able to attend, don't worry! There are still many great ways to get started using p5.js. The resources linked above (to the official site) have some great tutorials to get started with. You can also check out the slides linked above. Good luck!