hn version and worst version

pcottle · Apr 25, 2012 · f5b5fc0 · f5b5fc0
1 parent d18507c
commit f5b5fc0
Show file tree

Hide file tree

Showing 4 changed files with 637 additions and 3 deletions.
diff --git a/hn.html b/hn.html
@@ -0,0 +1,282 @@
+<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":"164-hsb(0.5586617941036821,0.7,1)-hsb(0.7586617941036822,0.9,1)","vertices":[{"x":0.5010526315789473,"y":0.6294736842105263},{"x":0.5010526315789473,"y":0.4810526315789474},{"x":0.43368421052631584,"y":0.3842105263157895},{"x":0.46842105263157896,"y":0.3821052631578947},{"x":0.5126315789473684,"y":0.4463157894736842},{"x":0.5536842105263158,"y":0.38315789473684214},{"x":0.5905263157894737,"y":0.38315789473684214},{"x":0.5294736842105263,"y":0.4789473684210526},{"x":0.5305263157894736,"y":0.6305263157894737}]},{"fillColor":"168-hsb(0.5556192349642516,0.7,1)-hsb(0.7556192349642517,0.9,1)","vertices":[{"x":0.3978947368421053,"y":0.6557894736842106},{"x":0.3915789473684211,"y":0.32526315789473687},{"x":0.611578947368421,"y":0.32315789473684214},{"x":0.64,"y":0.3010526315789474},{"x":0.36947368421052634,"y":0.3042105263157895},{"x":0.3778947368421053,"y":0.6747368421052632},{"x":0.6463157894736842,"y":0.6810526315789474},{"x":0.6473684210526316,"y":0.3431578947368421},{"x":0.6263157894736842,"y":0.35789473684210527},{"x":0.6305263157894736,"y":0.6610526315789473}]},{"fillColor":"94-hsb(0.14822340179234744,0.7,1)-hsb(0.34822340179234745,0.9,1)","vertices":[{"x":0.6052631578947368,"y":0.2168421052631579},{"x":0.6747368421052631,"y":0.1726315789473684},{"x":0.7168421052631578,"y":0.17052631578947366},{"x":0.7063157894736842,"y":0.1957894736842105},{"x":0.6736842105263158,"y":0.2294736842105263},{"x":0.6757894736842105,"y":0.23894736842105263},{"x":0.7231578947368421,"y":0.23789473684210524},{"x":0.7421052631578947,"y":0.20421052631578945},{"x":0.7705263157894736,"y":0.18631578947368418},{"x":0.7873684210526315,"y":0.19789473684210526},{"x":0.771578947368421,"y":0.24},{"x":0.711578947368421,"y":0.29789473684210527},{"x":0.7494736842105263,"y":0.28842105263157897},{"x":0.8136842105263158,"y":0.26315789473684215},{"x":0.86,"y":0.2673684210526316},{"x":0.8505263157894737,"y":0.28842105263157897},{"x":0.7863157894736842,"y":0.32526315789473687},{"x":0.7052631578947368,"y":0.3505263157894737},{"x":0.7368421052631579,"y":0.36947368421052634},{"x":0.8105263157894737,"y":0.36947368421052634},{"x":0.8663157894736842,"y":0.3842105263157895},{"x":0.7673684210526316,"y":0.43157894736842106},{"x":0.7463157894736842,"y":0.44526315789473686},{"x":0.8389473684210526,"y":0.4473684210526316},{"x":0.911578947368421,"y":0.39894736842105266},{"x":0.9168421052631579,"y":0.2705263157894737},{"x":0.8705263157894737,"y":0.17052631578947366},{"x":0.771578947368421,"y":0.11578947368421053},{"x":0.6084210526315789,"y":0.13789473684210526}]},{"fillColor":"34-hsb(0.2083352429792285,0.7,1)-hsb(0.4083352429792285,0.9,1)","vertices":[{"x":0.3357894736842105,"y":0.24105263157894735},{"x":0.2715789473684211,"y":0.034736842105263156},{"x":0.6378947368421052,"y":0.08315789473684211},{"x":0.3494736842105263,"y":0.08421052631578947}]},{"fillColor":"6-hsb(0.3372247882187367,0.7,1)-hsb(0.5372247882187366,0.9,1)","vertices":[{"x":0.6799999999999999,"y":0.5736842105263158},{"x":0.7747368421052632,"y":0.8200000000000001},{"x":0.8957894736842105,"y":0.5463157894736842},{"x":0.7768421052631579,"y":0.7242105263157895}]},{"fillColor":"59-hsb(0.7464960852637887,0.7,1)-hsb(0.9464960852637887,0.9,1)","vertices":[{"x":0.30210526315789477,"y":0.30210526315789477},{"x":0.23684210526315788,"y":0.3473684210526316},{"x":0.22736842105263158,"y":0.3873684210526316},{"x":0.2947368421052632,"y":0.43894736842105264},{"x":0.31157894736842107,"y":0.4694736842105263},{"x":0.22105263157894736,"y":0.5410526315789473},{"x":0.20210526315789473,"y":0.5568421052631579},{"x":0.20736842105263156,"y":0.6168421052631579},{"x":0.26315789473684215,"y":0.651578947368421},{"x":0.2936842105263158,"y":0.6957894736842105},{"x":0.24526315789473685,"y":0.7357894736842105},{"x":0.2715789473684211,"y":0.7536842105263158},{"x":0.30947368421052635,"y":0.7463157894736843},{"x":0.3242105263157895,"y":0.7021052631578948},{"x":0.29789473684210527,"y":0.6378947368421053},{"x":0.24947368421052632,"y":0.5947368421052631},{"x":0.2578947368421053,"y":0.5589473684210526},{"x":0.3147368421052632,"y":0.5347368421052632},{"x":0.3473684210526316,"y":0.4936842105263158},{"x":0.32947368421052636,"y":0.41578947368421054},{"x":0.27684210526315794,"y":0.3736842105263158},{"x":0.29263157894736846,"y":0.3473684210526316},{"x":0.32315789473684214,"y":0.3178947368421053}]},{"fillColor":"49-hsb(0.26825172491371635,0.7,1)-hsb(0.46825172491371636,0.9,1)","vertices":[{"x":0.3642105263157895,"y":0.7294736842105264},{"x":0.32105263157894737,"y":0.6778947368421053},{"x":0.308421052631579,"y":0.6389473684210526},{"x":0.32105263157894737,"y":0.6431578947368422},{"x":0.3442105263157895,"y":0.6778947368421053},{"x":0.3536842105263158,"y":0.6705263157894737},{"x":0.35263157894736846,"y":0.6442105263157895},{"x":0.3631578947368421,"y":0.6273684210526316},{"x":0.37157894736842106,"y":0.6273684210526316},{"x":0.3778947368421053,"y":0.7157894736842105}]},{"fillColor":"134-hsb(0.625431120209396,0.7,1)-hsb(0.825431120209396,0.9,1)","vertices":[{"x":0.0863157894736842,"y":0.66},{"x":0.045263157894736845,"y":0.5652631578947369},{"x":0.07578947368421052,"y":0.5557894736842105},{"x":0.11052631578947368,"y":0.6242105263157894},{"x":0.1336842105263158,"y":0.6},{"x":0.14210526315789473,"y":0.5473684210526316},{"x":0.17684210526315788,"y":0.5336842105263158},{"x":0.1726315789473684,"y":0.6357894736842106}]},{"fillColor":"0-hsb(0.49398083705455065,0.7,1)-hsb(0.6939808370545506,0.9,1)","vertices":[{"x":0.2852631578947369,"y":0.8768421052631579},{"x":0.1726315789473684,"y":0.8873684210526316},{"x":0.07684210526315789,"y":0.8231578947368421},{"x":0.09999999999999999,"y":0.7821052631578947},{"x":0.1705263157894737,"y":0.8263157894736842},{"x":0.24105263157894735,"y":0.8410526315789474},{"x":0.3305263157894737,"y":0.7947368421052632}]},{"fillColor":"142-hsb(0.7905419550836087,0.7,1)-hsb(0.9905419550836088,0.9,1)","vertices":[{"x":0.6673684210526315,"y":0.8315789473684211},{"x":0.6094736842105263,"y":0.8010526315789473},{"x":0.588421052631579,"y":0.716842105263158},{"x":0.6189473684210526,"y":0.7494736842105263},{"x":0.6589473684210526,"y":0.7873684210526316},{"x":0.6757894736842105,"y":0.748421052631579},{"x":0.6926315789473684,"y":0.6968421052631579},{"x":0.7168421052631578,"y":0.7273684210526316}]},{"fillColor":"131-hsb(0.46070490032434464,0.7,1)-hsb(0.6607049003243446,0.9,1)","vertices":[{"x":0.0010526315789473684,"y":0.9747368421052631},{"x":0.48000000000000004,"y":0.9715789473684211},{"x":0.5189473684210526,"y":0.88},{"x":0.40631578947368424,"y":0.9},{"x":0.4557894736842105,"y":0.9452631578947368},{"x":0.01894736842105263,"y":0.9568421052631579},{"x":0.011578947368421053,"y":0.01263157894736842},{"x":0.9736842105263157,"y":0.010526315789473684},{"x":0.9789473684210526,"y":0.9621052631578948},{"x":0.6589473684210526,"y":0.9526315789473684},{"x":0.7094736842105263,"y":0.9031578947368422},{"x":0.5947368421052631,"y":0.8831578947368421},{"x":0.6442105263157895,"y":0.968421052631579},{"x":0.9894736842105263,"y":0.9747368421052631},{"x":0.9884210526315789,"y":0},{"x":0,"y":0.002105263157894737}]},{"fillColor":"109-hsb(0.0666302053257823,0.7,1)-hsb(0.2666302053257823,0.9,1)","vertices":[{"x":0.4905263157894737,"y":0.2968421052631579},{"x":0.4421052631578948,"y":0.20210526315789473},{"x":0.5778947368421052,"y":0.2852631578947369}]},{"fillColor":"179-hsb(0.6958923963829875,0.7,1)-hsb(0.8958923963829875,0.9,1)","vertices":[{"x":0.38,"y":0.17473684210526313},{"x":0.5515789473684211,"y":0.11052631578947368},{"x":0.5168421052631579,"y":0.16315789473684209}]},{"fillColor":"124-hsb(0.2558297418057919,0.7,1)-hsb(0.4558297418057919,0.9,1)","vertices":[{"x":0.4242105263157895,"y":0.2852631578947369},{"x":0.36526315789473685,"y":0.2694736842105263},{"x":0.4147368421052632,"y":0.2294736842105263}]},{"fillColor":"141-hsb(0.30330509394407273,0.7,1)-hsb(0.5033050939440727,0.9,1)","vertices":[{"x":0.4515789473684211,"y":0.8421052631578948},{"x":0.4305263157894737,"y":0.7305263157894737},{"x":0.4694736842105263,"y":0.8147368421052632}]},{"fillColor":"143-hsb(0.0964861486107111,0.7,1)-hsb(0.2964861486107111,0.9,1)","vertices":[{"x":0.7547368421052632,"y":0.4747368421052632},{"x":0.7968421052631579,"y":0.4947368421052632},{"x":0.8052631578947368,"y":0.5484210526315789},{"x":0.7736842105263158,"y":0.5926315789473684},{"x":0.7,"y":0.5747368421052632},{"x":0.7494736842105263,"y":0.6294736842105263},{"x":0.8168421052631578,"y":0.6221052631578947},{"x":0.831578947368421,"y":0.5684210526315789},{"x":0.8242105263157894,"y":0.46},{"x":0.7905263157894736,"y":0.4557894736842105}]},{"fillColor":"136-hsb(0.30531799122691156,0.7,1)-hsb(0.5053179912269116,0.9,1)","vertices":[{"x":0.17684210526315788,"y":0.22105263157894736},{"x":0.3168421052631579,"y":0.2831578947368421},{"x":0.16210526315789472,"y":0.3273684210526316},{"x":0.2473684210526316,"y":0.27578947368421053}]},{"fillColor":"103-hsb(0.03128313254565001,0.7,1)-hsb(0.23128313254565003,0.9,1)","vertices":[{"x":0.5663157894736842,"y":0.8136842105263158},{"x":0.5368421052631579,"y":0.8178947368421052},{"x":0.5189473684210526,"y":0.8031578947368421},{"x":0.5010526315789473,"y":0.7747368421052632},{"x":0.5484210526315789,"y":0.7789473684210526},{"x":0.5526315789473684,"y":0.7431578947368421},{"x":0.48000000000000004,"y":0.7442105263157895},{"x":0.4905263157894737,"y":0.8010526315789473},{"x":0.5284210526315789,"y":0.8378947368421052},{"x":0.5557894736842105,"y":0.8505263157894737}]},{"fillColor":"54-hsb(0.0973801976069808,0.7,1)-hsb(0.2973801976069808,0.9,1)","vertices":[{"x":0.7663157894736842,"y":0.8768421052631579},{"x":0.7947368421052631,"y":0.888421052631579},{"x":0.8178947368421052,"y":0.8652631578947368},{"x":0.7999999999999999,"y":0.8326315789473684},{"x":0.831578947368421,"y":0.8115789473684211},{"x":0.8610526315789473,"y":0.8421052631578948},{"x":0.8442105263157894,"y":0.8947368421052632},{"x":0.7642105263157895,"y":0.9157894736842105}]},{"fillColor":"150-hsb(0.7546415178105236,0.7,1)-hsb(0.9546415178105236,0.9,1)","vertices":[{"x":0.13157894736842105,"y":0.308421052631579},{"x":0.05578947368421053,"y":0.12526315789473683},{"x":0.2715789473684211,"y":0.16421052631578947},{"x":0.11263157894736842,"y":0.16842105263157894}]},{"fillColor":"74-hsb(0.35356034189462665,0.7,1)-hsb(0.5535603418946267,0.9,1)","vertices":[{"x":0.05473684210526316,"y":0.48526315789473684},{"x":0.08526315789473683,"y":0.3},{"x":0.10105263157894737,"y":0.43578947368421056},{"x":0.2031578947368421,"y":0.4326315789473684}]}],"particles":[]}        
+</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">
+
+    <div id="demoDiv" class="smooth">
+
+        <h2> Welcome! </h2>
+
+        <p>
+            This application finds a series of rotations to roll a small ball (or particle) out of a maze with a gravity field. 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="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">
+
+$j = jQuery.noConflict();
+
+//globals
+var notifyTimeout = null;
+var p = null;
+
+var polygonInsertControl = null;
+var polyController = null;
+
+var debug = false;
+
+function showDemoDiv() {
+    $j('#demoWrapper').css('top','100px');
+}
+
+function hideDemoDiv() {
+    $j('#demoWrapper').css('top','-600px');
+}
+
+function executeDemo() {
+
+    hideDemoDiv();
+    windowResize();
+    startLoading();
+    setTimeout(function() {
+
+        stopLoading();
+        importGeometry();
+        toggleImportExport();
+
+        //hack up the solve mode
+        solveController.active = true;
+        solveController.UIbutton.active = true;
+        solveController.UIbutton.hideAllButtons();
+
+        var id = 5; 
+
+        var v = polyController.getVertexById(id);
+        var circle = cuteSmallCircle(v.x,v.y);
+        circle.attr({
+            r:200
+        });
+        circle.animate({
+            r:4
+        },3000,'easeInOut');
+        topNotifyTemp("Looking for solution here",3000);
+
+        setTimeout(function() {
+            var v = polyController.getVertexById(id);
+            searcher = new GraphSearcher(v);
+            searcher.search();
+        },4000);
+    },500);
+}
+
+function startLoadingWithText(theText) {
+    startLoading();
+    topNotify(theText);
+}
+
+function stopLoadingWithText() {
+    stopLoading();
+    topNotifyClear();
+}
+
+function topNotifyClear() {
+    $j('#topNotifyBar').html('');
+    $j('#topNotifyBarHolder').addClass('topNotifyBarHidden');
+    if(notifyTimeout) { clearTimeout(notifyTimeout); }
+}
+
+function startLoading() {
+    isLoading = true;
+
+    var wHeight = $j(window).height();
+    var wWidth = $j(window).width();
+    $j('.loadingGif').css('left',String(wWidth/2 - 220*0.5) + 'px');
+    $j('.loadingGif').css('top',String(wHeight / 2 - 19*0.5) + 'px');
+    $j('.loadingGif').fadeIn();
+}
+
+function stopLoading() {
+    isLoading = false;
+    $j('.loadingGif').fadeOut();
+}
+
+
+function topNotify(theText) {
+    topNotifyHtml('<h2 style="font-size:40px">' + theText + "</h2>");
+}
+
+function topNotifyTemp(theText,time) {
+    if(!time) { time = 3000; }
+    topNotify(theText);
+    notifyTimeout = setTimeout('topNotifyClear();',time);
+}
+
+function topNotifyHtml(theText) {
+    //and if someone is clicking fast, get rid of it
+    if(notifyTimeout)
+    {
+        clearTimeout(notifyTimeout);
+    }
+
+    //basically, if its already displayed, hide it and come back in 700ms
+    if(!$j('#topNotifyBarHolder').hasClass('topNotifyBarHidden'))
+    {
+        //clear and come back
+        topNotifyClear();
+        var jsToExecute = "topNotifyHtml('" + theText + "');";
+        notifyTimeout = setTimeout(jsToExecute,700);
+        return;
+    }
+
+    $j('#topNotifyBar').html("<h1>" + theText + "</h1>");
+
+    $j('#topNotifyBarHolder').removeClass('topNotifyBarHidden');
+}
+
+$j(document).ready(function(){
+
+    startLoading();
+    setTimeout(function() {
+        stopLoading();
+    },1000);
+    p = Raphael("canvasHolder");
+
+    polygonInserter = new polygonUIControl();
+    polyController = new polygonController();
+    partController = new particleController();
+    particleTracer = new TraceUIControl();
+    polyEditor = new EditUIControl();
+    solveController = new SolveUIControl();
+    bAnimator = new BulkAnimator();
+    gArrow = false;
+
+    $j(window).resize(windowResize);
+
+    //get the hidden svg later for rotation
+    rotationLayer = $j('svg')[0];
+    rotationLayerRad = 0;
+    $j(rotationLayer).css('-webkit-transform','rotate3d(0,0,1,0rad)');
+
+    if(!/WebKit/.test(window.navigator.userAgent))
+    {
+        alert("Oh no! This application uses -webkit-transform to animate the final solutions, which your browser doesn't seem to support. Everything will still work, but during the solution animation, you'll have to look at the gravity arrow in the corner that I coded just for you instead of having the part rotate in an intuitive manner.");
+        gArrow = new GravityArrow();
+    }
+
+    if(/demo/.test(location.href))
+    {
+        showDemoDiv();
+        solveController.UIbutton.hideAllButtons();
+        $j('#demoButton').slideDown();
+    }
+
+});
+
+</script>
+
+</body>
+
+</html>