clean up the comic layout generator

articles/comic_layout_generator.article.html

@@ -6,13 +6,17 @@ var max_aspect_ratio = 3;
 
 $(document).ready(function() { clear(document.getElementById('svg')); });
 
+var ns = "http://www.w3.org/2000/svg";
+var margin = 5;
+var max_aspect_ratio = 3;
+
+clear(document.getElementById('svg'));
+
 function clear(panel) {
   while (panel.children.length > 0) {
     panel.children[0].remove();
   }
-  var rect = new_rect(50, 50, 400, 600);
+  panel.appendChild(new_rect(50, 50, 400, 600));
-  rect.setAttribute('id', 'panel');
-  panel.appendChild(rect);
 }
 
 function generate() {
@@ -24,29 +28,59 @@ function generate() {
 }
 
 function mutate(panel) {
-  var horizontal = is_split_horizontal(panel);
+  choose(split_types(panel))(panel);
-  var portion = get_split_length(panel, horizontal);
-  var results = split(panel, horizontal, portion);
-  return results;
 }
 
-function split(panel, horizontal, distance) {
+function split_types(panel) {
+  var splits = [];
+  
+  var aspect_ratio = get_aspect_ratio(panel);
+  if (aspect_ratio < 5) {
+    splits.push(split_vertical);
+    splits.push(multisplit_vertical);
+  }
+  
+  if (aspect_ratio > 0.2) {
+    splits.push(split_horizontal);
+    splits.push(multisplit_horizontal);
+  }
+  
+  return splits;
+}
+
+function multisplit_vertical(panel) {
   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;
+  var n = choose([2,2,3,3,3,4]);
-  if (horizontal) {
+  
-    child_one = new_rect(x, y, distance - margin, height);
+  var results = [];
-    child_two = new_rect(x + distance + margin, y, 
+  var step = (height + (1-n)*2*margin) / n;
-                         width - distance - margin, height);
+  
-  } else {
+  for (var i=0; i<n; i++) {
-    child_one = new_rect(x, y, width, distance - margin);
+    var child = new_rect(x, y + i*(step + 2*margin), width, step);
-    child_two = new_rect(x, y + distance + margin, 
+    panel.parentElement.appendChild(child);
-                         width, height - distance - margin);
+    results.push(child);
   }
   
+  panel.remove();
+  return results;
+}
+
+function split_vertical(panel) {
+  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 distance = Math.random()*(height - 2*margin);
+  
+  var child_one = new_rect(x, y, width, distance - margin);
+  var child_two = new_rect(x, y + distance + margin, 
+                       width, height - distance - margin);
+  
   panel.parentElement.appendChild(child_one);
   panel.parentElement.appendChild(child_two);
   panel.remove();
@@ -54,28 +88,44 @@ function split(panel, horizontal, distance) {
   return [child_one, child_two];
 }
 
-function choose(options) {
+function multisplit_horizontal(panel) {
-  var idx = Math.floor(Math.random() * options.length);
+  var x = parseFloat(panel.getAttribute('x'));
+  var y = parseFloat(panel.getAttribute('y'));
+  var width = parseFloat(panel.getAttribute('width'));
+  var height = parseFloat(panel.getAttribute('height'));
   
-  return options[idx];
+  var n = choose([2,2,3,3,3,4]);
-}
-
-function is_split_horizontal(panel) {
-  var aspect_ratio = get_aspect_ratio(panel);
   
-  if (aspect_ratio > max_aspect_ratio) {
+  var results = [];
-    return true;
+  var step = (width + (1-n)*2*margin) / n;
-  } else if ((1/aspect_ratio) > max_aspect_ratio) {
+  
-    return false;
+  for (var i=0; i<n; i++) {
+    var child = new_rect(x + i*(step + 2*margin), y, step, height);
+    panel.parentElement.appendChild(child);
+    results.push(child);
   }
   
-  return Math.random() > 0.5;
+  panel.remove();
+  return results;
 }
 
-function get_split_length(panel, horizontal) {
+function split_horizontal(panel) {
-  var dimension = panel.getAttribute(horizontal ? 'width' : 'height');
+  var x = parseFloat(panel.getAttribute('x'));
-  var value = Math.random() * (dimension - 30*margin) + (15*margin);
+  var y = parseFloat(panel.getAttribute('y'));
-  return value;
+  var width = parseFloat(panel.getAttribute('width'));
+  var height = parseFloat(panel.getAttribute('height'));
+  
+  var distance = Math.random()*(width - 2*margin) + margin;
+
+  var child_one = new_rect(x, y, distance - margin, height);
+  var child_two = new_rect(x + distance + margin, y, 
+                         width - distance - margin, height);
+  
+  panel.parentElement.appendChild(child_one);
+  panel.parentElement.appendChild(child_two);
+  panel.remove();
+  
+  return [child_one, child_two];
 }
 
 function new_rect(x, y, width, height) {
@@ -87,9 +137,8 @@ function new_rect(x, y, width, height) {
   return rect;
 }
 
-function get_aspect_ratio(panel) {
+function get_aspect_ratio(p) {return parseFloat(p.getAttribute('width')) / parseFloat(p.getAttribute('height'));}
-  return parseFloat(panel.getAttribute('width')) / parseFloat(panel.getAttribute('height'));
+function choose(o) {return o[Math.floor(Math.random() * o.length)];}
-}
 </script>
 
 <p>Here, have a thing that generates layouts for comic pages! It's very rough, and silly.<p>