Packages
@genart-dev/core
Renderer adapters, compiler, compositor, and registries — version 0.6.1
@genart-dev/core
Version 0.6.1. The runtime engine that compiles sketches, manages rendering, and provides the plugin and skill registries.
Installation
npm install @genart-dev/coreRenderer Adapters
5 renderer adapters implement the RendererAdapter interface:
| Adapter | Renderer | Use Case |
|---|---|---|
P5Adapter | p5.js (instance mode) | General-purpose 2D creative coding |
Canvas2DAdapter | HTML Canvas 2D | Lightweight 2D, no dependencies |
ThreeAdapter | Three.js | 3D scenes, WebGL |
GLSLAdapter | Raw GLSL shaders | Fragment shader art, GPU-intensive effects |
SVGAdapter | SVG DOM | Vector output, scalable graphics |
Each adapter handles:
- Algorithm compilation and validation
- Instance creation with canvas, params, colors, and seed
- State injection (WIDTH, HEIGHT, SEED, PARAMS, COLORS)
- Component and symbol data extraction
Compiler
The compiler transforms a SketchDefinition into a runnable sketch instance:
import { compile } from '@genart-dev/core';
const instance = await compile(sketchDefinition, container);
instance.initializeSystem();Compositor
The iframe compositor renders design layers as overlays on the sketch canvas. It handles:
- Layer ordering and visibility
- Blend modes and opacity
- Transform controls (position, rotation, scale, anchor)
- Filter application (
filter:CSS property withfilters:alias fallback)
SkillRegistry
24 built-in skills covering artistic knowledge:
| Category | Skills |
|---|---|
| Composition | Rule of thirds, golden ratio, visual balance, focal points |
| Color Theory | Color harmonies, palettes, contrast, temperature |
| Process | Creative workflow, iteration, critique |
| Painting | Brush techniques, fills, shading |
| Drawing | SVG paths, canvas math, symbol design |
Skills are loaded on demand via SkillRegistry.load(skillId).
PluginRegistry
Manages design plugins and their layer types:
import { PluginRegistry } from '@genart-dev/core';
const registry = new PluginRegistry();
registry.register(typographyPlugin);
const layerType = registry.resolveLayerType('typography:text');The registry provides:
- Plugin registration and discovery
- Layer type resolution by type ID
- Property schema lookup for
SchemaPropertyEditor - MCP tool registration for each plugin