diff options
-rw-r--r-- | fractiform.js | 55 | ||||
-rw-r--r-- | index.html | 8 |
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, + }); } } @@ -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> |