Matplotlib displaying RGB pixels weirdly
Question:
I have a set of RGB pixels I gathered from an image, but when I try to save them and display them, they come out very weirdly, as 3 separate colors. It seems like it’s not reading my array as a list of RGB values.
I have an abbreviated version of my code, with a short list of RGB values:
import matplotlib.pyplot as plt
import numpy as np
img = np.array([[255, 255, 255], [127, 255, 127], [239, 255, 15], [127 , 0, 0]])
plt.imshow(img)
plt.savefig('testtt.png', dpi=400)
which gives me this:
Does anyone know how to resolve this or what might be wrong? Or alternatively, if anyone knows a better way to display RGB pixels from an array, please let me know. Side note: I am trying to avoid OpenCV
Answers:
So, you created an array of lists
img = np.array([[255, 255, 255],[127, 255, 127],[239, 255, 15],[127 , 0, 0]])
But nothing tells python to treat this as and RGB image, so instead it created an array with four rows and three columns. Then when you plotted it here:
plt.imshow(img)
It simply applied colors from the viridis color pallet and displayed it as a visual array where each value got a color from that pallet.
As mentioned in the comments, you need to expressly tell python to treat this array as an image:
imshow(img, origin='upper', interpolation='nearest')
For a straight pixel-by-pixel translation
A 2D array will be interpreted as values to be color mapped. That’s why you see 4 rows of 3 colors.
To interpret the array as 4 rgb values, you can plot a 3D array:
import matplotlib.pyplot as plt
import numpy as np
img = np.array([[255, 255, 255], [127, 255, 127], [239, 255, 15], [127, 0, 0]])
plt.imshow([img]) # note the extra brackets
plt.show()
To illustrate what was happening with the original plot, seaborn’s heatmap can automatically add some annotations and a colorbar.
import seaborn as sns
sns.heatmap(img, annot=True, fmt='d', cmap='viridis')
plt.imshow([img])
PS: To display RGB values as an NxM array of pixels, the values should form a 3D NxMx3 array:
img = np.array([[[255, 255, 255], [127, 255, 127]], [[239, 255, 15], [127, 0, 0]]])
plt.imshow(img)
I have a set of RGB pixels I gathered from an image, but when I try to save them and display them, they come out very weirdly, as 3 separate colors. It seems like it’s not reading my array as a list of RGB values.
I have an abbreviated version of my code, with a short list of RGB values:
import matplotlib.pyplot as plt
import numpy as np
img = np.array([[255, 255, 255], [127, 255, 127], [239, 255, 15], [127 , 0, 0]])
plt.imshow(img)
plt.savefig('testtt.png', dpi=400)
which gives me this:
Does anyone know how to resolve this or what might be wrong? Or alternatively, if anyone knows a better way to display RGB pixels from an array, please let me know. Side note: I am trying to avoid OpenCV
So, you created an array of lists
img = np.array([[255, 255, 255],[127, 255, 127],[239, 255, 15],[127 , 0, 0]])
But nothing tells python to treat this as and RGB image, so instead it created an array with four rows and three columns. Then when you plotted it here:
plt.imshow(img)
It simply applied colors from the viridis color pallet and displayed it as a visual array where each value got a color from that pallet.
As mentioned in the comments, you need to expressly tell python to treat this array as an image:
imshow(img, origin='upper', interpolation='nearest')
For a straight pixel-by-pixel translation
A 2D array will be interpreted as values to be color mapped. That’s why you see 4 rows of 3 colors.
To interpret the array as 4 rgb values, you can plot a 3D array:
import matplotlib.pyplot as plt
import numpy as np
img = np.array([[255, 255, 255], [127, 255, 127], [239, 255, 15], [127, 0, 0]])
plt.imshow([img]) # note the extra brackets
plt.show()
To illustrate what was happening with the original plot, seaborn’s heatmap can automatically add some annotations and a colorbar.
import seaborn as sns
sns.heatmap(img, annot=True, fmt='d', cmap='viridis')
plt.imshow([img])
PS: To display RGB values as an NxM array of pixels, the values should form a 3D NxMx3 array:
img = np.array([[[255, 255, 255], [127, 255, 127]], [[239, 255, 15], [127, 0, 0]]])
plt.imshow(img)