Smooth Drawing Canvas

[anthlons (tatemcraefan45)]

Basically I’m trying to let a player draw something on a canvas, A while loop is too slow as well as mouse.Move and RenderStepped, as covered in this topic: RenderStepped and Mouse.Move both too slow to make a GUI you can draw on?

I’d use the code from that topic, but sadly it wasn’t given out.

How would I get the points to spawn faster and make it correct, or draw a line from point a to point b to make a line for each and every point? Thanks!

My code:

local runService = game:GetService("RunService")
local drawing = false

local mouse = game.Players.LocalPlayer:GetMouse()

while wait() do
	if drawing == false then
		local p = Instance.new('Frame', script.Parent)
		p.AnchorPoint = Vector2.new(.5,.5)
		p.Position = UDim2.new(0, mouse.X, 0, mouse.Y)
		p.Size = UDim2.new(.01, 0, 0.01, 0)
		p.SizeConstraint = Enum.SizeConstraint.RelativeXX
	end
end

(All of this horribly written code will be rewritten, just used as a temp placeholder)
Example with mouse speeds:

[WingItMan]

Instead of using GUIs, could you use Trails instead?

There’s no streaks, spaces, you can input any type of texture you want, set the speed of the texture, colour it, and it would probably be a lot more performant that using GUIs this way, especially with the initial draw.

With this though, your best bet would probably to create either a function to fill in the gaps bit by bit (take the last position and next next position and use a for loop to create more squares in-between)

Or create a method to rotate and scale the guis based on the previous and next position - which is probably a lot of math that I don’t know how to do. =(

[anthlons (tatemcraefan45)]

What do you mean trails? How would that work, I’m interested…

[ThatTimothy]

You would have the camera just be looking down, then a move a part with a trail attached to 2 attachments inside of it.

[anthlons (tatemcraefan45)]

So one where the mouse initially started holding their button down, then have another position itself at the mouse’s position every renderstepped then when the button is up it places the part? How would I get the part to rotate with the mouse curving?

[suyoin (amogus)]

You could maybe use a beam, because beams have curve properties. Also, they don’t disappear like trails (and you can put repeating patterns on them!).

[anthlons (tatemcraefan45)]

Again, how would I get it to rotate correctly?

[suyoin (amogus)]

https://developer.roblox.com/api-reference/class/Beam

[0x_7777]

Instead of putting down a new Frame for each RenderStep, place down a virtual marker. In a seperate routine, you can then interpolate between these position markers to fill it in with your frames. The interpolation method can be adjusted to fit your curve, or to be simply linear (given you sample fast enough).

[Ripull]

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.