sketches

This is a repository for my generative art sketches. I'm using TypeScript for all my works and various graphics libraries, such as Pixi.js and Three.js, along with the pure WebGL API. You can preview them on my Github Pages website.

Installation

I'm using Yarn Modern as a package manager, specifically for it's package patching functionality (sometimes it's the easiest way to fix a bug in some 3rd party dependency). Although currently i'm not making use of this functionality, I still recommend using it in case you'd like to run this repo locally. You can find installation instructions here.

Install dependencies

yarn install

Usage

Development

Run a dev server with hot reload (will open in an Electron window)

yarn start

In order to switch to a different sketch, go to <root>/index.ts and update the following import at the start of a file

import constructor from "path/to/sketch" // Update path here

Production

Build a library bundle

yarn build

Entry point is <root>/lib.ts. It exports all finished artworks along with a Sketch class for embedding sketches in pages

TODO: Generate JSDoc

Directory structure

For educational purposes and for future reference I will outline below all top level files and folders in this repository and what they are for.

• .github/ - Contains GitHub Actions descriptions for automatically deploying latest version of my sketches to Github Pages on every commit to master branch
• .husky/ - Husky pre-commit hooks
• .vscode/ - VSCode workspace settings and code snippets
• .yarn/ - Yarn Modern binaries
• assets/ - Static assets: images, fonts, CSS files etc.
• library/ - Code unrelated to any specific sketch: setup code, helper and utility functions etc.
• sketches/ - Actual artworks code grouped by year
• typings/ - TypeScript type declarations for 3rd party libraries that don't provide them
• .eslintignore, .eslintrc.cjs - ESLint linter configuration files
• .gitignore - gitignore file
• .prettierignore, .prettierrc - Prettier formatter configuration files
• .yarnrc.yml - Yarn Modern configuration
• electron.js - Electron runner, used for running sketches in dev mode
• index.html - Main html file specifying TypeScript entry point and main CSS stylesheet
• index.ts - TypeScript entry point for development workflow
• lib.ts - TypeScript entry point for library mode
• tsconfig.json - Configuration file for TypeScript compiler, for more info see here
• vite.config.ts - Vite bundler configuration file
• yarn.lock - Yarn lockfile for consistent and reproducible builds