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