Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Generates fractals from regular expressions
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment