User:Eleanorg/1.2/Forbidden Pixels/extracting pixel colours
< User:Eleanorg | 1.2/Forbidden Pixels
Revision as of 14:29, 19 January 2012 by Eleanorg (talk | contribs) (→ImageMagick colour extraction)
Aim: to break an image down into a list of each pixel's position & colour, so that it can be re-created with html & css. Each pixel becomes an area coloured with a #hex code; thus manipulable - and no longer strictly part of an image. Question: how to write a script that will extract a grid of pixel colours from a given image?
ImageMagick colour extraction
Command syntax: convert imagename.png -format '%[pixel:p{xpos,ypos}]' info:- Returns the rgba value of the bottom right pixel in a 20x10 grid:
# convert 20by10PixelsSection1.png -format '%[pixel:p{20,10}]' info:-
rgba(135,161,160,1)
You can get a list of all the *unique* colours in an image thus. In my image of 200 pixels total, this line returns 167 unique colours:
# convert 20by10PixelsSection1.png -unique-colors -depth 16 txt:-
# ImageMagick pixel enumeration: 168,1,65535,rgba
0,0: (26471,33924,33410,65535) #676784848282 rgba(103,132,130,1)
1,0: (26214,34438,34181,65535) #666686868585 rgba(40%,52.549%,52.1569%,1)
2,0: (26985,34438,33924,65535) #696986868484 rgba(41.1765%,52.549%,51.7647%,1)
3,0: (27499,34952,34438,65535) #6B6B88888686 rgba(41.9608%,53.3333%,52.549%,1)
4,0: (26985,35209,34952,65535) #696989898888 rgba(41.1765%,53.7255%,53.3333%,1)
5,0: (26985,35723,35466,65535) #69698B8B8A8A rgba(41.1765%,54.5098%,54.1176%,1)
6,0: (28013,35466,34952,65535) #6D6D8A8A8888 rgba(42.7451%,54.1176%,53.3333%,1)
7,0: (29298,36751,36237,65535) #72728F8F8D8D rgba(44.7059%,56.0784%,55.2941%,1)
8,0: (29041,37265,37008,65535) #717191919090 rgba(44.3137%,56.8627%,56.4706%,1)
9,0: (30583,38807,38550,65535) #777797979696 rgba(46.6667%,59.2157%,58.8235%,1)
10,0: (31097,37779,37522,65535) #797993939292 rgba(47.451%,57.6471%,57.2549%,1)
11,0: (31611,38293,38036,65535) #7B7B95959494 rgba(48.2353%,58.4314%,58.0392%,1)
12,0: (30326,39064,38807,65535) #767698989797 rgba(46.2745%,59.6078%,59.2157%,1)
13,0: (31868,39321,38807,65535) #7C7C99999797 rgba(48.6275%,60%,59.2157%,1)
14,0: (32382,41120,40863,65535) #7E7EA0A09F9F rgba(49.4118%,62.7451%,62.3529%,1)
15,0: (33667,39321,38807,65535) #838399999797 rgba(51.3725%,60%,59.2157%,1)
16,0: (33153,41377,41120,65535) #8181A1A1A0A0 rgba(50.5882%,63.1373%,62.7451%,1)
17,0: (34695,41377,41120,65535) #8787A1A1A0A0 rgba(52.9412%,63.1373%,62.7451%,1)
18,0: (33667,42405,42148,65535) #8383A5A5A4A4 rgba(51.3725%,64.7059%,64.3137%,1)
19,0: (34181,42405,42148,65535) #8585A5A5A4A4 rgba(52.1569%,64.7059%,64.3137%,1)
20,0: (34181,42919,42662,65535) #8585A7A7A6A6 rgba(52.1569%,65.4902%,65.098%,1)
21,0: (35980,42662,42405,65535) #8C8CA6A6A5A5 rgba(54.902%,65.098%,64.7059%,1)
22,0: (35209,43433,43176,65535) #8989A9A9A8A8 rgba(53.7255%,66.2745%,65.8824%,1)
23,0: (36751,43433,43176,65535) #8F8FA9A9A8A8 rgba(56.0784%,66.2745%,65.8824%,1)
24,0: (35980,44718,44461,65535) #8C8CAEAEADAD rgba(54.902%,68.2353%,67.8431%,1)
25,0: (37008,44718,44204,65535) #9090AEAEACAC rgba(56.4706%,68.2353%,67.451%,1)
26,0: (38550,44718,44718,65535) #9696AEAEAEAE rgba(58.8235%,68.2353%,68.2353%,1)
27,0: (39835,43433,43690,65535) #9B9BA9A9AAAA rgba(60.7843%,66.2745%,66.6667%,1)
28,0: (40863,43947,43947,65535) #9F9FABABABAB rgba(62.3529%,67.0588%,67.0588%,1)
29,0: (40092,44204,43947,65535) #9C9CACACABAB rgba(61.1765%,67.451%,67.0588%,1)
30,0: (40349,44461,44461,65535) #9D9DADADADAD rgba(61.5686%,67.8431%,67.8431%,1)
31,0: (40606,44718,44461,65535) #9E9EAEAEADAD rgba(61.9608%,68.2353%,67.8431%,1)
32,0: (37008,45232,44461,65535) #9090B0B0ADAD rgba(56.4706%,69.0196%,67.8431%,1)
33,0: (37779,45232,44718,65535) #9393B0B0AEAE rgba(57.6471%,69.0196%,68.2353%,1)
34,0: (37779,45489,44975,65535) #9393B1B1AFAF rgba(57.6471%,69.4118%,68.6275%,1)
35,0: (38293,45746,45232,65535) #9595B2B2B0B0 rgba(58.4314%,69.8039%,69.0196%,1)
36,0: (38550,46260,45746,65535) #9696B4B4B2B2 rgba(58.8235%,70.5882%,69.8039%,1)
37,0: (38807,46260,45746,65535) #9797B4B4B2B2 rgba(59.2157%,70.5882%,69.8039%,1)
38,0: (38550,47288,47031,65535) #9696B8B8B7B7 rgba(58.8235%,72.1569%,71.7647%,1)
39,0: (39835,47545,47031,65535) #9B9BB9B9B7B7 rgba(60.7843%,72.549%,71.7647%,1)
40,0: (39835,47288,46774,65535) #9B9BB8B8B6B6 rgba(60.7843%,72.1569%,71.3725%,1)
41,0: (40606,48316,47802,65535) #9E9EBCBCBABA rgba(61.9608%,73.7255%,72.9412%,1)
42,0: (41120,43947,44461,65535) #A0A0ABABADAD rgba(62.7451%,67.0588%,67.8431%,1)
43,0: (41377,44461,44461,65535) #A1A1ADADADAD rgba(63.1373%,67.8431%,67.8431%,1)
44,0: (41891,44461,44975,65535) #A3A3ADADAFAF rgba(63.9216%,67.8431%,68.6275%,1)
45,0: (42919,44975,45746,65535) #A7A7AFAFB2B2 rgba(65.4902%,68.6275%,69.8039%,1)
46,0: (41377,46003,46003,65535) #A1A1B3B3B3B3 rgba(63.1373%,70.1961%,70.1961%,1)
47,0: (42405,46517,45746,65535) #A5A5B5B5B2B2 rgba(64.7059%,70.9804%,69.8039%,1)
48,0: (42148,46260,46003,65535) #A4A4B4B4B3B3 rgba(64.3137%,70.5882%,70.1961%,1)
49,0: (41377,46774,47031,65535) #A1A1B6B6B7B7 rgba(63.1373%,71.3725%,71.7647%,1)
50,0: (41634,46774,47031,65535) #A2A2B6B6B7B7 rgba(63.5294%,71.3725%,71.7647%,1)
51,0: (43176,45746,46260,65535) #A8A8B2B2B4B4 rgba(65.8824%,69.8039%,70.5882%,1)
52,0: (43176,46003,46517,65535) #A8A8B3B3B5B5 rgba(65.8824%,70.1961%,70.9804%,1)
53,0: (42148,47288,47031,65535) #A4A4B8B8B7B7 rgba(64.3137%,72.1569%,71.7647%,1)
54,0: (43433,47288,46517,65535) #A9A9B8B8B5B5 rgba(66.2745%,72.1569%,70.9804%,1)
55,0: (44975,47802,46774,65535) #AFAFBABAB6B6 rgba(68.6275%,72.9412%,71.3725%,1)
56,0: (42148,46774,47288,65535) #A4A4B6B6B8B8 rgba(64.3137%,71.3725%,72.1569%,1)
57,0: (43176,47031,47802,65535) #A8A8B7B7BABA rgba(65.8824%,71.7647%,72.9412%,1)
58,0: (41120,47288,47288,65535) #A0A0B8B8B8B8 rgba(62.7451%,72.1569%,72.1569%,1)
59,0: (41120,47802,47545,65535) #A0A0BABAB9B9 rgba(62.7451%,72.9412%,72.549%,1)
60,0: (41377,48059,47802,65535) #A1A1BBBBBABA rgba(63.1373%,73.3333%,72.9412%,1)
61,0: (41891,48059,48059,65535) #A3A3BBBBBBBB rgba(63.9216%,73.3333%,73.3333%,1)
62,0: (42405,48059,47545,65535) #A5A5BBBBB9B9 rgba(64.7059%,73.3333%,72.549%,1)
63,0: (42405,48830,48059,65535) #A5A5BEBEBBBB rgba(64.7059%,74.5098%,73.3333%,1)
64,0: (41891,48573,48316,65535) #A3A3BDBDBCBC rgba(63.9216%,74.1176%,73.7255%,1)
65,0: (41377,48830,48316,65535) #A1A1BEBEBCBC rgba(63.1373%,74.5098%,73.7255%,1)
66,0: (42919,49087,49087,65535) #A7A7BFBFBFBF rgba(65.4902%,74.902%,74.902%,1)
67,0: (43947,47802,48573,65535) #ABABBABABDBD rgba(67.0588%,72.9412%,74.1176%,1)
68,0: (44975,48573,48830,65535) #AFAFBDBDBEBE rgba(68.6275%,74.1176%,74.5098%,1)
69,0: (44461,49087,49087,65535) #ADADBFBFBFBF rgba(67.8431%,74.902%,74.902%,1)
70,0: (45489,47802,47031,65535) #B1B1BABAB7B7 rgba(69.4118%,72.9412%,71.7647%,1)
71,0: (46003,48316,47545,65535) #B3B3BCBCB9B9 rgba(70.1961%,73.7255%,72.549%,1)
72,0: (45232,48316,47802,65535) #B0B0BCBCBABA rgba(69.0196%,73.7255%,72.9412%,1)
73,0: (45489,48059,48573,65535) #B1B1BBBBBDBD rgba(69.4118%,73.3333%,74.1176%,1)
74,0: (46260,47545,48573,65535) #B4B4B9B9BDBD rgba(70.5882%,72.549%,74.1176%,1)
75,0: (46517,47802,48573,65535) #B5B5BABABDBD rgba(70.9804%,72.9412%,74.1176%,1)
76,0: (47288,48316,49087,65535) #B8B8BCBCBFBF rgba(72.1569%,73.7255%,74.902%,1)
77,0: (47031,49344,48573,65535) #B7B7C0C0BDBD rgba(71.7647%,75.2941%,74.1176%,1)
78,0: (44718,48573,49344,65535) #AEAEBDBDC0C0 rgba(68.2353%,74.1176%,75.2941%,1)
79,0: (45489,49087,49344,65535) #B1B1BFBFC0C0 rgba(69.4118%,74.902%,75.2941%,1)
80,0: (46517,49087,49344,65535) #B5B5BFBFC0C0 rgba(70.9804%,74.902%,75.2941%,1)
81,0: (44461,49601,49858,65535) #ADADC1C1C2C2 rgba(67.8431%,75.6863%,76.0784%,1)
82,0: (44204,49601,49858,65535) #ACACC1C1C2C2 rgba(67.451%,75.6863%,76.0784%,1)
83,0: (44975,50115,50372,65535) #AFAFC3C3C4C4 rgba(68.6275%,76.4706%,76.8627%,1)
84,0: (44718,50115,50372,65535) #AEAEC3C3C4C4 rgba(68.2353%,76.4706%,76.8627%,1)
85,0: (46774,49858,49344,65535) #B6B6C2C2C0C0 rgba(71.3725%,76.0784%,75.2941%,1)
86,0: (46003,50629,50629,65535) #B3B3C5C5C5C5 rgba(70.1961%,77.2549%,77.2549%,1)
87,0: (47545,49601,50115,65535) #B9B9C1C1C3C3 rgba(72.549%,75.6863%,76.4706%,1)
88,0: (48573,50886,50115,65535) #BDBDC6C6C3C3 rgba(74.1176%,77.6471%,76.4706%,1)
89,0: (48573,49601,50372,65535) #BDBDC1C1C4C4 rgba(74.1176%,75.6863%,76.8627%,1)
90,0: (49087,50115,50886,65535) #BFBFC3C3C6C6 rgba(74.902%,76.4706%,77.6471%,1)
91,0: (47288,50372,50372,65535) #B8B8C4C4C4C4 rgba(72.1569%,76.8627%,76.8627%,1)
92,0: (47545,51143,51143,65535) #B9B9C7C7C7C7 rgba(72.549%,78.0392%,78.0392%,1)
93,0: (49087,50372,51143,65535) #BFBFC4C4C7C7 rgba(74.902%,76.8627%,78.0392%,1)
94,0: (48573,51143,50886,65535) #BDBDC7C7C6C6 rgba(74.1176%,78.0392%,77.6471%,1)
95,0: (48830,51400,51657,65535) #BEBEC8C8C9C9 rgba(74.5098%,78.4314%,78.8235%,1)
96,0: (49087,52171,52171,65535) #BFBFCBCBCBCB rgba(74.902%,79.6078%,79.6078%,1)
97,0: (50115,50372,51400,65535) #C3C3C4C4C8C8 rgba(76.4706%,76.8627%,78.4314%,1)
98,0: (50115,50886,52171,65535) #C3C3C6C6CBCB rgba(76.4706%,77.6471%,79.6078%,1)
99,0: (50629,50886,51914,65535) #C5C5C6C6CACA rgba(77.2549%,77.6471%,79.2157%,1)
100,0: (50629,52171,51657,65535) #C5C5CBCBC9C9 rgba(77.2549%,79.6078%,78.8235%,1)
101,0: (51143,52171,51914,65535) #C7C7CBCBCACA rgba(78.0392%,79.6078%,79.2157%,1)
102,0: (51143,51400,52428,65535) #C7C7C8C8CCCC rgba(78.0392%,78.4314%,80%,1)
103,0: (50372,52685,52428,65535) #C4C4CDCDCCCC rgba(76.8627%,80.3922%,80%,1)
104,0: (50629,52942,52685,65535) #C5C5CECECDCD rgba(77.2549%,80.7843%,80.3922%,1)
105,0: (51914,52171,53199,65535) #CACACBCBCFCF rgba(79.2157%,79.6078%,81.1765%,1)
106,0: (51400,52428,52685,65535) #C8C8CCCCCDCD rgba(78.4314%,80%,80.3922%,1)
107,0: (51400,52942,52428,65535) #C8C8CECECCCC rgba(78.4314%,80.7843%,80%,1)
108,0: (51657,53199,53199,65535) #C9C9CFCFCFCF rgba(78.8235%,81.1765%,81.1765%,1)
109,0: (51400,52942,52942,65535) #C8C8CECECECE rgba(78.4314%,80.7843%,80.7843%,1)
110,0: (52171,53199,52942,65535) #CBCBCFCFCECE rgba(79.6078%,81.1765%,80.7843%,1)
111,0: (52428,52942,52685,65535) #CCCCCECECDCD rgba(80%,80.7843%,80.3922%,1)
112,0: (53199,53199,53199,65535) #CFCFCFCFCFCF grey81
113,0: (54227,54484,53199,65535) #D3D3D4D4CFCF rgba(82.7451%,83.1373%,81.1765%,1)
114,0: (52428,52171,53456,65535) #CCCCCBCBD0D0 rgba(80%,79.6078%,81.5686%,1)
115,0: (52171,53199,53456,65535) #CBCBCFCFD0D0 rgba(79.6078%,81.1765%,81.5686%,1)
116,0: (53199,53199,53713,65535) #CFCFCFCFD1D1 rgba(81.1765%,81.1765%,81.9608%,1)
117,0: (52428,53456,53713,65535) #CCCCD0D0D1D1 rgba(80%,81.5686%,81.9608%,1)
118,0: (53199,53713,53456,65535) #CFCFD1D1D0D0 rgba(81.1765%,81.9608%,81.5686%,1)
119,0: (52428,53456,54227,65535) #CCCCD0D0D3D3 rgba(80%,81.5686%,82.7451%,1)
120,0: (53199,53456,53970,65535) #CFCFD0D0D2D2 rgba(81.1765%,81.5686%,82.3529%,1)
121,0: (53456,53456,53456,65535) #D0D0D0D0D0D0 rgba(81.5686%,81.5686%,81.5686%,1)
122,0: (53456,53970,53713,65535) #D0D0D2D2D1D1 rgba(81.5686%,82.3529%,81.9608%,1)
123,0: (53713,53713,54227,65535) #D1D1D1D1D3D3 rgba(81.9608%,81.9608%,82.7451%,1)
124,0: (53713,54227,53970,65535) #D1D1D3D3D2D2 rgba(81.9608%,82.7451%,82.3529%,1)
125,0: (53970,54484,54227,65535) #D2D2D4D4D3D3 rgba(82.3529%,83.1373%,82.7451%,1)
126,0: (54741,54998,53713,65535) #D5D5D6D6D1D1 rgba(83.5294%,83.9216%,81.9608%,1)
127,0: (54741,55255,53970,65535) #D5D5D7D7D2D2 rgba(83.5294%,84.3137%,82.3529%,1)
128,0: (54998,55255,53970,65535) #D6D6D7D7D2D2 rgba(83.9216%,84.3137%,82.3529%,1)
129,0: (54227,54227,54741,65535) #D3D3D3D3D5D5 rgba(82.7451%,82.7451%,83.5294%,1)
130,0: (53970,53970,54484,65535) #D2D2D2D2D4D4 rgba(82.3529%,82.3529%,83.1373%,1)
131,0: (53713,54741,54484,65535) #D1D1D5D5D4D4 rgba(81.9608%,83.5294%,83.1373%,1)
132,0: (53456,54484,54741,65535) #D0D0D4D4D5D5 rgba(81.5686%,83.1373%,83.5294%,1)
133,0: (54227,54741,54484,65535) #D3D3D5D5D4D4 rgba(82.7451%,83.5294%,83.1373%,1)
134,0: (54227,55255,54998,65535) #D3D3D7D7D6D6 rgba(82.7451%,84.3137%,83.9216%,1)
135,0: (54741,54741,54741,65535) #D5D5D5D5D5D5 rgba(83.5294%,83.5294%,83.5294%,1)
136,0: (54484,54484,54484,65535) #D4D4D4D4D4D4 grey83
137,0: (54484,54998,54741,65535) #D4D4D6D6D5D5 rgba(83.1373%,83.9216%,83.5294%,1)
138,0: (54484,54484,54998,65535) #D4D4D4D4D6D6 rgba(83.1373%,83.1373%,83.9216%,1)
139,0: (54741,54741,55255,65535) #D5D5D5D5D7D7 rgba(83.5294%,83.5294%,84.3137%,1)
140,0: (54998,54998,54998,65535) #D6D6D6D6D6D6 grey84
141,0: (55255,55255,55255,65535) #D7D7D7D7D7D7 rgba(84.3137%,84.3137%,84.3137%,1)
142,0: (55512,55255,54227,65535) #D8D8D7D7D3D3 rgba(84.7059%,84.3137%,82.7451%,1)
143,0: (55255,55512,54227,65535) #D7D7D8D8D3D3 rgba(84.3137%,84.7059%,82.7451%,1)
144,0: (54484,55512,55255,65535) #D4D4D8D8D7D7 rgba(83.1373%,84.7059%,84.3137%,1)
145,0: (55512,55769,54484,65535) #D8D8D9D9D4D4 rgba(84.7059%,85.098%,83.1373%,1)
146,0: (55769,56026,54741,65535) #D9D9DADAD5D5 rgba(85.098%,85.4902%,83.5294%,1)
147,0: (56283,56026,54998,65535) #DBDBDADAD6D6 rgba(85.8824%,85.4902%,83.9216%,1)
148,0: (56283,56540,55255,65535) #DBDBDCDCD7D7 rgba(85.8824%,86.2745%,84.3137%,1)
149,0: (54741,54998,55512,65535) #D5D5D6D6D8D8 rgba(83.5294%,83.9216%,84.7059%,1)
150,0: (55255,55255,55769,65535) #D7D7D7D7D9D9 rgba(84.3137%,84.3137%,85.098%,1)
151,0: (55255,55769,55512,65535) #D7D7D9D9D8D8 rgba(84.3137%,85.098%,84.7059%,1)
152,0: (55255,55512,56026,65535) #D7D7D8D8DADA rgba(84.3137%,84.7059%,85.4902%,1)
153,0: (55255,56283,56026,65535) #D7D7DBDBDADA rgba(84.3137%,85.8824%,85.4902%,1)
154,0: (55512,56026,55769,65535) #D8D8DADAD9D9 rgba(84.7059%,85.4902%,85.098%,1)
155,0: (56283,55769,56026,65535) #DBDBD9D9DADA rgba(85.8824%,85.098%,85.4902%,1)
156,0: (55769,56283,56026,65535) #D9D9DBDBDADA rgba(85.098%,85.8824%,85.4902%,1)
157,0: (57311,56283,55512,65535) #DFDFDBDBD8D8 rgba(87.451%,85.8824%,84.7059%,1)
158,0: (55512,56540,56283,65535) #D8D8DCDCDBDB rgba(84.7059%,86.2745%,85.8824%,1)
159,0: (56026,56540,56283,65535) #DADADCDCDBDB rgba(85.4902%,86.2745%,85.8824%,1)
160,0: (57054,56797,55769,65535) #DEDEDDDDD9D9 rgba(87.0588%,86.6667%,85.098%,1)
161,0: (56540,57054,55769,65535) #DCDCDEDED9D9 rgba(86.2745%,87.0588%,85.098%,1)
162,0: (57054,57311,56026,65535) #DEDEDFDFDADA rgba(87.0588%,87.451%,85.4902%,1)
163,0: (55769,56797,56540,65535) #D9D9DDDDDCDC rgba(85.098%,86.6667%,86.2745%,1)
164,0: (56283,56797,56540,65535) #DBDBDDDDDCDC rgba(85.8824%,86.6667%,86.2745%,1)
165,0: (56540,57054,56797,65535) #DCDCDEDEDDDD rgba(86.2745%,87.0588%,86.6667%,1)
166,0: (58339,57311,56540,65535) #E3E3DFDFDCDC rgba(89.0196%,87.451%,86.2745%,1)
167,0: (57568,58082,56797,65535) #E0E0E2E2DDDD rgba(87.8431%,88.6275%,86.6667%,1)
Kind of annoying that this only returns unique colours - so 167 out of 200 - but this could maybe be interesting too. A kind of 'condensation' of the essential elements.
Still, try to figure out how to get the grid... is there an easier way than just typing this...?
# convert 20by10PixelsSection1.png -format '%[pixel:p{0,0}]' info:-
rgba(135,161,160,1)
# convert 20by10PixelsSection1.png -format '%[pixel:p{0,1}]' info:-
rgba(135,161,160,1)
# convert 20by10PixelsSection1.png -format '%[pixel:p{0,2}]' info:-
rgba(135,161,160,1)