shooflenet/articles/comic_layout_generator.article.html

<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')); });

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();
  }
  panel.appendChild(new_rect(50, 50, 400, 600));
}

function generate() {
  var svg = document.getElementById('svg');
  clear(svg);
  while (svg.children.length < document.getElementById('complexity').value) {
    mutate(choose(svg.children)); 
  }
}

function mutate(panel) {
  choose(split_types(panel))(panel);
}

function split_types(panel) {
  var splits = [];
  
  var aspect_ratio = get_aspect_ratio(panel);
  if (aspect_ratio < 5) {
    splits.push(split_vertical);
    splits.push(split_vertical);
    splits.push(split_vertical);
    splits.push(multisplit_vertical);
  }
  
  if (aspect_ratio > 0.2) {
    splits.push(split_horizontal);
    splits.push(split_horizontal);
    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 n = choose([2,2,3,3,3,4]);
  
  var results = [];
  var step = (height + (1-n)*2*margin) / n;
  
  for (var i=0; i<n; i++) {
    var child = new_rect(x, y + i*(step + 2*margin), width, step);
    panel.parentElement.appendChild(child);
    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();
  
  return [child_one, child_two];
}

function multisplit_horizontal(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 n = choose([2,2,3,3,3,4]);
  
  var results = [];
  var step = (width + (1-n)*2*margin) / n;
  
  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);
  }
  
  panel.remove();
  return results;
}

function split_horizontal(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()*(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) {
  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(p) {return parseFloat(p.getAttribute('width')) / parseFloat(p.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>
<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>