index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>Space colonization (2D) experiments in JavaScript</title>

  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Facebook OG -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://jasonwebb.github.io/2d-space-colonization-experiments">
  <meta property="og:title" content="Space colonization (2D) experiments in JavaScript">
  <meta property="og:image" content="https://jasonwebb.github.io/2d-space-colonization-experiments/images/social-media-preview.png">
  <meta property="og:image:width" content="1280">
  <meta property="og:image:height" content="640">
  <meta property="og:description" content="Series of visual experiments in JavaScript exploring the topic of space colonization as a method for generating interesting 2D forms.">
  <meta property="og:locale" content="en_US">

  <!-- Twitter card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@jasonwebb">
  <meta name="twitter:title" content="Space colonization (2D) experiments in JavaScript">
  <meta name="twitter:description" content="Series of visual experiments in JavaScript exploring the topic of space colonization as a method for generating interesting 2D forms.">
  <meta name="twitter:image" content="https://jasonwebb.github.io/2d-space-colonization-experiments/images/social-media-preview.png">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  <link rel="stylesheet" href="bulma.min.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <h1>Space colonization (2D) experiments in JavaScript</h1>

    <div class="by-line">
      by Jason Webb

      <a href="https://jasonwebb.io" target="_blank">
        <span class="fas fa-link" aria-hidden="true"></span>
        <span class="sr-only">Portfolio</span>
      </a>

      <a href="https://github.com/jasonwebb" target="_blank">
        <span class="fab fa-github" aria-hidden="true"></span>
        <span class="sr-only">Github profile</span>
      </a>

      <a href="https://twitter.com/jasonwebb" target="_blank">
        <span class="fab fa-twitter" aria-hidden="true"></span>
        <span class="sr-only">Twitter profile</span>
      </a>

      <a href="https://www.instagram.com/zenwebb/" target="_blank">
        <span class="fab fa-instagram" aria-hidden="true"></span>
        <span class="sr-only">Instagram profile</span>
      </a>
    </div>

    <div class="content">
      <p>Space colonization is a process for iteratively growing networks of organic branches based on the distribution of attractors to which the branches are attracted. <a href="http://algorithmicbotany.org/papers/venation.sig2005.pdf">Originally described</a> (PDF) by <a href="http://adam.runions.net/" target="_blank">Adam Runions</a> and collaborators at the <a href="http://algorithmicbotany.org/" target="_blank">Algorithmic Botany group</a> at the University of Calgary, this system can be used to simulate the growth of leaf venation patterns and tree-like structures, as well as many other vein-like systems like Gorgonian sea fans, circulatory systems, root systems, and more.</p>

      <div class="buttons">
        <a href="https://medium.com/@jason.webb/space-colonization-algorithm-in-javascript-6f683b743dc5" class="button is-info" target="_blank">
          <span class="fab fa-medium-m" aria-hidden="true"></span>
          Medium article
        </a>

        <a href="https://github.com/jasonwebb/2d-space-colonization-experiments" class="button is-light" target="_blank">
          <span class="fab fa-github" aria-hidden="true"></span>
          Github repository
        </a>
      </div>

      <p style="font-style: italic">Check out the <a href="https://github.com/jasonwebb/2d-space-colonization-experiments" target="_blank">Github repository</a> for a more in-depth explanation of the algorithm along with a comprehensive list of both creative and technical references on the topic.</p>
    </div>
  </div>

  <ul class="experiments-list">
    <li>
      <a href="experiments/basic/" class="has-border">
        <img src="images/basic-screenshot.png" alt="">
        <div class="overlay">
          <div class="title">Basic</div>
        </div>
      </a>
    </li>

    <li>
      <a href="experiments/bounds/">
        <img src="images/bounds-screenshot.png" alt="">
        <div class="overlay">
          <div class="title">Bounds</div>
        </div>
      </a>
    </li>

    <li>
      <a href="experiments/obstacles/" class="is-inverted">
        <img src="images/obstacles-screenshot.png" alt="">
        <div class="overlay">
          <div class="title">Obstacles</div>
        </div>
      </a>
    </li>

    <li>
      <a href="experiments/marginal-growth/" class="is-inverted">
        <img src="images/marginal-growth-screenshot.png" alt="">
        <div class="overlay">
          <div class="title">Marginal Growth</div>
        </div>
      </a>
    </li>

    <li>
      <a href="experiments/painting/" class="is-inverted">
        <img src="images/painting-screenshot.png" alt="">
        <div class="overlay">
          <div class="title">Painting</div>
        </div>
      </a>
    </li>

    <li>
      <a href="experiments/from-images/" class="is-inverted">
        <img src="images/from-images-screenshot.png" alt="">
        <div class="overlay">
          <div class="title">Images</div>
        </div>
      </a>
    </li>
  </ul>
</body>
</html>