This repository includes resources & course notes for students attending my Intro to Creative Coding workshops, demonstrating p5.js and Tone.js.
![](docs/images/grid.png)
The idea and layout of the demos is heavily inpsired by Mark Webster's Designing Programs.
-
🔧 Tools
-
✂️️ Code Snippets
-
🎨 p5-demos.glitch.me — examples with p5.js
-
🔈 tone-demos.glitch.me — examples with Tone.js
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 |
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.
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
-
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
-
-
Communities
-
#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
MIT, see LICENSE.md for details.