Simple Drawing App

[endernafi]

Hello Dear LiveCoders,

Long time since my last question
Well, here is a bummer.

I'm coding a simple drawing app for children just for fun, well for my little nephew mainly.
I've been able to draw with different colors and different pen sizes.
Here is the very basic drawing code:

Code: Select all

on touchMove pId, pX, pY
   if (pId is among the lines of sId) then
      put the points of graphic ("theLine" & pId) into tPoints
      put return & pX & comma & pY after tPoints
      set the points of graphic ("theLine" & pId) to tPoints
   end if
end touchMove

But I couldn't manage to erase the drawings.
The below code doesn't work consistently, it's too slow to be processed I think.

Code: Select all

on touchMove pId, pX, pY
   if sEraseMode then
      put (pX & comma & pY) into tPoint
      repeat with x=1 to (the number of graphics of me)
         put the points of graphic x into tPoints
         if tPoint is among the lines of tPoints then
            replace tPoint with empty in tPoints
            set the points of graphic x to tPoints
         end if
      end repeat
   end if
end touchMove

Here is my stripped out stack:

drawing.zip

(1.94 KiB) Downloaded 396 times

Any insights how to accomplish this deleting task?
Maybe, the whole creating a graphic for drawing is wrong way to choose?

Thanks for any ideas...


Best,

~ Ender Nafi

[dave_probertGA6e24]

Hi Ender,

One of the problems you will be facing with your erase code is that it will only erase points that are Exactly where touched (to the pixel)!! This is surely a very difficult thing for anyone to do.

You might find a better solution in checking if the points are within a rectangle around the touch position and then removing them.

Hope that helps a bit,

Dave

[endernafi]

Thank you Dave.

Actually, that came to my mind.
That's why I have a 32*32px circle in my sample stack.
But I still don't know how to calculate the intersection robustly.
I have to figure it out somehow.


Best,

~ Ender Nafi

[bn]

Hi Ender,

I made a little stack that uses a rect to erase, it test for within.

If you want to use intersect look at the dictionary for intersect and have a look at the user comment for intersecting a point and an area. Normally intersect uses two areas.

Have a look at the stack, as a bonus it draws in rainbow colors. That may be a little slow on a mobile device, easy to disable. Speed also depends on linesize, the larger, the slower.

make-erase Graphic rainbow.livecode.zip

(3.9 KiB) Downloaded 411 times

Kind regards, especially to your little nephew.

Bernd

[endernafi]

Hi Bernd,

Whenever someone stuck, you're there.
You're great.
Efe, my 4 years old nephew, loved the app and the rainbow colors

And the solution works perfectly in my low-end test device iPod Touch.
Not to mention iPhone4s, 5 and iPad

I've learned much from you.
Thanks again,


Best,

~ Ender Nafi

[FourthWorld]

Hi Bernd,

Whenever someone stuck, you're there.
You're great.

Bernd is a god. If we had awards here for Most Helpful and Dedicated Poster, I think Bernd would win hands-down.

[bn]

Hi Ender, Richard,

@Richard, thank you. Of course there are many more here that support the forum. Klaus, Mark, Sturgis, Simon, Craig, Dixie, Gugliemo, Bangkok, Jacque, Jean-Marc and more. Every one bringing his expertise to help. Not to forget the forum administrators that have a lot of work to keep this forum free of the spam litter.

@Ender, you have a nice little nephew

I think you made a lot of progress in a short time regarding Livecode. And you actually study the example stacks. I like how you tackle things.

Above stack or course can be tweaked a lot, I wanted to add the rainbow since it shows in a short way the usefulness of gradients, and although intimidating at first they are not really hard to understand once one gets the basic concept.

And very importantly to show that one polygon graphic can draw multiple non-contiguous lines if the points of the inidividual lines are separated by an empty line. Of course all the individual lines of the one graphic have the same color. That is where the stroke gradient helps -> rainbow.

here is an old forum thread where I posted a drawing/painting app paintgradient_6 (besides a lot of useful information re painting in Livecode, / use of graphics)
http://forums.runrev.com/phpBB2/viewtop ... =30#p43086
that could be turned into a mobile app. I tested it on an iPad and it works. Of course the interface would have to be completely changed. That was again a proof of concept stack.

Maybe your nephew will have new toys soon...

Kind regards
Bernd

[endernafi]

Hello Dear LiveCoders,

Back again to this simple drawing utility.
Here is the pre-final version:

drawBook.zip

(3.13 KiB) Downloaded 447 times

The interface is terrible, I know; hence the pre
As always,
you can use the code freely anywhere & anytime.

Now, a little detail for the ones who wanna read further:
Why keep working on this?
* My first version had no erase functionality.
* Bernd's version was excellent but the user can't choose the color of separate drawings.
* An unposted version of mine had erase and choosing color functionalities
but the performance was awful, especially on the device.

* This one solves all three problems:
Performance is decent, one can erase things and choose whichever color he/she wants.
A note about erase though;
it actually doesn't erase anything, just veils the underlying pixels.
But, the code can be altered to actually delete them when the app is idle;
maybe with a command triggered by the mouseUp, i.e when the user is not interacting with the app.

* There is two drawing styles: line or plot.
The plot's performance is not good but I kept it because it can be used for brush technique,
like a very, very simple version of the photoshop's brushes. It needs to be coded, of course; for now it just puts little circles on the screen.


Hope it helps someone out there.
And critiques always welcome;
{positive or negative;
you can say comfortably "you s*ck, mate; give up programming, already" no harsh feelings }


Best,

~ Ender Nafi

[Simon]

How does one post to revonline? Or is it called LiveCode Share?
I would think that would be where Ender should be placing his stack. Here it will get lost.

Simon

[endernafi]

Hi Simon,

I take that as a compliment, thank you...
But I think this app should be improved much more to be posted to revOnline.


Best,

~ Ender Nafi

[dave_probertGA6e24]

Hi Ender,

I think it's a great little piece of code. I'm likely to have a play at making it a bit better and repurposing it for a slightly different use, but I will post any changes back here (if they are any good).

Be complimented

Cheers,
Dave

[endernafi]

Thank you Dave,

I'm eager to see your add-ons to the stack.
And the Vacuum Shadows looks promising, I hope it'll be funded successfully.
{ A little hubris: 8th backer is me }


Best,

~ Ender Nafi

[dave_probertGA6e24]

Hi Ender,

You are a star

If we are funded Ok then I will make sure you get an honourable mention in the rules as the first Livecoder to back it (after myself of course ! )

Thanks again.

Cheers,
Dave