source view: about.php


<?php



  $extra_style = <<<EOS
    <style type="text/css">
      .console
      {
        font-family: lucida console, monospace;
      }

      span.theme-compatibility
      {
        display:    block;
        font-style: italic;
      }

      span.compatibility-node
      {
        display:       block;
        font-style:    italic;
        margin-bottom: 3.0ex;
        margin-top:    1.5ex;
        padding-right: 1.5ex;
        position: relative;
        text-align:    right;
        visibility:    hidden;
      }

      .compatibility-0 { background-color: rgba( 153,   0,   0, 0.3 ); }
      .compatibility-1 { background-color: rgba( 255, 232,   0, 0.3 ); }
      .compatibility-2 { background-color: rgba( 123, 175, 212, 0.3 ); }
      .compatibility-u { background-color: rgba( 170, 119,  51, 0.3 ); }

      ul#splash-theme-list
      {
        list-style-type: square;
        margin-left:     0ex;
        padding-left:    4ex;
      }

      ul#splash-theme-list li
      {
        clear:         both;
        margin-bottom: 2ex;
      }
    </style>
    <script language="javascript">
      let s = document.createElement( 'script' );
      s.setAttribute( 'src', '/js-lib/Compatibility.js' );
      s.addEventListener( 'load', function () {
        let compats = Compatibility.getCompatibilityNodes();
        let adjust  = function () {
          for ( let i = 0; i < compats.length; ++i )
          {
            compats[i].renderCompatibility();
          }
        };
        window.addEventListener( 'load', adjust );
        window.addEventListener( 'resize', adjust );
      } );
      document.head.appendChild( s );
    </script>
EOS;



  require './classes/Page.php';
  $page = new Page();

  $page->addHeader( $extra_style );
  $page->printPageHeader();



?>
<h3>me</h3>
<p>
  My name is Kyle Woodward. I'm a <?php
    $age  = date( 'Y' ) - 1984;
    $age -= date( 'md' ) >= 710 ? 0 : 1;
    print $age;
?>-year-old resident of North Carolina, currently an Assistant Professor in the <a href="http://www.unc.edu/depts/econ/" target="_blank" title="UNC&ndash;Chapel Hill Economics">Department of Economics at UNC&ndash;Chapel Hill</a>. I got my Ph.D. in <a href="http://www.econ.ucla.edu/" target="_blank" title="UCLA economics">Economics at UCLA</a> in 2015; my undergraduate work was at Stanford University, to which I owe degrees in math, economics, and computer science. I am an active supporter of bicycle commuting. I spend my spare time making things like websites, furniture, beer, and economic models.
</p>
<p>
  Dropping me a line is left as an exercise for the reader. (tip: <a href="https://google.com" target="_blank">Google</a> can help if you remember calculus; <a href="http://wolframalpha.com" target="_blank">Wolfram|Alpha</a> can help if you don't)
</p>
<?php
          $captcha_id = time() . '_' . rand();
?>        <div id="captcha_div" style="display:block;"><img alt="captcha" src="captcha.php?captchaid=<?php print $captcha_id;?>" style="vertical-align:text-bottom;" /> = <input id="captcha" type="text" value="" /><input type="button" value="equate" onclick="ajaxGetContactInfo();" /></div>
<div id="captcha_results_div" style="display:none;margin-bottom:1em;"></div>
<h3>the site</h3>
<p>
  The color scheme comes from <a href="http://books.google.com/books?id=z9dWAAAAYAAJ" target="_blank">The New St. Martin's Handbook</a>, with slight adjustments to match my <a href="https://identity.stanford.edu/overview/color" target="_blank">almae</a> <a href="http://brand.ucla.edu/brand/digital/brand-colors/" target="_blank">matres</a> and <a href="http://identity.unc.edu/colors/" target="_blank">employer</a>. And wood, or perhaps a healthy brown ale. Kudos to the publishers for picking a naturally appealing palette.
</p>
<p>
  The <a href="/" target="_blank">splash page</a> design can vary. You are encouraged to press <span class="console">[Esc]</span>, or double-tap, and play around. Available themes include:
  <ul id="splash-theme-list">
    <li><a class="console" href="/#agentbased">agentbased</a>, a simulation of two populations playing a game. Selection is by simple truncation and reproduction is naively asexual. It's a dynamic recration of my old Gravatar icon, as long as you <a href="/#agentbased&angle=180&buckets=20&agents=100&compete_times=5&palette=site&colors=1,2">parameterize it right</a>. If the &ldquo;Speed Racer&rdquo; effect is too much, you can <a href="/#agentbased&drawmode=histogram">try it as a histogram</a>.<span class="compatibility-node" data-compatibility="unknown=-1">Incompatible with your browser.</span></li>
    <li><a class="console" href="/#fractal">fractal</a>, a live rendering of a process finding the zeros of a complex function (labeled below), and you can play along with your cursor. The zeros move predictably and linearly, although this can be altered to <a href="http://en.wikipedia.org/wiki/Boids" target="_blank">boids-type</a> rules. The concept caught my interest while I was reading an entertaining and thoroughly fascinating article by <a href="http://www.chiark.greenend.org.uk/~sgtatham/" target="_blank">Simon Tatham</a> on  <a href="http://www.chiark.greenend.org.uk/~sgtatham/newton/" target="_blank">Fractals derived from Newton-Raphson iteration</a>. Browsers with Javascript disabled see a pre-rendered non-interactive version of this theme.<span class="compatibility-node" data-compatibility="mobile=1;unknown=-1">Incompatible with your browser.</span></li>
    <li><a class="console" href="/#neuralnet">neuralnet</a>, a live rendering of a <a href="https://www.doc.ic.ac.uk/~nd/surprise_96/journal/vol4/cs11/report.html" target="_blank">neural network</a> attempting to predict your cursor position in the next few fractions of a second. Node position is determined by a <a href="https://en.wikipedia.org/wiki/Force-directed_graph_drawing" target="_blank">force-directed layout algorithm</a>, and the perspective rotates to ensure you can see each piece of the network. Node activation is depicted by color, ranging from black (inactive) to yellow (highly-active).<span class="compatibility-node" data-compatibility="firefox=0;ie=1;mobile=0;unknown=-1">Incompatible with your browser.</span></li>
    <li><a class="console" href="/#popsquares">popsquares</a>, a grid of squares, randomly colored and peacefully darkening and lightening for no good reason; the inspiration is almost certainly <a href="https://www.youtube.com/watch?v=hxbjCmzkmPc" target="_blank" title="PopSquares">PopSquares</a>, which has been translated into a decent <a href="https://play.google.com/store/apps/details?id=org.clangen.gfx.popsquares&hl=en" target="_blank" title="PopSquares wallpaper">Android wallpaper</a>. Technically the color changes represent the <a href="https://en.wikipedia.org/wiki/Simple_harmonic_motion" target="_blank">motion of an undamped spring</a>, but the choice of kinematics is purely aesthetic.<span class="compatibility-node" data-compatibility="unknown=2">Incompatible with your browser.</span></li>
    <li><a class="console" href="/#tesseract">tesseract</a>, a six-dimensional <a href="https://en.wikipedia.org/wiki/Hypercube" target="_blank">hypercube</a>, rotating slowly and projected onto the screen. If you'd rather hew to the theme's name, you can <a href="/#tesseract&dimension=4">render a tesseract</a> instead.<span class="compatibility-node" data-compatibility="firefox=1;ie=1;unknown=-1">Incompatible with your browser.</span></li>
    <li><a class="console" href="/#woodwardhall">woodwardhall</a>, pretty self-explanatory once you've seen it. This has been &mdash; and continues to be &mdash; an easter egg for appropriately-sized browser windows, and has been updated to work more generally. Photo credit goes to <a href="https://www.ftc.gov/about-ftc/biographies/david-ovadia" target="_blank">David Ovadia</a>, though this is missing from his official bio. Full disclosure: <a href="http://gatton.uky.edu/facilities/woodward-hall" target="_blank">Woodward Hall</a> has absolutely no affiliation with this particular Woodward.<span class="compatibility-node" data-compatibility="unknown=2">Incompatible with your browser.</span></li>
  </ul>
  Compatibility recommendations are based solely on my own testing. If you find differently, let me know.
</p>
<p class="size-600-plus">
  The banner images are window decoration, generated by biased <a href="https://en.wikipedia.org/wiki/Brownian_motion" target="_blank">Brownian motion</a>. A particle starts at the far left, in the middle, and wanders rightward uniformly over distances and within a particular cone. The algorithm is fairly simple and exists in the <a href="/source-view.php?page=/classes/Page.php" target="_blank">source of this very page</a> as a sequence of <a href="http://el.media.mit.edu/logo-foundation/what_is_logo/logo_primer.html" target="_blank">Logo</a> <a href="https://en.wikipedia.org/wiki/List_of_MicroWorlds_Logo_commands" target="_blank">commands</a> passed through <a href="/v2/logo/" target="_blank">Logo-to-JS conversion</a>.
</p>
<p class="size-600-minus">
  The banner images are window decoration, a grid of squares slowly shifting colors. It's (more or less) the <a class="console" href="/#popsquares">popsquares</a> theme from the homepage, adjusted to match page colors.
</p>
<p>
  Some time ago the banner images were a <a href="/corner-icon.php" target="_blank">dynamic mow-the-lawn simulation</a> in which each new visitor mowed a patch of a tiny yard. A fun, networked idea, but it turns out that traffic on this site is too low to sustain anything other than weedy overgrowth. This offended my basic need for order, and jiggering the parameters felt like cheating. Brownian motion it is, then.
</p>
<!--
If you've got an old or busted browser, you'll see the complex function, statically rendered a decade ago. In the former case the zeros move predictably and linearly, in the latter they move according to <a href="http://en.wikipedia.org/wiki/Boids" target="_blank">boids-type</a> rules; left- or right-click to advance the image. The concept caught my interest while I was reading an entertaining and thoroughly fascinating article by <a href="http://www.chiark.greenend.org.uk/~sgtatham/" target="_new">Simon Tatham</a> on  <a href="http://www.chiark.greenend.org.uk/~sgtatham/newton/" target="_blank">Fractals derived from Newton-Raphson iteration</a>. If you're interesting in messing around with them yourself, check out the <a href="/v2/fractal" target="_blank">fractal generator</a>.
-->
        <script type="text/javascript">
          //<!--[CDATA[



            function ajaxGetContactInfo()
            {
              var captcha_div         = document.getElementById( 'captcha_div' );
              var captcha_results_div = document.getElementById( 'captcha_results_div' );
              var captcha_solution    = document.getElementById( 'captcha' );
          
              captcha_div.style.display         = 'none';
              captcha_results_div.style.display = 'block';
              captcha_results_div.appendChild( document.createTextNode( 'verifying...' ) );

              var contact_url      = 'contact-info.php?captchaid=<?php print $captcha_id;?>&captchasolution='+captcha_solution.value;
              var xml_http_request = null;

              if ( window.XMLHttpRequest )
              {
                xml_http_request = new XMLHttpRequest();
              }
              else if ( window.ActiveXObject )
              {
                xml_http_request = new ActiveXObject('Microsoft.XMLHTTP');
              }
              else
              {
                captcha_div.style.display = 'block';
                captcha_results_div.style.display = 'none';

                clearElement(captcha_results_div);
            
                captcha_solution.value = 'FAIL';
                return;
              }

              xml_http_request.onreadystatechange = function()
              {
                if ( xml_http_request.readyState == 4 )
                {
                  var xml_doc = xml_http_request.responseXML.documentElement;
                  var results = xml_doc.getElementsByTagName('result');

                  clearElement(captcha_results_div);

                  if ( !results )
                  {
                    captcha_div.style.display         = 'block';
                    captcha_results_div.style.display = 'none';
                    captcha_solution.value            = 'FAIL';

                    captcha_solution.focus();
                    return;
                  }

                  if ( results[0].getAttribute( 'status' ) != 'success' )
                  {
                    captcha_div.style.display         = 'block';
                    captcha_results_div.style.display = 'none';
                    captcha_solution.value            = results[0].getAttribute( 'type' );

                    captcha_solution.focus();
                    return;
                  }

                  var info_s = xml_doc.getElementsByTagName( 'info' );
                  for ( var i = 0; i < info_s.length; ++i )
                  {
                    var info = info_s[i];
                    captcha_results_div.appendChild( makeInfoDiv( info ) );
                  }
                }
                else
                {
                  //
                }
              };

              xml_http_request.open( 'GET', contact_url, true );
              xml_http_request.send( null );
            }



            function clearElement ( element )
            {
              if ( !element )
              {
                return;
              }
          
              while ( element.firstChild )
              {
                element.removeChild( element.firstChild );
              }
            }



            function DOMElementWithText ( tag, text )
            {
              var element = document.createElement( tag );
              element.appendChild( document.createTextNode( text ) );

              return element;
            }



            function makeInfoDiv ( info )
            {
              var div = document.createElement('div');
              var title = DOMElementWithText('div',info.getAttribute('type'));
              title.style.fontWeight = 'bold';
              div.style.marginBottom = '10px';

              div.appendChild(title);

              var sub_info = info.getElementsByTagName('item');
              for ( var i = 0; i < sub_info.length; ++i )
              {
                var _div = DOMElementWithText('div',sub_info[i].getAttribute('value'));
                div.appendChild(_div);
              }

              return div;
            }



            document.getElementById( 'captcha' ).value = '';
            document.getElementById( 'captcha' ).addEventListener( 'keyup', function ( e ) {
              if ( e.which == 13 || e.keyCode == 13 )
              {
                ajaxGetContactInfo();
              }
            } );
            
            
            
          //]]-->
        </script>
<?php



  $page->printPageFooter();
  
  
  
?>