P5.js + GitHub Tutorials (intro)

In addition to being an artist, I also am an educator. I feel passionate about sharing the methodologies, technical tools and conceptual pathways that I’ve developed over the years .

This semester, I’m teaching Interaction Design (2 sections) at the University of San Francisco, where I’m an adjunct professor. Rather than doing hardware, I’ll be focusing exclusively on software (not apps) interaction and networked experiences.

P5.js, which essentially is a JavaScript version of Processing helps with learning coding since its output is visual. Graphics create gratification as students can see their work as shapes, lines and text rather than in a printed output in a console window.

With remote learning, I’ve developed some videos that I want to share with folks. These are just some intro videos and include some simple GitHub tutorials for classroom use.

Key to teaching is making it easy for students and to provide both a straightforward and uniform experience with the tech. Then the conceptual aspects can blossom.

Daniel Shiffman has created many in-depth tutorials for P5 and Processing and he is animated, personable and thorough. These are an amazing resource. For a classroom environment, however, Shiffman’s vids are too much for my needs. For example, I’m asking all the students to use the same text editor (Sublime), mirror my work in the GitHub with a Hello World example and generally give them less of a universe of possibilities at the start.


P5.js Tutorials

Getting Started in P5.js, (3 min, 45 sec)

Hello World in P5.js, by Scott Kildall (3 min, 24 sec)

Intro to GitHub by Scott Kildall (10 min)

GitHub Tutorials

Cloning and Pulling from GitHub by Scott Kildall (4 min, 39 sec)

Using the JavasScript Console with P5.js by Scott Kildall (4 min, 39 sec)


A flowchart guide for my online tutorials (below)