I am trying to generate a map based on the Golden Ratio:
a+b is to a as a is to b.
I was looking at a JavaScript math library that had a built-in phi, but I wasn't sure how to apply it.
I also tried using hard-coded values as can be seen in this example:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@7.1.0/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Drag and Drop Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var multiplier = 10;
var width = 65;
var height = 50;
var color = getRandomColor();
var x = 0;
var y = 0;
var stage = new Konva.Stage({
container: 'container',
width: width * multiplier,
height: height * multiplier,
});
var layer = new Konva.Layer();
function square(s) {
var box = new Konva.Rect({
x: x,
y: y,
width: s * multiplier,
height: s * multiplier,
fill: color,
strokeWidth: 0,
draggable: true,
});
// add cursor styling
box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
document.body.style.cursor = 'default';
});
x += s * multiplier;
color = getRandomColor();
return box;
}
var level_map = [];
level_map = [1, 2, 3, 5, 8, 13, 21, 34]; // golden ratio
level_map.forEach(function(size, index) {
level_map[index] = square(size);
});
x = level_map[0].x();
y = level_map[0].height();
console.log("x: ", x);
console.log("y: ", y);
level_map.forEach(function(square, index) {
layer.add(square);
});
stage.add(layer);
</script>
</body>
</html>
Which creates the following pattern:
What I am looking for is more like this:
Note: this grid was roughly hand drawn and is not to scale.
