selkie 1.0.0 → 1.1.0

package/README.md

@@ -1,19 +1,64 @@
-# 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
 ```
 
+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,8 +6,8 @@ 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, buildScriptContent } from './templates/templates.js';
+import { packageJsonContent, svgPackageJsonContent, threePackageJsonContent, glslPackageJsonContent, ml5HandTrackingPackageJsonContent } from './package_details.js';
 
 // Convert import.meta.url to a file path
 const __filename = fileURLToPath(import.meta.url);
@@ -45,15 +45,36 @@ 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 {
-            throw new Error('Unknown template type');
+            throw new Error('Unknown template type. Available templates: default, svg, three, glsl, ml5-hand');
         }
 
         // Create index.html
@@ -61,33 +82,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,23 +1,45 @@
 {
   "name": "selkie",
-  "version": "1.0.0",
-  "description": "Simple generative template creation",
+  "version": "1.1.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"
+    "p5": "^1.9.4",
+    "paper": "^0.12.18",
+    "three": "^0.170.0"
   },
   "devDependencies": {
     "live-server": "^1.2.2"

package/package_details.js

@@ -5,16 +5,95 @@ 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 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"
+}`;