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
-
✏️ Exercises -
🔧 Tools -
✂️ ️ Code Snippets -
📖 Slides
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
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:
Also great is Daniel Shiffman's video series, which often uses p5.js:
A more comprehensive guide on the JavaScript language can be found here:
And here's a useful cheat sheet to use as a reference:
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.
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
-
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
License
MIT, see LICENSE.md for details.