forked from gabrielsroka/gabrielsroka.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
colors.html
100 lines (93 loc) · 2.36 KB
/
colors.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, minimum-scale=0.25">
<title>Ellsworth Kelly - Colors for a Large Wall</title>
<link href="main.css" rel="stylesheet">
<style>
p {
text-align: center;
margin: 5px;
}
div {
text-align: center;
margin: 20px;
}
button {
margin: 20px;
width: 80px;
height: 30px;
background-color: white;
}
</style>
</head>
<body>
<p><b>Ellsworth Kelly</b></p>
<p><i>Colors for a Large Wall</i></p>
<p>1951</p>
<canvas id=canvas></canvas>
<div>
<button id=shuffleTiles>Tiles</button> <button id=shuffleColors>Colors</button> <button id=reset>Reset</button>
</div>
<script>
var context = canvas.getContext("2d");
var w, colors, tiles;
onload = reset.onclick = () => {
colors = [
color(243, 244, 238), // "white"
color(80, 65, 60),
color(137, 121, 170),
color(56, 55, 53),
color(190, 114, 56),
color(85, 148, 183),
color(59, 108, 79),
color(230, 218, 84),
color(190, 113, 131),
color(53, 80, 135),
color(142, 57, 52),
color(146, 190, 137),
color(75, 65, 92),
color(49, 50, 68)
];
// indexes into the colors array
tiles = [
1, 0, 2, 0, 3, 4, 0, 5,
0, 6, 3, 0, 7, 0, 8, 3,
3, 0, 0, 9, 0, 0, 0, 4,
10, 0, 5, 0, 11, 3, 12, 0,
0, 12, 3, 0, 0, 10, 0, 9,
6, 0, 0, 5, 0, 0, 6, 3,
0, 8, 11, 0, 3, 2, 0, 0,
3, 0, 12, 7, 0, 3, 8, 13
];
onresize();
};
onresize = () => {
canvas.height = canvas.width = document.body.clientWidth;
w = canvas.width / 8;
draw();
};
shuffleTiles.onclick = () => shuffle(tiles);
shuffleColors.onclick = () => shuffle(colors);
function draw() {
var i = 0;
for (var y = 0; y < 8; y++) {
for (var x = 0; x < 8; x++) {
var c = tiles[i];
context.fillStyle = colors[c];
context.fillRect(x * w, y * w, w, w);
i++;
}
}
}
function shuffle(a) {
for (var i = a.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * i) + 1; // Don't shuffle index == 0 ("white")
[a[i], a[j]] = [a[j], a[i]];
}
draw();
}
const color = (r, g, b) => `rgb(${r},${g},${b})`;
</script>
</body>
</html>