Code/Play: Creative Programming for Non-Programmers

Nabil Kashyap (@bulbil)

Learn to play with code using p5.js (https://p5js.org/). Think of it as an intervention into the relationship we might be cultivating with our computers right now. Rather than awkward virtual sociality and media-induced stress, consider instead the simple delight of creating interactive "sketches". Plus plug into an awesome organization upending programming stereotypes. We will learn the basics of shapes, animation, interaction, and data incorporating data -- all in the browser. Geared towards beginners but experienced coders are welcome, too.

Links!

p5.js?

• Official p5.js site
• What is p5.js? Gentle overview from the folks at p5
• What can p5.js do? Open Processing Showcase
• What is the Processing Foundation?

---

Little help!

• p5.js Browser Editor - Start here.
• Colors! - Super useful tool for generating lists of colors.
• Helpful cheatsheet - ty @bmoren!

---

Example sketches we'll be working with

• Brash kitchen
• Seattle Subject Balloons
• Seattle Subject Smears
• COVID Balloons

Example datasets

• CSSE COVID-19 Timeseries By Day
• Seattle Public Library Checkouts: Popular Subjects (2005 - 2020)
• Seattle Public Library Checkouts: Popular Authors (2005 - 2020)

Sources

• Johns Hopkins University Center for Systems Science and Engineering (JHU CSSE)
• City of Seattle Open Data Program

---

Learn more

• p5.js - Worth repeating that the folks who maintain the software also maintain great documentation.
• Coding Train: Learning p5.js with Daniel Shiffman - Learn from one of the main developers of p5.js, also pretty much the most entertaining programming instruction you will encounter.
• Getting Started with p5.js by Lauren McCarthy, Casey Reas, and Ben Fry (2015) - Google Books preview that covers the basics of the best book on learning p5.js.
• Generative Art Tutorial - Slightly more involved tutorial by artist Bernat Ferragut.
• Machine Learning with p5.js - Not that you asked.

What are we doing?

Let’s see how far we get (overview)

• basics of p5.js
• computer graphics concepts
• animation & interaction
• data

basics

• setup() {}
• createCanvas(width, height)
• draw() {}
• comment/uncomment (⌘ + /)

computer graphics

• coordinate plane
• color
• fill
• stroke
• shapes (2D primitives, excuse me ...)

animation & interaction

• the draw() loop
• increment/decrement
• random
• events
• for loops

data ( 💁 maybe?)

• loading URLs
• accessing data values