Non uniform pixel painting in low Frame rate

Question

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.

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;
    }
}

You need to interpolate between the points and fill in the gaps if you want a continuous line. — Richard Critten, Sep 09 '22 at 18:05
A better idea would be to decouple your update from your reading of the mouse. Read the mouse 1000 times a second on a high priority thread, and then pass the data to whatever thread to process it. Thats what higher end drawing programs do. — Mike Vine, Sep 09 '22 at 18:35
Mouse does not report its position continuously. Reading it 1000 per second would be pointless as report frequency is much less. — n0rd, Sep 09 '22 at 18:55

score 2 · Accepted Answer · answered Sep 10 '22 at 08:25

sample your mouse without redrawing in its event ...
redraw on mouse change when you can (depends on fps or architecture of your app)
instead of using mouse points directly use them as piecewise cubic curve control points

see:
- How can i produce multi point linear interpolation?
- Catmull-Rom interpolation on SVG Paths
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).

Non uniform pixel painting in low Frame rate

1 Answers1