/workshop-generative-art

A workshop on creative coding & generative art

Primary LanguageJavaScript

Creative Coding & Generative Art with JavaScript

This repository includes code & resources for students attending my Generative Art & Creative Coding with JavaScript workshops in 2018.

Contents

Tools & Prerequisites

Here is a list of tools, software and libraries that will be used during the workshop.

Tool Documentation Description
Code Editor A JavaScript code editor, VSCode is recommended
Browser A modern browser, Chrome is recommended
Canvas API [docs] The HTML5 <canvas> API, built into all browsers
Command-Line [guide] A command-line application like Terminal (macOS) or cmder (Windows)
Node.js (v8+) [docs] Used for running command-line JavaScript tools
npm (v5+) [docs] Used to install third-party dependencies and tools
canvas-sketch [docs] A development tool & framework for Generative Art
canvas-sketch-util [docs] Utilities for Math & Random Number Generation
ThreeJS [docs] A 3D rendering engine for WebGL

Installing the Prerequisites

Before starting the workshop, make sure you have installed and set up:

  • A browser, Chrome recommended
  • A code editor, VSCode recommended
  • A terminal application (like Terminal, cmder or cmd.exe)
  • Node.js 8+ and npm 5+

If you already have these tools installed, you can use the --version flag to make sure you have at least node@8 and npm@5:

npm --version
node --version

Complete Installation Guide

If you haven't installed these yet, you can find more instructions here:

Installing canvas-sketch CLI

We will be using canvas-sketch and its command-line interface (CLI) during the workshop.

To install the CLI with npm, use the --global or -g flag like so:

npm install canvas-sketch-cli --global

💡 Note the -cli suffix in the name; this tells npm to install the CLI tool, not the code library.

Command-Line Tips & Suggestions

If you are new to the command-line, you can read more details here:

Cloning & Running Examples

During the workshop, you won't need to clone and run this repository locally. However, if you wish to do so, you can find more instructions here:

Cheat Sheet

I've also included a small "cheat sheet" that you can use as a reference if you are forgetting some of the patterns and recipes discussed during the workshop.

Other Modules for Creative Coding

This workshop encourages students to make use of npm modules to build complex and interesting artworks.

If you find a module you want to use, like point-in-polygon, you can install it from your project folder like so:

npm install point-in-polygon

Below are some nice modules for creative coding & generative art:

Further Reading

More links to generative art & creative coding:

License

This repository has a dual license.

The textual documentation and markdown files are all licensed as MIT.

The JavaScript source files have been released under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0), see src/LICENSE.md for details.