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

• 🔧 Tools

• ✂️️ Code Snippets

• ✨ Further Reading

Course Demos

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

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

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

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

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

  • 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.