利用p5.js/Tone.js创意编程教程
Intro to Creative Coding workshop with p5.js and Tone.js
JavaScript 其它杂项
共508Star
详细介绍
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.
![](https://github.com/mattdesl/workshop-p5-intro/raw/master/docs/images/grid.png)
The idea and layout of the demos is heavily inpsired by Mark Webster's Designing Programs.
Contents
-
🔧 Tools -
✂️ ️ Code Snippets -
📖 Slides
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 |
Just Starting Out
If you've never coded before, you can check out this tutorial that explains some of the basics:
A more comprehensive guide on the 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.
-
0 Star
-
0 Star
-
30589 Star
-
4107 Star
-
18060 Star
-
0 Star
-
639 Star
-
69 Star
-
128 Star
-
432 Star