/
index.html
62 lines (56 loc) · 1.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexo Sketchbook — Mon 24 Mar 2014: Squares</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../sketch.css">
<script src="../../flexo.js"></script>
<style>
svg {
display: block;
position: absolute;
}
footer {
font-size: small;
text-align: right;
position: absolute;
margin: 0;
bottom: 1rem;
right: 1rem;
}
</style>
<body class="full">
<svg width="100%" height="100%"></svg>
<script>
"use strict";
var svg = document.querySelector("svg");
var numbers = flexo.urn(19, 23, 29, 31, 37, 41, 43, 47, 53, 59);
var colors = flexo.urn("#ff6a4d", "#0b486b", "#5eb26b", "#774f38", "#f8ca00",
"#9e0b46", "#a61416", "#222222", "#f8f9f0", "#4dbce9", "#06491d", "#f94179");
function generate() {
var w = numbers.pick();
var h = numbers.pick();
document.body.style.backgroundImage = "linear-gradient(to bottom, %0, %1)"
.fmt(colors.pick(), colors.pick());
flexo.remove_children(svg);
svg.setAttribute("viewBox", "0 0 %0 %1".fmt(w * h, h * h));
for (var y = 0; y < h; ++y) {
for (var x = 0; x < w; ++x) {
var sz = Math.max(1, flexo.random_number(y * 0.8, y * 1.25));
var x_ = x * h + (h - sz) / 2;
var y_ = y * h + (h - sz) / 2;
svg.appendChild(flexo.$rect({ x: x_, y: y_, width: sz, height: sz,
fill: colors.pick() }));
}
}
}
document.body.onclick = generate;
generate();
</script>
<footer>
Mon 24 Mar 2014, from the <a href="../index.html#mar2014">Flexo
sketchbook</a>.<br>
Check out the code <a href="https://github.com/julienq/flexo/tree/master/sketchbook/20140324-squares">on Github</a>!
</footer>
</body>
</html>