175 lines
4.9 KiB
HTML
175 lines
4.9 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Writings by Shoofle</title>
|
||
|
|
<script src="/static/jquery.min.js" type="text/javascript"></script>
|
||
|
|
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
|
||
|
|
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
|
||
|
|
<link href="/static/shoofle.css" rel="stylesheet" type="text/css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<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>
|
||
|
|
</body>
|
||
|
|
</html>
|