Changing pixel colors of .JPG image produces weird colors

function applyGrid(app)
    app.newImage = app.originalImage;

    [imageWidth, imageLength] = size(app.originalImage);
    imageLength = imageLength/3;

    for row = imageWidth/18 : imageWidth/18 : imageWidth
        app.newImage(round(row), :) = 0;
    end    
    for col = imageLength/36 : imageLength/36 : imageLength
        app.newImage(:, round(col)) = 0;
    end

    % display new image with grid lines to UI
    app.Image.ImageSource = app.newImage;
end

This code is supposed to draw a grid onto an image. It works, but the vertical lines are blue when their value is set to 0 and red when set to 255. The horizontal lines are black at 0 and green at 255. The grid lines need to all be black. The image is a .jpg read to a property with imread().

Answer 1

[Jonas]

dont forget to set all 3 channels of the rgb image to 0 by using e.g.

app.newImage(:, round(col),:) = 0

[Bao]

Thanks, this was the solution I found. For some reason I thought Matlab used its colormaps to color pixels and not an rgb array.

[Image Analyst]

MATLAB uses a colormap to transform a single values array, like a gray scale or indexed image, into an RGB image but only for display. The underlying image is still single valued and the colorized version is just for display. You can get an rgb image (as a new variable) from a grayscale image if you use ind2rgb

rgbImage = ind2rgb(grayimage, myColorMap);

A grayscale image will look "normal" if yoiu display it with no colormap. A grayscale image uses its gray scale as the index.

An indexed image may or may not look "normal". If it was derived from a gray scale image, then it's basically the gray scale image. However if it is a uint8 image that was derived from an RGB image like

[indexed, cmap] = rgb2ind(rgbImage);

then the indexed image may look like a bunch of noise, though you may be able to make out some structure in the image. This little demo may help:

rgbImage = imread('peppers.png');
subplot(3, 1, 1);
imshow(rgbImage)
title('Original RGB Image')
[indexedImage, cmap] = rgb2ind(rgbImage, 256);
subplot(3, 1, 2);
imshow(indexedImage)
colormap(gray(256));
colorbar;
title('Indexed Image without its colormap applied')
subplot(3, 1, 3);
imshow(indexedImage, 'Colormap', cmap);
colorbar;
title('Indexed Image with its colormap applied')

Does that help explain things better?

[Bao]

Yeah that makes sense. Thanks for the explanation.

Answer 2

[Image Analyst]

You could use line() to draw lines in the overlay above the image instead of burning them into the image arrray itself. So do you want the grid lines burned in (so the underlying image, not just the displayed image, is changed), or not?

[Bao]

I want the grid lines burned in. We are making an application that is able to plot and transform a 360 degree image. It needs to be burned in so that the user can save the new image.