shoofle/shooflenet
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

clean up the comic layout generator

Browse Source
This commit is contained in:
Shoofle 2016-06-29 14:56:42 -04:00 committed by GitHub
parent e401cd1bcc
commit 503c3aa2f9
1 changed files with 86 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
articles/comic_layout_generator.article.html
View File

@ -6,13 +6,17 @@ 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();
}
var rect = new_rect(50, 50, 400, 600);
rect.setAttribute('id', 'panel');
panel.appendChild(rect);
panel.appendChild(new_rect(50, 50, 400, 600));
}
function generate() {
@ -24,29 +28,59 @@ function generate() {
}
function mutate(panel) {
var horizontal = is_split_horizontal(panel);
var portion = get_split_length(panel, horizontal);
var results = split(panel, horizontal, portion);
return results;
choose(split_types(panel))(panel);
}
function split(panel, horizontal, distance) {
function split_types(panel) {
var splits = [];
var aspect_ratio = get_aspect_ratio(panel);
if (aspect_ratio < 5) {
splits.push(split_vertical);
splits.push(multisplit_vertical);
}
if (aspect_ratio > 0.2) {
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 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);
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();
@ -54,28 +88,44 @@ function split(panel, horizontal, distance) {
return [child_one, child_two];
}
function choose(options) {
var idx = Math.floor(Math.random() * options.length);
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'));
return options[idx];
}
function is_split_horizontal(panel) {
var aspect_ratio = get_aspect_ratio(panel);
var n = choose([2,2,3,3,3,4]);
if (aspect_ratio > max_aspect_ratio) {
return true;
} else if ((1/aspect_ratio) > max_aspect_ratio) {
return false;
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);
}
return Math.random() > 0.5;
panel.remove();
return results;
}
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 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) {
@ -87,9 +137,8 @@ function new_rect(x, y, width, height) {
return rect;
}
function get_aspect_ratio(panel) {
return parseFloat(panel.getAttribute('width')) / parseFloat(panel.getAttribute('height'));
}
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>