workshop-data-artwork

A beginner workshop using p5.js and CodeSandbox

This repo contains the source code, exercises, and guides for my "Creative Coding & Data Artwork in the Browser" remote training course.

Tools

• p5.js for graphics

• CodeSandbox for collaborative code editing

• Chrome or FireFox browser

Setting Up Your Environment

• Setting Up CodeSandbox

• Fullscreen in Google Meet

Exercises

• Warm-Up Drawing Exercise

• Time as Data

• Language as Data

API Documentation

• p5.js Reference

Empty Starter p5.js Template

Open in CodeSandbox (p5-template)

We'll start with the above template just to get familiar with p5.js. Browse the Exercises for more templates

Assets & Files

See the ./assets folder for some of the files used in the exercises.

JavaScript Guides

• Cheat Sheets

  • Functions

  • Timers & Delayed Actions

  • CSV Files

• JSON

  • Simple JSON Guide

  • MDN JSON Guide

• Learning JavaScript

  • JavaScript for Cats

  • Programming from A to Z

  • The Modern JavaScript Tutorial

Further Reading after the Workshop

More links to generative art & creative coding:

• Books

  • Dear Data by Giorgia Lupi and Stefanie Posavec

  • 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

  • Shirley Wu's Courses courses on data visualization

  • 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

  • Sine / Cosine Reference

  • Sine and Cosine Calculator

  • Linear Interpolation Introduction to lerp

  • math-as-code A cheat sheet for mathematical notation in code form

• 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 Grnberger

  • Market Cafe Magazine

• Communities

  • Observable

  • #plottertwitter, #generative, #webgl and similar hashtags on Twitter, Instagram etc.

• More Tools

  • d3

  • canvas-sketch A framework for creative coding and generative art in JavaScript

• More Resources

  • awesome-creative-coding A large list of resources

License

MIT, see LICENSE.md for details.