UAL CCI: Introduction to Creative Computing Intensive 2022: 🛠: Workshop 1: what Git and GitHub are, signing up to GitHub, 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 workshop, we'll have learnt about:

• What Git and GitHub are
• Signing up to GitHub - the best place to find and share code
• Using editor.p5js.org with your GitHub login - this is the way we will make code for the rest of the week
• Where to find information about other ways of running p5.js
• Duplicating a p5js example on editor.p5js.org

Before we start, I wanted to share a lovely analogy that Rocio suggested for what we are doing in this workshop: "we are setting up tools to get coding or get started with resources to find code, just like gathering materials you might need for other crafts like painting". I hope that's helpful!

Signing up to GitHub - the best place to find and share code

GitHub is a website that enables you to use Git to store, edit and share all your code with other developers around the world. Git is software for tracking changes to and sharing those changes with other programmers.Git is open source, while GitHub is owned by Microsoft. Both are free to use. Github is the industry standard website for programmers - employers may look at your GitHub to see what kind of code you write and how you help others. It's the first place I go to find code to use in my own work.

But what does that really mean? What problem does Git (and GitHub) solve? Over to Daniel Shiffman for a great explanation. (BTW, Dan's whole playlist "Git and GitHub for Poets" is the one I'd recommend to learn more about them both). There are lots of great resources for learning creative code online and Dan's YouTube channel "The Coding Train" is the one that I recommend above all others.

Sign up to GitHub here: https://github.com/signup - please use a non university email address to do this, so you can keep logging in after you've graduated. Pick a username that you wouldn't be embarassed to apply for a job with! I'll give you 5 minutes to do this.

Using editor.p5js.org with your GitHub login - this is the way we will make code for the rest of the week

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

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 get started 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 playlist of his complete 2018 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 (maybe pick one of the examples from Hello p5 in the bottom right hand corner?) 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 BRILLLIANT AND HIGHLY RECOMMENDEDCode! 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 a short break!
Back to slide index.