selkie 1.0.0 → 1.2.0

package/README.md

@@ -1,19 +1,65 @@
-# Selkie 
+# Selkie
 
 In Celtic mythology, selkies are beings that can transform from seals into humans by shedding their seal skins. They often feature in stories of love and longing, where a selkie's human form is hidden away or discovered by a human.
 
-This library is heavily influenced as a template starter for generative projects. For now it only works with p5. I'll be extending it to also include other templates. 
+A CLI tool for scaffolding generative art projects. Quickly create projects with p5.js, Paper.js, Three.js, WebGL/GLSL shaders, or ML5.js hand tracking.
 
-This is a project to help better understand the process of streamlining my sketches in p5. I've been able to quickly iternate using Processing for years now. But I want to really get a grasp on creating a system that will generate the work that I will be able to use. 
+## Installation
 
 ```bash
 npm install selkie
 ```
 
+## Usage
+
+Create a new project with one of the available templates:
 
-In order to create a new project, use the following after it has been installed. 
 ```bash
-selkie -t default 
+selkie -t default     # p5.js canvas project
+selkie -t svg         # Paper.js vector/SVG project
+selkie -t three       # Three.js 3D project
+selkie -t glsl        # WebGL shader project
+selkie -t ml5-hand    # ML5.js hand tracking project
+selkie -t pressure    # p5.js pressure drawing (iPad + Apple Pencil)
 ```
 
+You'll be prompted for a folder name, then the project will be created with all dependencies installed.
+
+## Working on Your Sketch
+
+Each generated project includes a dev server:
+
+```bash
+cd your-project
+npm start             # Opens in browser with live reload
+```
+
+Edit `scripts/sketch.js` to create your generative art. Press 's' to export PNG/SVG (depending on template).
+
+## Building a Single-File Bundle
+
+When you're ready to share your sketch, build it into a single HTML file that works offline on any device:
+
+```bash
+npm run build
+```
+
+This creates `dist/bundle.html` - a minified, self-contained file you can:
+- Open directly in any browser (no server needed)
+- Share via email, USB, or any file transfer
+- Upload to any static hosting
+
+**Note:** The ML5 hand tracking template still requires internet for AI models.
+
+## Templates
+
+| Template | Library | Output | Notes |
+|----------|---------|--------|-------|
+| `default` | p5.js | Canvas/PNG | Classic creative coding |
+| `svg` | Paper.js | SVG vectors | Perfect for plotters |
+| `three` | Three.js | WebGL 3D | 3D graphics |
+| `glsl` | Native WebGL | Shaders | Smallest bundle (~5KB) |
+| `ml5-hand` | ML5.js | Hand tracking | Requires webcam + internet |
+
+All templates include a seeded random number generator for deterministic/reproducible outputs.
 

package/index.js

@@ -6,17 +6,20 @@ import path from 'path';
 import { Command } from 'commander';
 import { fileURLToPath } from 'url';
 import { exec, execSync } from 'child_process';
-import { template as defaultTemplate } from './templates.js';
-import { packageJsonContent } from './package_details.js';
+import { template as defaultTemplate, svgTemplate, threeTemplate, glslTemplate, ml5HandTrackingTemplate, pressureTemplate, buildScriptContent } from './templates/templates.js';
+import { packageJsonContent, svgPackageJsonContent, threePackageJsonContent, glslPackageJsonContent, ml5HandTrackingPackageJsonContent, pressurePackageJsonContent } from './package_details.js';
 
 // Convert import.meta.url to a file path
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// Read version from package.json so --version stays in sync with releases
+const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8'));
+
 // Initialize commander
 const program = new Command();
 program
-    .version('1.0.0')
+    .version(pkg.version)
     .option('-t, --template <type>', 'specify the template type')
     .parse(process.argv);
 
@@ -45,15 +48,41 @@ async function createProject() {
         await fs.ensureDir(scriptsPath);
 
         // Choose the template
-        let htmlContent, sketchContent, randomContent;
-    
+        let htmlContent, sketchContent, randomContent, selectedPackageJson;
+        let templateType = options.template || 'default';
 
-        if (options.template === 'default' || !options.template) {
+        if (templateType === 'default') {
             htmlContent = defaultTemplate.htmlContent;
             sketchContent = defaultTemplate.sketchContent;
             randomContent = defaultTemplate.randomContent;
+            selectedPackageJson = packageJsonContent;
+        } else if (templateType === 'svg') {
+            htmlContent = svgTemplate.htmlContent;
+            sketchContent = svgTemplate.sketchContent;
+            randomContent = svgTemplate.randomContent;
+            selectedPackageJson = svgPackageJsonContent;
+        } else if (templateType === 'three') {
+            htmlContent = threeTemplate.htmlContent;
+            sketchContent = threeTemplate.sketchContent;
+            randomContent = threeTemplate.randomContent;
+            selectedPackageJson = threePackageJsonContent;
+        } else if (templateType === 'glsl') {
+            htmlContent = glslTemplate.htmlContent;
+            sketchContent = glslTemplate.sketchContent;
+            randomContent = glslTemplate.randomContent;
+            selectedPackageJson = glslPackageJsonContent;
+        } else if (templateType === 'ml5-hand') {
+            htmlContent = ml5HandTrackingTemplate.htmlContent;
+            sketchContent = ml5HandTrackingTemplate.sketchContent;
+            randomContent = ml5HandTrackingTemplate.randomContent;
+            selectedPackageJson = ml5HandTrackingPackageJsonContent;
+        } else if (templateType === 'pressure') {
+            htmlContent = pressureTemplate.htmlContent;
+            sketchContent = pressureTemplate.sketchContent;
+            randomContent = pressureTemplate.randomContent;
+            selectedPackageJson = pressurePackageJsonContent;
         } else {
-            throw new Error('Unknown template type');
+            throw new Error('Unknown template type. Available templates: default, svg, three, glsl, ml5-hand, pressure');
         }
 
         // Create index.html
@@ -61,33 +90,61 @@ async function createProject() {
 
         // Create package.json
         const packageJsonPath = path.join(folderPath, 'package.json');
-        const packageJson = packageJsonContent.replace(/"project-name"/, `"${folderName}"`);
+        const packageJson = selectedPackageJson.replace(/"project-name"/, `"${folderName}"`);
         await fs.writeFile(packageJsonPath, packageJson.trim());
 
-       // Install dependencies
-       console.log('Installing dependencies...');
-       execSync('npm install -s', { cwd: folderPath, stdio: 'inherit' });
-
-        // Check if p5.min.js exists and copy it to the scripts folder
-        const p5Path = path.join(__dirname, 'node_modules', 'p5', 'lib', 'p5.min.js');
-        if (await fs.pathExists(p5Path)) {
-            await fs.copyFile(p5Path, path.join(scriptsPath, 'p5.js'));
-            console.log('p5.js copied successfully.');
+        // Install dependencies
+        console.log('Installing dependencies...');
+        execSync('npm install -s', { cwd: folderPath, stdio: 'inherit' });
+
+        // Copy the appropriate library to the scripts folder
+        if (templateType === 'svg') {
+            // Copy paper.js for SVG template
+            const paperPath = path.join(__dirname, 'node_modules', 'paper', 'dist', 'paper-full.js');
+            if (await fs.pathExists(paperPath)) {
+                await fs.copyFile(paperPath, path.join(scriptsPath, 'paper-full.js'));
+                console.log('paper.js copied successfully.');
+            } else {
+                throw new Error(`paper-full.js not found at ${paperPath}`);
+            }
+        } else if (templateType === 'three') {
+            // Copy three.js module for Three.js template
+            const threePath = path.join(__dirname, 'node_modules', 'three', 'build', 'three.module.js');
+            if (await fs.pathExists(threePath)) {
+                await fs.copyFile(threePath, path.join(scriptsPath, 'three.module.js'));
+                console.log('three.js copied successfully.');
+            } else {
+                throw new Error(`three.module.js not found at ${threePath}`);
+            }
+        } else if (templateType === 'glsl') {
+            // GLSL template uses native WebGL, no external library needed
+            console.log('GLSL template - using native WebGL (no library needed).');
+        } else if (templateType === 'ml5-hand') {
+            // ML5 template uses CDN, no local library needed
+            console.log('ML5 hand tracking template - using ml5.js from CDN.');
         } else {
-            throw new Error(`p5.min.js not found at ${p5Path}`);
+            // Copy p5.js for default template
+            const p5Path = path.join(__dirname, 'node_modules', 'p5', 'lib', 'p5.min.js');
+            if (await fs.pathExists(p5Path)) {
+                await fs.copyFile(p5Path, path.join(scriptsPath, 'p5.js'));
+                console.log('p5.js copied successfully.');
+            } else {
+                throw new Error(`p5.min.js not found at ${p5Path}`);
+            }
         }
 
         // Create sketch.js
         await fs.writeFile(path.join(scriptsPath, 'sketch.js'), sketchContent.trim());
-        
 
-         // Create random.js
-         await fs.writeFile(path.join(scriptsPath, 'random.js'), randomContent.trim());
-    
+        // Create random.js
+        await fs.writeFile(path.join(scriptsPath, 'random.js'), randomContent.trim());
 
         // Create index.html
         await fs.writeFile(path.join(folderPath, 'index.html'), htmlContent.trim());
 
+        // Create build.js for single-file bundling
+        await fs.writeFile(path.join(folderPath, 'build.js'), buildScriptContent.trim());
+        console.log('build.js created - run "npm run build" to create a single-file bundle.');
 
         console.log(`Project ${folderName} created successfully.`);
 

package/package.json

@@ -1,25 +1,44 @@
 {
   "name": "selkie",
-  "version": "1.0.0",
-  "description": "Simple generative template creation",
+  "version": "1.2.0",
+  "description": "CLI for scaffolding generative art projects with p5.js, Paper.js, Three.js, GLSL, and ML5.js",
   "main": "index.js",
   "type": "module",
   "bin": {
     "selkie": "./index.js"
   },
+  "files": [
+    "index.js",
+    "templates/",
+    "package_details.js",
+    "README.md"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
+  "keywords": [
+    "generative-art",
+    "creative-coding",
+    "p5js",
+    "paperjs",
+    "threejs",
+    "glsl",
+    "webgl",
+    "scaffold",
+    "cli"
+  ],
   "author": "generatecoll",
   "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/generatecoll/selkie"
+  },
   "dependencies": {
     "commander": "^12.1.0",
     "fs-extra": "^11.2.0",
     "inquirer": "^9.2.22",
-    "p5": "^1.9.4"
-  },
-  "devDependencies": {
-    "live-server": "^1.2.2"
+    "p5": "^1.9.4",
+    "paper": "^0.12.18",
+    "three": "^0.170.0"
   }
 }

package/package_details.js

@@ -5,16 +5,116 @@ export const packageJsonContent = `{
     "description": "",
     "main": "index.js",
     "scripts": {
-    "start": "live-server"
+        "start": "live-server",
+        "build": "node build.js"
     },
     "dependencies": {
-    "p5": "^1.4.0"
+        "p5": "^1.4.0"
     },
     "devDependencies": {
-    "live-server": "^1.2.1"
+        "live-server": "^1.2.1",
+        "terser": "^5.31.0"
     },
     "keywords": [],
     "author": "",
     "license": "ISC"
-    }
-    `;
+}`;
+
+export const pressurePackageJsonContent = `{
+    "name": "project-name",
+    "version": "1.0.0",
+    "description": "Pressure-sensitive p5.js drawing (iPad + Apple Pencil)",
+    "main": "index.js",
+    "scripts": {
+        "start": "live-server",
+        "build": "node build.js"
+    },
+    "dependencies": {
+        "p5": "^1.4.0"
+    },
+    "devDependencies": {
+        "live-server": "^1.2.1",
+        "terser": "^5.31.0"
+    },
+    "keywords": ["generative", "p5.js", "apple-pencil", "pressure", "drawing"],
+    "author": "",
+    "license": "ISC"
+}`;
+
+export const svgPackageJsonContent = `{
+    "name": "project-name",
+    "version": "1.0.0",
+    "description": "Paper.js SVG generative art project",
+    "main": "index.js",
+    "scripts": {
+        "start": "live-server",
+        "build": "node build.js"
+    },
+    "dependencies": {
+        "paper": "^0.12.18"
+    },
+    "devDependencies": {
+        "live-server": "^1.2.1",
+        "terser": "^5.31.0"
+    },
+    "keywords": ["generative", "svg", "paper.js"],
+    "author": "",
+    "license": "ISC"
+}`;
+
+export const threePackageJsonContent = `{
+    "name": "project-name",
+    "version": "1.0.0",
+    "description": "Three.js 3D generative art project",
+    "main": "index.js",
+    "scripts": {
+        "start": "live-server",
+        "build": "node build.js"
+    },
+    "dependencies": {
+        "three": "^0.170.0"
+    },
+    "devDependencies": {
+        "live-server": "^1.2.1",
+        "terser": "^5.31.0"
+    },
+    "keywords": ["generative", "3d", "three.js", "webgl"],
+    "author": "",
+    "license": "ISC"
+}`;
+
+export const glslPackageJsonContent = `{
+    "name": "project-name",
+    "version": "1.0.0",
+    "description": "GLSL WebGL shader project",
+    "main": "index.js",
+    "scripts": {
+        "start": "live-server",
+        "build": "node build.js"
+    },
+    "devDependencies": {
+        "live-server": "^1.2.1",
+        "terser": "^5.31.0"
+    },
+    "keywords": ["generative", "glsl", "webgl", "shader"],
+    "author": "",
+    "license": "ISC"
+}`;
+
+export const ml5HandTrackingPackageJsonContent = `{
+    "name": "project-name",
+    "version": "1.0.0",
+    "description": "ML5.js hand tracking project",
+    "main": "index.js",
+    "scripts": {
+        "start": "live-server",
+        "build": "node build.js"
+    },
+    "devDependencies": {
+        "live-server": "^1.2.1",
+        "terser": "^5.31.0"
+    },
+    "keywords": ["generative", "ml5", "hand-tracking", "computer-vision"],
+    "author": "",
+    "license": "ISC"
+}`;

package/templates/build.js

@@ -0,0 +1,268 @@
+// Build script template - shared across all project types
+export const buildScriptContent = `#!/usr/bin/env node
+// build.js - Bundle project into single HTML file
+const fs = require('fs');
+const path = require('path');
+const { minify } = require('terser');
+
+async function build() {
+    console.log('Building single-file bundle...');
+
+    const templateType = detectTemplateType();
+    console.log('Detected template type:', templateType);
+
+    // Read source files
+    const html = fs.readFileSync('index.html', 'utf8');
+    const sketch = fs.readFileSync('scripts/sketch.js', 'utf8');
+    const random = fs.readFileSync('scripts/random.js', 'utf8');
+
+    // Read library based on template type
+    let library = '';
+    let libraryFile = '';
+
+    switch (templateType) {
+        case 'default':
+            libraryFile = 'scripts/p5.js';
+            if (fs.existsSync(libraryFile)) {
+                library = fs.readFileSync(libraryFile, 'utf8');
+            }
+            break;
+        case 'svg':
+            libraryFile = 'scripts/paper-full.js';
+            if (fs.existsSync(libraryFile)) {
+                library = fs.readFileSync(libraryFile, 'utf8');
+            }
+            break;
+        case 'three':
+            libraryFile = 'scripts/three.module.js';
+            if (fs.existsSync(libraryFile)) {
+                library = fs.readFileSync(libraryFile, 'utf8');
+            }
+            break;
+        case 'glsl':
+            // No library needed - uses native WebGL
+            break;
+        case 'ml5-hand':
+            console.warn('\\n⚠️  Warning: ML5 template requires internet for AI models.');
+            console.warn('   The bundled file will keep the CDN reference to ml5.js.\\n');
+            break;
+    }
+
+    // Minify JavaScript
+    let minifiedLibrary = '';
+    if (library) {
+        try {
+            const result = await minify(library, {
+                compress: true,
+                mangle: true,
+                format: { comments: false }
+            });
+            minifiedLibrary = result.code;
+        } catch (e) {
+            console.warn('Could not minify library, using original:', e.message);
+            minifiedLibrary = library;
+        }
+    }
+
+    let minifiedSketch = sketch;
+    let minifiedRandom = random;
+
+    try {
+        // For Three.js, transform ES6 imports before minifying
+        let sketchToMinify = sketch;
+        if (templateType === 'three') {
+            sketchToMinify = transformThreeJsSketch(sketch);
+        }
+
+        const sketchResult = await minify(sketchToMinify, {
+            compress: true,
+            mangle: true,
+            format: { comments: false }
+        });
+        minifiedSketch = sketchResult.code;
+    } catch (e) {
+        console.warn('Could not minify sketch.js, using original:', e.message);
+        if (templateType === 'three') {
+            minifiedSketch = transformThreeJsSketch(sketch);
+        }
+    }
+
+    try {
+        const randomResult = await minify(random, {
+            compress: true,
+            mangle: true,
+            format: { comments: false }
+        });
+        minifiedRandom = randomResult.code;
+    } catch (e) {
+        console.warn('Could not minify random.js, using original:', e.message);
+    }
+
+    // Build the single HTML file
+    const bundledHtml = buildHtml(html, {
+        library: minifiedLibrary,
+        sketch: minifiedSketch,
+        random: minifiedRandom,
+        templateType
+    });
+
+    // Write output
+    fs.mkdirSync('dist', { recursive: true });
+    fs.writeFileSync('dist/bundle.html', bundledHtml);
+
+    const originalSize = Buffer.byteLength(html, 'utf8') +
+                         Buffer.byteLength(sketch, 'utf8') +
+                         Buffer.byteLength(random, 'utf8') +
+                         Buffer.byteLength(library, 'utf8');
+    const bundleSize = fs.statSync('dist/bundle.html').size;
+
+    console.log('\\n✓ Bundle created: dist/bundle.html');
+    console.log('  Original size: ' + (originalSize / 1024).toFixed(1) + ' KB');
+    console.log('  Bundle size:   ' + (bundleSize / 1024).toFixed(1) + ' KB');
+    console.log('\\nOpen dist/bundle.html in any browser - no server needed!');
+}
+
+function detectTemplateType() {
+    const html = fs.readFileSync('index.html', 'utf8');
+    if (html.includes('three.module.js') || html.includes('importmap')) return 'three';
+    if (html.includes('paper-full.js')) return 'svg';
+    if (html.includes('ml5')) return 'ml5-hand';
+    if (html.includes('p5.js')) return 'default';
+    // GLSL uses WebGL directly
+    if (html.includes('webgl') || html.includes('WebGL') || html.includes('gl.createShader')) return 'glsl';
+    // Check sketch.js for WebGL patterns
+    const sketch = fs.readFileSync('scripts/sketch.js', 'utf8');
+    if (sketch.includes('getContext(\\'webgl\\')') || sketch.includes('gl.createShader')) return 'glsl';
+    return 'default';
+}
+
+function transformThreeJsSketch(sketch) {
+    // Remove ES6 import statement
+    let transformed = sketch.replace(/import\\s+\\*\\s+as\\s+THREE\\s+from\\s+['\"]three['\"];?\\n?/g, '');
+    transformed = transformed.replace(/import\\s+\\{[^}]+\\}\\s+from\\s+['\"]three['\"];?\\n?/g, '');
+    return transformed;
+}
+
+function buildHtml(originalHtml, options) {
+    const { library, sketch, random, templateType } = options;
+
+    // Extract the style content
+    const styleMatch = originalHtml.match(/<style>([\\s\\S]*?)<\\/style>/);
+    const styles = styleMatch ? styleMatch[1] : '';
+
+    // Extract title
+    const titleMatch = originalHtml.match(/<title>([^<]*)<\\/title>/);
+    const title = titleMatch ? titleMatch[1] : 'Generative Sketch';
+
+    // Build based on template type
+    if (templateType === 'three') {
+        // Three.js needs special handling - wrap library as IIFE
+        const wrappedLibrary = wrapThreeJsAsGlobal(library);
+        return \`<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>\${title}</title>
+    <style>\${styles}</style>
+</head>
+<body>
+    <script>\${wrappedLibrary}</script>
+    <script>\${random}</script>
+    <script>\${sketch}</script>
+</body>
+</html>\`;
+    }
+
+    if (templateType === 'ml5-hand') {
+        // Keep CDN reference for ML5
+        return \`<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>\${title}</title>
+    <style>\${styles}</style>
+</head>
+<body>
+    <div id="container">
+        <video id="video" autoplay playsinline></video>
+        <canvas id="canvas"></canvas>
+        <div id="status">Initializing...</div>
+    </div>
+    <script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>
+    <script>\${random}</script>
+    <script>\${sketch}</script>
+</body>
+</html>\`;
+    }
+
+    if (templateType === 'svg') {
+        // Paper.js template
+        return \`<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>\${title}</title>
+    <style>\${styles}</style>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+    <script>\${library}</script>
+    <script>\${random}</script>
+    <script>\${sketch}</script>
+</body>
+</html>\`;
+    }
+
+    if (templateType === 'glsl') {
+        // GLSL template - no library
+        return \`<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>\${title}</title>
+    <style>\${styles}</style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <script>\${random}</script>
+    <script>\${sketch}</script>
+</body>
+</html>\`;
+    }
+
+    // Default p5.js template
+    return \`<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>\${title}</title>
+    <style>\${styles}</style>
+</head>
+<body>
+    <script>\${library}</script>
+    <script>\${random}</script>
+    <script>\${sketch}</script>
+</body>
+</html>\`;
+}
+
+function wrapThreeJsAsGlobal(threeCode) {
+    // Wrap Three.js module code to expose THREE as global
+    // The three.module.js exports everything, we capture it
+    return \`(function() {
+    var exports = {};
+    var module = { exports: exports };
+    (function(exports, module) {
+        \${threeCode}
+    })(exports, module);
+    window.THREE = exports.THREE || exports;
+    // Also expose common exports directly
+    if (exports.Scene) window.THREE = exports;
+})();\`;
+}
+
+build().catch(err => {
+    console.error('Build failed:', err);
+    process.exit(1);
+});
+`;

package/{templates.js → templates/default.js}

@@ -76,5 +76,6 @@ class Random {
     }
   }
   
-    `
-} 
+    `, 
+  colorContent: `let a = ['CDCDCD', 'FF0000', 'FFA500', 'FFFF00', '008000', '0000FF', '4B0082', 'EE82EE'];`
+}