w0lramd / workshop-p5-intro

Intro to Creative Coding workshop with p5.js and Tone.js

Intro to Creative Coding

This repository includes resources & course notes for students attending my Intro to Creative Coding workshops, demonstrating p5.js and Tone.js.

The idea and layout of the demos is heavily inpsired by Mark Webster's Designing Programs.

Contents

• ✨ Course Demos

• ✏️ Exercises

• 🔧 Tools

• ✂️️ Code Snippets

• 📖 Slides

• ✨ Further Reading

Course Demos

• ✨ starter demo — a bare-bones starter demo

  • You can also find a similar demo on CodeSandbox if Glitch.com is giving you any trouble

• 🔥 p5 random walker — a simple generative art sketch with p5.js

• 📚 Collections

  • 🎨 p5-demos.glitch.me — examples with p5.js

  • 🔈 tone-demos.glitch.me — examples with Tone.js

Exercises

• ✏️ Warm-Up Drawing Exercise

Tools

Here is a list of tools and libraries that will be used during the workshop.

Tool	Documentation	Version	Description
A browser			A modern browser, Chrome is recommended
Glitch	Help		An online platform for editing & sharing JavaScript projects
p5.js	API Docs	0.9.0	A JavaScript graphics library for creative coding
Tone.js	API Docs	13.8.25	A JavaScript audio library for playing synths and sounds

Just Starting Out

If you've never coded before, you can check out this tutorial that explains some of the basics:

• JavaScript For Cats

Also great is Daniel Shiffman's video series, which often uses p5.js:

• Programming from A to Z

A more comprehensive guide on the JavaScript language can be found here:

• The Modern JavaScript Tutorial

And here's a useful cheat sheet to use as a reference:

• Interactive JavaScript Cheat Sheet

Code Snippets

I've also included a small "recipes" document that you can use as a reference if you are forgetting some of the patterns and recipes discussed during the workshop.

• Code Snippets

• How-To: Functions

• How-To: Timers

Further Reading

More links to generative art & creative coding:

• Books

  • Designing Programs by Mark Webster

  • Generative Design by Benedikt Groß

  • Getting Started with p5.js by Lauren McCarthy

  • Computational Drawing Book by Carl Lostritto

  • Generative Art by Matt Pearson

• Videos & Courses

  • The Coding Train with Daniel Shiffman

  • Creative Coding with Canvas & WebGL — My own course

• Generative Art

  • Generative Artistry — Tutorials & Podcast

  • Anders Hoff — Writing on Generative Art

  • Tyler Hobbs — Writing on Generative Art

  • My Blog — Writing on Creative Coding & Generative Art

• Math

  • Sine / Cosine Reference

  • Sine and Cosine Calculator

  • Linear Interpolation — Introduction to lerp

  • math-as-code — A cheat sheet for mathematical notation in code form

• Audio

  • Learning Synths by Ableton

  • Learning Music by Ableton

  • Music Theory

• Related Art Books & Zines

  • Circle, Square, Triangle by Bruno Munari

  • The ABCs of Triangle, Square, Circle: The Bauhaus and Design Theory by Ellen Lupton

  • Graphic Design Manual: Principles and Practice by Armin Hofmann

  • Analog Algorithm by Christoph Grünberger

  • Market Cafe Magazine

• Communities

  • Open Processing

  • creative-dev Slack team

  • #plottertwitter, #generative, #webgl and similar hashtags on Twitter, Instagram etc.

• More Tools

  • canvas-sketch — A framework for creative coding and generative art in JavaScript

  • Spectrum Analyser — see the frequency spectrum of an MP3 file

• More Resources

  • awesome-creative-coding — A large list of resources

License

MIT, see LICENSE.md for details.