Smooth Drawing Canvas

Hi, you linked my topic so I can answer this for you.

The solution is simple. Connect the point from the first frame with to the second point from the second frame with a straight line. This will fill in the gaps between the two.

This requires a combination of trigonometry and coordinate geometry.

I’ll actually write out the full solution here, without the code, so you can learn from it whilst working out exactly how to code it yourself.

So say for example we use renderstepped.
Track where the mouse is at the first frame (Frame1).
Track where the mouse is at the second frame (Frame2)

Now we draw a line using the distance formula.

We then get the position of the line using the mid point formula (Make sure position anchoring on the line is set to Vector2.new(0.5, 0.5) )

You will notice a right angle can be drawn from the two points. You’re going to use this to work out the rotation of the line. You might remember SOH CAH TOA from school.

In this example we can work out the length of the opposite, and we already have the hypotenuse from using the distance formula.

So then we can do Sin(A) = O/H where A is the rotation of the line.

To find the length of the Opposite, take the larger Y value from the lesser one.

29 Likes