Introduction to p5js

A growing collection of examples used to demonstrate basic concepts of creative coding on the modern web, focusing on algorithmic thinking, data manipulation and computer vision

Installation & usage

• clone or download this repository
• download Sublime Text
• open sublime text, go to tools/command palette
• find Package Control: Install Package
• find SublimeServer, click to install
• restart Sublime Text
• open the downloaded repository folder, so you see all the files on the left bar
• under tools/sublime server, press start sublime server
• open a browser, and type in the address bar localhost:8000 (8000 is the default port number)
• you can browse within the example code now
• if you edit your code, always save before checking it in the browser

Folder Structure

Basics

• introduction to the environment, mostly based on this and corresponding tutorials

Systems

• computational thinking, working with algorithms and conditionals

Data

• working with data: realtime, recorded (CSV), and API calls

Computer Vision

• examples, using different js based vision frameworks
• these are some modified versions of Kyle McDonald's javascript-computervision collection
• also, including handy machine learning code from ml5js

Misc

• examples, related to different usage areas (deploying, platform specific stuff, etc)

Libs

• Javascript libraries, dependencies of the examples we are working with

Other Resources

• 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

• Online

• The Coding Train videos with Daniel Shiffman

• Generative Artistry — Tutorials & Podcast

• Anders Hoff — Writing on Generative Art

• Tyler Hobbs — Writing on Generative Art

• Matt Deslauriers — Writing on Creative Coding & Generative Art

• Open Processing

• 🔥awesome-creative-coding — A large list of resources

(c) 2019 Agoston Nagy / gpl v3