stephensmitchell-forks / workshop-data-artwork

material & notes for a workshop on data artwork & creative coding

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 Grünberger

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