This repository includes resources & course notes for students attending my Intro to Creative Coding workshops, demonstrating p5.js and Tone.js.
![](https://raw.githubusercontent.com/mattdesl/workshop-p5-intro/master/docs/images/grid.png)
The idea and layout of the demos is heavily inpsired by Mark Webster's Designing Programs.
-
β¨ Course Demos
-
βοΈ Exercises
-
π§ Tools
-
βοΈοΈ Code Snippets
-
π Slides
-
β¨ Further Reading
-
β¨ 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
-
-
βοΈ Warm-Up Drawing Exercise
-
βοΈ Georg Nees Remix
-
βοΈ Hard-Edge Painting
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 |
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:
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.