Tutorials

Hi there 💓 please feel free to choose different tracks based on your own interest and familiarity with programming. For folks with no previous coding experience, we recommend the beginner-friendly track, indicated by 🐳💦

All the code examples used in the tutorials are saved on Glitch, and you can watch all the tutorials at once through the Peer Tube/YouTube tutorial playists. If you would like to offer help or ask for help, you can drop into a synchronous Open Lab session or leave your questions on Ask and Offer.

(1) Getting Started with the Bare Bones🦴 Template 🐳💦

Overview of a basic chatroom user interface (before connecting users) ~ ~ Code

(1.1) Remixing the Glitch Starter 🐳💦

(1.2) Tour of HTML/CSS in the Bare Bones Template 🐳💦

(1.3) Tour of sketch.js (JavaScript + p5.js)

(1.4) Coding sketch.js - Intro to p5.js!!

(1.5) Coding sketch.js - Variables and selecting HTML elements

(1.6) Coding sketch.js - Wait what is the DOM?!

(1.7) Coding sketch.js - Add a button click

(1.8) Coding sketch.js - Send the message!

(1.9) Coding sketch.js - Clear input and auto scroll

(2) Customize the UI - Intro to HTML / CSS

Beginner-friendly HTML/CSS

(2.1) What is HTML/CSS?🐳💦

(2.2) Intro to HTML🐳💦

(2.3) Displaying HTML Images - Tips for Glitch 🐳💦

(2.4) Intro to CSS 🐳💦

(2.5) Custom Classes + IDs🐳💦

(3) Integrate p5 action!

Trigger changes in image and sound when a message is sent ~ Code

(3.1) p5 Canvas changes color when message is sent

Add p5 event - Change color of Canvas when a message is sent

(3.2) Canvas is full screen + horrible dots appear when message sent

(3.3) Make an image appear on Canvas when message sent

(3.3b) Multiple images appear on Canvas

(3.4) Have images appear as HTML elements (not on Canvas)

(4) p5.js Drawing App

Create a basic drawing app in p5.js without networking abilities!

(4.1) Baby’s first p5.js Drawing App

(4.2) Nesting p5 Canvas Inside a Div

(4.3) Creating Multiple Drawing Layers using createGraphics()

(4.4) Storing Drawing Coordinates

* This tutorial series transitions into the p2p Chatroom Track. The Archival Chatroom Track tutorials are not currently configured to send drawing coordinates.

(5A) p2p Chatroom Track!

Learn how Simple Peer and WebRTC works through hands-on examples!

(5A.1) Getting Started with Simple Peer + Node.js

(5A.2) Invisible Ink Chatroom

(5A.3) Collaborative Drawing

(5B) Archival Chatroom Track!

Build out a template for a chatroom with database and user authentication!
Code on Glitch

(5B.1) What is the Archival Chatroom Template?🐳💦

(5B.2) Customizing the HTML/CSS** (if you watch just one, watch this!)🐳💦

(5B.3) Work with the p5 Canvas: Add shapes when message sent🐳💦

(5B.4) Work with the p5 Canvas: Toggle animation!🐳💦