-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
134 lines (87 loc) · 5.88 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<head>
<title> Liquid Graph</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta property="og:title" content="Liquid Graph"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://petercottle.com/liquidGraph/index.html"/>
<meta property="og:image" content="http://petercottle.com/liquidGraph/Capture3.PNG"/>
<meta property="og:site_name" content="LiquidGraph"/>
<meta property="og:description" content="An AI solver for rotating particles out of a 2D maze. Coded by Peter Cottle"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="canvasHolder" style="border:1px solid black; box-shadow: 5px 5px 5px black">
</div>
<img src="loading.gif"class="loadingGif"/>
<div id="topNotifyBarWrapper" style="width:100%;text-align:center;position:absolute;top:-100px;height:0px;">
<div id="topNotifyBarHolder" class="buttonGradient smooth topNotifyBar topNotifyBarHidden bubbleToStop" onclick="topNotifyClear()" style="display:inline-block;cursor:pointer">
<div id="topNotifyBar">
</div>
</div>
</div>
<a id="addPolyButton" class="uiButton">Add Polygon
</a>
<a id="traceButton" class="uiButton">Trace Particle
</a>
<a id="clearButton" class="uiButton uiButtonRed" onclick="javascript:clearAll();">Clear All
</a>
<a id="solveButton" class="uiButton uiButtonWhite">Solve!
</a>
<a id="bombardButton" class="uiButton uiButtonYellow" onclick="javscript:bombard();">Bombard
</a>
<a id="testButton" style="position:absolute;bottom:20px;left:10px;display:none" class="uiButton uiButtonPink" onclick="javascript:testSampling();">Test Sampling (Beware)
</a>
<a id="editPolyButton" class="uiButton uiButtonYellow">Edit Polygons
</a>
<a id="clearParticlesButton" class="uiButton uiButtonYellow" onclick="javascript:partController.clearAll();">Clear Particles
</a>
<a id="togglePathsButton" class="uiButton uiButtonYellow" onclick="javascript:partController.togglePathPreference();">Toggle Paths
</a>
<a id="importExportButton" class="uiButton uiButtonPink" onclick="javascript:toggleImportExport();">Import / Export
</a>
<div id="dialogWrapper" style="width:100%;bottom:-200px" class="smooth">
<div id="importExportDialog" class="smooth">
<div style="text-align:center;margin-top:10px;">
<textarea id="jsonTextArea" style="width:80%;" rows="5">
{"polys":[{"fillColor":"109-hsb(0.25129258129745724,0.7,1)-hsb(0.45129258129745725,0.9,1)","vertices":[{"x":0.378125,"y":0.39062499999999994},{"x":0.24375000000000002,"y":0.4010416666666667},{"x":0.04791666666666666,"y":0.3708333333333333},{"x":0.058333333333333334,"y":0.05833333333333335},{"x":0.7822916666666667,"y":0.05937500000000001},{"x":0.7947916666666667,"y":0.37604166666666666},{"x":0.6229166666666667,"y":0.3958333333333333},{"x":0.5,"y":0.3864583333333333},{"x":0.49375,"y":0.434375},{"x":0.8822916666666667,"y":0.425},{"x":0.8458333333333333,"y":0},{"x":0.0125,"y":0.019791666666666652},{"x":0,"y":0.42916666666666664},{"x":0.371875,"y":0.4479166666666667}]},{"fillColor":"115-hsb(0.6818982973694802,0.7,1)-hsb(0.8818982973694802,0.9,1)","vertices":[{"x":0.4739583333333333,"y":0.534375},{"x":0.434375,"y":0.26458333333333334},{"x":0.39375,"y":0.5270833333333333},{"x":0.28229166666666666,"y":0.5364583333333333},{"x":0.31875,"y":0.48437499999999994},{"x":0.225,"y":0.48437499999999994},{"x":0.221875,"y":0.596875},{"x":0.596875,"y":0.5927083333333334},{"x":0.6447916666666667,"y":0.471875},{"x":0.5239583333333333,"y":0.47812499999999997},{"x":0.5645833333333333,"y":0.53125}]}],"particles":[{"pos":{"x":0.22604166666666667,"y":0.5885416666666666},"vel":{"x":0,"y":0},"accel":{"x":0.0005208333333333333,"y":0.052083333333333336}},{"pos":{"x":0.3572916666666667,"y":0.746875},"vel":{"x":0,"y":0},"accel":{"x":0.0005208333333333333,"y":0.052083333333333336}},{"pos":{"x":0.5145833333333333,"y":0.7510416666666667},"vel":{"x":0,"y":0},"accel":{"x":0.0005208333333333333,"y":0.052083333333333336}},{"pos":{"x":0.578125,"y":0.6041666666666666},"vel":{"x":0,"y":0},"accel":{"x":0.0005208333333333333,"y":0.052083333333333336}}]}
</textarea>
</div>
<div style="text-align:center">
<a id="importButton" class=" uiButtonPink" onclick="javascript:importGeometry()">
Import
</a>
<a id="exportButton" class=" uiButtonPink" onclick="javascript:exportGeometry()">
Export
</a>
</div>
</div>
</div>
<div id="demoWrapper" class="smooth">
<!-- TODO -->
<div id="demoDiv" class="smooth" style="">
<h2> Welcome! </h2>
<p>
This application finds a series of rotations to roll a number of particles out of a maze. It's related to my current research at UC Berkeley and combines concepts from ray tracing, artifical intelligence search, computational geometry, and mesh generation. Enjoy!
</p>
<div style="text-align:center;margin:20px;">
<a onclick="javascript:executeDemo();" id="demoButton" class="uiButton" style="position:static"> Show me the demo! </a>
</div>
</div>
</div>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="liquidGraphUI.js"></script>
<script type="text/javascript" src="liquidGraph.js"></script>
<script type="text/javascript" src="liquidGraphAI.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
var DEMO_VERTEX_ID = 10;
var DEMO_VERTEX_ID = null;
var DEMO_VERTEX_IDS = [2, 7, 15, 18];
var debug2 = true;
</script>
</body>
</html>