fragment-tools 0.1.11 → 0.1.13

package/.prettierignore

@@ -0,0 +1,5 @@
+LICENSE.md
+pnpm-lock.yaml
+pnpm-workspace.yaml
+package.json
+/docs

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+    "semi": true,
+    "tabWidth": 4,
+    "useTabs": true,
+    "singleQuote": true,
+    "printWidth": 80,
+    "bracketSpacing": true,
+    "trailingComma": "all"
+}

package/bin/index.js

@@ -1,19 +1,20 @@
 #!/usr/bin/env node
 
-import sade from "sade";
-import { run } from "../src/cli/index.js";
+import sade from 'sade';
+import { run } from '../src/cli/index.js';
 
 sade('fragment [entry]')
-    .version('0.1.0')
-    .describe('Run a dev environment for fragment')
-    .option('-n, --new', 'Create file if it does not exist', false)
-    .option('-t, --template', 'Specify template to create the file from', '2d')
-    .option('-p, --port', 'Port to bind', 3000)
-    .option('-dev, --development', 'Enable development mode', false)
-    .option('-b, --build', 'Build sketch for production', false)
-    .option('--outDir', 'Directory used for static build', null)
-    .option('--emptyOutDir', "Empty outDir before static build", false)
-    .action((entry, options) => {
-        run(entry, options);
-    })
-    .parse(process.argv);
+	.version('0.1.13')
+	.describe('Run a dev environment for fragment')
+	.option('-n, --new', 'Create file if it does not exist', false)
+	.option('-t, --template', 'Specify template to create the file from', '2d')
+	.option('-p, --port', 'Port to bind', 3000)
+	.option('-dev, --development', 'Enable development mode', false)
+	.option('-b, --build', 'Build sketch for production', false)
+	.option('--exportDir', 'Directory used for exports', process.cwd())
+	.option('--outDir', 'Directory used for static build', null)
+	.option('--emptyOutDir', 'Empty outDir before static build', false)
+	.action((entry, options) => {
+		run(entry, options);
+	})
+	.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {
@@ -25,6 +25,7 @@
     "chokidar": "^3.5.2",
     "convert-length": "^1.0.1",
     "get-port": "^6.0.0",
+    "gifenc": "^1.0.3",
     "glslify": "^7.1.1",
     "kleur": "^4.1.4",
     "sade": "^1.7.4",

package/src/cli/plugins/screenshot.js

@@ -1,26 +1,41 @@
 import path from "path";
-import fs from "fs";
+import fs from "fs/promises";
+import fsSync from "fs";
 import bodyParser from "body-parser";
+import log from "../log.js";
+
+export default function screenshot({ cwd, exportDir = cwd }) {
+	let dir = (path.isAbsolute(exportDir) ? exportDir : path.join(cwd, exportDir));
 
-export default function screenshot({ cwd }) {
 	return {
 		name: 'screenshot',
 		configureServer(server){
 			server.middlewares.use(bodyParser.json({ limit: '100mb'}))
-			server.middlewares.use('/save', (req, res, next) => {
+			server.middlewares.use('/save', async (req, res, next) => {
 				if (req.method === "POST") {
 					const { filename, dataURL } = req.body;
 
-					const filepath = path.join(cwd, filename);
+					const filepath = path.join(dir, filename);
 					const buffer = Buffer.from(dataURL, 'base64');
 
-					fs.writeFile(filepath, buffer, (error) => {
-						let statusCode = error ? 500 : 200;
-						let body = error ? { error } : { filepath };
+					if (!fsSync.existsSync(dir)) {
+						try {
+							await fs.mkdir(dir, { recursive: true });
+						} catch(error) {
+							log.error('Cannot create directory for exports');
+							console.log(error);
+						}
+					}
+
+					try {
+						await fs.writeFile(filepath, buffer);
 
-						res.writeHead(statusCode, {'Content-Type': 'application/json'});
-						res.end(JSON.stringify(body));
-					});
+						res.writeHead(200, {'Content-Type': 'application/json'});
+						res.end(JSON.stringify({ filepath }));
+					} catch(error) {
+						res.writeHead(500, {'Content-Type': 'application/json'});
+						res.end(JSON.stringify({ error }));
+					}
 				} else {
 					next();
 				}

package/src/cli/server.js

@@ -1,6 +1,5 @@
 import path from "path";
-import os from 'os';
-import fs from "fs/promises";
+import kleur from "kleur";
 import { fileURLToPath } from 'url';
 import { createServer, defineConfig, build } from "vite";
 import { svelte } from '@sveltejs/vite-plugin-svelte'
@@ -62,7 +61,7 @@ export async function start({ options, filepaths, entries, fragment }) {
                 }
             },
             dbPlugin(),
-            screenshotPlugin({ cwd }),
+            screenshotPlugin({ cwd, exportDir: options.exportDir }),
             checkDependencies({
                 cwd,
                 app,
@@ -83,7 +82,9 @@ export async function start({ options, filepaths, entries, fragment }) {
             '__FRAGMENT_PORT__': fragment.server ? fragment.server.port : undefined,
             '__START_TIME__': Date.now(),
             '__SEED__': Date.now(),
-            '__PRODUCTION__': options.build,
+            '__BUILD__': options.build,
+            '__DEV__': !options.build,
+
         },
         optimizeDeps: {
             include: ['convert-length', 'webm-writer', 'changedpi'],
@@ -127,19 +128,25 @@ export async function start({ options, filepaths, entries, fragment }) {
         });
 
         await server.listen();
+        
         log.success(`Server started at:`);
 
-        Object.values(os.networkInterfaces())
-            .flatMap((nInterface) => nInterface ?? [])
-            .filter((detail) => detail && detail.address && (detail.family === 'IPv4' || detail.family === 4 ))
-            .forEach((detail) => {
-                const type = detail.address.includes('127.0.0.1')
-                ? 'Local:   '
-                : 'Network: '
-                const host = detail.address.replace('127.0.0.1', 'localhost');
-                const url = `http://${host}:${server.config.server.port}`;
-                console.log(`   ${type} ${url}`);
-            })
+        const { resolvedUrls } = server;
+
+        for (const url of resolvedUrls.local) {
+            console.log(
+                `  ${kleur.green('➜')}  ${kleur.bold('Local')}:   ${kleur.cyan(
+                    url,
+                )}`,
+            );
+        }
+        for (const url of resolvedUrls.network) {
+            console.log(
+                `  ${kleur.green('➜')}  ${kleur.bold('Network')}: ${kleur.cyan(
+                    url,
+                )}`,
+            );
+        }
 
         return server;
     }

package/src/cli/templates/blank.js

@@ -0,0 +1,13 @@
+export let props = {};
+
+export let init = ({ canvas, width, height }) => {
+
+};
+
+export let update = ({ width, height, time, deltaTime }) => {
+	
+};
+
+export let resize = ({ width, height, pixelRatio }) => {
+
+};

package/src/cli/templates/index.js

@@ -1,4 +1,7 @@
 const templates = {
+	"blank": [
+		"./templates/blank.js"
+	],
 	"2d": [
 		"./templates/2d.js"
 	],

package/src/client/app/lib/canvas-recorder/CanvasRecorder.js

@@ -49,7 +49,7 @@ class CanvasRecorder {
 	}
 
 	async _tick() {
-		console.log(`CanvasRecorder - render frame ${this.frameCount}`);
+		console.log(`CanvasRecorder - render frame ${this.frameCount + 1}`);
 		this.onTick({
 			time: this.time,
 			deltaTime: this.deltaTime,
@@ -61,14 +61,14 @@ class CanvasRecorder {
 			frameCount: this.frameCount,
 		});
 
-		if (this.started && !this.stopped && (!isFinite(this.frameTotal) || (isFinite(this.frameTotal) && this.frameCount < this.frameTotal))) {
+		if (this.started && !this.stopped && (!isFinite(this.frameTotal) || (isFinite(this.frameTotal) && this.frameCount < this.frameTotal - 1))) {
 			this.time += this.deltaTime;
         	this.frameCount++;
             requestAnimationFrame(() => {
 				this._tick()
 			});
         } else {
-			console.log(`CanvasRecorder - compiling ${this.frameCount} frames...`);
+			console.log(`CanvasRecorder - compiling ${this.frameCount + 1} frames...`);
             this.end();
         }
 	}
@@ -76,7 +76,7 @@ class CanvasRecorder {
 	tick() {}
 
 	end() {
-		console.log(`CanvasRecorder - compiled ${this.frameCount} frames`);
+		console.log(`CanvasRecorder - compiled ${this.frameCount + 1} frames`);
 		this.onComplete(this.result);
 	}
 

package/src/client/app/lib/canvas-recorder/GIFRecorder.js

@@ -1,51 +1,46 @@
-import { map } from "../../utils/math.utils";
-import { loadScript } from "../loader/loadScript";
-import CanvasRecorder from "./CanvasRecorder";
+import { map } from '../../utils/math.utils';
+import { GIFEncoder, quantize, applyPalette } from 'gifenc';
+import CanvasRecorder from './CanvasRecorder';
 
 class GIFRecorder extends CanvasRecorder {
+	start() {
+		this.encoder = GIFEncoder();
 
-	static loaded = false;
+		this.tmpCanvas = document.createElement('canvas');
+		this.tmpContext = this.tmpCanvas.getContext('2d');
 
-	async load() {
-		if (!GIFRecorder.loaded) {
-			await loadScript('/js/gif.worker.js');
-			await loadScript('/js/gif.js');
+		this.maxColors = Math.floor(map(this.quality, 1, 100, 1, 256));
 
-			GIFRecorder.loaded = true;
-		}
-
-		const quality = map(this.quality, 1, 100, 10, 0);
+		super.start();
+	}
 
-		this.writer = new GIF({
-			workerScript: '/js/gif.worker.js',
-			workers: 4,
-			quality,
-			width: this.canvas.width,
-			height: this.canvas.height,
-		});
+	getBitmapRGBA(bitmap, width = bitmap.width, height = bitmap.height) {
+		this.tmpCanvas.width = width;
+		this.tmpCanvas.height = height;
+		this.tmpContext.clearRect(0, 0, width, height);
+		this.tmpContext.drawImage(bitmap, 0, 0, width, height);
+		return this.tmpContext.getImageData(0, 0, width, height).data;
 	}
 
 	tick() {
-		this.writer.addFrame(this.canvas, { copy: true, delay: this.frameDuration });
-	}
+		const { width, height } = this.canvas;
 
-	end() {
-		return new Promise((resolve, reject) => {
-			this.writer.on('finished', (result) => {
-				this.result = result;
-				this.writer = null;
+		const pixels = this.getBitmapRGBA(this.canvas, width, height);
+		const palette = quantize(pixels, this.maxColors);
+		const index = applyPalette(pixels, palette);
 
-				super.end();
+		this.encoder.writeFrame(index, width, height, {
+			palette: palette,
+			delay: this.frameDuration,
+		});
+	}
 
-				resolve();
-			});
+	end() {
+		this.encoder.finish();
 
-			this.writer.on('error', (err) => {
-				reject(err);
-			});
+		this.result = new Blob([this.encoder.bytes()], { type: 'image/gif' });
 
-			this.writer.render();
-		});
+		super.end();
 	}
 }
 

package/src/client/app/lib/gl/Renderer.js

@@ -1,148 +1,160 @@
 class Renderer {
+  constructor({
+    canvas = document.createElement("canvas"),
+    antialias = false,
+    alpha = true,
+    depth = false,
+    stencil = false,
+    premultipliedAlpha = false,
+    pixelRatio = window.devicePixelRatio,
+    webgl = 2,
+  }) {
+    let gl;
+    let attributes = {
+      depth,
+      stencil,
+      antialias,
+      alpha,
+      premultipliedAlpha,
+      preserveDrawingBuffer: true,
+    };
+
+    this.canvas = canvas;
+
+    if (webgl === 2) gl = canvas.getContext("webgl2", attributes);
+    if (!gl) {
+      gl =
+        canvas.getContext("webgl", attributes) ||
+        canvas.getContext("experimental-webgl", attributes);
+    }
 
-	constructor({
-		canvas = document.createElement('canvas'),
-		antialias = false,
-		alpha = true,
-		depth = false,
-		stencil = false,
-		premultipliedAlpha = false,
-		pixelRatio = window.devicePixelRatio,
-		webgl = 2,
-	}) {
-		let gl;
-		let attributes = {
-			depth,
-			stencil,
-			antialias,
-			alpha,
-			premultipliedAlpha,
-			preserveDrawingBuffer: true
-		};
-
-		this.canvas = canvas;
-
-		if (webgl === 2) gl = canvas.getContext('webgl2', attributes);
-		if (!gl) {
-			gl = canvas.getContext('webgl', attributes) || canvas.getContext('experimental-webgl', attributes);
-		}
-
-		this.gl = gl;
-
-		this.state = {
-			activeTextureUnit: 0,
-			textureUnits: [],
-			flipY: false,
-			viewport: { width: 0, height: 0 },
-			pixelRatio,
-			width: 0,
-			height: 0,
-		};
-		this.gl.state = this.state;
-	}
-
-    render({
-        geometry,
-        program,
-        primitiveType = this.gl.TRIANGLES,
-        offset = 0,
-        count = 3
-    }) {
-        if (program.needsUpdate) {
-            program.compile();
-        }
+    this.gl = gl;
+
+    this.state = {
+      activeTextureUnit: 0,
+      textureUnits: [],
+      flipY: false,
+      viewport: { width: 0, height: 0 },
+      pixelRatio,
+      width: 0,
+      height: 0,
+    };
+    this.gl.state = this.state;
+  }
+
+  render({
+    geometry,
+    program,
+    primitiveType = this.gl.TRIANGLES,
+    offset = 0,
+    count = 3,
+  }) {
+    if (program.needsUpdate) {
+      program.compile();
+    }
 
-        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-
-        this.gl.useProgram(program._program);
-
-        for (let attributeName in program.attributesLocations) {
-            let location = program.attributesLocations[attributeName];
-            let buffer = geometry.buffers[attributeName];
-
-            this.gl.enableVertexAttribArray(location);
-            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
-
-            const size = 2; // 2 components per iteration
-            const type = this.gl.FLOAT; // the data is 32bit floats
-            const normalize = false; // don't normalize the data
-            const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
-            const bufferOffset = 0; // start at the beginning of the buffer
-            this.gl.vertexAttribPointer(
-                location,
-                size,
-                type,
-                normalize,
-                stride,
-                bufferOffset
-            );
-        }
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+    this.gl.useProgram(program._program);
+
+    for (let attributeName in program.attributesLocations) {
+      let location = program.attributesLocations[attributeName];
+      let buffer = geometry.buffers[attributeName];
+
+      this.gl.enableVertexAttribArray(location);
+      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+
+      const size = 2; // 2 components per iteration
+      const type = this.gl.FLOAT; // the data is 32bit floats
+      const normalize = false; // don't normalize the data
+      const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
+      const bufferOffset = 0; // start at the beginning of the buffer
+      this.gl.vertexAttribPointer(
+        location,
+        size,
+        type,
+        normalize,
+        stride,
+        bufferOffset
+      );
+    }
 
-        let textureUnit = -1;
-
-        for (let uniformName in program.uniforms) {
-            let location = program.uniformsLocations[uniformName];
-            if (location) {
-                let uniform = program.uniforms[uniformName];
-
-                if (uniform.type === 'float') {
-                    this.gl.uniform1f(location, uniform.value);
-                } else if (uniform.type === 'vec2') {
-                    this.gl.uniform2f(location, uniform.value[0], uniform.value[1]);
-                } else if (uniform.type === 'vec3') {
-                    this.gl.uniform3f(location, uniform.value[0], uniform.value[1], uniform.value[2]);
-                } else if (uniform.type === 'vec4') {
-                    this.gl.uniform4f(location, uniform.value[0], uniform.value[1], uniform.value[2], uniform.value[3]);
-                } else if (uniform.type === 'sampler2D') {
-                    if (uniform.value) {
-                        textureUnit = textureUnit + 1;
-                        uniform.value.update(textureUnit);
-    
-                        this.gl.uniform1i(location, textureUnit);
-                    }
-                }
-            }
+    let textureUnit = -1;
+
+    for (let uniformName in program.uniforms) {
+      let location = program.uniformsLocations[uniformName];
+      if (location) {
+        let uniform = program.uniforms[uniformName];
+
+        if (uniform.type === "float") {
+          this.gl.uniform1f(location, uniform.value);
+        } else if (uniform.type === "vec2") {
+          this.gl.uniform2f(location, uniform.value[0], uniform.value[1]);
+        } else if (uniform.type === "vec3") {
+          this.gl.uniform3f(
+            location,
+            uniform.value[0],
+            uniform.value[1],
+            uniform.value[2]
+          );
+        } else if (uniform.type === "vec4") {
+          this.gl.uniform4f(
+            location,
+            uniform.value[0],
+            uniform.value[1],
+            uniform.value[2],
+            uniform.value[3]
+          );
+        } else if (uniform.type === "sampler2D") {
+          if (uniform.value) {
+            textureUnit = textureUnit + 1;
+            uniform.value.update(textureUnit);
+
+            this.gl.uniform1i(location, textureUnit);
+          }
         }
-
-        this.gl.drawArrays(primitiveType, offset, count);
+      }
     }
 
-    setPixelRatio(pixelRatio = this.state.pixelRatio) {
-        if (this.state.pixelRatio !== pixelRatio) {
-            this.state.pixelRatio = pixelRatio;
-        	this.setSize();
-        }
+    this.gl.drawArrays(primitiveType, offset, count);
+  }
+
+  setPixelRatio(pixelRatio = this.state.pixelRatio) {
+    if (this.state.pixelRatio !== pixelRatio) {
+      this.state.pixelRatio = pixelRatio;
+      this.setSize();
     }
+  }
 
-    setSize({ width = this.state.width, height = this.state.height } = {}) {
-        this.state.width = width;
-        this.state.height = height;
+  setSize({ width = this.state.width, height = this.state.height } = {}) {
+    this.state.width = width;
+    this.state.height = height;
 
-        this.canvas.width = this.state.width * this.state.pixelRatio;
-        this.canvas.height = this.state.height * this.state.pixelRatio;
+    this.canvas.width = this.state.width * this.state.pixelRatio;
+    this.canvas.height = this.state.height * this.state.pixelRatio;
 
-        this.setViewport();
-    }
+    this.setViewport();
+  }
 
-    setViewport({ width = this.state.width, height = this.state.height } = {}) {
-        let w = Math.floor(width * this.state.pixelRatio);
-        let h = Math.floor(height * this.state.pixelRatio);
+  setViewport({ width = this.state.width, height = this.state.height } = {}) {
+    let w = Math.floor(width * this.state.pixelRatio);
+    let h = Math.floor(height * this.state.pixelRatio);
 
-        if (this.state.viewport.width !== w || this.state.viewport.height !== h) {
-            this.gl.viewport(0, 0, w, h);
+    if (this.state.viewport.width !== w || this.state.viewport.height !== h) {
+      this.gl.viewport(0, 0, w, h);
 
-            this.state.viewport.width = w;
-            this.state.viewport.height = h;
-        }
+      this.state.viewport.width = w;
+      this.state.viewport.height = h;
     }
+  }
 
-    destroy() {
-        let extension = this.gl.getExtension('WEBGL_lose_context');
+  destroy() {
+    let extension = this.gl.getExtension("WEBGL_lose_context");
 
-        if (extension) {
-            extension.loseContext();
-        }
+    if (extension) {
+      extension.loseContext();
     }
+  }
 }
 
 export default Renderer;

package/src/client/app/stores/exports.js

@@ -20,7 +20,7 @@ export const exports = createStore(`exports`, {
 	imageQuality: 100,
 	videoQuality: 100,
 }, {
-	persist: !__PRODUCTION__,
+	persist: !__BUILD__,
 	reset: false,
 });
 

package/src/client/app/stores/layout.js

@@ -3,7 +3,7 @@ import { getStore, createStore } from "./utils";
 import { onMount } from "svelte";
 
 export const tree = getStore("layout.current", {}, {
-    persist: !__PRODUCTION__
+    persist: !__BUILD__
 });
 
 export const layout = createStore('layout', {

package/src/client/app/stores/multisampling.js

@@ -1,16 +1,16 @@
 import { createStore } from "./utils";
 
 export const multisampling = createStore("multisampling", [], {
-	persist: !__PRODUCTION__,
+	persist: !__BUILD__,
 	reset: true,
 });
 
 export const threshold = createStore("threshold", 0, {
-	persist: !__PRODUCTION__,
+	persist: !__BUILD__,
 	reset: false,
 });
 
 export const transition = createStore("transition", false, {
-	persist: !__PRODUCTION__,
+	persist: !__BUILD__,
 	reset: false,
 });