# Grayscale Conversion In javaFX

The problem discussed in this post is quite common. In fact, you can find lots and lots of tutorials on it. You can take this post as one more addition to the available resources. The problem that we are going to discuss in this post is "Converting Colored Image To Black and White or to Grayscale".

In computer science terminology, color image is known as the RGB image. RGB stands for RED, GREEN, BLUE. Since these are the primary colors and all the other colors are made up of these colors, all the colored images that we click with our digital cameras fall into the category of RGB images.

Similarly, the images that are black and white, in computer terminology are known as Grayscale images. Grayscale means having different shades of gray. Basically, the black and white images do not have black and white colors, they have different shades of gray color. Below, I have explained algorithms for converting color image to black and white.

Algorithm for Grayscale Conversion

There are various algorithms to convert the color image to black and white. Here I am going to discuss two of them. One is naive and not very  efficient whereas the second one is much more efficient. But before we begin the algorithm we must understand how does the algorithm work? All gray scale conversion includes these basic steps,

• Get the red, green and blue value of pixels.

• Use fancy maths to turn those numbers into a single gray value.

• Replace the original red, green and blue values into a gray scale value.

Method 1 - Averaging (aka “quick and dirty”)

This method is most boring. Averaging is the most common gray scale method and it works like this

GRAY = (RED + GREEN + BLUE) / 3

Basically in this algorithm we calculate the value of gray color as shown above and assign it to red, green and blue values of the pixels. Fast, simple – no wonder this is a go to method for the rookie programmers. This formula generates a reasonably nice grayscale equivalent, and its simplicity makes it easy to implement and optimize. However this formula has its own shortcomings. While fast and simple this formula does a poor job of representing shades of gray relative to way humans perceive luminosity (brightness). For that we need bit more complex.

Method 2 - Luminescence Method (Correction for human eye)

The first method fails because of the fact that cone density is not uniform across colors. Humans perceive green more strongly than red, and red more strongly than blue. This is because much of the natural world appear green, so humans have evolved greater sensitivity to green light. Because humans do not perceive all colors equally, the “average method” of grayscale is inaccurate.

In this method instead of treating red, blue and green light equally, a good grayscale conversion will weight each color based on how human eye perceives it. A common formula found in image processor programs is shown below,

Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)

This method is used in the code to make the color image black and white, or RGB image to Grayscale. The algorithm works in three basic steps as explained above.

Below you can see the source code,

1. /*
3.  * To change this template file, choose Tools | Templates
4.  * and open the template in the editor.
5.  */
6. package grayscaleconversion;
7. import java.io.File;
8. import java.net.MalformedURLException;
9. import java.util.logging.Level;
10. import java.util.logging.Logger;
11. import javafx.application.Application;
12. import javafx.concurrent.Service;
14. import javafx.concurrent.WorkerStateEvent;
15. import javafx.event.ActionEvent;
16. import javafx.scene.Group;
17. import javafx.scene.Scene;
18. import javafx.scene.control.Button;
19. import javafx.scene.control.ProgressBar;
20. import javafx.scene.image.Image;
21. import javafx.scene.image.ImageView;
23. import javafx.scene.image.PixelWriter;
24. import javafx.scene.image.WritableImage;
25. import javafx.scene.paint.Color;
26. import javafx.scene.text.Font;
27. import javafx.stage.FileChooser;
28. import javafx.stage.Stage;
29. /**
30.  *
31.  * @author Passionate Coder
32.  */
33. public class GrayScaleConversion extends Application {
34.     private Image image; //used to load the image
35.     private ImageView iv = new ImageView(); //ImageView to display the image
36.     private Button selectBTN = new Button(); //Button to select the Image in RGB
37.     private Button convertBTN = new Button(); //Button to convert the image in Grayscale
39.     private PixelWriter pwriter; //Used to write the pixel
40.     private File filePath = null//Stores the file path
41.     private ProgressBar pbar = new ProgressBar(0); //Shows the progress of the conversion
42.     WritableImage wimage;
43.     @Override
44.     public void start(Stage primaryStage) {
45.         //font used in the program
46.         Font poorRichard = new Font("Poor Richard"16);
47.         //Settings of the UI Interface
48.         selectBTN.setText("Select Image");
49.         selectBTN.setFont(poorRichard);
50.         selectBTN.setLayoutX(20);
51.         selectBTN.setLayoutY(450);
52.         convertBTN.setText("Convert GrayScale");
53.         convertBTN.setFont(poorRichard);
54.         convertBTN.setLayoutX(200);
55.         convertBTN.setLayoutY(450);
56.         iv.setFitHeight(300);
57.         iv.setFitWidth(300);
58.         iv.setLayoutX(100);
59.         iv.setLayoutY(0);
60.         pbar.setLayoutX(20);
61.         pbar.setLayoutY(320);
62.         pbar.setPrefWidth(460);
63.         pbar.setVisible(false);
64.         //Event filed when the select Image button is pressed
65.         //Select the image in the RGB and display it
66.         selectBTN.setOnAction((ActionEvent ae) - > {
67.             FileChooser fc = new FileChooser();
68.             filePath = fc.showOpenDialog(primaryStage);
69.             if (filePath != null) {
70.                 System.out.println();
71.                 try {
72.                     image = new Image(filePath.toURI().toURL().toExternalForm());
73.                     iv.setImage(image);
74.                 } catch (MalformedURLException ex) {
75.                     Logger.getLogger(GrayScaleConversion.class.getName()).log(Level.SEVERE, null, ex);
76.                 }
77.             }
78.         });
79.         //Event fires when the convert button is pressed
80.         //Converts the RGB image in the gray scale
81.         convertBTN.setOnAction((ActionEvent ae) - > {
82.             pbar.progressProperty().unbind();
83.             pbar.progressProperty().bind(RGBToGRAYSCALE.progressProperty());
84.             pbar.setVisible(true);
85.             //Service to convert the RGB into gray scale
86.             RGBToGRAYSCALE.restart();
87.         });
88.         //Event fired when the service succeeded successfully!!!
89.         RGBToGRAYSCALE.setOnSucceeded((WorkerStateEvent we) - > {
90.             iv.setImage(wimage);
91.             pbar.setVisible(false);
92.         });
93.         Group root = new Group();
94.         Scene scene = new Scene(root, 500500);
99.         primaryStage.setTitle("Grayscale Conversion");
100.         primaryStage.setScene(scene);
101.         primaryStage.setResizable(false);
102.         primaryStage.show();
103.     }
104.     /*Service to convert the RGB into grayscale
105.     Copies the image pixel by pixel by converting each
106.     pixel into grayscale
107.     */
108.     Service < Void > RGBToGRAYSCALE = new Service < Void > () {
109.         @Override
111.             return new Task < Void > () {
112.                 @Override
113.                 protected Void call() throws Exception {
114.                     image = new Image(filePath.toURI().toURL().toExternalForm());
116.                     wimage = new WritableImage((int) image.getWidth(), (int) image.getHeight());
117.                     pwriter = wimage.getPixelWriter();
118.                     int count = 0;
119.                     for (int i = 0; i < (int) image.getHeight(); i++) {
120.                         for (int j = 0; j < (int) image.getWidth(); j++) {
121.                             count += 1;
122.                             Color col = preader.getColor(j, i);
123.                             //Reading each pixel and converting it into gray scale
124.                             pwriter.setColor(j, i, new Color((col.getRed() * 0.3 + col.getGreen() * 0.59 + col.getBlue() * 0.11), (col.getRed() * 0.3 + col.getGreen() * 0.59 + col.getBlue() * 0.11), (col.getRed() * 0.3 + col.getGreen() * 0.59 + col.getBlue() * 0.11), 1.0));
125.                             updateProgress(count, image.getHeight() * image.getWidth());
126.                         }
127.                     }
128.                     return null;
129.                 }
130.             };
131.         }
132.     };
133.     /**
134.      * @param args the command line arguments
135.      */
136.     public static void main(String[] args) {
137.         launch(args);
138.     }
139. }
I hope you like it !