This repository includes code & resources for students attending the ThreeJS, WebGL & GLSL workshops.
✨ [ Interactive Demo ]
-
✂️️ Code Snippets
You can browse the interactive "slide book" here:
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 |
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
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.
I've also included a small "recipes" document that you can use as a reference if you are forgetting some of the patterns and recipes discussed during the workshop.
If you are new to the command-line, you can read more details here:
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:
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 riso-colors, you can install it from your project folder like so:
npm install riso-colors
Below are some of the modules used in the workshop:
- riso-colors - Risograph color palettes
- paper-colors - paper color palettes
- three-tube-wireframe - build volumetric wireframes from a THREE.Geometry
- anime.js - animation library
- simple-input-events - utility for mobile & desktop touch/mouse events
- three-geometry-data - get nested vertex & normal data from a THREE.Geometry
- three-quaternion-from-normal - to orient a mesh toward a normal vector
Here's a list of some other modules you might like to use in generative art:
- load-asset - a utility to load images and other assets with async/await
- nice-color-palettes - a collection of 1000 beautiful color palettes
- chromotome - dozens of hand-picked color palettes
- poisson-disk-sampling - can be used for 2D and 3D object placements
- convex-hull - 2D and 3D convex hull generation
- delaunay-triangulate - 2D and 3D 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
- glsl-noise - noise functions as a GLSL module (used with glslify)
- glsl-hsl2rgb - HSL to RGB function as a GLSL module (used with glslify)
More links to generative art & creative coding:
-
Generative Art
-
Anders Hoff — Writing on Generative Art
-
Tyler Hobbs — Writing on Generative Art
-
My Blog — Writing on Creative Coding & Generative Art
-
GLSL & Shaders
-
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
-
#plottertwitter, #generative, #webgl and similar hashtags on Twitter, Instagram etc.
-
Riso Printers in Toronto
This repository has a dual license.
The textual documentation and markdown files are all licensed as MIT.
The images and 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.