begin tilt and quill loaders

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+

build/build.bat

@@ -7,7 +7,7 @@ cd /D %~dp0
 
 del %BUILD_TARGET%
 
-copy /b latk-header.js+libraries\jszip\jszip.min.js+libraries\jszip\jszip-utils.min.js+latk-point.js+latk-stroke.js+latk-frame.js+latk-layer.js+latk-main.js %BUILD_TARGET%
+copy /b latk-header.js+libraries\jszip\jszip.min.js+libraries\jszip\jszip-utils.min.js+latk-tilt.js+latk-quill.js+latk-point.js+latk-stroke.js+latk-frame.js+latk-layer.js+latk-main.js %BUILD_TARGET%
 
 uglifyjs %BUILD_TARGET% --compress --mangle --output %BUILD_TARGET_MIN%
 

build/build.command

@@ -16,7 +16,7 @@ cd $DIR
 rm $BUILD_TARGET
 touch $BUILD_TARGET
 
-cat "latk-header.js" "libraries/jszip/jszip.min.js" "libraries/jszip/jszip-utils.min.js" "latk-point.js" "latk-stroke.js" "latk-frame.js" "latk-layer.js" "latk-main.js" > $BUILD_TARGET
+cat "latk-header.js" "libraries/jszip/jszip.min.js" "libraries/jszip/jszip-utils.min.js" "latk-tilt.js" "latk-quill.js" "latk-point.js" "latk-stroke.js" "latk-frame.js" "latk-layer.js" "latk-main.js" > $BUILD_TARGET
 
 uglifyjs $BUILD_TARGET --compress --mangle --output $BUILD_TARGET_MIN
 

build/latk-frame.js

@@ -1,4 +1,6 @@
 
+// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
+
 class LatkFrame {
 
     constructor(frame_number) {

build/latk-header.js

@@ -5,7 +5,7 @@ The Lightning Artist Toolkit was developed with support from:
    Ontario Arts Council
    Toronto Arts Council
    
-Copyright (c) 2020 Nick Fox-Gieg
+Copyright (c) 2023 Nick Fox-Gieg
 https://fox-gieg.com
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

build/latk-layer.js

@@ -1,4 +1,6 @@
 
+// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
+
 class LatkLayer {
 
     constructor(name) {

build/latk-main.js

@@ -1,5 +1,5 @@
 
-// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ;
+// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
 
 class Latk {
 
@@ -26,13 +26,15 @@ class Latk {
         }
     }
 
-    static read(animationPath) {
+    static read(url) {
         let latk = new Latk();
 
-        if (animationPath.split(".")[animationPath.split(".").length-1] === "json") {
+        let extension = url.split(".")[url.split(".").length-1].toLowerCase();
+
+        if (extension === "json") {
             let xobj = new XMLHttpRequest();
             xobj.overrideMimeType("application/json");
-            xobj.open('GET', animationPath, true);
+            xobj.open('GET', url, true);
             xobj.onreadystatechange = function() {
                 if (xobj.readyState == 4 && xobj.status == "200") {
                     // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
@@ -41,9 +43,9 @@ class Latk {
                     latk.ready = true;
                 }
             };
-            xobj.send(null);  
+            xobj.send(null); 
         } else {
-            JSZipUtils.getBinaryContent(animationPath, function(err, data) {
+            JSZipUtils.getBinaryContent(url, function(err, data) {
                 if (err) {
                     throw err; // or handle err
                 }

build/latk-point.js

@@ -1,5 +1,5 @@
 
-
+// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
 
 class LatkPoint {
 

build/latk-quill.js

@@ -0,0 +1,128 @@
+
+// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
+
+// Adapted from SharpQuill by @JoanCharmant
+
+class QuillLoader {
+
+	constructor() {
+		this.ready = false;
+		this.json;
+		this.bytes;
+		this.strokes = [];
+		this.numStrokes;
+	}
+
+	static read(url) {
+        let ql = new QuillLoader();
+
+            JSZipUtils.getBinaryContent(url, function(err, data) {
+                if (err) {
+                    throw err; // or handle err
+                }
+
+                let zip = new JSZip();
+                zip.loadAsync(data).then(function () {
+                    // https://github.com/Stuk/jszip/issues/375
+                    let entries = Object.keys(zip.files).map(function (name) {
+                      return zip.files[name];
+                    });
+
+					// A tilt zipfile should contain three items: thumbnail.png, data.sketch, metadata.json
+                    zip.file("Quill.json").async("string").then(function(response) {
+                        ql.json = JSON.parse(response);
+
+	                    zip.file("Quill.qbin").async("arraybuffer").then(function(response) {
+	                        ql.bytes = new Uint8Array(response);
+	                        ql.parse();
+	                        //console.log("read " + ql.bytes.length + " bytes");
+	                        ql.ready = true;
+	                    });
+                    });
+                });
+            });     
+
+	    return ql;
+    }
+
+	parse() {
+		const data = new DataView(this.bytes.buffer);
+
+		const children = this.json["Sequence"]["RootLayer"]["Implementation"]["Children"];
+
+		for (let i=0; i < children.length; i++) {
+  			const childNode = children[i];
+
+			// skip the child node if it contains no drawings
+			let drawingCount = 0;
+			try {
+				drawingCount = childNode["Implementation"]["Drawings"].length;
+			} catch (e) { 
+				continue;
+			}
+
+			for (let j=0; j < drawingCount; j++) {
+				const drawingNode  = childNode["Implementation"]["Drawings"][j];
+
+				const dataFileOffsetString = drawingNode["DataFileOffset"];
+
+				const dataFileOffset = parseInt("0x" + dataFileOffsetString);
+
+				const numNodeStrokes = data.getInt32(dataFileOffset, true);
+				this.numStrokes += numNodeStrokes;
+
+				let offset = dataFileOffset + 4;
+
+				for (let k = 0; k < numNodeStrokes; k++) {
+					offset += 36;
+
+					const numVertices = data.getInt32(offset, true);
+
+					const positions = [];
+					const colors = [];
+					const widths = [];
+
+					offset += 4;
+
+					for (let l = 0; l < numVertices; l++) {
+						const x = data.getFloat32(offset + 0, true); // x
+						const y = data.getFloat32(offset + 4, true); // y
+						const z = data.getFloat32(offset + 8, true); // z
+						positions.push(createVector(x, y, z));
+
+						offset += 36;
+
+						const r = data.getFloat32(offset + 0, true) * 255; // r
+						const g = data.getFloat32(offset + 4, true) * 255; // g
+						const b = data.getFloat32(offset + 8, true) * 255; // b
+						const a = data.getFloat32(offset + 12, true) * 255; // a
+						colors.push(color(r, g, b, a));
+
+						offset += 16;
+
+						widths.push(data.getFloat32(offset + 0, true));
+
+						offset += 4;
+					}
+
+					const brushSize = widths[parseInt(widths.length/2)];
+					const brushColor = colors[parseInt(colors.length/2)];
+					const quillStroke = new QuillStroke(positions, brushSize, brushColor);
+					this.strokes.push(quillStroke);
+				}
+			}
+		}
+	}
+
+}
+
+
+class QuillStroke {
+
+	constructor(_positions, _brushSize, _brushColor) {
+		this.positions = _positions;
+		this.brushSize = _brushSize;
+		this.brushColor = _brushColor;
+	}
+
+}

build/latk-stroke.js

@@ -1,4 +1,6 @@
 
+// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
+
 class LatkStroke {
 
     constructor(points, color, fill_color) {

build/latk-tilt.js

@@ -0,0 +1,118 @@
+
+// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
+
+// Adapted from three.js TiltLoader.
+
+class TiltLoader {
+
+	constructor() {
+		this.ready = false;
+		this.json;
+		this.bytes;
+		this.strokes = [];
+		this.numStrokes;
+	}
+
+	static read(url) {
+        let tl = new TiltLoader();
+
+            JSZipUtils.getBinaryContent(url, function(err, data) {
+                if (err) {
+                    throw err; // or handle err
+                }
+
+                let zip = new JSZip();
+                zip.loadAsync(data).then(function () {
+                    // https://github.com/Stuk/jszip/issues/375
+                    let entries = Object.keys(zip.files).map(function (name) {
+                      return zip.files[name];
+                    });
+
+					// A tilt zipfile should contain three items: thumbnail.png, data.sketch, metadata.json
+                    zip.file("metadata.json").async("string").then(function(response) {
+                        tl.json = JSON.parse(response);
+
+	                    zip.file("data.sketch").async("arraybuffer").then(function(response) {
+	                        tl.bytes = new Uint8Array(response);
+	                        tl.parse();
+	                        //console.log("read " + tl.bytes.length + " bytes");
+	                        tl.ready = true;
+	                    });
+                    });
+                });
+            });     
+
+	    return tl;
+    }
+
+	// https://docs.google.com/document/d/11ZsHozYn9FnWG7y3s3WAyKIACfbfwb4PbaS8cZ_xjvo/edit#
+	parse() {
+		const data = new DataView(this.bytes.buffer);
+
+		this.numStrokes = data.getInt32(16, true);
+
+		let offset = 20;
+
+		for (let i = 0; i < this.numStrokes; i++) {
+			const brushIndex = data.getInt32(offset, true);
+
+			let r = data.getFloat32(offset + 4, true) * 255;
+			let g = data.getFloat32(offset + 8, true) * 255;
+			let b = data.getFloat32(offset + 12, true) * 255;
+			let a = data.getFloat32(offset + 16, true) * 255;
+
+			const brushColor = color(r, g, b, a);
+
+			const brushSize = data.getFloat32(offset + 20, true);
+			const strokeMask = data.getUint32(offset + 24, true);
+			const controlPointMask = data.getUint32(offset + 28, true);
+
+			let offsetStrokeMask = 0;
+			let offsetControlPointMask = 0;
+
+			for (let j = 0; j < 4; j++) {
+				const byte = 1 << j;
+				if ((strokeMask & byte) > 0) offsetStrokeMask += 4;
+				if ((controlPointMask & byte) > 0) offsetControlPointMask += 4;
+			}
+
+			offset += 28 + offsetStrokeMask + 4; 
+
+			const numControlPoints = data.getInt32(offset, true);
+
+			let positions = []; //new Float32Array(numControlPoints * 3);
+			//let quaternions = []; //new Float32Array(numControlPoints * 4);
+
+			offset += 4;
+
+			for (let j = 0; j < numControlPoints; j++) {
+				let x = data.getFloat32(offset + 0, true);
+				let y = data.getFloat32(offset + 4, true);
+				let z = data.getFloat32(offset + 8, true);
+				positions.push(createVector(x, y, z));
+
+				//qw = data.getFloat32(offset + 12, true);
+				//qx = data.getFloat32(offset + 16, true);
+				//qy = data.getFloat32(offset + 20, true);
+				//qz = data.getFloat32(offset + 24, true);
+
+				offset += 28 + offsetControlPointMask; 
+			}
+
+			let tiltStroke = new TiltStroke(positions, brushSize, brushColor);
+			this.strokes.push(tiltStroke);
+		}
+	}
+
+}
+
+
+class TiltStroke {
+
+	constructor(_positions, _brushSize, _brushColor) {
+		this.positions = _positions;
+		this.brushSize = _brushSize;
+		this.brushColor = _brushColor;
+	}
+
+}

build/latk-util.js

@@ -1,6 +1,9 @@
-class LatkUtil {
 
+// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
+
+class LatkUtil {
 
+	//
 
 }
 

build/setup.command

@@ -1,2 +1,2 @@
-npm install -g uglify-js
+sudo npm install -g uglify-js