draw_code.001 — ThreeJS, WebGL & GLSL

This repository includes code & resources for students attending the ThreeJS, WebGL & GLSL workshops.

✨ [ Interactive Demo ]

Contents

• 📖 Digital Book

• 🔧 Tools & Prerequisites

  • 🎨 Installing canvas-sketch CLI

• ✂️️ Code Snippets

• 💻 Command-Line Tips & Suggestions

• 🔥 Modules for Creative Coding

• ⚡️ Cloning & Running Examples

• ✨ Further Reading

Digital Book

You can browse the interactive "slide book" here:

• https://drawcode-001.surge.sh/
• [ mirror ]

Tools & Prerequisites

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

If you already have these tools installed, you can use the --version flag to make sure you have at least [email protected] and [email protected]:

npm --version
node --version

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.

Code Snippets

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.

• Code Snippets

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

Modules

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)

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.

• Riso Printers in Toronto

  • Vide Press

  • Colour Code Printing

License

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.