-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
connect points extra features + cleanup
- Loading branch information
Showing
5 changed files
with
736 additions
and
629 deletions.
There are no files selected for viewing
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,104 +1,136 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <script type="text/javascript" src="./index.js"></script> | ||
|
|
||
| <div class="canvas"> | ||
| <h1> | ||
| Grid connector | ||
| </h1> | ||
|
|
||
| <canvas id="main_canvas" width="700" height="700"></canvas> | ||
| </div> | ||
|
|
||
| <div class="canvas_info"> | ||
| <div class="option_column"> | ||
| <p> | ||
| <button onclick="reset_grid()">Reset connections</button> | ||
| <br /> | ||
|
|
||
| Grid size: <span id="grid_size">1</span> | ||
| <button onclick="decrease_grid_size()">-</button> | ||
| <button onclick="increase_grid_size()">+</button> | ||
| <br /> | ||
|
|
||
| <input class="mark_intersecting_edges" type="checkbox" checked> | ||
| <label for="mark_intersecting_edges">Mark intersecting edges</label> | ||
| <br /> | ||
|
|
||
| <input class="mark_connected_vertices" type="checkbox" checked> | ||
| <label for="mark_connected_vertices">Mark connected vertices</label> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="function_column"> | ||
| <p> | ||
| d(G): | ||
| <span id="d_g">0</span> | ||
| <br /> | ||
|
|
||
| c(G): | ||
| <span id="c_g">0</span> | ||
| <br /> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="info_column"> | ||
| <p> | ||
| Vertices connected: | ||
| <span id="vertices_connected">0</span> | ||
| / | ||
| <span id="total_vertices">0</span> | ||
| <br /> | ||
|
|
||
| Total connections: | ||
| <span id="total_connections">0</span> | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="controls"> | ||
| <h3> | ||
| Controls | ||
| </h3> | ||
| <p> | ||
| - Hold left mouse button: connect points with an edge. | ||
| <br /> | ||
| - Hold right mouse button: disconnect points by removing edge between them (if there is one). | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="info"> | ||
| <h2> | ||
| Motivation | ||
| </h2> | ||
| <p> | ||
| This page was made to aid solving graph connection related problems. Here are some of those problems. | ||
| </p> | ||
| <p> | ||
| Problem 1: Given Hamiltonian cycle whose edges do not self-intersect, find such cycle that maximises d(G). | ||
| <br /> | ||
| Problem 2: Given Hamiltonian cycle whose edges do not self-intersect, find such cycle that minimises c(G). | ||
| <br /> | ||
| <img src="Images/formulas.png" alt="Problem formulas"> | ||
| </p> | ||
| </div> | ||
|
|
||
| <h2> | ||
| Insights | ||
| </h2> | ||
|
|
||
| <p> | ||
| It was found that for grid sizes of nxn, where n < 6, If G maximises d(G), it also minimises c(G). It could be that this is true for all n. | ||
| </p> | ||
|
|
||
| <p> | ||
| <br /> | ||
| <br /> | ||
| Problems author: Giedrius Alkauskas | ||
| </p> | ||
| </body> | ||
|
|
||
| <head> | ||
| <link | ||
| rel="stylesheet" | ||
| href="style.css" | ||
| /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <script | ||
| type="text/javascript" | ||
| src="./index.js" | ||
| ></script> | ||
|
|
||
| <div class="maxwidth"> | ||
| <h1> | ||
| Grid connector | ||
| </h1> | ||
|
|
||
| <div class="canvas_info"> | ||
| <div class="option_column"> | ||
| <button onclick="decrease_grid_size()">-</button> | ||
| <button onclick="increase_grid_size()">+</button> | ||
| Grid size: <span id="grid_size">1</span> | ||
| <br /> | ||
|
|
||
| <button onclick="decrease_line_width()">-</button> | ||
| <button onclick="increase_line_width()">+</button> | ||
| Line width: <span id="line_width">1</span> | ||
| <br /> | ||
|
|
||
| <button onclick="decrease_circle_spacing()">-</button> | ||
| <button onclick="increase_circle_spacing()">+</button> | ||
| Circle spacing: <span id="circle_spacing">1</span> | ||
| <br /> | ||
|
|
||
| <button onclick="decrease_circle_radius()">-</button> | ||
| <button onclick="increase_circle_radius()">+</button> | ||
| Circle radius: <span id="circle_radius">1</span> | ||
| <br /> | ||
|
|
||
| <input | ||
| id="mark_intersecting_edges" | ||
| type="checkbox" | ||
| checked | ||
| > | ||
| Mark intersecting edges | ||
| <br /> | ||
|
|
||
| <input | ||
| id="mark_connected_vertices" | ||
| type="checkbox" | ||
| checked | ||
| > | ||
| Mark connected vertices | ||
| <br /> | ||
|
|
||
| <input | ||
| id="auto_connect_circles" | ||
| type="checkbox" | ||
| checked | ||
| > | ||
| Auto connect circles | ||
| <br /> | ||
|
|
||
| <button onclick="reset_grid()">Reset connections</button> | ||
| </div> | ||
|
|
||
| <div class="function_column"> | ||
| d(G): | ||
| <span id="d_g">0</span> | ||
| <br /> | ||
| </div> | ||
|
|
||
| <div class="info_column"> | ||
| Vertices connected: | ||
| <span id="vertices_connected">0</span> | ||
| / | ||
| <span id="total_vertices">0</span> | ||
| <br /> | ||
|
|
||
| Total connections: | ||
| <span id="total_connections">0</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="centered"> | ||
| <canvas | ||
| id="main_canvas" | ||
| width="700" | ||
| height="700" | ||
| ></canvas> | ||
| </div> | ||
|
|
||
| <div class="maxwidth"> | ||
| <div class="controls"> | ||
| <h2> | ||
| Controls | ||
| </h2> | ||
| <p> | ||
| - Hold left mouse button: connect circles with an edge. | ||
| <br /> | ||
| - Hold right mouse button: disconnect circles by removing edge between them (if there is one). | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="info"> | ||
| <h2> | ||
| Motivation | ||
| </h2> | ||
| <p> | ||
| This page was made to aid solving graph connection related problems. | ||
| </p> | ||
| <p> | ||
| Problem 1: Given Hamiltonian cycle whose edges do not self-intersect, find such cycle that maximises | ||
| d(G). | ||
| <br /> | ||
| <img | ||
| src="Images/formulas.png" | ||
| alt="Problem formulas" | ||
| > | ||
| </p> | ||
| </div> | ||
|
|
||
| <p> | ||
| <br /> | ||
| <br /> | ||
| Problems author: Giedrius Alkauskas | ||
| </p> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.