{"id":13826097,"url":"https://github.com/drawcode-workshops/001","last_synced_at":"2025-07-08T23:31:09.021Z","repository":{"id":40292432,"uuid":"203388589","full_name":"drawcode-workshops/001","owner":"drawcode-workshops","description":"draw_code.001 — ThreeJS, WebGL \u0026 GLSL","archived":false,"fork":false,"pushed_at":"2023-01-04T07:54:09.000Z","size":3430,"stargazers_count":56,"open_issues_count":16,"forks_count":6,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-07-05T23:36:39.254Z","etag":null,"topics":["art","creative-coding","generative-art","threejs","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drawcode-workshops.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-20T14:04:05.000Z","updated_at":"2023-09-18T16:32:44.000Z","dependencies_parsed_at":"2023-02-02T04:01:46.853Z","dependency_job_id":null,"html_url":"https://github.com/drawcode-workshops/001","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/drawcode-workshops/001","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcode-workshops%2F001","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcode-workshops%2F001/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcode-workshops%2F001/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcode-workshops%2F001/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drawcode-workshops","download_url":"https://codeload.github.com/drawcode-workshops/001/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcode-workshops%2F001/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264365457,"owners_count":23596838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["art","creative-coding","generative-art","threejs","webgl"],"created_at":"2024-08-04T09:01:32.064Z","updated_at":"2025-07-08T23:31:08.667Z","avatar_url":"https://github.com/drawcode-workshops.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# draw_code.001 — ThreeJS, WebGL \u0026 GLSL\n\nThis repository includes code \u0026 resources for students attending the *ThreeJS, WebGL \u0026 GLSL* workshops.\n\n###### ✨ [ [Interactive Demo](https://drawcode-001-demo.surge.sh/) ]\n\n\n[\u003cimg src=\"docs/images/demo1.png\" width=\"33%\" /\u003e\u003cimg src=\"docs/images/demo2.png\" width=\"33%\" /\u003e\u003cimg src=\"docs/images/demo6.png\" width=\"33%\" /\u003e](https://drawcode-001-demo.surge.sh/)\n\n# Contents\n\n- 📖 [Digital Book](#digital-book)\n\n- 🔧 [Tools \u0026 Prerequisites](#tools--prerequisites)\n\n  - 🎨 [Installing `canvas-sketch` CLI](#installing-canvas-sketch-cli)\n\n- ✂️️ [Code Snippets](#code-snippets)\n\n- 💻 [Command-Line Tips \u0026 Suggestions](#command-line-tips--suggestions)\n\n- 🔥 [Modules for Creative Coding](#modules)\n\n- ⚡️ [Cloning \u0026 Running Examples](#cloning--running-examples)\n\n- ✨ [Further Reading](#further-reading)\n\n# Digital Book\n\nYou can browse the interactive \"slide book\" here:\n\n- [https://drawcode-001.surge.sh/](https://drawcode-001.surge.sh/)\n- [ [mirror](https://001--angry-saha-ab0472.netlify.com/) ]\n\n# Tools \u0026 Prerequisites\n\nHere is a list of tools, software and libraries that will be used during the workshop.\n\n| Tool | Documentation | Description |\n|---|---|---|\n| *Code Editor* | | A JavaScript code editor, [VSCode](https://code.visualstudio.com/) is recommended\n| *Browser* |  | A modern browser, [Chrome](https://www.google.com/chrome/) is recommended\n| *Canvas API* | [[docs](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)] | The HTML5 `\u003ccanvas\u003e` API, built into all browsers \n| *Command-Line* | [[guide](./docs/command-line.md)] | A command-line application like Terminal (macOS) or [cmder](http://cmder.net/) (Windows)\n| [Node.js](https://nodejs.org/en/) (v8+) | [[docs](https://nodejs.org/dist/latest-v8.x/docs/api/)] | Used for running command-line JavaScript tools\n| [npm](https://npmjs.com/) (v5+) | [[docs](https://nodejs.org/dist/latest-v8.x/docs/api/)] | Used to install third-party dependencies and tools\n| [`canvas-sketch`](https://github.com/mattdesl/canvas-sketch/) | [[docs](https://github.com/mattdesl/canvas-sketch/tree/master/docs)] | A development tool \u0026 framework for Generative Art\n| [`canvas-sketch-util`](https://github.com/mattdesl/canvas-sketch-util/) | [[docs](https://github.com/mattdesl/canvas-sketch-util/tree/master/docs)] | Utilities for Math \u0026 Random Number Generation\n| [ThreeJS](https://threejs.org/) | [[docs](https://threejs.org/docs/)] | A 3D rendering engine for WebGL\n\nIf you already have these tools installed, you can use the `--version` flag to make sure you have at least `node@8` and `npm@5`:\n\n```sh\nnpm --version\nnode --version\n```\n\n## Installing `canvas-sketch` CLI\n\nWe will be using [`canvas-sketch`](https://github.com/mattdesl/canvas-sketch/) and its command-line interface (CLI) during the workshop.\n\nTo install the CLI with npm, use the `--global` or `-g` flag like so:\n\n```sh\nnpm install canvas-sketch-cli --global\n```\n\n\u003e :bulb: Note the `-cli` suffix in the name; this tells npm to install the CLI tool, not the code library.\n\n# Code Snippets\n\nI'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.\n\n- [Code Snippets](./docs/snippets.md)\n\n# Command-Line Tips \u0026 Suggestions\n\nIf you are new to the command-line, you can read more details here:\n\n- [Command-Line Tips \u0026 Suggestions](./docs/command-line.md)\n\n# Cloning \u0026 Running Examples\n\nDuring 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:\n\n- [Cloning \u0026 Running Examples](./docs/cloning.md)\n\n# Modules\n\nThis workshop encourages students to make use of [npm](https://www.npmjs.com) modules to build complex and interesting artworks.\n\nIf you find a module you want to use, like [riso-colors](https://www.npmjs.com/package/riso-colors), you can install it from your project folder like so:\n\n```sh\nnpm install riso-colors\n```\n\nBelow are some of the modules used in the workshop:\n\n- [riso-colors](https://www.npmjs.com/package/riso-colors) - Risograph color palettes\n- [paper-colors](https://www.npmjs.com/package/paper-colors) - paper color palettes\n- [three-tube-wireframe](https://www.npmjs.com/package/three-tube-wireframe) - build volumetric wireframes from a THREE.Geometry\n- [anime.js](https://www.npmjs.com/package/animejs) - animation library\n- [simple-input-events](https://www.npmjs.com/package/simple-input-events) - utility for mobile \u0026 desktop touch/mouse events\n- [three-geometry-data](https://www.npmjs.com/package/three-geometry-data) - get nested vertex \u0026 normal data from a THREE.Geometry\n- [three-quaternion-from-normal](https://www.npmjs.com/package/three-quaternion-from-normal) - to orient a mesh toward a normal vector\n\nHere's a list of some other modules you might like to use in generative art:\n\n- [load-asset](https://www.npmjs.com/package/load-asset) - a utility to load images and other assets with async/await\n- [nice-color-palettes](https://www.npmjs.com/package/nice-color-palettes) - a collection of 1000 beautiful color palettes\n- [chromotome](https://www.npmjs.com/package/chromotome) - dozens of hand-picked color palettes\n- [poisson-disk-sampling](https://www.npmjs.com/package/poisson-disk-sampling) - can be used for 2D and 3D object placements\n- [convex-hull](https://www.npmjs.com/package/convex-hull) - 2D and 3D convex hull generation\n- [delaunay-triangulate](https://www.npmjs.com/package/delaunay-triangulate) - 2D and 3D triangulation\n- [voronoi-diagram](https://www.npmjs.com/package/voronoi-diagram) - for 2D and 3D voronoi diagrams\n- [svg-mesh-3d](https://github.com/mattdesl/svg-mesh-3d) - convert SVG path string to a 3D mesh\n- [eases](https://www.npmjs.com/package/eases) - a set of common easing functions\n- [glsl-noise](https://www.npmjs.com/package/glsl-noise) - noise functions as a GLSL module (used with glslify)\n- [glsl-hsl2rgb](https://www.npmjs.com/package/glsl-hsl2rgb) - HSL to RGB function as a GLSL module (used with glslify)\n\n# Further Reading\n\nMore links to generative art \u0026 creative coding:\n\n- [Vanilla Canvas2D Demo](https://codepen.io/mattdesl/pen/BMGZJZ)\n\n- Generative Art\n\n  - [Generative Artistry](https://generativeartistry.com/)\n\n  - [Anders Hoff](https://inconvergent.net/#writing) — Writing on Generative Art\n\n  - [Tyler Hobbs](http://www.tylerlhobbs.com/writings) — Writing on Generative Art\n\n  - [My Blog](https://mattdesl.svbtle.com/) — Writing on Creative Coding \u0026 Generative Art\n\n- GLSL \u0026 Shaders\n\n  - [The Book of Shaders](https://thebookofshaders.com/)\n\n  - [Lesson: GLSL Shader Basics](https://github.com/Jam3/jam3-lesson-webgl-shader-intro)\n\n  - [Lesson: Custom Shaders in ThreeJS](https://github.com/Jam3/jam3-lesson-webgl-shader-threejs)\n\n- Math\n\n  - [Linear Interpolation](https://mattdesl.svbtle.com/linear-interpolation) — intro to `lerp`\n\n  - [math-as-code](https://github.com/Jam3/math-as-code) — A cheat sheet for mathematical notation in code form\n\n- More Resources\n\n  - [awesome-creative-coding](https://github.com/terkelg/awesome-creative-coding) — a large list of resources\n\n  - [graphics-resources](https://github.com/mattdesl/graphics-resources) — a large list of papers \u0026 study material\n\n- Tools\n\n  - [giftool.surge.sh](https://giftool.surge.sh/) — A simple tool for creating looping GIF animations from a folder of PNG frames\n\n  - [cubic-bezier.com](http://cubic-bezier.com) — A cubic Bezier curve editor, useful alongside the [bezier-easing](https://www.npmjs.com/package/bezier-easing) module\n\n  - [ThreeJS Editor](https://threejs.org/editor/) — An online scene editor for ThreeJS\n\n- Communities\n\n  - [creative-dev Slack team](https://creative-dev.herokuapp.com/)\n\n  - [#plottertwitter](https://twitter.com/hashtag/plottertwitter?lang=en), [#generative](https://twitter.com/hashtag/generative?lang=en), [#webgl](https://twitter.com/hashtag/webgl?lang=en) and similar hashtags on Twitter, Instagram etc.\n\n- Riso Printers in Toronto\n\n  - [Vide Press](https://videpress.ca/)\n\n  - [Colour Code Printing](http://colourcodeprinting.com/)\n\n# License\n\nThis repository has a dual license.\n\nThe textual documentation and markdown files are all licensed as MIT.\n\nThe images and JavaScript source files have been released under [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-nc-sa/4.0/) (CC BY-NC-SA 4.0), see [src/LICENSE.md](./src/LICENSE.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawcode-workshops%2F001","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrawcode-workshops%2F001","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawcode-workshops%2F001/lists"}