-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (84 loc) · 6.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>PLANAR GRAPH GENERATOR</title>
<link rel="icon" type="image/x-icon" href="startbootstrap-grayscale/dist/assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="startbootstrap-grayscale/dist/css/styles.css" rel="stylesheet" />
</head>
<body id="page-top" style="position: relative">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#page-top">Computational geometry</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#tool">Tool</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center" id="about">
<div class="d-flex justify-content-center">
<div>
<h2 class="text-white-50 mx-auto mt-2 mb-5">PLANAR GRAPH GENERATOR</h2>
<br="mb-0 text-white-50">
The planar graph generator is a tool that generates 3-connected planar graphs, by creating the Schlegel diagram of a convex polytope on two projection planes. Using the user interface of the tool, the user can customize the convex polytope in the following ways:
</br>- the projection points can be moved up, down, left and right (click Lights → use arrow keys) )
</br>- the vertices of the polytope can be moved up, down, left and right (click Points → use arrow keys)
</br>- new vertices can be added (Click Points → Click Add point)</br>
- the polytope can be turned in two directions (Click and drag mouse over canvas)</br> </br>
Every time a change is made to the polytope properties, the convexity of the polytope is enforced by calculating the convex hull of the vertices. The projections of the resulting polytope are shown on the projection planes in real time.
Knowing that the projections of convex polygons are always 3-connected planar graphs, they can be redrawn as graphs without crossing edges. This can be done using the barycentric mappings algorithm of Tutte, by choosing any face and making this the outer face of the drawing. This transformation from projection to barycentric embedding is not implemented, but is a possible extension of the application.</br></br>
</p>
<br>
<br>
<a class="btn btn-primary" href="#tool">Get Started</a>
</div>
</div>
</div>
</header>
<!-- Projects-->
<div style="height: 500px; width: 100%; background-color: black; position: relative;" id="tool-wrapper">
<button class="btn-light" id="moveLight" onclick="changeUIFunctions('moveLight')">LIGHTS</button>
<button class="btn-light" id="addPoint" onclick="changeUIFunctions('addPoint')">POINTS</button>
<button class="btn-secondary" id= "previous" onclick="" disabled>Previous</button>
<button class="btn-secondary" id = "next" onclick="" disabled>Next</button>
<button class="btn-secondary" id = "addpoint" onclick="" disabled>Add point</button>
</div>
<!-- Footer-->
<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright © Your Website 2022</div></footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/three-math.min.js"></script>
<script src="startbootstrap-grayscale/dist/js/scripts.js"></script>
<script src="js/external_quickhull3d.js"></script>
<script src="js/canvasDraw.js" type="module"></script>
<script src="js/userInteraction.js" type="module"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>