Real-time drawing applications play a crucial role in user experience in computer graphics. In traditional drawing applications, each pixel needs to be manipulated individually, which can result in performance issues and increased latency. Especially in high-resolution environments and complex geometric operations, data processing times can negatively impact the overall user interaction.
This project focuses on optimizing geometric shape rendering and freehand drawing using C++ and the ICBYTES Library. By implementing a multi-threaded architecture and parallel processing techniques, the goal is to significantly improve the drawing performance and user experience.
This project is a simple Paint application developed using ICBYTES. Users can free-draw using various drawing tools, draw different shapes, and save their drawings.
This project aims to develop a high-performance and multi-threaded drawing application. The main objectives are:
✔ Providing instant feedback to the user by using a temporary canvas
✔ Improving drawing performance with multi-threaded algorithms
✔ Creating a flexible structure that supports various geometric shapes
✔ Implementing layer-based drawing with a canvas that supports transparency (alpha channel)
📌 Temporary Canvas and Drawing Management The project is based on three separate canvas structures:
1️⃣ Main Canvas (m): The primary structure where permanent drawings are stored, and freehand drawing takes place.
2️⃣ Temporary Canvas (tempCanvas): Used for temporary drawings and real-time user interactions.
3️⃣ Buffer Canvas (backBuffer): The structure where all drawings are merged and projected on the screen.
✔ How it works?
During drawing, shapes are first drawn on the temporary canvas (tempCanvas) and displayed in real time. When the user releases the left mouse button, the drawing is merged into the main canvas (m), and tempCanvas is cleared. This structure optimizes the drawing experience by providing instant feedback to the user.
🔹 Figure 1. Paint Application First Look
Using Bresenham's Algorithm, a high-performance and efficient line drawing technique is implemented.
🔹 What is Bresenham's Algorithm? Bresenham's Line Algorithm is a fast and optimized rasterization technique that determines pixels along a straight line using only integer calculations instead of floating-point operations.
✔ This minimizes the gaps between pixels and ensures smooth rendering.
✔ With the multi-threaded implementation, the line drawing is computed in parallel.
✔ Thick line support is implemented using normal vector calculations.
void DrawLine(ICBYTES& canvas, int x1, int y1, int x2, int y2, int color) {
int dx = abs(x2 - x1);
int dy = abs(y2 - y1);
int sx = (x1 < x2) ? 1 : -1;
int sy = (y1 < y2) ? 1 : -1;
int err = dx - dy;
while (true) {
Line(canvas, x1, y1, x2, y2, color);
if (x1 == x2 && y1 == y2) break;
int e2 = 2 * err;
if (e2 > -dy) { err -= dy; x1 += sx; }
if (e2 < dx) { err += dx; y1 += sy; }
}
}
Drawing operations are significantly accelerated using multi-threading.
Traditional vs. Multi-threaded Drawing
🔹 In single-threaded drawing, CPU bottlenecks can slow down rendering, especially for high-resolution graphics.
🔹 In this project, each drawing task runs on a separate thread, making better use of multi-core processors.
✔ How It Works?
Thread Pool Mechanism: Distributes workload efficiently, reducing the overhead of thread creation. Parallel Processing: Each drawing runs in its own thread, preventing UI freezing and improving responsiveness. Mutex Synchronization: Ensures thread safety, preventing data inconsistency during concurrent drawing operations.
| Feature | Single-threaded | Multi-threaded |
|---|---|---|
| Drawing Speed | Slow | Fast |
| UI Responsiveness | Lags | Smooth |
| CPU Utilization | Inefficient | Optimized |
✔ Result: Multi-threaded rendering has significantly improved the user experience by providing real-time drawing performance.
A user-friendly and intuitive interface has been designed to make the drawing experience smooth and efficient.
✔ Color Selection Panel: Choose from predefined colors or adjust custom colors with a trackbar.
✔ Shape Selection Buttons: Draw circles, triangles, rectangles, lines with one-click.
✔ Line Thickness Adjustment: Adjust line thickness dynamically using a trackbar.
🔹 Figure 2. User Interface with Tools
✔ Freehand drawing tool that allows users to draw smoothly with adjustable thickness.
🔹 Figure 3. Shows Line Thickness
🔹 Figure 4. Drawing function
✔ Erase specific areas of the drawing canvas.
✔ The eraser size can be adjusted using the line thickness slider.
🔹 Figure 5. Showing how eraser works
✔ Clears everything from the canvas, allowing users to start fresh.
🔹 Figure 6. After clicked clear button
✔ Saves the drawing as a BMP file.
✔ Uses Windows API file dialog for choosing file name & location.
🔹 Figure 7. Save canvas
Operating System: Windows 10 or later
Development Environment: Visual Studio 2022
Required Libraries:
icb_gui.h, ic_media.h, icbytes.h from ICBYTES Library You can download it here
Clone the Project
git clone https://github.com/yourusername/paint-app.git
cd paint-app
Open in Visual Studio & Build
Open the project in Visual Studio 2022
Compile and run
[1] Baykal, I. C. (2024). ICBYTES: A Simplified C++ Library.
[2] Foley, J., van Dam, A., Feiner, S., & Hughes, J. (1996). Computer Graphics: Principles and Practice.
[3] Bresenham, J. E. (1965). Algorithm for computer control of a digital plotter.