<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>