Draw with finger and calculate an ellipse from the points

[KristianFogel]

Hi,
I am an amateur programmer and I am tinkering around with solar2D for some weeks now - and I must say, I like it very much! As I am amateur mathmatician too, I try to accomplish a task that seems simple but probably isn’t.

The user should be able to draw an ellipse like form on the screen with the finger or some kind of computer stylus. The app should then calculate and show an ideal ellipse that is best fitting to the drawn form. This should be expanded later to other simple geometric forms.

First challenge: Draw with solar2D doesn’t seem to be a obvious task but possible, though the few apperarances of this topic in the forum are quite old and links to templates not working anymore. Is there a better way doing this than recording touch events and creating circles as pen strokes?

Drawing like Draw Something - possible?

Quick question for you experts, hopefully Graphics 2.0 can provide a neat solution: We’ve got a client who wants us to create a drawing game. From a tech perspective, I’d like to know how we’d approach drawing onto the scene using finger touch, e.g. like how Draw Something does it. Can we use smoothed vector lines or would we maybe have to plot little sprites? We’d like to have pen colour and thickness selection too. Hopefully, it’s possible. Don’t really want to go down the Adobe Flash Stage…

Second challenge: Calculate the ellipse from the recorded points. This seems to be a complicated mathmatical optimisation problem. Algorithms do exist and are programmed for respective systems (https://www.mathworks.com/matlabcentral/fileexchange/3215-fit_ellipse) but I do not know how to implement external ressources into my solar2D code and do also think that this approach might be to ambitious for my objective.

Does anyone of you have an idea that may lead me towards a solution? I have a feeling that I am thinking too complex at the moment and maybe there is a simple way out …

Thank you!

Christian

[XeduR]

It really depends on what you are trying to accomplish.

For instance, if I was working on a drawing app, then I wouldn’t necessarily use circles to draw the path, but I would track the touch points and use them to draw a bezier curve to which I would apply a stroke colour. This way the resulting line would be smoother and continuous.

For drawing an ellipsis, I would probably approach it by having a touch event listener that simply takes the starting coordinates of the event and simply calculates a set of vertices for the ellipse based on the starting and current coordinates of the event. You might even be able to “cheat” through this by just drawing a circle and just applying xScale/yScale to it accordingly.

I’ll probably have time to write a simple function for this “cheat method” during my break and I’ll post it here once I’m done.

[XeduR]

So here’s a sample of how you could manage drawing ellipses using touch events.

local tempShape

local function drawEllipse( xStart, yStart, x, y, isFinal )
	local width = xStart-x
	local height = yStart-y
	display.remove( tempShape )
	tempShape = nil
	local anchorX, anchorY = 1, 1
	if width < 0 then
		anchorX = 0
		width = -width
	end
	if height < 0 then
		anchorY = 0
		height = -height
	end
	
	local maxDistance = math.max( width, height )
	local xScale = width/maxDistance
	local yScale = height/maxDistance
	
	if xScale ~= 0 and yScale ~= 0 then
		local ellipse = display.newCircle( xStart, yStart, maxDistance*0.5 )
		ellipse.anchorX, ellipse.anchorY = anchorX, anchorY
		ellipse.xScale, ellipse.yScale = xScale, yScale

		if isFinal then
			return ellipse
		else
			tempShape = ellipse
		end
	end
end

local function touchListener( event )
	local phase = event.phase
	if phase == "moved" or phase == "ended" then
		drawEllipse( event.xStart, event.yStart, event.x, event.y, phase == "ended" )
	end
	return true
end

Runtime:addEventListener( "touch", touchListener )

[KristianFogel]

Thank you, XeduR!

This is an interesting approach and I will surely try out the bezier-curve-method (when back at my solar2D computer later). I find your sample impressingly elegant - but too perfect for my purpose.

Maybe I must explain a little bit more: The whole thing should lead to some kind of learning program for (hand-)drawing ellipses. You try to draw an ellipse and the app shows you how near you get to the real thing, maybe even with some rating score, you can compare your “ellipse” and the perfect ellipse and learn from that and then try again. There can be different levels with only vertical oder horizontal ellipses or given boundaries (one stroke to the left and one to the right and in between you should draw the ellipse).
So one may ask why someone should learn to draw ellipses by hand - but this is really an important basic skill for perpective drawing as every circle (and every rounded object) transforms into an ellipse in perspective. So if you train your hand to the real ellipse form your drawings will automatically look better than they will when just using some kind of egg-shaped form.

Best,
Christian

[XeduR]

Well, then I would look into said bezier curve and try matching those points to the equation of an ellipse and see how close those points land to where they should be.

[KristianFogel]

Thank you, I will try this soon … it’s quite a bit of a mathmatical challenge!