{"id":13425923,"url":"https://github.com/mattdesl/workshop-generative-art","last_synced_at":"2026-03-17T23:07:16.173Z","repository":{"id":33269779,"uuid":"151227199","full_name":"mattdesl/workshop-generative-art","owner":"mattdesl","description":"A workshop on creative coding \u0026 generative art","archived":false,"fork":false,"pushed_at":"2021-04-30T02:42:40.000Z","size":3802,"stargazers_count":1401,"open_issues_count":5,"forks_count":272,"subscribers_count":26,"default_branch":"master","last_synced_at":"2026-01-20T07:57:45.378Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://frontendmasters.com/courses/canvas-webgl/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mattdesl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-02T08:58:49.000Z","updated_at":"2026-01-15T13:03:07.000Z","dependencies_parsed_at":"2022-09-12T19:02:50.259Z","dependency_job_id":null,"html_url":"https://github.com/mattdesl/workshop-generative-art","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mattdesl/workshop-generative-art","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fworkshop-generative-art","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fworkshop-generative-art/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fworkshop-generative-art/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fworkshop-generative-art/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattdesl","download_url":"https://codeload.github.com/mattdesl/workshop-generative-art/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fworkshop-generative-art/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30635156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-17T22:38:22.569Z","status":"ssl_error","status_checked_at":"2026-03-17T22:38:11.804Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-07-31T00:01:22.118Z","updated_at":"2026-03-17T23:07:16.153Z","avatar_url":"https://github.com/mattdesl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Creative Coding \u0026 Generative Art with JavaScript\n\nThis repository includes code \u0026 resources for students attending my *Generative Art \u0026 Creative Coding with JavaScript* workshops in 2018.\n\n# Contents\n\n- [Tools \u0026 Prerequisites](#tools--prerequisites)\n\n- [Installing the Prerequisites](#installing-the-prerequisites)\n\n  - [Complete Installation Guide](#complete-installation-guide)\n\n- [Installing `canvas-sketch` CLI](#installing-canvas-sketch-cli)\n\n- [Command-Line Tips \u0026 Suggestions](#command-line-tips--suggestions)\n\n- [Cloning \u0026 Running Examples](#cloning--running-examples)\n\n- [Other Modules for Creative Coding](#other-modules-for-creative-coding)\n\n- [Cheat Sheet](#cheat-sheet)\n\n- [Exercises](#exercises)\n\n- [Further Reading](#further-reading)\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\n# Installing the Prerequisites \n\nBefore starting the workshop, make sure you have installed and set up:\n\n- A browser, Chrome recommended\n- A code editor, VSCode recommended\n- A terminal application (like Terminal, cmder or cmd.exe)\n- Node.js 8+ and npm 5+\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### Complete Installation Guide\n\nIf you haven't installed these yet, you can find more instructions here:\n\n- [Installation Guide](./docs/installation.md)\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# 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# Cheat Sheet\n\nI'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.\n\n- [Cheat Sheet](./docs/cheat-sheet.md)\n\n# Exercises\n\nBelow are a couple exercises you can tackle during lunch and free coding periods:\n\n- [Exercises](./docs/exercises.md)\n\n# Other Modules for Creative Coding\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 [point-in-polygon](https://www.npmjs.com/package/point-in-polygon), you can install it from your project folder like so:\n\n```sh\nnpm install point-in-polygon\n```\n\nBelow are some nice modules for creative coding \u0026 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- [point-in-polygon](https://www.npmjs.com/package/point-in-polygon) - test if 2D point is within a polygon\n- [nice-color-palettes](https://www.npmjs.com/package/nice-color-palettes) - a collection of 1000 beautiful color palettes\n- [gl-matrix](https://www.npmjs.com/package/gl-matrix) - 2D and 3D vector \u0026 matrix math utilities\n- [poisson-disk-sampling](https://www.npmjs.com/package/poisson-disk-sampling) - can be used for 2D and 3D object placements\n- [delaunay-triangulate](https://www.npmjs.com/package/delaunay-triangulate) - 2D and 3D triangulation\n- [simplify-path](https://www.npmjs.com/package/simplify-path) - simplify a 2D polyline path\n- [chaikin-smooth](https://www.npmjs.com/package/chaikin-smooth) - smooth a 2D polyline path\n- [earcut](https://www.npmjs.com/package/earcut) - fast 2D and 3D polygon 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- [bezier-easing](https://www.npmjs.com/package/bezier-easing) - create cubic bezier curve 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# License\n\nThis repository has a dual license.\n\nThe textual documentation and markdown files are all licensed as MIT.\n\nThe 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%2Fmattdesl%2Fworkshop-generative-art","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattdesl%2Fworkshop-generative-art","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattdesl%2Fworkshop-generative-art/lists"}