I have a huge set of images. I'd like to create a hue-histogram for all of them, like in this post: http://blog.scottlogic.com/2014/04/12/app-colour-analysis.html
What is the best way to do so, and what are the values I need to get from my set of images?
From the blog post.
| Hue | Count of pixels with this hue value across all images |
------------------------------------------------------------------
| 0 | xxxxxx |
| 1 | yyyyyy |
....
| 360 | zzzzzz |
Plot in a circle, giving each radial line a length = the scaled value of the 2nd column (use d3.scale) and color corresponding to the hue (you can use d3.hsl)
From a data standpoint, you'll have to figure out how to get H values from the image. A good starting point would be How to generate a HSL or HSI Histogram from a normal Image?
And here's one way to generate the circle (once you have data)
// sample data - the index indicates the Hue value (0 - 360) and the value is the number of pixels
var data = []
for (var i = 0; i <= 360; i++)
data.push(parseInt(Math.random() * 5000));
// size of the canvas
var size = 500;
// how much big do you want the inner circle to be 100% = no bars!
var innerCirclePercentage = 0.2;
var innerCircleRatio = 0.5 + innerCirclePercentage / 2;
var scale = d3.scale.linear().domain([0, d3.max(data)]).range([size * innerCircleRatio, size]);
var svgContainer = d3.select("body").append("svg")
.attr("width", size)
.attr("height", size);
var lines = svgContainer
.selectAll(".line")
.data(data);
lines.enter()
.append("line")
.attr("class", "line")
.attr("x1", size * 0.5)
.attr("y1", size * innerCircleRatio)
.attr("x2", size * 0.5)
.attr("y2", function(d, i) {
return scale(d);
})
.attr("transform", function(d, i) {
return "rotate(" + i + ", " + size * 0.5 + ", " + size * 0.5 + ")"
})
.style("stroke-width", 5)
.style("stroke", function(d, i) {
return "hsl(" + i + ", 80%, 50%)";
});<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
You don't say what platform you are using, but let's assume it is OSX or Linux - you can adapt things to Windows if you must.
First, I would use ImageMagick to get the Hues present in an image like this:
convert image.png -colorspace hsl -separate -delete 1,2 -depth 8 txt: | more
# ImageMagick pixel enumeration: 360,40,255,gray
0,0: (0,0,0) #000000 gray(0)
1,0: (0,0,0) #000000 gray(0)
2,0: (0,0,0) #000000 gray(0)
3,0: (0,0,0) #000000 gray(0)
4,0: (0,0,0) #000000 gray(0)
5,0: (0,0,0) #000000 gray(0)
6,0: (0,0,0) #000000 gray(0)
...
...
42,0: (0,0,0) #000000 gray(0)
43,0: (0,0,0) #000000 gray(0)
44,0: (0,0,0) #000000 gray(0)
45,0: (85,85,85) #555555 gray(85)
46,0: (85,85,85) #555555 gray(85)
47,0: (85,85,85) #555555 gray(85)
48,0: (85,85,85) #555555 gray(85)
49,0: (85,85,85) #555555 gray(85)
50,0: (85,85,85) #555555 gray(85)
51,0: (85,85,85) #555555 gray(85)
52,0: (85,85,85) #555555 gray(85)
53,0: (85,85,85) #555555 gray(85)
That command converts the image to HSL colourspace and separates it into 3 channels, namely Hue, Saturation and Lightness. It then deletes the last two leaving just the Hue.
You can see there is one line per pixel and that the two hues present in this image are 0 and 85. The first two fields on each line are the pixel coordinates, but you don't care about that.
Now, you can do that for all the images in your folder like this
for f in *.png; do
convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 txt:
done
Filter that through grep to get rid of all the coordinates, parentheses and hex junk, like this:
for f in *.png; do
convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 txt:
done | grep -Po "(?<=\()(\d+)(?=\))"
0
0
0
...
85
85
85
Then pass through awk to total up the various hues, like this:
... grep -Po ... | awk '
BEGIN{for(i=0;i<=255;i++)hist[i]=0}
{hist[$1]++}
END{for(i=0;i<=255;i++)print i,hist[i]}'
0 1985
1 3957
2 3857
3 3958
4 3951
5 3737
6 3842
7 3925
8 3838
...
...
253 3842
254 4035
255 1945
Then plot with gnuplot. So, if you redirect the output of the prvious command to a file called hist.dat, and you save the following gnuplot commands to a file called plot.cmd
set terminal png size 1000,1000
set output 'result.png'
set style fill solid
set title "Hue Histogram"
set xlabel "Hue"
set ylabel "Frequency"
set xrange [0:255]
plot "hist.dat" using 2 with boxes
then you can plot it to a PNG file called result.png using this command
gnuplot plot.cmd
giving you this:
The above will be slow if your images are large, so you may choose to do it in binary and write a small histogram program in C. So this will be much faster...
for f in *.png; do
convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 gray:"$f.gray"
done
You will then have a second copy of all your files, each with the original name and an extension of .gray and they will have a single byte of hue information for each pixel in each image - uncompressed, undelimited. So you can basically cat all the .gray files into a C program that does fgetc to read all hue values for all files in the folder.
My other answer works through from first principles and gives quite a lot of flexibility in how you approach the question. This way also uses ImageMagick, but kind of cuts to the chase somewhat more directly...
So, we make a loop that goes through all images in your directory just as before, and for each image, convert it to HSL then discard the saturation and lightness. Pass the remaining Hue channel to a MIFF (Multiple Image File Format) and collate all the images into one big one and let ImageMagick generate the histogram itself...
for f in *.png; do
convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 miff:-
done | convert -background none - +append -define histogram:unique-colors=true histogram:gif:result.gif
Or, if you want the numbers and plan to plot them yourself a different way, you can change the command to this:
for f in *.png; do
convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 miff:-
done | convert -background none - +append -define histogram:unique-colors=true -format %c histogram:info:
2000020: ( 0, 0, 0,255) #000000FF graya(0,1)
90000: ( 0, 0, 0, 0) #00000000 graya(0,0)
34: ( 1, 1, 1,255) #010101FF graya(1,1)
45: ( 2, 2, 2,255) #020202FF graya(2,1)
36: ( 3, 3, 3,255) #030303FF graya(3,1)
46: ( 4, 4, 4,255) #040404FF graya(4,1)
35: ( 5, 5, 5,255) #050505FF graya(5,1)
47: ( 6, 6, 6,255) #060606FF graya(6,1)
36: ( 7, 7, 7,255) #070707FF graya(7,1)
35: ( 8, 8, 8,255) #080808FF graya(8,1)
47: ( 9, 9, 9,255) #090909FF graya(9,1)
42: ( 10, 10, 10,255) #0A0A0AFF graya(10,1)
42: ( 11, 11, 11,255) #0B0B0BFF graya(11,1)
37: ( 12, 12, 12,255) #0C0C0CFF graya(12,1)
32: ( 13, 13, 13,255) #0D0D0DFF graya(13,1)
55: ( 14, 14, 14,255) #0E0E0EFF graya(14,1)
43: ( 15, 15, 15,255) #0F0F0FFF graya(15,1)
44: ( 16, 16, 16,255) #101010FF graya(16,1)
40: ( 17, 17, 17,255) #111111FF graya(17,1)
36: ( 18, 18, 18,255) #121212FF graya(18,1)
35: ( 19, 19, 19,255) #131313FF graya(19,1)
53: ( 20, 20, 20,255) #141414FF graya(20,1)
40: ( 21, 21, 21,255) #151515FF graya(21,1)
33: ( 22, 22, 22,255) #161616FF graya(22,1)
55: ( 23, 23, 23,255) #171717FF graya(23,1)
53: ( 24, 24, 24,255) #181818FF graya(24,1)
42: ( 25, 25, 25,255) #191919FF graya(25,1)
42: ( 26, 26, 26,255) #1A1A1AFF graya(26,1)
52: ( 27, 27, 27,255) #1B1B1BFF graya(27,1)
38: ( 28, 28, 28,255) #1C1C1CFF graya(28,1)
43: ( 29, 29, 29,255) #1D1D1DFF graya(29,1)
47: ( 30, 30, 30,255) #1E1E1EFF graya(30,1)
43: ( 31, 31, 31,255) #1F1F1FFF graya(31,1)
46: ( 32, 32, 32,255) #202020FF graya(32,1)
40: ( 33, 33, 33,255) #212121FF graya(33,1)
33: ( 34, 34, 34,255) #222222FF graya(34,1)
42: ( 35, 35, 35,255) #232323FF graya(35,1)
34: ( 36, 36, 36,255) #242424FF graya(36,1)
32: ( 37, 37, 37,255) #252525FF graya(37,1)
36: ( 38, 38, 38,255) #262626FF graya(38,1)
32: ( 39, 39, 39,255) #272727FF graya(39,1)
24: ( 40, 40, 40,255) #282828FF graya(40,1)
38: ( 41, 41, 41,255) #292929FF graya(41,1)
34: ( 42, 42, 42,255) #2A2A2AFF graya(42,1)
28: ( 43, 43, 43,255) #2B2B2BFF graya(43,1)
22: ( 44, 44, 44,255) #2C2C2CFF graya(44,1)
37: ( 45, 45, 45,255) #2D2D2DFF graya(45,1)
29: ( 46, 46, 46,255) #2E2E2EFF graya(46,1)
40: ( 47, 47, 47,255) #2F2F2FFF graya(47,1)
34: ( 48, 48, 48,255) #303030FF graya(48,1)
44: ( 49, 49, 49,255) #313131FF graya(49,1)
37: ( 50, 50, 50,255) #323232FF graya(50,1)
45: ( 51, 51, 51,255) #333333FF graya(51,1)
43: ( 52, 52, 52,255) #343434FF graya(52,1)
30: ( 53, 53, 53,255) #353535FF graya(53,1)
30: ( 54, 54, 54,255) #363636FF graya(54,1)
46: ( 55, 55, 55,255) #373737FF graya(55,1)
46: ( 56, 56, 56,255) #383838FF graya(56,1)
42: ( 57, 57, 57,255) #393939FF graya(57,1)
50: ( 58, 58, 58,255) #3A3A3AFF graya(58,1)
34: ( 59, 59, 59,255) #3B3B3BFF graya(59,1)
36: ( 60, 60, 60,255) #3C3C3CFF graya(60,1)
38: ( 61, 61, 61,255) #3D3D3DFF graya(61,1)
45: ( 62, 62, 62,255) #3E3E3EFF graya(62,1)
43: ( 63, 63, 63,255) #3F3F3FFF graya(63,1)
46: ( 64, 64, 64,255) #404040FF graya(64,1)
36: ( 65, 65, 65,255) #414141FF graya(65,1)
42: ( 66, 66, 66,255) #424242FF graya(66,1)
38: ( 67, 67, 67,255) #434343FF graya(67,1)
48: ( 68, 68, 68,255) #444444FF graya(68,1)
49: ( 69, 69, 69,255) #454545FF graya(69,1)
55: ( 70, 70, 70,255) #464646FF graya(70,1)
34: ( 71, 71, 71,255) #474747FF graya(71,1)
50: ( 72, 72, 72,255) #484848FF graya(72,1)
35: ( 73, 73, 73,255) #494949FF graya(73,1)
30: ( 74, 74, 74,255) #4A4A4AFF graya(74,1)
33: ( 75, 75, 75,255) #4B4B4BFF graya(75,1)
43: ( 76, 76, 76,255) #4C4C4CFF graya(76,1)
46: ( 77, 77, 77,255) #4D4D4DFF graya(77,1)
31: ( 78, 78, 78,255) #4E4E4EFF graya(78,1)
39: ( 79, 79, 79,255) #4F4F4FFF graya(79,1)
34: ( 80, 80, 80,255) #505050FF graya(80,1)
41: ( 81, 81, 81,255) #515151FF graya(81,1)
30: ( 82, 82, 82,255) #525252FF graya(82,1)
29: ( 83, 83, 83,255) #535353FF graya(83,1)
31: ( 84, 84, 84,255) #545454FF graya(84,1)
35: ( 85, 85, 85,255) #555555FF graya(85,1)
24: ( 86, 86, 86,255) #565656FF graya(86,1)
37: ( 87, 87, 87,255) #575757FF graya(87,1)
32: ( 88, 88, 88,255) #585858FF graya(88,1)
26: ( 89, 89, 89,255) #595959FF graya(89,1)
40: ( 90, 90, 90,255) #5A5A5AFF graya(90,1)
35: ( 91, 91, 91,255) #5B5B5BFF graya(91,1)
37: ( 92, 92, 92,255) #5C5C5CFF graya(92,1)
39: ( 93, 93, 93,255) #5D5D5DFF graya(93,1)
43: ( 94, 94, 94,255) #5E5E5EFF graya(94,1)
38: ( 95, 95, 95,255) #5F5F5FFF graya(95,1)
45: ( 96, 96, 96,255) #606060FF graya(96,1)
37: ( 97, 97, 97,255) #616161FF graya(97,1)
47: ( 98, 98, 98,255) #626262FF graya(98,1)
35: ( 99, 99, 99,255) #636363FF graya(99,1)
47: (100,100,100,255) #646464FF graya(100,1)
36: (101,101,101,255) #656565FF graya(101,1)
41: (102,102,102,255) #666666FF graya(102,1)
39: (103,103,103,255) #676767FF graya(103,1)
42: (104,104,104,255) #686868FF graya(104,1)
55: (105,105,105,255) #696969FF graya(105,1)
41: (106,106,106,255) #6A6A6AFF graya(106,1)
35: (107,107,107,255) #6B6B6BFF graya(107,1)
42: (108,108,108,255) #6C6C6CFF graya(108,1)
33: (109,109,109,255) #6D6D6DFF graya(109,1)
30: (110,110,110,255) #6E6E6EFF graya(110,1)
43: (111,111,111,255) #6F6F6FFF graya(111,1)
37: (112,112,112,255) #707070FF graya(112,1)
48: (113,113,113,255) #717171FF graya(113,1)
32: (114,114,114,255) #727272FF graya(114,1)
43: (115,115,115,255) #737373FF graya(115,1)
41: (116,116,116,255) #747474FF graya(116,1)
49: (117,117,117,255) #757575FF graya(117,1)
46: (118,118,118,255) #767676FF graya(118,1)
37: (119,119,119,255) #777777FF graya(119,1)
35: (120,120,120,255) #787878FF graya(120,1)
38: (121,121,121,255) #797979FF graya(121,1)
39: (122,122,122,255) #7A7A7AFF graya(122,1)
36: (123,123,123,255) #7B7B7BFF graya(123,1)
32: (124,124,124,255) #7C7C7CFF graya(124,1)
29: (125,125,125,255) #7D7D7DFF graya(125,1)
36: (126,126,126,255) #7E7E7EFF graya(126,1)
33: (127,127,127,255) #7F7F7FFF graya(127,1)
30: (128,128,128,255) #808080FF graya(128,1)
29: (129,129,129,255) #818181FF graya(129,1)
34: (130,130,130,255) #828282FF graya(130,1)
33: (131,131,131,255) #838383FF graya(131,1)
44: (132,132,132,255) #848484FF graya(132,1)
34: (133,133,133,255) #858585FF graya(133,1)
39: (134,134,134,255) #868686FF graya(134,1)
36: (135,135,135,255) #878787FF graya(135,1)
54: (136,136,136,255) #888888FF graya(136,1)
41: (137,137,137,255) #898989FF graya(137,1)
45: (138,138,138,255) #8A8A8AFF graya(138,1)
43: (139,139,139,255) #8B8B8BFF graya(139,1)
33: (140,140,140,255) #8C8C8CFF graya(140,1)
41: (141,141,141,255) #8D8D8DFF graya(141,1)
50: (142,142,142,255) #8E8E8EFF graya(142,1)
46: (143,143,143,255) #8F8F8FFF graya(143,1)
38: (144,144,144,255) #909090FF graya(144,1)
36: (145,145,145,255) #919191FF graya(145,1)
42: (146,146,146,255) #929292FF graya(146,1)
45: (147,147,147,255) #939393FF graya(147,1)
46: (148,148,148,255) #949494FF graya(148,1)
35: (149,149,149,255) #959595FF graya(149,1)
47: (150,150,150,255) #969696FF graya(150,1)
42: (151,151,151,255) #979797FF graya(151,1)
53: (152,152,152,255) #989898FF graya(152,1)
35: (153,153,153,255) #999999FF graya(153,1)
47: (154,154,154,255) #9A9A9AFF graya(154,1)
43: (155,155,155,255) #9B9B9BFF graya(155,1)
37: (156,156,156,255) #9C9C9CFF graya(156,1)
44: (157,157,157,255) #9D9D9DFF graya(157,1)
51: (158,158,158,255) #9E9E9EFF graya(158,1)
39: (159,159,159,255) #9F9F9FFF graya(159,1)
31: (160,160,160,255) #A0A0A0FF graya(160,1)
45: (161,161,161,255) #A1A1A1FF graya(161,1)
37: (162,162,162,255) #A2A2A2FF graya(162,1)
38: (163,163,163,255) #A3A3A3FF graya(163,1)
28: (164,164,164,255) #A4A4A4FF graya(164,1)
30: (165,165,165,255) #A5A5A5FF graya(165,1)
43: (166,166,166,255) #A6A6A6FF graya(166,1)
28: (167,167,167,255) #A7A7A7FF graya(167,1)
47: (168,168,168,255) #A8A8A8FF graya(168,1)
32: (169,169,169,255) #A9A9A9FF graya(169,1)
37: (170,170,170,255) #AAAAAAFF graya(170,1)
33: (171,171,171,255) #ABABABFF graya(171,1)
21: (172,172,172,255) #ACACACFF graya(172,1)
32: (173,173,173,255) #ADADADFF graya(173,1)
38: (174,174,174,255) #AEAEAEFF graya(174,1)
53: (175,175,175,255) #AFAFAFFF graya(175,1)
33: (176,176,176,255) #B0B0B0FF graya(176,1)
40: (177,177,177,255) #B1B1B1FF graya(177,1)
26: (178,178,178,255) #B2B2B2FF graya(178,1)
35: (179,179,179,255) #B3B3B3FF graya(179,1)
43: (180,180,180,255) #B4B4B4FF graya(180,1)
43: (181,181,181,255) #B5B5B5FF graya(181,1)
40: (182,182,182,255) #B6B6B6FF graya(182,1)
35: (183,183,183,255) #B7B7B7FF graya(183,1)
37: (184,184,184,255) #B8B8B8FF graya(184,1)
38: (185,185,185,255) #B9B9B9FF graya(185,1)
37: (186,186,186,255) #BABABAFF graya(186,1)
44: (187,187,187,255) #BBBBBBFF graya(187,1)
47: (188,188,188,255) #BCBCBCFF graya(188,1)
34: (189,189,189,255) #BDBDBDFF graya(189,1)
41: (190,190,190,255) #BEBEBEFF graya(190,1)
52: (191,191,191,255) #BFBFBFFF graya(191,1)
35: (192,192,192,255) #C0C0C0FF graya(192,1)
43: (193,193,193,255) #C1C1C1FF graya(193,1)
48: (194,194,194,255) #C2C2C2FF graya(194,1)
46: (195,195,195,255) #C3C3C3FF graya(195,1)
40: (196,196,196,255) #C4C4C4FF graya(196,1)
34: (197,197,197,255) #C5C5C5FF graya(197,1)
42: (198,198,198,255) #C6C6C6FF graya(198,1)
38: (199,199,199,255) #C7C7C7FF graya(199,1)
41: (200,200,200,255) #C8C8C8FF graya(200,1)
45: (201,201,201,255) #C9C9C9FF graya(201,1)
42: (202,202,202,255) #CACACAFF graya(202,1)
41: (203,203,203,255) #CBCBCBFF graya(203,1)
36: (204,204,204,255) #CCCCCCFF graya(204,1)
34: (205,205,205,255) #CDCDCDFF graya(205,1)
36: (206,206,206,255) #CECECEFF graya(206,1)
38: (207,207,207,255) #CFCFCFFF graya(207,1)
28: (208,208,208,255) #D0D0D0FF graya(208,1)
40: (209,209,209,255) #D1D1D1FF graya(209,1)
34: (210,210,210,255) #D2D2D2FF graya(210,1)
22: (211,211,211,255) #D3D3D3FF graya(211,1)
26: (212,212,212,255) #D4D4D4FF graya(212,1)
34: (213,213,213,255) #D5D5D5FF graya(213,1)
46: (214,214,214,255) #D6D6D6FF graya(214,1)
35: (215,215,215,255) #D7D7D7FF graya(215,1)
31: (216,216,216,255) #D8D8D8FF graya(216,1)
32: (217,217,217,255) #D9D9D9FF graya(217,1)
35: (218,218,218,255) #DADADAFF graya(218,1)
37: (219,219,219,255) #DBDBDBFF graya(219,1)
32: (220,220,220,255) #DCDCDCFF graya(220,1)
41: (221,221,221,255) #DDDDDDFF graya(221,1)
43: (222,222,222,255) #DEDEDEFF graya(222,1)
51: (223,223,223,255) #DFDFDFFF graya(223,1)
45: (224,224,224,255) #E0E0E0FF graya(224,1)
35: (225,225,225,255) #E1E1E1FF graya(225,1)
47: (226,226,226,255) #E2E2E2FF graya(226,1)
37: (227,227,227,255) #E3E3E3FF graya(227,1)
41: (228,228,228,255) #E4E4E4FF graya(228,1)
47: (229,229,229,255) #E5E5E5FF graya(229,1)
51: (230,230,230,255) #E6E6E6FF graya(230,1)
48: (231,231,231,255) #E7E7E7FF graya(231,1)
51: (232,232,232,255) #E8E8E8FF graya(232,1)
49: (233,233,233,255) #E9E9E9FF graya(233,1)
38: (234,234,234,255) #EAEAEAFF graya(234,1)
55: (235,235,235,255) #EBEBEBFF graya(235,1)
26: (236,236,236,255) #ECECECFF graya(236,1)
50: (237,237,237,255) #EDEDEDFF graya(237,1)
48: (238,238,238,255) #EEEEEEFF graya(238,1)
39: (239,239,239,255) #EFEFEFFF graya(239,1)
45: (240,240,240,255) #F0F0F0FF graya(240,1)
38: (241,241,241,255) #F1F1F1FF graya(241,1)
47: (242,242,242,255) #F2F2F2FF graya(242,1)
40: (243,243,243,255) #F3F3F3FF graya(243,1)
41: (244,244,244,255) #F4F4F4FF graya(244,1)
47: (245,245,245,255) #F5F5F5FF graya(245,1)
30: (246,246,246,255) #F6F6F6FF graya(246,1)
36: (247,247,247,255) #F7F7F7FF graya(247,1)
40: (248,248,248,255) #F8F8F8FF graya(248,1)
36: (249,249,249,255) #F9F9F9FF graya(249,1)
34: (250,250,250,255) #FAFAFAFF graya(250,1)
37: (251,251,251,255) #FBFBFBFF graya(251,1)
31: (252,252,252,255) #FCFCFCFF graya(252,1)
37: (253,253,253,255) #FDFDFDFF graya(253,1)
34: (254,254,254,255) #FEFEFEFF graya(254,1)
21: (255,255,255,255) #FFFFFFFF graya(255,1)
So the first column is now the count of pixels, and the rest tells you the hue of the pixel.
I would do it these steps:
convert forr.jpg -colors 1 -unique-colors txt:-
The author of the blog is using d3.js, this would suffice for your application. You can view the source of the code that the author used by using "view-source" on the page (starts on line 361). You can probably figure out how the author did it by viewing that.
You could use this, along with a combination of a canvas to get the "average color" of the image. Here is a link to do just that.
A more elegant solution however; would be to serve the "average color" (or whatever you plan to do) from the server, this could then be stored in a database of your choice.
