-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
51 lines (51 loc) · 2.33 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>kume</title>
<link rel="stylesheet" href="public/assets/styles/main.css">
<link href="https://fonts.googleapis.com/css?family=EB+Garamond:500,600,700|Noto+Sans:400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<aside>
<header class="title">
kume
</header>
<section class="counts">
<div>
<h2>NUMBER OF CLUSTERS <em>k =</em><input type="number" id="k" min="1" value="6" /></em></h2>
</div>
<div>
<h2>ITERATION NUMBER <em><span id="iteration-number">0</span></em></h2>
<em><button class="restart-iteration">restart</button></em>
</div>
</section>
<section class="image">
<ul class="image-number">
<li><label>IMAGES</label></li>
</ul>
<canvas id="canvas"></canvas>
</section>
<section class="blurb">
Visualizing dominant colors and image segmentation with<br /><a href="https://en.wikipedia.org/wiki/K-means_clustering" target="_blank">k-means clustering</a>.
</section>
<div class="links">
<p>K-means groups the photo's pixels into <em>k</em> clusters. The algorithm first makes a guess at the <em>k</em> dominant colors. It then iteratively assigns pixels to clusters based on color distances and updates each cluster's average color. When the clusters no longer update, the original image is redrawn with only <em>k</em> colors. Read more on <a href="https://github.com/agarun/kume">GitHub</a>
or <a href="https://agarun.com">contact the author</a>.
</p>
</div>
</aside>
<article>
<section class="plot-container">
<canvas id="plot"></canvas>
<svg id="d3-plot"></svg>
</section>
<section class="blurb-color">
A plot of the image's pixels as RGB colors converted from the CIELAB color space. The x-axis denotes the red-green channel (<em>a*</em>) and the y-axis denotes the blue-yellow channel (<em>b*</em>). Each k-means update changes the clusters' mean colors if possible. Hover over a cluster's color to see more info about it.
</section>
</article>
</div>
<script src="public/assets/js/bundle.js" charset="utf-8"></script>
</body>
</html>