add the comic page layout generator

articles/comic_layout_generator.article.html

@@ -0,0 +1,107 @@
+<article>
+<script type="text/javascript">
+var ns = "http://www.w3.org/2000/svg";
+var margin = 5;
+var max_aspect_ratio = 3;
+
+$(document).ready(function() { clear(document.getElementById('svg')); });
+
+function clear(panel) {
+  while (panel.children.length > 0) {
+    panel.children[0].remove();
+  }
+  var rect = new_rect(50, 50, 400, 600);
+  rect.setAttribute('id', 'panel');
+  panel.appendChild(rect);
+}
+
+function generate() {
+  var svg = document.getElementById('svg');
+  clear(svg);
+  while (svg.children.length < document.getElementById('complexity').value) {
+    mutate(choose(svg.children)); 
+  }
+}
+
+function mutate(panel) {
+  var horizontal = is_split_horizontal(panel);
+  var portion = get_split_length(panel, horizontal);
+  var results = split(panel, horizontal, portion);
+  return results;
+}
+
+function split(panel, horizontal, distance) {
+  var x = parseFloat(panel.getAttribute('x'));
+  var y = parseFloat(panel.getAttribute('y'));
+  var width = parseFloat(panel.getAttribute('width'));
+  var height = parseFloat(panel.getAttribute('height'));
+
+  var child_one, child_two;
+  if (horizontal) {
+    child_one = new_rect(x, y, distance - margin, height);
+    child_two = new_rect(x + distance + margin, y, 
+                         width - distance - margin, height);
+  } else {
+    child_one = new_rect(x, y, width, distance - margin);
+    child_two = new_rect(x, y + distance + margin, 
+                         width, height - distance - margin);
+  }
+  
+  panel.parentElement.appendChild(child_one);
+  panel.parentElement.appendChild(child_two);
+  panel.remove();
+  
+  return [child_one, child_two];
+}
+
+function choose(options) {
+  var idx = Math.floor(Math.random() * options.length);
+  
+  return options[idx];
+}
+
+function is_split_horizontal(panel) {
+  var aspect_ratio = get_aspect_ratio(panel);
+  
+  if (aspect_ratio > max_aspect_ratio) {
+    return true;
+  } else if ((1/aspect_ratio) > max_aspect_ratio) {
+    return false;
+  }
+  
+  return Math.random() > 0.5;
+}
+
+function get_split_length(panel, horizontal) {
+  var dimension = panel.getAttribute(horizontal ? 'width' : 'height');
+  var value = Math.random() * (dimension - 30*margin) + (15*margin);
+  return value;
+}
+
+function new_rect(x, y, width, height) {
+  var rect = document.createElementNS(ns, 'rect');
+  rect.setAttribute("x", x);
+  rect.setAttribute("y", y);
+  rect.setAttribute("width", width);
+  rect.setAttribute("height", height);
+  return rect;
+}
+
+function get_aspect_ratio(panel) {
+  return parseFloat(panel.getAttribute('width')) / parseFloat(panel.getAttribute('height'));
+}
+</script>
+
+<p>Here, have a thing that generates layouts for comic pages! It's very rough, and silly.<p>
+<label for="complexity">Number of panels:</label><input type="number" id="complexity" value="5"/>
+<button onclick="generate()">generate the thing!</button>
+
+<svg id="svg" style="stroke-width:2px; stroke:black; fill:none; display:block;"
+   width="50%"
+   viewBox="0 0 500 700"
+   preserveAspectRatio="meet"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink" />
+
+</article>

static/shoofle.css

@@ -103,4 +103,4 @@ Secondary Color B:
 purple ae81ff
 dark violet 6c71c4
 cyan 2aa198
-*/
+*/