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

• Installing the Prerequisites

  • Complete Installation Guide

• Installing canvas-sketch CLI

• Command-Line Tips & Suggestions

• Cloning & Running Examples

• Other Modules for Creative Coding

• Cheat Sheet

• Exercises

• Further Reading

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:

• Installation Guide

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

:bulb: 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:

• Command-Line Tips & Suggestions

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:

• Cloning & Running Examples

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.

• Cheat Sheet

Exercises

Below are a couple exercises you can tackle during lunch and free coding periods:

• Exercises

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:

• load-asset - a utility to load images and other assets with async/await
• point-in-polygon - test if 2D point is within a polygon
• nice-color-palettes - a collection of 1000 beautiful color palettes
• gl-matrix - 2D and 3D vector & matrix math utilities
• poisson-disk-sampling - can be used for 2D and 3D object placements
• delaunay-triangulate - 2D and 3D triangulation
• simplify-path - simplify a 2D polyline path
• chaikin-smooth - smooth a 2D polyline path
• earcut - fast 2D and 3D polygon triangulation
• voronoi-diagram - for 2D and 3D voronoi diagrams
• svg-mesh-3d - convert SVG path string to a 3D mesh
• eases - a set of common easing functions
• bezier-easing - create cubic bezier curve functions
• glsl-noise - noise functions as a GLSL module (used with glslify)
• glsl-hsl2rgb - HSL to RGB function as a GLSL module (used with glslify)

Further Reading

More links to generative art & creative coding:

• Vanilla Canvas2D Demo

• Generative Art

  • Generative Artistry

  • Anders Hoff — Writing on Generative Art

  • Tyler Hobbs — Writing on Generative Art

  • My Blog — Writing on Creative Coding & Generative Art

• GLSL & Shaders

  • The Book of Shaders

  • Lesson: GLSL Shader Basics

  • Lesson: Custom Shaders in ThreeJS

• Math

  • Linear Interpolation — intro to lerp

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

• More Resources

  • awesome-creative-coding — a large list of resources

  • graphics-resources — a large list of papers & study material

• Tools

  • giftool.surge.sh — A simple tool for creating looping GIF animations from a folder of PNG frames

  • cubic-bezier.com — A cubic Bezier curve editor, useful alongside the bezier-easing module

  • ThreeJS Editor — An online scene editor for ThreeJS

• Communities

  • creative-dev Slack team

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

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.