How to create a line in a touch listener using circles and avoiding gaps!

Q-tro · February 12, 2015, 10:37am

Hi there, fellow Corona users,

I have a problem that is really bothering me for the last 2 days.

I’m currently working on a “finger paint” application, the user will be coloring the screen using his/her finger. Checking on the forum I found a fingerPaint library, that really did the job…

… except that if you want to implement an eraser tool, you have no way of removing just parts of the stroke, since fingerPaint lib creates a single line at every touch cycle (began-moved-ended).

So I tought to create my line using circles in a fashion similar to this:

local circleGrp = display.newGroup() local function onCanvasTouch(event) if event.phase == "began" then local circle = display.newCircle(circleGrp, event.x, event.y, 15) elseif event.phase == "moved" then local circle = display.newCircle(circleGrp, event.x, event.y, 15) elseif event.phase == "ended" then local circle = display.newCircle(circleGrp, event.x, event.y, 15) end end

This works and creates a line of single dots that can later be easily removed one by one when a touch intersect them…

The problem is that when you drag around your finger a bit faster, the circles created in the moved phase are drawn really far apart from one another. I am assuming that this is because the touch listener doesn’t get called really often for perfomances reasons… So i’m trying to fill the gaps but as of now I really didn’t found any way that works!

Can someone show me the way?

OR if you are familiar with fingerPaint library, could you give me some hints on how to implement an eraser tool?

Thank you very much!

schroederapps · February 12, 2015, 3:13pm

Hi Q-tro. There’s definitely a way of modifying the library so that it creates a series of smaller lines instead of a continuous line for each stroke. The only downside to this method is that it creates substantially more display objects, which can drive up the memory usage of your app. In limited scenarios, it will work nicely - if you want to allow your users to make a painting with hundreds of strokes, and those strokes are each comprised of hundreds of smaller display objects, it can get out of hand and possibly lead to crashes. I opted to go for the single line method because it will be more stable, especially on older devices.

I’ll provide a modified version of the library as soon as I can whip one up. That might be today, but it might take a little longer than that, depending on my schedule. I’ll post it here once it’s done.

Thanks,

Jason

Q-tro · February 13, 2015, 4:27pm

Those are really good news, I’ll be here, waiting!

schroederapps · February 18, 2015, 2:48am

Hi Q-tro:

Sorry for the long wait, but I’ve updated the fingerPaint module to “version 1.5,” which allows you to create a canvas with segmented paint strokes. If you wanted to, you can add touch listeners to those individual segments to allow the erasing functionality you’re looking for. Note that the syntax has changed with this new version of the library - the old syntax will still work to create a basic canvas, but to turn on the segmented strokes, you’ll need to adopt the new syntax (but I think the new syntax is actually easier to read, and it’ll be simple to convert your existing code).

Here’s a link to a post on my website detailing the changes, and with links to the new module: http://www.jasonschroeder.com/2015/02/17/corona-finger-paint-module-revisited/

And here’s an example of how you can use the new syntax to create a “segmented” finger paint canvas:

local fingerPaint = require("fingerPaint") local canvas = fingerPaint.newCanvas({ width = 300, height = 300, segmented = true, })

The above code would generate a finger paint canvas 300 x 300 in size, and the paint strokes would be comprised of separate display objects (lines, as well as circles to make the stroke appear smooth at the points where the lines meet up). I also made some general under-the-hood improvements to the module. I think it’s a nice upgrade from last year’s version.

Enjoy!

schroederapps · February 12, 2015, 3:13pm

Hi Q-tro. There’s definitely a way of modifying the library so that it creates a series of smaller lines instead of a continuous line for each stroke. The only downside to this method is that it creates substantially more display objects, which can drive up the memory usage of your app. In limited scenarios, it will work nicely - if you want to allow your users to make a painting with hundreds of strokes, and those strokes are each comprised of hundreds of smaller display objects, it can get out of hand and possibly lead to crashes. I opted to go for the single line method because it will be more stable, especially on older devices.

I’ll provide a modified version of the library as soon as I can whip one up. That might be today, but it might take a little longer than that, depending on my schedule. I’ll post it here once it’s done.

Thanks,

Jason

Q-tro · February 13, 2015, 4:27pm

Those are really good news, I’ll be here, waiting!

schroederapps · February 18, 2015, 2:48am

Hi Q-tro:

Sorry for the long wait, but I’ve updated the fingerPaint module to “version 1.5,” which allows you to create a canvas with segmented paint strokes. If you wanted to, you can add touch listeners to those individual segments to allow the erasing functionality you’re looking for. Note that the syntax has changed with this new version of the library - the old syntax will still work to create a basic canvas, but to turn on the segmented strokes, you’ll need to adopt the new syntax (but I think the new syntax is actually easier to read, and it’ll be simple to convert your existing code).

Here’s a link to a post on my website detailing the changes, and with links to the new module: http://www.jasonschroeder.com/2015/02/17/corona-finger-paint-module-revisited/

And here’s an example of how you can use the new syntax to create a “segmented” finger paint canvas:

local fingerPaint = require("fingerPaint") local canvas = fingerPaint.newCanvas({ width = 300, height = 300, segmented = true, })

The above code would generate a finger paint canvas 300 x 300 in size, and the paint strokes would be comprised of separate display objects (lines, as well as circles to make the stroke appear smooth at the points where the lines meet up). I also made some general under-the-hood improvements to the module. I think it’s a nice upgrade from last year’s version.

Enjoy!