{"id":1587,"date":"2016-02-09T12:23:18","date_gmt":"2016-02-09T17:23:18","guid":{"rendered":"https:\/\/blogs.mathworks.com\/steve\/?p=1587"},"modified":"2016-03-14T09:57:15","modified_gmt":"2016-03-14T13:57:15","slug":"matlab-image-display-from-data-values-to-pixel-colors","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/steve\/2016\/02\/09\/matlab-image-display-from-data-values-to-pixel-colors\/","title":{"rendered":"MATLAB image display &#8211; from data values to pixel colors"},"content":{"rendered":"<div class=\"content\"><p>Here's a quick quiz for you: How bright are these pixel values?<\/p><pre>252  252  253  254  255\r\n252  252  253  254  254\r\n252  252  253  253  254\r\n252  252  253  253  254\r\n252  252  253  253  253<\/pre><p>Some of you are now thinking, \"Well, those almost white, with one white pixel in the upper right corner. But wait, this is probably a trick question ...\"<\/p><p>Yes, it's a trick question.<\/p><p>These values are physical measurements with a unit of <b>meters<\/b>. They are digital elevation values from a dataset that I downloaded from the U.S. Geological Survey's <a href=\"http:\/\/viewer.nationalmap.gov\/basic\/#productSearch\">National Map<\/a> project.<\/p><p>The values are from a 3042x3042 matrix of elevation values near Mount Monadnock, New Hampshire. I can certainly look at the matrix as an image in MATLAB. Here I am showing the data values as shades of gray, with black and white corresponding to the minimum and maximum elevations.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/steve\/files\/mt-monadnock-arrow.jpg\" alt=\"\"> <\/p><p>The arrow points to the region corresponding to the table of values shown above. This region has an elevation above sea level of about 250-255 meters. Because the peak elevation, at the summit of Mount Monadnock, is about 963 meters, the region where the arrow points is dark instead of white.<\/p><p>But we could display this data as an image in MATLAB in a variety of ways without changing the data values. Here are a few samples.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/steve\/files\/mt-monadnock-complement.jpg\" alt=\"\"> <\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/steve\/files\/mt-monadnock-parula.jpg\" alt=\"\"> <\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/steve\/files\/mt-monadnock-hot.jpg\" alt=\"\"> <\/p><p>So how does MATLAB associate the the value of a particular matrix element with a color displayed on the screen?<\/p><p>I'm going to explore this question over the next couple of weeks. Specific topics will include:<\/p><div><ul><li>The two different pixel-color models in MATLAB. (Or maybe there are three. It depends on how you count them.)<\/li><li>How properties of the figure, axes, and image objects all affect pixel colors.<\/li><li>Additional pixel-color models in the Image Processing Toolbox.<\/li><li>The MATLAB image display functions and how they work.<\/li><\/ul><\/div><p><i>Note: Long-time blog readers might remember that I originally wrote about this topic way back in 2006. The material is still relevant, and I want to refresh it based on the updated MATLAB Graphics system introduced in R2014b.<\/i><\/p><script language=\"JavaScript\"> <!-- \r\n    function grabCode_2967adbf36984c7994c6f291368ff9a5() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='2967adbf36984c7994c6f291368ff9a5 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 2967adbf36984c7994c6f291368ff9a5';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        copyright = 'Copyright 2016 The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add copyright line at the bottom if specified.\r\n        if (copyright.length > 0) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\\n');\r\n\r\n        d.title = title + ' (MATLAB code)';\r\n        d.close();\r\n    }   \r\n     --> <\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_2967adbf36984c7994c6f291368ff9a5()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n      the MATLAB code <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; R2015b<br><\/p><\/div><!--\r\n2967adbf36984c7994c6f291368ff9a5 ##### SOURCE BEGIN #####\r\n%%\r\n% Here's a quick quiz for you: How bright are these pixel values?\r\n%\r\n%  252  252  253  254  255\r\n%  252  252  253  254  254\r\n%  252  252  253  253  254\r\n%  252  252  253  253  254\r\n%  252  252  253  253  253\r\n%\r\n% Some of you are now thinking, \"Well, those almost white, with one white\r\n% pixel in the upper right corner. But wait, this is probably a trick\r\n% question ...\"\r\n%\r\n% Yes, it's a trick question.\r\n%\r\n% These values are physical measurements with a unit of *meters*. They are\r\n% digital elevation values from a dataset that I downloaded from the U.S.\r\n% Geological Survey's <http:\/\/viewer.nationalmap.gov\/basic\/#productSearch\r\n% National Map> project. \r\n%\r\n% The values are from a 3042x3042 matrix of elevation values near Mount\r\n% Monadnock, New Hampshire. I can certainly look at the matrix as an image in MATLAB.\r\n% Here I am showing the data values as shades of gray, with black\r\n% and white corresponding to the minimum and maximum elevations.\r\n%\r\n% <<https:\/\/blogs.mathworks.com\/steve\/files\/mt-monadnock-arrow.jpg>>\r\n%\r\n% The arrow points to the region corresponding to the table of values shown\r\n% above. This region has an elevation above sea level of about 250-255\r\n% meters. Because the peak elevation, at the summit of Mount Monadnock, is\r\n% about 963 meters, the region where the arrow points is dark instead of\r\n% white.\r\n%\r\n% But we could display this data as an image in MATLAB in a variety of ways\r\n% without changing the data values. Here are a few samples.\r\n%\r\n% <<https:\/\/blogs.mathworks.com\/steve\/files\/mt-monadnock-complement.jpg>>\r\n%\r\n% <<https:\/\/blogs.mathworks.com\/steve\/files\/mt-monadnock-parula.jpg>>\r\n%\r\n% <<https:\/\/blogs.mathworks.com\/steve\/files\/mt-monadnock-hot.jpg>>\r\n% \r\n% So how does MATLAB associate the the value of a particular matrix element\r\n% with a color displayed on the screen?\r\n%\r\n% I'm going to explore this question over the next couple of weeks. Specific\r\n% topics will include:\r\n%\r\n% * The two different pixel-color models in MATLAB. (Or maybe there are\r\n% three. It depends on how you count them.)\r\n% * How properties of the figure, axes, and image objects all affect pixel\r\n% colors.\r\n% * Additional pixel-color models in the Image Processing Toolbox.\r\n% * The MATLAB image display functions and how they work.\r\n%\r\n% _Note: Long-time blog readers might remember that I originally wrote about\r\n% this topic way back in 2006. The material is still relevant, and I want\r\n% to refresh it based on the updated MATLAB Graphics system introduced in\r\n% R2014b._\r\n\r\n##### SOURCE END ##### 2967adbf36984c7994c6f291368ff9a5\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img src=\"https:\/\/blogs.mathworks.com\/steve\/files\/mt-monadnock-parula.jpg\" class=\"img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/div><p>Here's a quick quiz for you: How bright are these pixel values?252  252  253  254  255\r\n252  252  253  254  254\r\n252  252  253  253  254\r\n252  252  253  253  254\r\n252  252  253 ... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/steve\/2016\/02\/09\/matlab-image-display-from-data-values-to-pixel-colors\/\">read more >><\/a><\/p>","protected":false},"author":42,"featured_media":1586,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[13],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts\/1587"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/comments?post=1587"}],"version-history":[{"count":2,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts\/1587\/revisions"}],"predecessor-version":[{"id":1589,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts\/1587\/revisions\/1589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/media\/1586"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/media?parent=1587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/categories?post=1587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/tags?post=1587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}