threejs tilt quill examples

LightningArtist · Jul 10, 2024 · 6e6e8c8 · 6e6e8c8
1 parent 129dbe4
commit 6e6e8c8
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 4 deletions.
diff --git a/examples/js/p5.min.js b/examples/js/p5.min.js
diff --git a/examples/js/three.min.js b/examples/js/three.min.js
diff --git a/examples/p5js.html b/examples/p5js.html
@@ -12,7 +12,7 @@
 				border: 1px solid white;
 			}
 		</style>
-		<script src="https://fox-gieg.com/js/libraries/p5js/1.1.9/p5.min.js"></script>
+		<script src="./js/p5.min.js"></script>
 		<script src="../latk.js"></script>
 	</head>
 

diff --git a/examples/p5js_quill.html b/examples/p5js_quill.html
@@ -12,7 +12,7 @@
 				border: 1px solid white;
 			}
 		</style>
-		<script src="https://fox-gieg.com/js/libraries/p5js/1.1.9/p5.min.js"></script>
+		<script src="./js/p5.min.js"></script>
 		<script src="../latk.js"></script>
 	</head>
 

diff --git a/examples/p5js_tilt.html b/examples/p5js_tilt.html
@@ -12,7 +12,7 @@
 				border: 1px solid white;
 			}
 		</style>
-		<script src="https://fox-gieg.com/js/libraries/p5js/1.1.9/p5.min.js"></script>
+		<script src="./js/p5.min.js"></script>
 		<script src="../latk.js"></script>
 	</head>
 

diff --git a/examples/threejs.html b/examples/threejs.html
@@ -12,7 +12,7 @@
 				border: 1px solid white;
 			}
 		</style>
-		<script src="https://fox-gieg.com/js/libraries/threejs/122/three.min.js"></script>
+		<script src="./js/three.min.js"></script>
 		<script src="../latk.js"></script>
 	</head>
 

diff --git a/examples/threejs_quill.html b/examples/threejs_quill.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Example</title>
+		<style>
+			body {
+				background: black;
+				margin: 0px;
+			}
+
+			canvas { 
+				border: 1px solid white;
+			}
+		</style>
+		<script src="./js/three.min.js"></script>
+		<script src="../latk.js"></script>
+	</head>
+
+	<body>
+		<script>
+			"use strict";
+
+			let latk;
+			let counter = 0;
+
+			const renderer = new THREE.WebGLRenderer({ antialiasing: false, alpha: false });
+			renderer.setSize(960, 540);
+			renderer.setPixelRatio(window.devicePixelRatio);
+			renderer.setClearColor(0x000000);
+			renderer.autoClear = true;
+			document.body.appendChild(renderer.domElement);
+
+			const scene = new THREE.Scene();
+			scene.background = new THREE.Color("#000000");  
+
+			const cameraFov = 60;
+			const cameraAspect = 960 / 540;
+			const cameraNear = 0.1;
+			const cameraFar = 100;
+			const camera = new THREE.PerspectiveCamera(cameraFov, cameraAspect, cameraNear, cameraFar);
+			camera.position.set(0, 0.08, 1.5);
+
+			let markTime = 0;
+			const timeInterval = 1/12*1000;
+
+			function clearScene(preserveList) {
+			    for (let i=scene.children.length-1; i>=0; i--) {
+			        let doRemove = true;
+			        if (preserveList !== undefined) {
+			            for (let preserveObj of preserveList) {
+			                if (scene.children[i] === preserveObj) {
+			                    doRemove = false;
+			                    break;
+			                }
+			            }
+			        }
+			        if (doRemove) {
+			            clearObj(scene.children[i]);
+			            scene.children.splice(i, 1);
+			        }
+			    }
+			}
+
+			function clearObj(obj) {
+			    while (obj.children.length > 0) { 
+			        clearObj(obj.children[0]);
+			        obj.remove(obj.children[0]);
+			    }
+
+			    if (obj.geometry) obj.geometry.dispose();
+
+			    if (obj.material) { 
+			        // in case of map, bumpMap, normalMap, envMap ...
+			        Object.keys(obj.material).forEach(prop => {
+			            if (!obj.material[prop]) {
+			                return;         
+			            }
+			            if (obj.material[prop] !== null && typeof obj.material[prop].dispose === 'function') {
+			                obj.material[prop].dispose();
+			            }                                                  
+			        });
+			        obj.material.dispose();
+			    }
+			} 
+
+			function createMtl(color) {
+			    let mtl = new THREE.LineBasicMaterial({
+			        color: new THREE.Color(color[0],color[1],color[2],color[3]),
+			    });
+			    return mtl;
+			}
+
+			function setup() {
+				latk = Latk.readQuill("./files/grass_00.quill");
+
+				draw();
+			}
+
+			function draw() {
+				clearScene();
+
+				if (latk.ready) {
+
+					for (let layer of latk.layers) {
+						for (let stroke of layer.frames[counter].strokes) {
+							const col = [ stroke.color[0] / 255.0, stroke.color[1] / 255.0,stroke.color[2] / 255.0,stroke.color[3] / 255.0 ];
+							let mtl = createMtl(col);
+							let buffer = new THREE.BufferGeometry();
+							let points = [];
+
+							for (let point of stroke.points) {
+								let co = new THREE.Vector3(point.co[2], point.co[1], point.co[0]);
+								points.push(co);
+							}
+
+							buffer.setFromPoints(points);
+							let line = new THREE.Line(buffer, mtl);
+							line.frustumCulled = false;
+							scene.add(line);
+						}
+					}
+
+					if (performance.now() > markTime + timeInterval) {
+						markTime = performance.now();
+						counter++;
+						if (counter > latk.layers[0].frames.length-1) counter = 0;
+					}
+				}
+
+				requestAnimationFrame(draw);
+				renderer.render(scene, camera);
+			}
+
+			setup();
+		</script>
+	</body>
+
+</html>
diff --git a/examples/threejs_tilt.html b/examples/threejs_tilt.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Example</title>
+		<style>
+			body {
+				background: black;
+				margin: 0px;
+			}
+
+			canvas { 
+				border: 1px solid white;
+			}
+		</style>
+		<script src="./js/three.min.js"></script>
+		<script src="../latk.js"></script>
+	</head>
+
+	<body>
+		<script>
+			"use strict";
+
+			let latk;
+			let counter = 0;
+
+			const renderer = new THREE.WebGLRenderer({ antialiasing: false, alpha: false });
+			renderer.setSize(960, 540);
+			renderer.setPixelRatio(window.devicePixelRatio);
+			renderer.setClearColor(0x000000);
+			renderer.autoClear = true;
+			document.body.appendChild(renderer.domElement);
+
+			const scene = new THREE.Scene();
+			scene.background = new THREE.Color("#000000");  
+
+			const cameraFov = 60;
+			const cameraAspect = 960 / 540;
+			const cameraNear = 0.1;
+			const cameraFar = 100;
+			const camera = new THREE.PerspectiveCamera(cameraFov, cameraAspect, cameraNear, cameraFar);
+			camera.position.set(-1.8, 7.5, 19);
+
+			let markTime = 0;
+			const timeInterval = 1/12*1000;
+
+			function clearScene(preserveList) {
+			    for (let i=scene.children.length-1; i>=0; i--) {
+			        let doRemove = true;
+			        if (preserveList !== undefined) {
+			            for (let preserveObj of preserveList) {
+			                if (scene.children[i] === preserveObj) {
+			                    doRemove = false;
+			                    break;
+			                }
+			            }
+			        }
+			        if (doRemove) {
+			            clearObj(scene.children[i]);
+			            scene.children.splice(i, 1);
+			        }
+			    }
+			}
+
+			function clearObj(obj) {
+			    while (obj.children.length > 0) { 
+			        clearObj(obj.children[0]);
+			        obj.remove(obj.children[0]);
+			    }
+
+			    if (obj.geometry) obj.geometry.dispose();
+
+			    if (obj.material) { 
+			        // in case of map, bumpMap, normalMap, envMap ...
+			        Object.keys(obj.material).forEach(prop => {
+			            if (!obj.material[prop]) {
+			                return;         
+			            }
+			            if (obj.material[prop] !== null && typeof obj.material[prop].dispose === 'function') {
+			                obj.material[prop].dispose();
+			            }                                                  
+			        });
+			        obj.material.dispose();
+			    }
+			} 
+
+			function createMtl(color) {
+			    let mtl = new THREE.LineBasicMaterial({
+			        color: new THREE.Color(color[0],color[1],color[2],color[3]),
+			    });
+			    return mtl;
+			}
+
+			function setup() {
+				latk = Latk.readTiltBrush("./files/Untitled_2.tilt");
+
+				draw();
+			}
+
+			function draw() {
+				clearScene();
+
+				if (latk.ready) {
+
+					for (let layer of latk.layers) {
+						for (let stroke of layer.frames[counter].strokes) {
+							const col = [ stroke.color[0] / 255.0, stroke.color[1] / 255.0,stroke.color[2] / 255.0,stroke.color[3] / 255.0 ];
+							let mtl = createMtl(col);
+							let buffer = new THREE.BufferGeometry();
+							let points = [];
+
+							for (let point of stroke.points) {
+								let co = new THREE.Vector3(point.co[2], point.co[1], point.co[0]);
+								points.push(co);
+							}
+
+							buffer.setFromPoints(points);
+							let line = new THREE.Line(buffer, mtl);
+							line.frustumCulled = false;
+							scene.add(line);
+						}
+					}
+
+					if (performance.now() > markTime + timeInterval) {
+						markTime = performance.now();
+						counter++;
+						if (counter > latk.layers[0].frames.length-1) counter = 0;
+					}
+				}
+
+				requestAnimationFrame(draw);
+				renderer.render(scene, camera);
+			}
+
+			setup();
+		</script>
+	</body>
+
+</html>