|
|
|
@ -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_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 split(panel, horizontal, distance) { |
|
|
|
|
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]); |
|
|
|
|
|
|
|
|
|
var results = []; |
|
|
|
|
var step = (width + (1-n)*2*margin) / n; |
|
|
|
|
|
|
|
|
|
if (aspect_ratio > max_aspect_ratio) { |
|
|
|
|
return true; |
|
|
|
|
} else if ((1/aspect_ratio) > max_aspect_ratio) { |
|
|
|
|
return false; |
|
|
|
|
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> |
|
|
|
|