Search code examples
c++openglpaintimgui

Non uniform pixel painting in low Frame rate

I am making an image editing program and when making the brush tool I have encountered a problem. The problem is when the frame rate is very low, since the program reads the mouse at that moment and paints the pixel below it. What solution could I use to fix this? I am using IMGUI and OpenGL.

Comparision.

enter image description here

Also Im using this code to update the image on the screen.

UpdateImage() {
    glBindTexture(GL_TEXTURE_2D,this->CurrentImage->texture);
    if (this->CurrentImage->channels == 4) {
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, this->CurrentImage->width, this->CurrentImage->height, 0, GL_RGBA, GL_UNSIGNED_BYTE, this->CurrentImage->data);
    }
    else {
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, this->CurrentImage->width, this->CurrentImage->height, 0, GL_RGB, GL_UNSIGNED_BYTE, this->CurrentImage->data);
    }
}

And the code for the pencil/brush

toolPencil(int _MouseImagePositionX, int _MouseImagePositionY) {    
    int index = ((_MouseImagePositionY - 1) * this->CurrentImage.width * this->CurrentImage.channels) + ((_MouseImagePositionX - 1) * this->CurrentImage.channels);
    //Paint the pixel black
    CurrentImage.data[index] = 0;
    CurrentImage.data[index + 1] = 0;
    CurrentImage.data[index + 2] = 0;
    if (CurrentImage.channels == 4) {
        
        CurrentImage.data[index + 3] = 255;
    }
}
Solution

    1. sample your mouse without redrawing in its event ...

    2. redraw on mouse change when you can (depends on fps or architecture of your app)

    3. instead of using mouse points directly use them as piecewise cubic curve control points

      see:

      So you simply use the sampled points as cubic curve control points and interpolate/rasterize the missing pixels. Either sample each segment by 10 lines (increment parameter by 1.0/10.0) or sample it with small enough step so each step is smaller than pixel(based on distance between control points).