{"_id":"@_lowi/substrate","name":"@_lowi/substrate","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@_lowi/substrate","version":"0.0.1","description":"A Jared Tarbell's Substate implementation","author":{"name":"Stephan Lohwasser","email":"code@lowi.dev"},"license":"MIT","scripts":{"dev":"vite dev","build":"BASE_PATH=/substrate vite build && npm run prepack","preview":"vite preview","prepare":"svelte-kit sync || echo ''","prepack":"svelte-kit sync && svelte-package && publint","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","format":"prettier --write .","lint":"prettier --check . && eslint ."},"sideEffects":["**/*.css"],"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"peerDependencies":{"svelte":"^5.0.0"},"devDependencies":{"@eslint/compat":"^1.4.0","@eslint/js":"^9.36.0","@flatten-js/core":"^1.6.4","@sveltejs/adapter-auto":"^6.1.0","@sveltejs/adapter-static":"^3.0.10","@sveltejs/kit":"^2.43.2","@sveltejs/package":"^2.5.4","@sveltejs/vite-plugin-svelte":"^6.2.0","@types/d3":"^7.4.3","@types/node":"^22","d3":"^7.9.0","eslint":"^9.36.0","eslint-config-prettier":"^10.1.8","eslint-plugin-svelte":"^3.12.4","globals":"^16.4.0","open-simplex-noise":"^2.5.0","prettier":"^3.6.2","prettier-plugin-svelte":"^3.4.0","publint":"^0.3.13","svelte":"^5.39.5","svelte-check":"^4.3.2","typescript":"^5.9.2","typescript-eslint":"^8.44.1","vite":"^7.1.7"},"keywords":["substrate","jared tarbell"],"pnpm":{"onlyBuiltDependencies":["esbuild"]},"_id":"@_lowi/substrate@0.0.1","gitHead":"7598c4bd51bb8e810b83d2157d729743d70c6740","_nodeVersion":"24.5.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-fy8ZQdVSAB79cHLGqD8J90/qLrCHtnKUkM93FKiQetA9kwyQgFC2CpNbdwRFQM90nTpR3s/CVF10AF0qOAvaAw==","shasum":"8b34fe65b494ef2bc6217cda9ee7d93955949afb","tarball":"https://registry.npmjs.org/@_lowi/substrate/-/substrate-0.0.1.tgz","fileCount":28,"unpackedSize":52499,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB0FZV33D8ji/ZXkZCMIcmU+CSAtCtFWOdk5CBeWvkcwAiAQI8NA+M1c18vWKFeQE8dg0zIZRCIyjoI5w75ZwhBZNQ=="}]},"_npmUser":{"name":"_lowi","email":"npm@lowi.dev"},"directories":{},"maintainers":[{"name":"_lowi","email":"npm@lowi.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/substrate_0.0.1_1759840472161_0.09839880820239766"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-07T12:34:32.093Z","0.0.1":"2025-10-07T12:34:32.349Z","modified":"2025-10-07T12:34:32.653Z"},"maintainers":[{"name":"_lowi","email":"npm@lowi.dev"}],"description":"A Jared Tarbell's Substate implementation","keywords":["substrate","jared tarbell"],"author":{"name":"Stephan Lohwasser","email":"code@lowi.dev"},"license":"MIT","readme":"# Substrate\n\nA modern browser implementation of [Jared Tarbell's Substrate](http://www.complexification.net/gallery/machines/substrate/) algorithm using HTML5 Canvas and Svelte 5.\n\n[![npm version](https://img.shields.io/npm/v/@_lowi/substrate.svg)](https://www.npmjs.com/package/@_lowi/substrate)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## About\n\n> Lines likes crystals grow on a computational substrate. A simple perpendicular growth rule creates intricate city-like structures. — Jared Tarbell\n\n## Features\n\n- **Canvas-based rendering** - High-performance drawing using HTML5 Canvas API\n- **Obstacle detection** - Automatically detects and avoids HTML elements with `.obstacle` class.\n\n## Installation\n\n```bash\nnpm install @_lowi/substrate\n```\n\nOr with pnpm:\n\n```bash\npnpm add @_lowi/substrate\n```\n\n## Usage\n\n### Basic Setup\n\nThe simplest way to use Substrate is with the built-in Svelte component:\n\n```svelte\n<script>\n  import { GlCanvas } from '@_lowi/substrate';\n</script>\n\n<div style=\"width: 100%; height: 100vh;\">\n  <GlCanvas />\n</div>\n```\n\n### Advanced Usage\n\nFor more control, you can use the Substrate class directly:\n\n```typescript\nimport { Substrate } from '@_lowi/substrate';\nimport { Polygon, Segment, Vector, point } from '@flatten-js/core';\n\n// Setup canvas\nconst canvas = document.getElementById('myCanvas') as HTMLCanvasElement;\nconst dimensions = new Vector(800, 600);\n\n// Define bounds\nconst topEdge = new Segment(point(0, 0), point(dimensions.x, 0));\nconst rightEdge = new Segment(point(dimensions.x, 0), point(dimensions.x, dimensions.y));\nconst bottomEdge = new Segment(point(dimensions.x, dimensions.y), point(0, dimensions.y));\nconst leftEdge = new Segment(point(0, dimensions.y), point(0, 0));\nconst bounds = new Polygon([topEdge, rightEdge, bottomEdge, leftEdge]);\n\n// Create substrate instance\nconst substrate = new Substrate(dimensions, bounds, canvas);\n\n// Animation loop\nconst loop = async () => {\n  await substrate.loop();\n  requestAnimationFrame(loop);\n};\n\n// Control playback\nsubstrate.play();  // Start animation\nsubstrate.pause(); // Pause animation\nsubstrate.step();  // Advance one step\nsubstrate.clear(); // Clear canvas\nsubstrate.reset(); // Reset to initial state\n\nloop();\n```\n\n### Using Obstacles\n\nAdd HTML elements with the `.obstacle` class to create no-grow zones:\n\n```svelte\n<div id=\"canvas\">\n  <GlCanvas />\n</div>\n\n<div id=\"content\" class=\"obstacle\">\n  <h1>This area will block crack growth</h1>\n</div>\n```\n\n## API\n\n### Exports\n\nThe library exports the following from `@_lowi/substrate`:\n\n```typescript\n// Main exports\nimport { \n  Substrate,      // Main substrate class\n  GlCanvas,       // Svelte component\n  \n  // Types\n  type Obstacle,\n  type Obstacles,\n  type Intersection,\n  type BoundaryStartingPoint,\n  type CrackStartingPoint,\n  type CrackOptions,\n  \n  // Color utilities\n  Pallete,        // Color palette enum\n  pallete,        // Color palette function\n  \n  // Advanced classes\n  Crack,\n  RootCrack,\n  ChildCrack,\n  Gradient,\n  Squiggle\n} from '@_lowi/substrate';\n```\n\n### Substrate Class\n\n#### Constructor\n\n```typescript\nnew Substrate(dimensions: Vector, bounds: Polygon, htmlCanvas: HTMLCanvasElement)\n```\n\n- `dimensions` - Canvas dimensions as a Vector\n- `bounds` - Polygon defining the drawable area\n- `htmlCanvas` - HTML canvas element for rendering\n\n#### Methods\n\n- `play(): void` - Start continuous animation\n- `pause(): void` - Pause animation\n- `step(): void` - Advance one generation step\n- `clear(): void` - Clear the canvas\n- `reset(): void` - Reset to initial state with new crack pattern\n- `loop(): Promise<void>` - Execute one iteration of the growth algorithm\n\n### Components\n\n#### GlCanvas\n\nA ready-to-use Svelte component that handles canvas setup and rendering:\n\n```svelte\n<GlCanvas />\n```\n\n## How It Works\n\nThe Substrate algorithm follows these principles:\n\n1. **Initialization**: Start with a random crack on the canvas\n2. **Growth**: Each crack extends perpendicular to nearby obstacles or boundaries\n3. **Intersection Detection**: Cracks stop growing when they hit another crack or boundary\n4. **New Cracks**: When a crack completes, a new crack spawns at a random point\n5. **Rendering**: Gradients fill the regions between cracks, creating organic patterns\n\n## Development\n\n### Prerequisites\n\n- Node.js 18+ \n- pnpm (recommended) or npm\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://gitlab.com/lowi/substrate.git\ncd substrate\n\n# Install dependencies\npnpm install\n\n# Start dev server\npnpm dev\n\n# Build library\npnpm build\n\n# Check types\npnpm check\n```\n\n\n## Credits\n\n- **Original Algorithm**: [Jared Tarbell](http://www.complexification.net/gallery/machines/substrate/)\n- **Implementation**: Stephan Lohwasser ([@lowi](https://lowi.dev))\n\n\n## License\n\nMIT License - see [LICENSE](LICENSE) for details\n\n## Links\n\n- [Live Demo](https://lowi.gitlab.io/substrate/)\n- [GitLab Repository](https://gitlab.com/lowi/substrate)\n- [Original Substrate by Jared Tarbell](http://www.complexification.net/gallery/machines/substrate/)\n\n","readmeFilename":"README.md","_rev":"1-345110d52709eec5f1a6bf5b266665bc"}