parent
535d12e146
commit
e401cd1bcc
@ -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> |
Loading…
Reference in new issue