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 Pnpm as a package manager. You can find installation instructions here.

To install dependencies run

pnpm install

Usage

Development

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

pnpm dev

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

pnpm 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
• assets/ - Static assets for sketches: images, fonts etc.
• library/ - Code unrelated to any specific sketch: setup code, helper and utility functions, shared GLSL chunks.
• public/ - CSS files for local development workflow
• sketches/ - Actual artworks code grouped by year
• typings/ - TypeScript type declarations for 3rd party libraries that don't provide them
• .gitignore - gitignore file
• .prettierrc - Prettier formatter configuration file
• electron.js - Electron runner, used for running sketches in dev mode
• eslint.config.js - ESLint linter configuration file
• 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
• pnpm-lock.yaml - Pnpm lockfile for consistent and reproducible builds
• tsconfig.json - Configuration file for TypeScript compiler, for more info see here
• vite.config.ts - Vite bundler configuration file