By calling the specific RGBA value of the image, a new value may then be implemented to change the particular colour (i.e. changing white to deep pink). Instead of looping through the same image within the grid, the imageArray[] will allow that one image to be split into individual images. In conjunction to this, the colourArray[] allow us to change the colouring of each individual image within the grid. Instead of using a 2D array, the imageNumber variable represents the first image within the grid. This is then incremented within the grid loop to count through all of the images (i.e. imageNumber++). This will allow the function of imageArray[i] and colourArray[i] to work within the pixel array.

Link to Full Codes

                        /**
                        * - Check for Black pixels, then change colour: 
                        */ 
                        if (imageArray[imageNumber].pixels[index] == 0 && imageArray[imageNumber].pixels[index + 1] == 0 && imageArray[imageNumber].pixels[index + 2] == 0) {
                        
                            imageArray[imageNumber].pixels[index] = colorArray[imageNumber];
                            imageArray[imageNumber].pixels[index + 1];
                            imageArray[imageNumber].pixels[index + 2] = colorArray[imageNumber];
                            imageArray[imageNumber].pixels[index + 3];
                        }