start parallelogram

4 files changed, 72 insertions, 38 deletions

diff --git a/fractiform.js b/fractiform.js
index 6c1f92d..2b3a8cc 100644
--- a/fractiform.js
+++ b/fractiform.js
@@ -37,10 +37,11 @@ let ui_div;
 let vertex_id = 0;
 let shift_key = false;
 let ctrl_key = false;
+let ui_specify_uv = false;
 
 const TOOL_TRIANGLE = 1;
-const TOOL_UV = 2;
 const TOOL_SELECT = 3;
+const TOOL_PARALLELOGRAM = 4;
 
 let ui_tool;
 
@@ -104,6 +105,7 @@ function ui_escape_tool() {
 	ui_vertices = [];
 	ui_shape = [];
 	ui_tool = TOOL_SELECT;
+	ui_specify_uv = false;
 }
 
 function ui_set_tool(tool) {
@@ -149,6 +151,9 @@ function on_key_press(e) {
 	case 50: // 2
 		ui_set_tool(TOOL_TRIANGLE);
 		break;
+	case 51: // 3
+		ui_set_tool(TOOL_PARALLELOGRAM);
+		break;
 	}
 }
 
@@ -273,10 +278,24 @@ function ui_commit_vertices() {
 		}
 		indices.push(i);
 	});
-	if (indices.length === 3) {
+	switch (ui_tool) {
+	case TOOL_TRIANGLE:
 		indices_main.push(indices[0], indices[1], indices[2]);
-	} else {
-		console.error('bad shape length');
+		break;
+	case TOOL_PARALLELOGRAM: {
+		indices.push(vertices_main.length);
+		let v0 = vertices_main[indices[0]];
+		let v1 = vertices_main[indices[1]];
+		let v2 = vertices_main[indices[2]];
+		let v3 = Object.assign({}, v1);
+		v3.x = v0.x + v2.x - v1.x;
+		v3.y = v0.x + v2.y - v1.y;
+		v3.uv.x = v0.uv.x + v2.uv.x - v1.uv.x;
+		v3.uv.y = v0.uv.x + v2.uv.y - v1.uv.y;
+		vertices_main.push(v3);
+		indices_main.push(indices[0], indices[1], indices[2],
+			indices[0], indices[2], indices[3]);
+		} break;
 	}
 	vertices_changed = true;
 	
@@ -305,8 +324,17 @@ function on_click(e) {
 		ui_shape.push(vertex);
 		switch (ui_tool) {
 		case TOOL_TRIANGLE:
-			if (ui_shape.length === 3) {
-				ui_tool = TOOL_UV;
+		case TOOL_PARALLELOGRAM:
+			if (ui_specify_uv && ui_shape.length == ui_vertices.length) {
+				let uv = ui_shape;
+				let vertices = ui_vertices;
+				for (let i = 0; i < vertices.length; i++) {
+					vertices[i].uv = {x: uv[i].x * 0.5 + 0.5, y: uv[i].y * 0.5 + 0.5};
+				}
+				ui_commit_vertices();
+				ui_set_tool(TOOL_SELECT);
+			} else if (ui_shape.length === 3) {
+				ui_specify_uv = true;
 				ui_vertices = ui_shape;
 				ui_shape = [];
 				let all_full_alpha = true;
@@ -323,17 +351,6 @@ function on_click(e) {
 				}
 			}
 			break;
-		case TOOL_UV:
-			if (ui_shape.length === ui_vertices.length) {
-				let uv = ui_shape;
-				let vertices = ui_vertices;
-				for (let i = 0; i < vertices.length; i++) {
-					vertices[i].uv = {x: uv[i].x * 0.5 + 0.5, y: uv[i].y * 0.5 + 0.5};
-				}
-				ui_commit_vertices();
-				ui_set_tool(TOOL_SELECT);
-			}
-			break;
 		}
 	}
 }
@@ -410,11 +427,11 @@ function startup() {
 }
 
 function ui_is_editing_shape() {
-	return ui_tool === TOOL_TRIANGLE || ui_tool === TOOL_UV;
+	return ui_tool === TOOL_TRIANGLE || ui_tool === TOOL_PARALLELOGRAM;
 }
 
 function ui_is_editing_vertex() {
-	return ui_tool === TOOL_TRIANGLE;
+	return ui_tool === TOOL_TRIANGLE || ui_tool === TOOL_PARALLELOGRAM;
 }
 
 function draw_vertex(vertex) {
@@ -493,21 +510,21 @@ function frame(time) {
 	ui_ctx.clearRect(0, 0, width, height);
 	
 	if (ui_shown) {
-		for (let i = 0; i < vertices_main.length; i++) {
-			let vertex = vertices_main[i];
-			draw_vertex(vertex);
-			if (i % 3 === 0) {
-				console.assert(i + 2 < vertices_main.length, 'vertices_main.length not a multiple of 3');
-				const line_options = {
-					strokeStyle: '#ffffff'
-				};
-				ui_line(vertex, vertices_main[i+1], line_options);
-				ui_line(vertex, vertices_main[i+2], line_options);
-				ui_line(vertices_main[i+1], vertices_main[i+2], line_options);
-			}
+		vertices_main.forEach(draw_vertex);
+		
+		for (let i = 0; i < indices_main.length / 3; i++) {
+			const line_options = {
+				strokeStyle: '#ffffff'
+			};
+			let v0 = vertices_main[indices_main[3*i]];
+			let v1 = vertices_main[indices_main[3*i+1]];
+			let v2 = vertices_main[indices_main[3*i+2]];
+			ui_line(v0, v1, line_options);
+			ui_line(v0, v2, line_options);
+			ui_line(v1, v2, line_options);
 		}
 		
-		if (ui_tool === TOOL_UV) {
+		if (ui_specify_uv) {
 			ui_polygon(ui_vertices, {
 				strokeStyle: '#ffffff',
 				fillStyle: '#ffffff44',
@@ -517,7 +534,7 @@ function frame(time) {
 		
 		if (ui_is_editing_shape()) {
 			let color;
-			if (ui_tool == TOOL_UV) {
+			if (ui_specify_uv) {
 				color = '#3333ff';
 			} else {
 				color = '#ffffff';
@@ -533,14 +550,28 @@ function frame(time) {
 				// vertex where the mouse is
 				ui_circle(mpos, vertex_radius, {
 					strokeStyle: options_shape.strokeStyle,
-					fillStyle: ui_tool === TOOL_UV ? color + '44' : ui_get_color_rgba(),
+					fillStyle: ui_specify_uv ? color + '44' : ui_get_color_rgba(),
 				});
 				
 				if (ui_shape.length === 1) {
 					ui_line(ui_shape[0], mpos, options_shape);
 				} else if (ui_shape.length === 2) {
-					// triangle preview
-					ui_polygon([ui_shape[0], ui_shape[1], mpos], options_shape);
+					if (ui_tool === TOOL_TRIANGLE) {
+						// triangle preview
+						ui_polygon([ui_shape[0], ui_shape[1], mpos], options_shape);
+					} else if (ui_tool === TOOL_PARALLELOGRAM) {
+						// parallelogram preview
+						let v0 = ui_shape[0];
+						let v1 = ui_shape[1];
+						let v2 = mpos;
+						let v3 = {
+							x: v0.x + v2.x - v1.x,
+							y: v0.y + v2.y - v1.y,
+						};
+						ui_polygon([v0, v1, v2, v3], options_shape);
+					} else {
+						console.assert(false, 'bad tool');
+					}
 				}
 			}
 			
@@ -554,7 +585,7 @@ function frame(time) {
 				
 				ui_circle(vertex, vertex_radius, {
 					strokeStyle: options_shape.strokeStyle,
-					fillStyle: ui_tool === TOOL_UV ? color + '44' : rgba_float_to_hex(vertex.color),
+					fillStyle: ui_specify_uv ? color + '44' : rgba_float_to_hex(vertex.color),
 				});
 			}
 			
diff --git a/index.html b/index.html
index 262f894..d184202 100644
--- a/index.html
+++ b/index.html
@@ -200,7 +200,10 @@ void main() {
 			<img alt="select" class="icon" src="data:image/png;base64,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">
 		</button>
 		<button class="tool-button" data-tool="1" title="triangle tool (2)">
-			<img alt="triangle" class="icon" src="data:image/png;base64,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">
+			<img alt="triangle" class="icon" src="data:image/png;base64,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">
+		</button>
+		<button class="tool-button" data-tool="4" title="parallelogram tool (3)">
+			<img alt="parallelogram" class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAQAAAAkGDomAAAE60lEQVRo3u2ay28bVRSHv7Gd5kHTlqZB1EUKooi3UCsERChqQEgsWNAqLFiyy97wB0RZ0GXCthVrpC5aVIkFIJBaNQIlKapYNIJFKopIQKR5Omrc2p4fi0zmYc/YM54Zu5VyZpe5c+bLnXt+95x7DPv2WJpGNaU5bWrXNjWnKY1GdeJ7JQA3osvyt8saiQWXBKTGtaRgW9J4bLw4iBrXPTW2e00RFepKCa85okJfLay92o97TQW9qYKu1X3okdh40RFrQuOGxlz3xnTDGy6NAX1FIB6gRj0AF5SvuZ/XBc+I0SC8hiLQOqKmPLOX9xmR98zilD9gUxFoGXDO5WcsYMyYa8xcyyLQIuCmExoNRjnhshlDBMIDKqse9WtQx10eCg3GF5xhu3/JOSLABAOe0de5ygwjnMW9YAeYYIGZICC66KKHHDl6OcIxhniOEx7PPzf4j+r82oAUyHsGThtXAJhnWmMUcJQpT8FxpCw99JEjSy8HeZohTnKCAY4yQD8HyJEjg+Hy/S6zgYB1+mfsiQDulXGRSWPZG2FM4Nb3c8xZczTEq5xkkCc5Qj+9HLCAvFBu+8V4J3gN2l9ryzjcQATUTAT+0Pea1x2tqKiSyqqoKlNhLXoUe0XAPwD0sWuMqUpoIFNVVVSNpYNuEQiKUWV0MwJQWSUVtaq/9btm9Z1+aG0n2QuSQ/bIq27h9iyjLHO8EbBDmgiTCg/ZocgG66ywyG3+YosyJapU+IqP7CfGeUV7YQjUhCFcMa57g8SZrreY94kiQBnO4WziJiZVypQossoaqyyxyF3+ZZsdqlS4T8mourMZLpEPIWSwzCfGTK3MOIE+750cF9ILrhs/8h+L3OYuG+xQoUKJMmU3Uo1gzGiS8x5FHMUvJVhl0phpsBE1SLCcjaio4xrUE8q2KaP2i+K6q9lWnmZNUq+DdVfzZCjNqq4+nazDa55ORq+Li7a/ki7p/YgJuefjhkvIo2K+pn8sj6t6T5n0S5qogKe0Zvnc0HB7isKogOuW13WdbldZ3SrgqfYdTIQHPB0ZMKGjnbDvGtaG5XstNKAtAjdVsh5+qN80HVdYfOuVD7VlvWNFr0d9/Fn9qqokU3d0Rl0pnBF261NtW4DLetl/VLD2HCRPBjA4TJZqCqeYGQ7Z7y8HlYjBgDm67TxwxzBTADTo8hxqRAR0UkHxIKWTYCPMNIc7cO2YZeL8d7Hnr9d6izCjA3a7PnE6luWY/f5SUBhmAo8wjtr3qpipAHbzlPUOUaQUbQZzDLokoJzSDPbbX2k7aBJycTSq9XSVs4zwEv32ahzibb6J4qJPn+m+pfJ/6sUE4ZLZ69Wnz9MATCxbSgewlXwzE0ejouLVlO1+NsD5cM2wQ/pSD6yjoAU9n8jaS7Lm0aC+VlmSVNWsnkkAMIk2jitdvWXh7TZyLiZQB8dv46SZ8CfSxkmzZGpjG6dFwHa2cSKVRTHbOPZe7NvG+ZZbDPMBZzw6NaEFo21tHCdZCGrj/MQXnWzjWHnzY9fGaSoCnW3jBDz+qLRxAqe/I22cvSDxbePUJegdaOPsBYmrjWPMB81gJ9o49TVJTRvHFe6mHo02TqiNqLNtnBa38jRrkoSSofSqusTSySgnuNF+3phgQp6OdaKNk3zNmnifhDaJQFsR29jG6eTRTsqQSfzGed/2bd/aZf8DSKJozbS2TtQAAAAASUVORK5CYII=">
 		</button>
 	</div>
 </div>
diff --git a/parallelogram.png b/parallelogram.png
new file mode 100644
index 0000000..f067c7f
--- /dev/null
+++ b/parallelogram.png
diff --git a/triangle.png b/triangle.png
new file mode 100644
index 0000000..9725c99
--- /dev/null
+++ b/triangle.png