A monorepo for creative coding and generative art projects using Nx.
- duo-chrome (port 5173) - Duotone image compositions using color pallettes
- monochromifier (port 5178) - Create square black-and-white imates from non-square color images (for use with duo-chrome)
- crude-collage-painter (port 5174) - Interactive collage painting tool
- those-shape-things (port 5175) - Geometric tile-based compositions with color palettes
- computational-collage (port 5176) - Advanced collage creation with multiple composition modes
- dragline (port 5177) - A draggable text landscape
- aggressive-text-waves (port 5179) - Text animated on a character grid, driven by 2D Perlin noise

Aggressive Text Waves - words drift across a character grid toward a wandering gravity well

Duo-chrome composition with info-box

Dragline, with text blocks and help screen

Computational Collage app showing a generated collage and UI

Crude Collage Painter app with collage and UI
- @genart/p5-utils - Common p5.js utilities and helper functions
- @genart/color-palettes - Colors and palette management
- @genart/version-utils - Shared version display utilities (future consolidation)
# Install dependencies
pnpm install
# Run all projects in development mode
pnpm dev
# Build all projects
pnpm buildEach project runs on its own port and can be developed independently:
# Run specific project
nx dev duo-chrome # http://localhost:5173
nx dev crude-collage-painter # http://localhost:5174
nx dev those-shape-things # http://localhost:5175
nx dev computational-collage # http://localhost:5176
nx dev dragline # http://localhost:5177
nx dev monochromifier # http://localhost:5178
nx dev aggressive-text-waves # http://localhost:5179
# Build specific project
nx build duo-chrome
nx build crude-collage-painter
# Run all projects simultaneously
pnpm devgenart-monorepo/
├── apps/ # Individual applications
│ ├── duo-chrome/ # Duotone compositions
| ├── [...] # [etc.]
│ ├── crude-collage-painter/ # Collage painting tool
│ ├── those-shape-things/ # Geometric tile compositions
│ └── computational-collage/ # Advanced collage creation
├── libs/ # Shared libraries
│ ├── p5-utils/ # Common utilities
│ └── color-palettes/ # Color management
├── tools/ # Build and deployment tools
├── docs/ # Documentation
│ ├── guides/ # How-to guides
│ └── architecture/ # Technical documentation
└── dist/ # Build outputs
See docs/guides/adding-projects.md for detailed instructions on adding new creative coding projects to the monorepo.
See docs/architecture/overview.md for technical details about the monorepo structure and design decisions.
This monorepo uses Nx Release with independent versioning - each app maintains its own version number and can be released independently.
# Release and deploy a specific app (one command)
nx run duo-chrome:release-deploy
nx run crude-collage-painter:release-deploy
nx run <app-name-here>:release-deploy
# Release all changed apps
nx releaseThe monorepo uses a hybrid changelog approach:
- App changelogs (
apps/*/CHANGELOG.md) - automatically generated for app-specific changes - Workspace changelog (
/CHANGELOG.md) - manually aggregated for infrastructure changes
# Validate commit messages follow conventions
node scripts/validate-changelog.js --staged
# Update workspace changelog (after app releases)
npm run gen:changelog:applyUse conventional commit messages for automatic version bumping:
# Feature (minor bump: 0.1.0 → 0.2.0)
git commit -m "feat(duo-chrome): add new color blending mode"
# Bug fix (patch bump: 0.1.0 → 0.1.1)
git commit -m "fix(dragline): resolve canvas scaling issue"See docs/guides/version-management.md for complete documentation.
# Development
pnpm dev # Run all projects
nx dev <project-name> # Run specific project
# Building
pnpm build # Build all projects
nx build <project-name> # Build specific project
# Version Management
nx release # Release all changed apps
nx release --projects=<app> # Release specific app
nx run <app>:release-deploy # Release and deploy app
# Deployment
nx run <app>:deploy # Deploy specific app
nx run-many --target=deploy # Deploy all apps
# Code Quality
pnpm lint # Lint all projects
nx lint <project-name> # Lint specific project
# Utilities
nx graph # View project dependency graph
nx affected:build # Build only affected projectsAll applications include version display functionality that shows the current version from each app's package.json:
- duo-chrome: Press
HorIto open help overlay with version info - crude-collage-painter: Press
?orhto open help screen with version info - those-shape-things: Press
Ito open about dialog with version info - computational-collage: Press
Qto open about dialog with version info
Version information is automatically generated during the build process and always reflects the current package.json version.
If version display shows "v1.0.0" instead of the expected version:
- Check build process: Ensure the app was built with
nx build <app-name> - Verify package.json: Confirm the app's package.json has a valid version field
- Clean build: Try
rm -rf dist/apps/<app-name>and rebuild - Check console: Look for version loading warnings in browser developer tools
The version generation happens automatically during build - no manual configuration needed.
- Follow the project addition guide for new projects
- Use StandardJS code style (enforced by ESLint)
- Extract common patterns into shared libraries when appropriate
- Update documentation when adding new features or projects
