108 lines
3.0 KiB
HTML
108 lines
3.0 KiB
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')); });
|
|
|
|
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>
|