<!DOCTYPE html>

<html lang="en"> 
    <head>
        <title>Geometric Constructions and Experiments</title>
        <meta charset="utf-8">
        <meta name="title" content="Geometric Constructions" />
        <meta name="description" content="Geometric Constructions Test Page" />

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style type="text/css">
            html, body { overflow: hidden; font-size: 14px; font-family: Helvetica, sans-serif, Arial; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; background-color: white; border: 0; }
            canvas { margin: 0; padding: 0; display: block; }
            td { overflow: hidden; vertical-align: top; }
            .container { overflow: hidden; position: relative; width: 100%; height: 100%; }
            #legend { position: relative; left: 0px; top: -30px; width: 230px; height: 100%; border: 0px solid black; padding: 6px 10px 6px 12px; }
            #drawing { margin: 4px; border: 1px solid gray; position: absolute; left: 248px; top: 30px; width: 230px; height: 100% }
            canvas { cursor: default; }
            form { font-size: 18px; margin-bottom: 20px; }
            h1 { line-height: 0.95em; margin-top: 2px; }
            input[type='radio'] { margin-left: 1px; }
            .footer { position: absolute; font-size: 100%; bottom: 6px; margin-right: 15px; }
            a img {border: none; }
            .textiocontainer { position: relative; font-size: 80%; width: 216px; background-color: #eee; border: 1px solid #eee; margin-top: 20px; padding: 6px; display: none; }
            .constructioncontainer { position: relative; font-size: 80%; width: 216px; background-color: #eee; border: 1px solid #eee; margin-top: -5px; padding: 6px; display: none; padding-bottom: 0px; padding-top: 0; }
            h4 { margin: 0; padding: 0; margin-bottom: 10px; }
            .textio { position: relative; display: none; margin: 0; }
            .textiocontainer input[type='submit'] { display: block; position: relative; width: 100%; padding: 2px; font-size: 110%; margin: 12px 0px 0px -2px; }
            .textio input { width: 85px; float: right; display: block; margin-right: 3px; }
            .textio label { width: 115px; clear: both; text-align: right; display: block; float: left; padding: 2px; padding-top: 5px; }
            label.checkboxtext { font-size: 14px; }
            .readonly { color: #777; }
            input { padding-left: 2px; padding-right: 2px; }
            .arrow-right { margin: 0; display: inline-block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid blue; }
            .arrow-left  { margin: 0; display: inline-block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid blue; }
            #stepnumber { margin: 0px; margin-bottom: 6px; position: relative; top: -5px; display: inline-block; height: 20px; width: 50px; text-align: center; }
            #title { height: 30px; margin: 6px 0px 0px 258px; }
            .clearfix::after {
  content: "";
  clear: both;
  display: table;
}
        </style>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-35462144-1']);
            _gaq.push(['_setDomainName', 'rectorsquid.com']);
            _gaq.push(['_trackPageview']);

            (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>
    </head>
    
    <body id="game">
        <h1 id="title">Geometric Constructions and Experiments</h1>
        <div id="legend">
            <!--<p>Select Demonstration</p>-->
            <form>
                <div><input type="radio" id="endcurvebox" name="selectdemo" value="endcurve" onchange="handleCheckbox( this );" checked="yes"/><label for="endcurvebox"> Line to Point</label></div>
                <div><input type="radio" id="linetolinebox" name="selectdemo" value="linetoline" onchange="handleCheckbox( this );" <?php if( isset( $_GET['linetoline'] ) ) { ?> checked="yes" <?php ?>/><label for="linetolinebox"> Line to Line</label></div>
                <div><input type="radio" id="linetocirclebox" name="selectdemo" value="linetocircle" onchange="handleCheckbox( this );"<?php if( isset( $_GET['linetocircle'] ) ) { ?> checked="yes" <?php ?>/><label for="linetocirclebox"> Line to Circle</label></div>
                <div><input type="radio" id="camlobebox" name="selectdemo" value="camlobe" onchange="handleCheckbox( this );"<?php if( isset( $_GET['camlobe'] ) ) { ?> checked="yes" <?php ?>/><label for="camlobebox"> Cam Lobe</label></div>
                <div><input type="radio" id="beziercambox" name="selectdemo" value="beziercam" onchange="handleCheckbox( this );"<?php if( isset( $_GET['beziercam'] ) ) { ?> checked="yes" <?php ?>/><label for="beziercambox"> Bezier Cam</label></div>
                <div><input type="radio" id="chordradiusbox" name="selectdemo" value="chordradius" onchange="handleCheckbox( this );"<?php if( isset( $_GET['chordradius'] ) ) { ?> checked="yes" <?php ?>/><label for="chordradiusbox"> Chord Radius</label></div>
                <div><input type="radio" id="circleintersectbox" name="selectdemo" value="circleintersect" onchange="handleCheckbox( this );"<?php if( isset( $_GET['circleintersect'] ) ) { ?> checked="yes" <?php ?>/><label for="circleintersectbox"> Circle Intersection</label></div>
                <div><input type="radio" id="circletangentbox" name="selectdemo" value="circletangent" onchange="handleCheckbox( this );"<?php if( isset( $_GET['circletangent'] ) ) { ?> checked="yes" <?php ?>/><label for="circletangentbox"> Circle Tangent</label></div>
                <div><input type="radio" id="circletangent2box" name="selectdemo" value="circletangent2" onchange="handleCheckbox( this );"<?php if( isset( $_GET['circletangent2'] ) ) { ?> checked="yes" <?php ?>/><label for="circletangent2box"> Curved Circle Tangent</label></div>
                <div><input type="radio" id="runningcambox" name="selectdemo" value="runningcam" onchange="handleCheckbox( this );"<?php if( isset( $_GET['runningcam'] ) ) { ?> checked="yes" <?php ?>/><label for="runningcambox"> Running Cam Simulation</label></div>
                <div><input type="radio" id="slowbezierbox" name="selectdemo" value="slowbezier" onchange="handleCheckbox( this );"<?php if( isset( $_GET['slowbezier'] ) ) { ?> checked="yes" <?php ?>/><label for="slowbezierbox"> Slow Bezier Draw</label></div>
                <div><input type="radio" id="arconlinesbox" name="selectdemo" value="arconlines" onchange="handleCheckbox( this );"<?php if( isset( $_GET['arconlines'] ) ) { ?> checked="yes" <?php ?>/><label for="arconlinesbox"> Arc on Lines</label></div>
                <div><input type="radio" id="genevabox" name="selectdemo" value="geneva" onchange="handleCheckbox( this );"<?php if( isset( $_GET['geneva'] ) ) { ?> checked="yes" <?php ?>/><label for="genevabox"> Geneva Mechanism</label></div>
                    
                <div class="textiocontainer" id="textiocontainer">
                    <div class="textio" id="endcurveio" >
                        <h4>Line to Point</h4>
                        <p>The dark red arc is being constructed.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="linetolineio" >
                        <h4>Line to Line</h4>
                        <p>The dark red arc is being constructed.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="linetocircleio" >
                        <h4>Line to Circle</h4>
                        <p>The dark red arc is being constructed.</p>
                        <p>Drag the small black dots to see the construction features change interactively. The circle will maintain its radius when the center point is dragged.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="camlobeio" >
                        <h4>Cam Lobe</h4>
                        <p>The dark red nose circle and dark red flank arc are being constructed.</p>
                        <p>Drag the small black dots to see the construction features change interactively. Edit the data to see the drawing use the specified values.</p>
                        <p>The base circle will maintain its radius when the center point is dragged.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                        <h4>Cam Lobe Data</h4>
                        <label>Length:</label><input type="text" name="camlength"/></br>
                        <label>Base Radius:</label><input type="text" name="baseradius"/></br>
                        <label>Flank Radius:</label><input type="text" name="tangentradius"/></br>
                        <label>Flank Angle:</label><input type="text" name="tangentangle"/></br>
                        <label>Nose Radius:</label><input type="text" class="readonly" name="noseradius" readonly="readonly"/></br>
                        <input type="submit" value="Update" onclick="updatedata(); return false;"/>
                    </div>
                    <div class="textio" id="beziercamio" >
                        <h4>Bezier Cam</h4>
                        <p>The cam is being defined by the Bezier curves in the cam profile graph (below the cam).</p>
                        <p>Drag the small blue and black dots to see the Bezier curves of the cam profile change shape. The cam above it is automatically drawn to match the cam profile.</p>
                    </div>
                    <div class="textio" id="chordradiusio" >
                        <h4>Chord to Radius</h4>
                        <p>The dark red arc is being constructed.</p>
                        <p>Compute an arc radius given a chord and the distance from the chord to the arc.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="circleintersectio" >
                        <h4>Circle Intersection</h4>
                        <p>The two red dots are being calculated.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="circletangentio" >
                        <h4>Circle Tangent</h4>
                        <p>The dark red tangent line is being calculated.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="circletangent2io" >
                        <h4>Curved Circle Tangent</h4>
                        <p>The dark red tangent curve is being calculated. The tangent radius is a fixed amount in this construction.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                        <p><i>Construction lines are shown visually as line segments even when used as lines or rays.</i></p>
                    </div>
                    <div class="textio" id="runningcamio" >
                        <h4>Running Cam Follower Simulation</h4>
                        <p>The red lines and red circle are being computed. The cam is being drawn based on a set of measurements.</p>
                        <p>This is an active simulation and doesn't have interactive elements. The cam follower is simulated by checking for intersections of the follower circle and the various arcs of the cam.</p>
                    </div>
                    <div class="textio" id="slowbezierio" >
                        <h4>Slow Bezier Drawing</h4>
                        <p>Lines between the control points are used to find the points along the lines that are always proportional to the distance along the curve of the point being calculated. The yellow dots are calculated first and then used to calculate the positions of the red dots. The final dark red dot is calculated using the line between the light red dots.</p>
                        <p>The green line connects the black dot to the closest point along the curve.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                    </div>
                    <div class="textio" id="arconlinesio" >
                        <h4>Arc on Lines</h4>
                        <p>The dark red arc is calculated using the two black lines. The black line that is not long enough to reach the arc, is extended in red.</p>
                        <p>Incorrect results are generated for parallel and crossing lines, as well as a few other configurations.</p>
                        <p>Drag the small black dots to see the construction features change interactively.</p>
                    </div>
                    <div class="textio" id="genevaio" >
                        <h4>Geneva Mechanism</h4>
                        <p>The gray circle on the left is the input disk with the small circle on it's radius being the "pin". The black circle on the right is the slotted circle with the green lines being the slots.</p>
                        <p>The anti-slip parts of the mechanism are not drawn since they don't affect the simulation. Those parts would keep the output from turning when a pin is not in a slot.</p>
                        <div class="clearfix"><label>Pins (max 6):</label><input type="text" name="pincount"value="1"/></br>
                        <label>Slots (min 3):</label><input type="text" name="slotcount" value="4"/></div>
                        <p><b>Some combinations won't work here or in real life: 6:4+,5:4+,4:5+,3:7+</b></p>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div class="constructioncontainer" id="constructioncontainer"> 
                    <div>Show Construction Step</div>
                    <div style="margin-top: 5px; margin-bottom: 0px; "><div class="arrow-left" onclick="LeftArrow();"></div><div id="stepnumber"></div><div class="arrow-right" onclick="RightArrow();"></div></div>
                </div>
            </form>
            <div><a href="showcircletest.php" target="_blankl">See HTML/PHP for this page.</a><br/></div>
            <div><a href="circletest.js" target="_blank">See the JavaScript code.</a></div>
            <div class="footer" id="footer"> 
                <a href="http://blog.rectorsquid.com"><p style="font-size: 0%; width: 100%; position: relative; background-color: #E5E5E5; padding: 0; margin: 0;"><img src="./bloglink.gif" alt="Blog Link"/></p></a>
            </div>
        </div>
        <div id="drawing">
            <canvas id="canvas">
            </canvas>
        </div>
    </body>
    <script type="text/javascript" src="./circletest.js?x=6"></script>
</html>