selkie 1.1.0 → 1.2.0

package/README.md

@@ -20,6 +20,7 @@ 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.

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, svgTemplate, threeTemplate, glslTemplate, ml5HandTrackingTemplate, buildScriptContent } from './templates/templates.js';
-import { packageJsonContent, svgPackageJsonContent, threePackageJsonContent, glslPackageJsonContent, ml5HandTrackingPackageJsonContent } 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);
 
@@ -73,8 +76,13 @@ async function createProject() {
             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. Available templates: default, svg, three, glsl, ml5-hand');
+            throw new Error('Unknown template type. Available templates: default, svg, three, glsl, ml5-hand, pressure');
         }
 
         // Create index.html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selkie",
-  "version": "1.1.0",
+  "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",
@@ -40,8 +40,5 @@
     "p5": "^1.9.4",
     "paper": "^0.12.18",
     "three": "^0.170.0"
-  },
-  "devDependencies": {
-    "live-server": "^1.2.2"
   }
 }

package/package_details.js

@@ -20,6 +20,27 @@ export const packageJsonContent = `{
     "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",

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/default.js

@@ -0,0 +1,81 @@
+export const template =  {
+    htmlContent: 
+     `<!DOCTYPE html>
+    <html>
+    <head>
+        <title>p5.js Sketch</title>
+        <script src="scripts/p5.js"></script>
+        <script src="scripts/sketch.js"></script>
+        <script src="scripts/random.js"></script>
+    </head>
+    <body>
+    </body>
+    </html>`, 
+    sketchContent: `function setup() {
+        createCanvas(400, 400);
+    }
+    
+    function draw() {
+        background(220);
+    }`, 
+    randomContent: `
+    // RANDOM Class ////////////////////////////////////////////////////////////
+class Random {
+    constructor () {
+      this.useA = false;
+      let sfc32 = function (uint128Hex) {
+        let a = parseInt (uint128Hex.substr (0, 8), 16);
+        let b = parseInt (uint128Hex.substr (8, 8), 16);
+        let c = parseInt (uint128Hex.substr (16, 8), 16);
+        let d = parseInt (uint128Hex.substr (24, 8), 16);
+        return function () {
+          a |= 0;
+          b |= 0;
+          c |= 0;
+          d |= 0;
+          let t = (((a + b) | 0) + d) | 0;
+          d = (d + 1) | 0;
+          a = b ^ (b >>> 9);
+          b = (c + (c << 3)) | 0;
+          c = (c << 21) | (c >>> 11);
+          c = (c + t) | 0;
+          return (t >>> 0) / 4294967296;
+        };
+      };
+      // seed prngA with first half of tokenData.hash
+      this.prngA = new sfc32 (tokenData.hash.substr (2, 32));
+      // seed prngB with second half of tokenData.hash
+      this.prngB = new sfc32 (tokenData.hash.substr (34, 32));
+      for (let i = 0; i < 1e6; i += 2) {
+        this.prngA ();
+        this.prngB ();
+      }
+    }
+    // random number between 0 (inclusive) and 1 (exclusive)
+    random_dec () {
+      this.useA = !this.useA;
+      return this.useA ? this.prngA () : this.prngB ();
+    }
+    // random number between a (inclusive) and b (exclusive)
+    random_num (a, b) {
+      return a + (b - a) * this.random_dec ();
+    }
+    // random integer between a (inclusive) and b (inclusive)
+    // requires a < b for proper probability distribution
+    random_int (a, b) {
+      return Math.floor (this.random_num (a, b + 1));
+    }
+  
+    // random boolean with p as percent liklihood of true
+    random_bool (p) {
+      return this.random_dec () < p;
+    }
+    // random value in an array of items
+    random_choice (list) {
+      return list[this.random_int (0, list.length - 1)];
+    }
+  }
+  
+    `, 
+  colorContent: `let a = ['CDCDCD', 'FF0000', 'FFA500', 'FFFF00', '008000', '0000FF', '4B0082', 'EE82EE'];`
+}

package/templates/glsl.js

@@ -0,0 +1,251 @@
+export const glslTemplate = {
+    htmlContent: `<!DOCTYPE html>
+<html>
+<head>
+    <title>GLSL Shader Sketch</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background: #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+        canvas {
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <script src="scripts/random.js"></script>
+    <script src="scripts/sketch.js"></script>
+</body>
+</html>`,
+    sketchContent: `// WebGL setup
+const canvas = document.getElementById('canvas');
+const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+
+if (!gl) {
+    alert('WebGL not supported');
+}
+
+// Set canvas size
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+gl.viewport(0, 0, canvas.width, canvas.height);
+
+// Vertex shader source
+const vertexShaderSource = \`
+attribute vec2 a_position;
+varying vec2 v_uv;
+
+void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+    v_uv = a_position * 0.5 + 0.5;
+}
+\`;
+
+// Fragment shader source
+const fragmentShaderSource = \`
+precision mediump float;
+uniform float u_time;
+uniform vec2 u_resolution;
+varying vec2 v_uv;
+
+void main() {
+    vec2 uv = v_uv;
+    
+    // Example: Animated gradient
+    vec3 color = vec3(
+        sin(uv.x * 3.14 + u_time) * 0.5 + 0.5,
+        sin(uv.y * 3.14 + u_time * 0.7) * 0.5 + 0.5,
+        sin((uv.x + uv.y) * 2.0 + u_time * 1.3) * 0.5 + 0.5
+    );
+    
+    gl_FragColor = vec4(color, 1.0);
+}
+\`;
+
+// Compile shader
+function compileShader(source, type) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error('Shader compilation error:', gl.getShaderInfoLog(shader));
+        gl.deleteShader(shader);
+        return null;
+    }
+    
+    return shader;
+}
+
+// Create shader program
+function createProgram(vertexSource, fragmentSource) {
+    const vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
+    const fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);
+    
+    if (!vertexShader || !fragmentShader) {
+        return null;
+    }
+    
+    const program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error('Program linking error:', gl.getProgramInfoLog(program));
+        gl.deleteProgram(program);
+        return null;
+    }
+    
+    return program;
+}
+
+// Create full-screen quad
+function createQuad() {
+    const positions = new Float32Array([
+        -1, -1,
+         1, -1,
+        -1,  1,
+        -1,  1,
+         1, -1,
+         1,  1,
+    ]);
+    
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+    return buffer;
+}
+
+// Initialize
+const program = createProgram(vertexShaderSource, fragmentShaderSource);
+const quadBuffer = createQuad();
+
+if (!program) {
+    alert('Failed to create shader program');
+}
+
+// Get attribute and uniform locations
+const positionLocation = gl.getAttribLocation(program, 'a_position');
+const timeLocation = gl.getUniformLocation(program, 'u_time');
+const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
+
+// Animation loop
+let startTime = Date.now();
+
+function animate() {
+    requestAnimationFrame(animate);
+    
+    const currentTime = (Date.now() - startTime) / 1000.0;
+    
+    // Clear
+    gl.clearColor(0, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    
+    // Use program
+    gl.useProgram(program);
+    
+    // Set uniforms
+    gl.uniform1f(timeLocation, currentTime);
+    gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
+    
+    // Set up quad
+    gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+    gl.enableVertexAttribArray(positionLocation);
+    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+    
+    // Draw
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+
+// Handle window resize
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    gl.viewport(0, 0, canvas.width, canvas.height);
+});
+
+// Start animation
+animate();
+
+// Export PNG function - call this from console: exportPNG()
+window.exportPNG = function(filename) {
+    filename = filename || 'sketch.png';
+    const link = document.createElement('a');
+    link.href = canvas.toDataURL('image/png');
+    link.download = filename;
+    link.click();
+    console.log('PNG exported as ' + filename);
+};
+
+// Keyboard shortcut: Press 's' to save PNG
+document.addEventListener('keydown', function(e) {
+    if (e.key === 's' && !e.ctrlKey && !e.metaKey) {
+        window.exportPNG();
+    }
+});`,
+    randomContent: `// RANDOM Class ////////////////////////////////////////////////////////////
+class Random {
+    constructor(seed) {
+        this.seed = seed || Math.random().toString(16).substr(2, 32).padEnd(32, '0') +
+                          Math.random().toString(16).substr(2, 32).padEnd(32, '0');
+        this.useA = false;
+        let sfc32 = function(uint128Hex) {
+            let a = parseInt(uint128Hex.substr(0, 8), 16);
+            let b = parseInt(uint128Hex.substr(8, 8), 16);
+            let c = parseInt(uint128Hex.substr(16, 8), 16);
+            let d = parseInt(uint128Hex.substr(24, 8), 16);
+            return function() {
+                a |= 0; b |= 0; c |= 0; d |= 0;
+                let t = (((a + b) | 0) + d) | 0;
+                d = (d + 1) | 0;
+                a = b ^ (b >>> 9);
+                b = (c + (c << 3)) | 0;
+                c = (c << 21) | (c >>> 11);
+                c = (c + t) | 0;
+                return (t >>> 0) / 4294967296;
+            };
+        };
+        this.prngA = new sfc32(this.seed.substr(0, 32));
+        this.prngB = new sfc32(this.seed.substr(32, 32));
+        for (let i = 0; i < 1e6; i += 2) {
+            this.prngA();
+            this.prngB();
+        }
+    }
+
+    random_dec() {
+        this.useA = !this.useA;
+        return this.useA ? this.prngA() : this.prngB();
+    }
+
+    random_num(a, b) {
+        return a + (b - a) * this.random_dec();
+    }
+
+    random_int(a, b) {
+        return Math.floor(this.random_num(a, b + 1));
+    }
+
+    random_bool(p) {
+        return this.random_dec() < p;
+    }
+
+    random_choice(list) {
+        return list[this.random_int(0, list.length - 1)];
+    }
+}
+
+// Global random instance
+var R = new Random();`
+}