Skip to main content

Command Palette

Search for a command to run...

PixelNova - An Async Image Filter Processor

Updated
4 min read
PixelNova - An Async Image Filter Processor

Table of Contents

Ever wondered how Galary/SnapChat filters work? While they might seem complex, the basic principles of image filtering are quite accessible. In this blog post, we'll build a simple image filtering application using Java and JavaFX.

By the end of this blog, you'll have a better understanding of image processing concepts, how to build a GUI with JavaFX, and how to just using java core concept how to build a simple image processing applicatio.


1. What is PixelNova ?

This project is a simple, image processing application built with Java and the JavaFX framework. At its core, it's a desktop tool that allows a user to apply various filters to a digital image. The application is designed to be easily extensible, allowing new filters to be added with minimal effort.

Functionally, the application can:

Apply a variety of image filters, such as:

    • Grayscale: Converts the image to black and white.

      • Sepia Tone: Gives the image a warm, brownish tint.

      • Color Tint: Applies a color overlay to the image.

      • Invert: Inverts the colors of the image.

      • Posterize: Reduces the number of colors in the image.

      • Solarize: Inverts the colors of pixels above a certain brightness threshold.

  • Display the filtered images at Canvas.


2.LLD-


3.Prerequisite

  • Tools:

    • "Java Development Kit (JDK) 21 or higher"

    • "Maven (for dependency management)"

    • "An IDE like IntelliJ IDEA"


4.Project Structure

  • filter - Image filter implementations

  • image- Image display components

  • io - Image reading/saving

  • processor- Core image processing logic

  • HelloApplication.java - Main application class


5.Working of Application (Core Concept)

This is how exactly this Application works

  • How the Processing Works

  1. The Image is a Grid of Pixels: Think of your image as a grid of tiny dots, called pixels. A filter's job is to visit each pixel and change its color based on a mathematical rule (e.g., the grayscale rule).

  2. Divide the Grid: Instead of processing the entire grid with one worker (a single thread), we divide the grid into horizontal strips.

  3. Process in Parallel: An ExecutorService acts as the manager, sending each "worker thread" to its assigned section. All workers start processing their rows at the same time. They don't need to know about each other, because their sections are independent.

  4. Combine the Results: Once every worker is finished, the entire image has been filtered. Because they all worked at once, the total time taken is much less than the sequential approach.

  • How Pixel Printing on the Canvas Works

This part has a very important rule that you cannot break.

The "One Boss" Rule for the GUI

Think of your application's user interface (the canvas, buttons, etc.) as a delicate masterpiece being assembled. To prevent chaos, there is only one boss who is allowed to touch or change it. In JavaFX, this boss is called the JavaFX Application Thread.

  1. Workers Do the Heavy Lifting: The worker threads from our ExecutorService do the hard work of filtering the image in the background. They are not the boss and are not allowed to touch the UI.

  2. Reporting to the Boss: Once a worker thread has finished filtering its image (or its section of an image), it can't just draw it on the screen. Instead, it puts the finished image in a queue and sends a message to the boss, saying, "Hey, I'm done. Please draw this image for me when you have a moment."

  3. The Boss Draws the Image: The JavaFX Application Thread (the boss) picks up this request from the queue. Since it's the only one with permission, it safely takes the filtered image and draws the pixels onto the canvas for the user to see.


6.Running the Application

By using command - mvn clean javafx:run


7.Output

this is our Original image-

After running the application we have to choose filter by CLI.

if we choose A-

Filter Image-

if we choose option B-

Filter Image-

if we choose option C-

Filter image-

if we choose option D-

Filter Image-

if we choose option E-

Final Image-


8.Source Code

GitHub Link— https://github.com/therohitpatwa/PixelNova-AsyncImageProcessor