per-vertex color

2 files changed, 32 insertions, 31 deletions

diff --git a/fractiform.js b/fractiform.js
index 7867c0d..3936a73 100644
--- a/fractiform.js
+++ b/fractiform.js
@@ -27,7 +27,7 @@ let ui_shown = true;
 let mouse_x, mouse_y;
 let viewport_width, viewport_height, viewport_scale;
 let ui_shape = [];
-let ui_vertex_positions = [];
+let ui_vertices = [];
 let ui_color_input;
 let ui_color_mix_input;
 let ui_div;
@@ -77,7 +77,7 @@ function hex_to_rgba(hex) {
 }
 
 function ui_escape_tool() {
-	ui_vertex_positions = [];
+	ui_vertices = [];
 	ui_shape = [];
 	ui_tool = TOOL_SELECT;
 }
@@ -205,6 +205,7 @@ function on_click(e) {
 		let vertex = {
 			x: mouse_x,
 			y: mouse_y,
+			color: ui_get_color_rgba(),
 		};
 		Object.preventExtensions(vertex);
 		ui_shape.push(vertex);
@@ -212,25 +213,21 @@ function on_click(e) {
 		case TOOL_TRIANGLE:
 			if (ui_shape.length === 3) {
 				ui_tool = TOOL_UV;
-				ui_vertex_positions = ui_shape;
+				ui_vertices = ui_shape;
 				ui_shape = [];
 			}
 			break;
 		case TOOL_UV:
-			if (ui_shape.length === ui_vertex_positions.length) {
-				let pos = ui_vertex_positions;
+			if (ui_shape.length === ui_vertices.length) {
 				let uv = ui_shape;
 				let vertices = [];
-				for (let i in pos) {
-					let color = hex_to_rgba(ui_get_color());
-					color.a = ui_get_color_mix();
+				for (let i in ui_vertices) {
 					vertices.push({
-						pos: convert_viewport_pos_to_ndc(pos[i]),
+						pos: convert_viewport_pos_to_ndc(ui_vertices[i]),
 						uv: convert_viewport_pos_to_uv(uv[i]),
-						color: color,
+						color: hex_to_rgba(ui_vertices[i].color),
 					});
 				}
-				console.log(vertices);
 				if (vertices.length === 3) {
 					vertices_push_triangle(vertices[0], vertices[1], vertices[2]);
 				} else if (vertices.length === 4) {
@@ -240,7 +237,7 @@ function on_click(e) {
 				}
 				ui_tool = TOOL_TRIANGLE;
 				ui_shape = [];
-				ui_vertex_positions = [];
+				ui_vertices = [];
 			}
 			break;
 		}
@@ -388,35 +385,30 @@ function frame(time) {
 	
 	if (ui_shown) {
 		if (ui_tool === TOOL_UV) {
-			ui_polygon(ui_vertex_positions, {
+			ui_polygon(ui_vertices, {
 				strokeStyle: '#ffffff',
 				fillStyle: '#ffffff44',
 			});
 		}
 		
 		if (ui_is_editing_shape()) {
-			let options_vertex, options_shape;
+			let color;
 			if (ui_tool == TOOL_UV) {
-				let color = '#3333ff';
-				options_vertex = {
-					strokeStyle: color,
-					fillStyle: color + '44'
-				};
-				options_shape = options_vertex;
+				color = '#3333ff';
 			} else {
-				options_vertex = {
-					strokeStyle: '#ffffff',
-					fillStyle: ui_get_color() + '44',
-				};
-				options_shape = {
-					strokeStyle: '#ffffff',
-					fillStyle: '#ffffff44',
-				};
+				color = '#ffffff';
 			}
+			let options_shape = {
+				strokeStyle: color,
+				fillStyle: color + '44',
+			};
 			
 			if (ui_shape.length < 3 && is_mouse_in_canvas()) {
 				// vertex where the mouse is
-				ui_circle(mouse_x, mouse_y, vertex_radius, options_vertex);
+				ui_circle(mouse_x, mouse_y, vertex_radius, {
+					strokeStyle: options_shape.strokeStyle,
+					fillStyle: ui_tool === TOOL_UV ? color + '44' : ui_get_color_rgba(),
+				});
 				let vmouse = {x: mouse_x, y: mouse_y};
 				
 				if (ui_shape.length === 1) {
@@ -435,7 +427,10 @@ function frame(time) {
 					ui_line(prev.x, prev.y, vertex.x, vertex.y, options_shape);
 				}
 				
-				ui_circle(vertex.x, vertex.y, vertex_radius, options_vertex);
+				ui_circle(vertex.x, vertex.y, vertex_radius, {
+					strokeStyle: options_shape.strokeStyle,
+					fillStyle: ui_tool === TOOL_UV ? color + '44' : vertex.color,
+				});
 			}
 			
 		}
diff --git a/index.html b/index.html
index b4c4fd8..08ae0d7 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,10 @@
 		top: 0;
 	}
 	
+	#ui-canvas {
+		border: 2px solid var(--ui-border);
+	}
+	
 	.error {
 		color: red;
 	}
@@ -86,7 +90,7 @@
 	#ui input[type=color] {
 		padding: 0;
 	}
-	#ui input[type=text] {
+	#ui input[type=text], #ui input[type=number] {
 		width: 3em;
 		font-size: inherit;
 		height: 1.5em;
@@ -175,6 +179,8 @@ void main() {
 	<input type="color" value="#ff00aa" name="color-input" id="color-input" aria-label="Color">
 	<input type="text" value="0.1" name="color-mix-input" id="color-mix-input">
 	<label for="color-mix-input">opacity</label>
+	<input type="number" value="8" name="grid-input" id="grid-input">
+	<label for="grid-input">grid</label>
 	<button class="tool-button" data-tool="3" title="select tool (1)">
 		<img alt="select" class="icon" src="data:image/png;base64,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">
 	</button>