Effect of drawing with pencil

[Mossar]

My goal is a 2D platform game with additional possibility to draw things on a screen (like with a pencil or a brush in Photoshop). I did everything what is connected with platform game mechanic, I did effect of drawing on a game screen.

When I move pressed mouse with medium or slow speed everything is OK and there is quite smooth line. But there is quite difficult problem when I want to draw something faster. If I try to draw a line faster, application will "catch" only few points of a line. Example:


In my opinion there are 3 possible ways to repair it:

• filling free spaces between dots with ultra-advanced algorithm
• slowing down mouse
• improving application speed

ad1. This is the way I will probably try to do it , but I think it will be quite difficult to invent nice way to make it look smooth and natural. If you have any idea, please help me Maybe use of y=ax+b and filling every point between these 2 following points?

ad2. This is the way I TRIED to do it. I was setting Mouse Position with setPosition just near last mouse position. It was working but: slowing down mouse is not the best way in my opinion to repair it. I was using y=ax+b to calculate the most accurate position, but of course it wasn't accurate because of sf::Vector2i. It was impossible to make that line connected in 100% with a mouse movement.

ad3. I'm not sure if it was possible. It depends on speed of user's computer so I think it is not the best way.

This is not a problem of bad algorithm of drawing. I was "cout"-ing mouse position in an application with almost nothing and it's just to fast for application to catch every single (x,y) position.

Ok. So I wanted to ask if you have any idea to do it.

[FRex]

I think MouseMoved events catch every single pixel move but I'm not sure and I can't check until tomorrow evening. You can try though, consult official tutorials if you don't know what events are.

[Mossar]

Hmm, ok I will try to change my algorithm.

So instead of:
if (sf::Mouse::isButtonPressed(sf::Mouse::Left))
I should try:
if (Event.type == sf::Event::MouseMoved)
?

Of course I know that I MUST use the first "if", but only once at the beginning of drawing. After pressing I should use MouseMoved to catch every pixel. I hope it would work

Ok I will try tomorrow, it's 1AM in my country Thank you for help.

[Jebbs]

You might also want to try not using the event system and try using the real time Mouse class.

[Grimshaw]

What you really want to do is to trace lines between the current mouse position you read and the last one, instead of making points in the mouse position.

This will allow an actual precise stroke that will always be a continuous line as you'd expect

[Ixrec]

In case it helps, my first thoughts about how to implement the algorithm are:

class DrawnLine {
  std::vector<sf::Vector2i> points;
public:
  DrawnLine();
  void addPoint(sf::Vector2i p) { points.push_back(p); }
  void draw_me(RenderTarget& r) {
    //draw lines between points 0 and 1, 1 and 2, etc...
  }

}

int main() {

  //initialize the window and other stuff

  bool drawing = false;
 
  //some kind of container for DrawnLines, if you want to keep track of more than the current one
  DrawnLine currentLine;

  while(window.isOpen()) {

    if (sf::Mouse::isButtonPressed(sf::Mouse::Left)) {
      if(drawing) {
        currentLine.addPoint(sf::Mouse::getPosition());
      } else {
        drawing = true;
        //start a new line, giving currentLine a new value, possibly saving its old value
      }
    } else {
      drawing = false;
    }

    //clear/draw/display

  }

}
 

[Mossar]

That algorithm look nice and it doesn't depend on computer's speed. I will try it because it is probably the most proper way.

But this algorithm has got one problem (I mean algorithm which do a straight line between points). User will try to do a line which is not straight, for example something similar to y=x^2. If he did it fast, app would catch only few points and he wouldn't get y=x^2 but curve with sharp edges.

But it doesn't change that this idea is very nice Maybe I would try to smooth that edges later.

[Ixrec]

I think "spline interpolation" is the technique you'll want to look into for making smooth curves out of those points.  Cubic splines in particular are a good starting point.

[Mossar]

Hah it's funny. When I had interpolation on university everybody thought it is useless in programming. Probably it is the problem of professor, who couldn't explain where we can use it.

[Gobbles]

I actually use interpolation for some collision, works great. Nice and fast too.

[Foaly]

There was a thread about bezier curves a in the forum recently. Based on that thread there is some code on the wiki for bezier curves now. I think this might help you.

[Mossar]

Oo, very nice, thank you. But now I won't use it, this line look quite good after "filling" algorithm and I want to improve other things in my game. This is something what I will do if I have almost whole game designed.

Now I have another problem. When I draw a lot of lines, there are thousands of images(points) on a screen. On my computer there is exception after drawing all the points, when I increase array to 2000 elements. I've heard that this is connected with graphic card and I should use VertexArray using one texture. What do you think? Should I consider it?

But I can't imagine how to prepare one texture divided for 4x4 tiles doing smooth line? If it was only 1368:768 black texture and I "activated" 4x4 points with my mouse it would be very sharp and it wouldn't look like a pencil.