bencoveney/RegexFractals.html

## RegexFractals.html
<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Regular Expression Fractals</title>
    <meta name="description" content="Regular Expression Fractals">
    <meta name="author" content="Ben Coveney">

    <style>
      body {
        background-color: #333;
        text-align: center;
      }

      h1, p, label, a:link, a:visited {
        color: #CCC;
        font-family: sans-serif;
        font-weight: 100;
      }

      #playground {
        background-color: #666;
        width: 500px;
        height: 500px;
      }
    </style>

  </head>

  <body>

    <h1>Regular Expression Fractals</h1>

    <form>
      <label for="regExpInput">Regular Expression:</label>
      <input type="text" name="regExpInput" id=regExpInput value="32|4">

      <a onclick="runExpression();" href="#">Submit</a>
    </form>

    <p>Generates fractals from regular expressions. Uses <a href="http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/">PNGLib</a> for javacript image generation.</p>

    <div id="imageContainer"></div>

    <!-- Include png creation library -->
    <script src="pnglib.js" type="text/javascript"></script>

    <script type="text/javascript">

      var imageSize = 512;
      var regexp = '32|4';

      // Create image object
      var image;

      var topLeft = '1';
      var topRight = '2';
      var bottomLeft = '4';
      var bottomRight = '3';

      // Calls quarter on every corner of the area
      var quarter = function(code, top, bottom, left, right)
      {
        // Calculate values used in splitting
        var xDifference = bottom - top;
        var yDifference = right - left;
        var halfXDifference = xDifference / 2;
        var halfYDifference = yDifference / 2;

        // Calculate whether we're at the 1x1 level
        var isEnd = (xDifference == 1 && yDifference == 1);

        // Evaluate whether
        var isRegexMatch = (code.search(regexp) > -1);

        // If we're at the bottom
        if(isEnd)
        {
          // Color if theres a match, otherwise do nothing
          if(isRegexMatch)
          {
            // Color it
            image.buffer[image.index(left,top)] = image.color(0xff, 0xff, 0xff);
          }
        }
        else
        {
          // Color the entire cell if it matches
          if(isRegexMatch)
          {
            // For each cell in the area
            for(var x = left; x < right; x++)
            {
              for(var y = top; y < bottom; y++)
              {
                // Calcuate how far down we are
                var depth = code.length;
                var colorIntensity = depth + (16* depth);
                var colorCode = colorIntensity.toString(16);

                image.buffer[image.index(x,y)] = image.color(colorCode, 0x00, 0x00);
              }
            }
          }
          else
          {
            // Top left
            quarter(
              code + topLeft,
              top,
              top + halfXDifference,
              left,
              left + halfYDifference);
            // Top right
            quarter(
              code + topRight,
              top,
              top + halfXDifference,
              left + halfYDifference,
              right);
            // Bottom left
            quarter(
              code + bottomLeft,
              top + halfXDifference,
              bottom,
              left,
              left + halfYDifference);
            // Bottom right
            quarter(
              code + bottomRight,
              top + halfXDifference,
              bottom,
              left + halfYDifference,
              right);
          }
        }
      }

      var runExpression = function() {
        // Reset the image
        image = new window.PNGlib(imageSize, imageSize, 256);
        var background = image.color(0x00, 0x00, 0x00, 0xff);

        // Read the regex from the textbox
        regexp = document.getElementById('regExpInput').value;

        // Execute the draw
        quarter('', 0, imageSize, 0, imageSize);

        // Write image object to page
        var imageText = '<img src="data:image/png;base64,' + image.getBase64() + '">';
        document.getElementById('imageContainer').innerHTML = imageText;
      }

      // Trigger initial draw
      runExpression();

    </script>

  </body>

</html>
	<!doctype html>

	<html lang="en">

	<head>
	<meta charset="utf-8">

	<title>Regular Expression Fractals</title>
	<meta name="description" content="Regular Expression Fractals">
	<meta name="author" content="Ben Coveney">

	<style>
	body {
	background-color: #333;
	text-align: center;
	}

	h1, p, label, a:link, a:visited {
	color: #CCC;
	font-family: sans-serif;
	font-weight: 100;
	}

	#playground {
	background-color: #666;
	width: 500px;
	height: 500px;
	}
	</style>

	</head>

	<body>

	<h1>Regular Expression Fractals</h1>

	<form>
	<label for="regExpInput">Regular Expression:</label>
	<input type="text" name="regExpInput" id=regExpInput value="32\|4">

	<a onclick="runExpression();" href="#">Submit</a>
	</form>

	<p>Generates fractals from regular expressions. Uses <a href="http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/">PNGLib</a> for javacript image generation.</p>

	<div id="imageContainer"></div>

	<!-- Include png creation library -->
	<script src="pnglib.js" type="text/javascript"></script>

	<script type="text/javascript">

	var imageSize = 512;
	var regexp = '32\|4';

	// Create image object
	var image;

	var topLeft = '1';
	var topRight = '2';
	var bottomLeft = '4';
	var bottomRight = '3';

	// Calls quarter on every corner of the area
	var quarter = function(code, top, bottom, left, right)
	{
	// Calculate values used in splitting
	var xDifference = bottom - top;
	var yDifference = right - left;
	var halfXDifference = xDifference / 2;
	var halfYDifference = yDifference / 2;

	// Calculate whether we're at the 1x1 level
	var isEnd = (xDifference == 1 && yDifference == 1);

	// Evaluate whether
	var isRegexMatch = (code.search(regexp) > -1);

	// If we're at the bottom
	if(isEnd)
	{
	// Color if theres a match, otherwise do nothing
	if(isRegexMatch)
	{
	// Color it
	image.buffer[image.index(left,top)] = image.color(0xff, 0xff, 0xff);
	}
	}
	else
	{
	// Color the entire cell if it matches
	if(isRegexMatch)
	{
	// For each cell in the area
	for(var x = left; x < right; x++)
	{
	for(var y = top; y < bottom; y++)
	{
	// Calcuate how far down we are
	var depth = code.length;
	var colorIntensity = depth + (16* depth);
	var colorCode = colorIntensity.toString(16);

	image.buffer[image.index(x,y)] = image.color(colorCode, 0x00, 0x00);
	}
	}
	}
	else
	{
	// Top left
	quarter(
	code + topLeft,
	top,
	top + halfXDifference,
	left,
	left + halfYDifference);
	// Top right
	quarter(
	code + topRight,
	top,
	top + halfXDifference,
	left + halfYDifference,
	right);
	// Bottom left
	quarter(
	code + bottomLeft,
	top + halfXDifference,
	bottom,
	left,
	left + halfYDifference);
	// Bottom right
	quarter(
	code + bottomRight,
	top + halfXDifference,
	bottom,
	left + halfYDifference,
	right);
	}
	}
	}

	var runExpression = function() {
	// Reset the image
	image = new window.PNGlib(imageSize, imageSize, 256);
	var background = image.color(0x00, 0x00, 0x00, 0xff);

	// Read the regex from the textbox
	regexp = document.getElementById('regExpInput').value;

	// Execute the draw
	quarter('', 0, imageSize, 0, imageSize);

	// Write image object to page
	var imageText = '<img src="data:image/png;base64,' + image.getBase64() + '">';
	document.getElementById('imageContainer').innerHTML = imageText;
	}

	// Trigger initial draw
	runExpression();

	</script>

	</body>

	</html>