<commit_before>---
layout: app
title: Grow Your Own Picture
redirect_from: /genetics/
---

<style>
  #pictureframe {
    width: 730px;
    margin-bottom: 15px;
    border: 2px solid #000;
  }

  #pictureframe .picture {
    width: 350px;
    height: 350px;
    margin: 8px;

    /* inactive canvas appearance */
    background: solid;
    background-color: #222;
    -webkit-box-shadow: inset 0 0 20px #000;
    -moz-box-shadow:    inset 0 0 20px #000;
    box-shadow:         inset 0 0 20px #000;
  }

  #pictureframe .btn-toolbar {
    margin-top: 0;
  }

  /* start/stop buttons */
  .control-btn {
    width: 150px !important;
    font-weight: bold;
  }

  /* icons */
  i {
    margin-left: 6px;
  }

  .icon-large {
    margin-left: 0px;
    margin-right: 6px;
  }

  .tooltip-inner {
    max-width: 450px;
  }

  /* hidden file chooser. just shunt this out of the way somewhere */
  #file-chooser {
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: -1000px;
    width: 1px;
    height: 1px
  }

  /* tables */
  .conf-table, #analytics-table {
    font-size: 16px;
    table-layout: fixed;
    margin-top: 15px;
  }

  .conf-table td {
    border-top: none;
  }
</style>

<div id="wrap">
  <div class="container">

    <div class="headline">
      <h1 class="headline-title">
        Grow Your Own Picture
        <small>Genetic Algorithms &amp; Generative Art</small>
      </h1>
    </div>

    <div class="row">
      <center>

        <!-- pictures -->
        <div id="pictureframe">
          <canvas id="referenceCanvas" class="picture" width="350" height="350" style="margin-right: 4px;"></canvas>
          <canvas id="outputCanvas" class="picture" width="350" height="350" style="margin-left: 4px;"></canvas>

          <!-- button bar -->
          <div class="btn-toolbar">
            <div class="btn-group">

              <!-- image dropdown -->
              <a class="btn dropdown-toggle btn-inverse control-btn"
                 data-toggle="dropdown" href="#"
                 style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
                Select Image &nbsp;<span class="caret"></span>
              </a>
              <ul id="stock-image-menu" class="dropdown-menu" style="text-align: start;">
                <li><a href="#">Mona Lisa</a></li>
                <li><a href="#"><NAME></a></li>
                <li><a href="#"><NAME></a></li>
                <li><a href="#"><NAME></a></li>
                <li><a href="#"><NAME></a></li>
                <li><a href="#">Eiffel Tower</a></li>
                <li><a href="#">Sunflowers</a></li>
                <li><a href="#">RMS</a></li>
              </ul>

            </div> <!-- /.btn-group -->

            <div class="btn-group">
              <button id="stop" class="btn control-btn btn-danger"
                      style="margin-left: 230px;" disabled>
                Stop
              </button>

              <button id="start" class="btn control-btn btn-success"
                      disabled>
                Start
              </button>
            </div> <!-- /.btn-group -->

          </div>

        </div> <!-- /#pictureframe -->

      </center>
    </div> <!-- /.row -->

    <div class="row">

      <div class="span6" style="margin-bottom: 30px;">

        <center><h4>Evolving the Mona Lisa</h4></center>

        Welcome! Click start to see genetics in action, as a
        randomly generated collection of shapes evolve to resemble
        a given picture.

        <center><h5>How it Works</h5></center>

        This page uses a genetic algorithm to model a population
        of individuals, each containing a string of DNA which can
        be visualised in the form of an image. By starting with a
        population consisting of a randomly generated gene pool,
        each individual is compared against the reference image
        (the one on the left), and the individuals can then be
        ranked by their likeness to it, known as their "fitness",
        with the best fit being displayed on the output image (the
        one on the right). By breeding the fittest individuals
        from the population, the DNA which produces the most
        accurate representation of the reference image is selected
        over successive generations, effectively demonstrating the
        power of a natural selection process to produce the best
        candidate for any given environment.

        <center><h5>Source Code</h5></center>

        As with all good things in life, this was created for fun, free,
        and science. The full source code for this site is available on
        <a href="https://github.com/ChrisCummins/chriscummins.github.io" target="_blank">GitHub</a>
        and is released under the terms of the MIT License. If you just want
        to see how the genetics algorithm works, you can see the JavaScript
        implementation
        <a href="https://github.com/ChrisCummins/chriscummins.github.io/tree/master/js/genetics.js" target="_blank" target="_blank">here</a>.

        <center><h5>Bugs and comments</h5></center>

        I would love to know what you think. Don't be afraid of
        <a href="mailto:<EMAIL>">getting in touch</a> with any
        thoughts and suggestions. If you would like to be a little more
        involved in the process, feel free to fork the
        <a href="https://github.com/ChrisCummins/chriscummins.github.io" target="_blank">source code repository</a>
        and submit a pull request.
      </div> <!-- /.span6 -->

      <div class="span6">

        <div class="tabbable">
          <ul class="nav nav-tabs">
            <li class="active">
              <a href="#pane-configuration" data-toggle="tab">
                <i class="icon-cog icon-large"></i> Configuration
              </a>
            </li>

            <li>
              <a href="#pane-analytics" data-toggle="tab">
                <i class="icon-beaker icon-large"></i> Analytics
              </a>
            </li>
          </ul>

          <div class="tab-content">
            <div id="pane-configuration" class="tab-pane active">

              <center><h5 style="margin-top: 0px; padding-top: 15px;">Genetics</h5></center>

              <table class="table conf-table">

                <tr class="conf-option" data-toggle="tooltip"
                    title="The number of individuals in a the population. This determines the size of the gene pool. If the population is 1, then reproduction occurs asexually">
                  <td style="width: 160px;">
                    Population Size
                  </td><commit_msg>genetics: Add a "Credits" section<commit_after>---
layout: app
title: Grow Your Own Picture
redirect_from: /genetics/
---

<style>
  #pictureframe {
    width: 730px;
    margin-bottom: 15px;
    border: 2px solid #000;
  }

  #pictureframe .picture {
    width: 350px;
    height: 350px;
    margin: 8px;

    /* inactive canvas appearance */
    background: solid;
    background-color: #222;
    -webkit-box-shadow: inset 0 0 20px #000;
    -moz-box-shadow:    inset 0 0 20px #000;
    box-shadow:         inset 0 0 20px #000;
  }

  #pictureframe .btn-toolbar {
    margin-top: 0;
  }

  /* start/stop buttons */
  .control-btn {
    width: 150px !important;
    font-weight: bold;
  }

  /* icons */
  i {
    margin-left: 6px;
  }

  .icon-large {
    margin-left: 0px;
    margin-right: 6px;
  }

  .tooltip-inner {
    max-width: 450px;
  }

  /* hidden file chooser. just shunt this out of the way somewhere */
  #file-chooser {
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: -1000px;
    width: 1px;
    height: 1px
  }

  /* tables */
  .conf-table, #analytics-table {
    font-size: 16px;
    table-layout: fixed;
    margin-top: 15px;
  }

  .conf-table td {
    border-top: none;
  }
</style>

<div id="wrap">
  <div class="container">

    <div class="headline">
      <h1 class="headline-title">
        Grow Your Own Picture
        <small>Genetic Algorithms &amp; Generative Art</small>
      </h1>
    </div>

    <div class="row">
      <center>

        <!-- pictures -->
        <div id="pictureframe">
          <canvas id="referenceCanvas" class="picture" width="350" height="350" style="margin-right: 4px;"></canvas>
          <canvas id="outputCanvas" class="picture" width="350" height="350" style="margin-left: 4px;"></canvas>

          <!-- button bar -->
          <div class="btn-toolbar">
            <div class="btn-group">

              <!-- image dropdown -->
              <a class="btn dropdown-toggle btn-inverse control-btn"
                 data-toggle="dropdown" href="#"
                 style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
                Select Image &nbsp;<span class="caret"></span>
              </a>
              <ul id="stock-image-menu" class="dropdown-menu" style="text-align: start;">
                <li><a href="#"><NAME></a></li>
                <li><a href="#"><NAME></a></li>
                <li><a href="#"><NAME></a></li>
                <li><a href="#"><NAME></a></li>
                <li><a href="#"><NAME></a></li>
                <li><a href="#">Eiffel Tower</a></li>
                <li><a href="#">Sunflowers</a></li>
                <li><a href="#">RMS</a></li>
              </ul>

            </div> <!-- /.btn-group -->

            <div class="btn-group">
              <button id="stop" class="btn control-btn btn-danger"
                      style="margin-left: 230px;" disabled>
                Stop
              </button>

              <button id="start" class="btn control-btn btn-success"
                      disabled>
                Start
              </button>
            </div> <!-- /.btn-group -->

          </div>

        </div> <!-- /#pictureframe -->

      </center>
    </div> <!-- /.row -->

    <div class="row">

      <div class="span6" style="margin-bottom: 30px;">

        <center><h4>Evolving the Mona Lisa</h4></center>

        Welcome! Click start to see genetics in action, as a
        randomly generated collection of shapes evolve to resemble
        a given picture.

        <center><h5>How it Works</h5></center>

        This page uses a genetic algorithm to model a population
        of individuals, each containing a string of DNA which can
        be visualised in the form of an image. By starting with a
        population consisting of a randomly generated gene pool,
        each individual is compared against the reference image
        (the one on the left), and the individuals can then be
        ranked by their likeness to it, known as their "fitness",
        with the best fit being displayed on the output image (the
        one on the right). By breeding the fittest individuals
        from the population, the DNA which produces the most
        accurate representation of the reference image is selected
        over successive generations, effectively demonstrating the
        power of a natural selection process to produce the best
        candidate for any given environment.

        <center><h5>Source Code</h5></center>

        As with all good things in life, this was created for fun, free,
        and science. The full source code for this site is available on
        <a href="https://github.com/ChrisCummins/chriscummins.github.io" target="_blank">GitHub</a>
        and is released under the terms of the MIT License. If you just want
        to see how the genetics algorithm works, you can see the JavaScript
        implementation
        <a href="https://github.com/ChrisCummins/chriscummins.github.io/tree/master/js/genetics.js" target="_blank" target="_blank">here</a>.

        <center><h5>Bugs and comments</h5></center>

        I would love to know what you think. Don't be afraid of
        <a href="mailto:<EMAIL>">getting in touch</a> with any
        thoughts and suggestions. If you would like to be a little more
        involved in the process, feel free to fork the
        <a href="https://github.com/ChrisCummins/chriscummins.github.io" target="_blank">source code repository</a>
        and submit a pull request.

        <center><h5>Credits</h5></center>

        The code is my own, the idea is not. Full credit goes to
        <a href="http://rogeralsing.com/2008/12/07/genetic-programming-evolution-of-mona-lisa/" target="_blank"><NAME></a>
        for the idea of using genetic algorithms to approximate fine
        art. Further thanks to
        <a href="https://twitter.com/jseidelin" target="_blank"><NAME></a>
        for writing a JavaScript implementation that inspired me to
        create this.
      </div> <!-- /.span6 -->

      <div class="span6">

        <div class="tabbable">
          <ul class="nav nav-tabs">
            <li class="active">
              <a href="#pane-configuration" data-toggle="tab">
                <i class="icon-cog icon-large"></i> Configuration
              </a>
            </li>

            <li>
              <a href="#pane-analytics" data-toggle="tab">
                <i class="icon-beaker icon-large"></i> Analytics
              </a>
            </li>
          </ul>

          <div class="tab-content">
            <div id="pane-configuration" class="tab-pane active">

              <center><h5 style="margin-top: 0px; padding-top: 15px;">Genetics</h5></center>

              <table class="table conf-table">

                <tr class="conf-option" data-toggle="tooltip"
                    title="The number of individuals in a the population. This determines the size of the gene pool. If the population is 1, then reproduction occurs asexually">
                  <td style="width: 160px;">
                    Population Size
                  </td>
{'fraction_non_alphanumeric': 0.13318824809575625, 'fraction_numerical': 0.01581429089590134, 'mean_word_length': 1.9833369400562648, 'pattern_counts': {'":': 0, '<': 282, '<?xml version=': 0, '>': 282, 'https://': 7, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '881475', 'n_tokens_mistral': 4201, 'n_tokens_neox': 3854, 'n_words': 1217}