Simple drawing program help

Canvas specific discussion
oldgearguy
Regular
Posts:315
Joined:02 Nov 2013 11:19
Simple drawing program help

Post by oldgearguy » 24 Feb 2015 14:40

I needed a script to allow a user to draw on the iPad (and eventually save off and use the points).

Since Lemur has a 256 element limit on arrays, eventually I'll have to figure out how to span multiple arrays with the data points. In the meantime, I'm currently using a single array and wrapping around for testing.

Attached is a canvas script to follow the mouse (in the editor) or finger (iPad) and draw a blue line. What I have problems with is really understanding how best to use the canvas functions to accomplish it. I have 2 draw() scripts. The second one (draw2()) is how I thought it should work, but it doesn't do well tracking the mouse in the editor (lots of gaps if you move even a little bit fast). The current one (draw()) redraws the entire path (I think) every time. It looks much smoother, but I think it's more CPU intensive.

In either case, my problem comes when the array wraps around from [255] to [0]. I thought I coded that case correctly, but there's always a gap unless you draw extremely slowly.

If anyone more experienced with canvas/HTML 5 in general can take a look and make some suggestions, I'd appreciate it.

thanks

oldgearguy
Regular
Posts:315
Joined:02 Nov 2013 11:19

Re: Simple drawing program help

Post by oldgearguy » 25 Feb 2015 12:15

I attached a new version that might entice others to look at it....

I know it's not a serious program - it doesn't generate MIDI or OSC messages, it doesn't control anything or monitor anything. But, when I was working on it, one of my daughters saw it and I lost my iPad for an hour. :D

The bigger picture is this -- if I can squeeze out the bug(s), then it would be possible to capture drawing type movements as a series of points and then play them back or spit them out as MIDI CC values, or use it to control the motion of some remote object, or ...

Right now, it's just a fun kids sketch pad. enjoy
fixit.jpg
fixit.jpg (72.66KiB)Viewed 10927 times
Attachments
draw.jzml
drawing program
(23.26KiB)Downloaded 346 times

Phil999
Regular
Posts:932
Joined:11 Jan 2012 01:53

Re: Simple drawing program help

Post by Phil999 » 25 Feb 2015 20:40

brilliant work.
Formant+Eurorack, PPG wave 2.2, Korg MS-20, etc., EWI 4000s, QuNeo, etc., Mixbus32c, u-he, MadronaLabs, Samplemodeling, NI, etc., iPad2/4/Pro

oldgearguy
Regular
Posts:315
Joined:02 Nov 2013 11:19

Re: Simple drawing program help

Post by oldgearguy » 25 Feb 2015 21:56

Phil999 wrote:brilliant work.
Thanks. I'm basically trying to teach myself some Canvas fundamentals because I needed the capability for something else I'm working on. I still have a lot to learn. I optimized it a bit more, but I still have that pesky gap bug whenever I wrap around the array (more or less). Got to go back to my linked list/circular array principals from my early programming days...

The reason for the left/right was that I'm hoping to be able to allow the line thickness and color to be varied dynamically as you draw and to make that useful for lefty's, the canvas should be to the left so the right hand can control thickness and color while drawing with the left.

Macciza
Regular
Posts:1325
Joined:07 Dec 2011 04:57
Location:Sydney, Australia.

Re: Simple drawing program help

Post by Macciza » 26 Feb 2015 04:27

Hi
I had a muck around with this early on basing it on a web example
it used a two layer approach, will see if i can see what happened
there are various examples of this sort of stuff on the web, the difficulty is sometimes in the conversion
But a lot can be learned from checking them out

Will have a look and get back to you
iMac 2.8G i7 12G 10.6.8/10.7.2, Legacy Dexter/Lemur, Liine Lemur/iPad2, KMI SoftStep, 12Step & QuNeo , B-Controls, Mackie C4 etc
MaxMSP, Live Suite, Native Instrument stuff, etc Modified Virtual Guitar System etc All Projects/Modules © CC-BY-NC-SA[*][/b]

Traxus
Regular
Posts:216
Joined:30 Nov 2012 06:19
Location:Detroit
Contact:

Re: Simple drawing program help

Post by Traxus » 26 Feb 2015 04:38

Envelopes for anything!

oldgearguy
Regular
Posts:315
Joined:02 Nov 2013 11:19

Re: Simple drawing program help

Post by oldgearguy » 26 Feb 2015 10:18

Macciza wrote:Hi
I had a muck around with this early on basing it on a web example
it used a two layer approach, will see if i can see what happened
there are various examples of this sort of stuff on the web, the difficulty is sometimes in the conversion
But a lot can be learned from checking them out

Will have a look and get back to you
That's where the seed of this started. In the real world.... you don't have a 256 size limit to arrays, so storing an arbitrary number of points is fairly trivial.

Part of my questioning when I was making this is the interaction of all the canvas_xxx calls and the "On Redraw" execution and the "On cursor move" execution.

I'm still at a loss as to why I need to redraw every point/line segment for a smooth line (versus just drawing the next segment).

oldgearguy
Regular
Posts:315
Joined:02 Nov 2013 11:19

Re: Simple drawing program help

Post by oldgearguy » 26 Feb 2015 14:31

ok, what I've been able to determine so far is that even though I successfully wrap around my array and call moveTo and lineTo with the proper coordinates, for some reason the lineTo is using a stale copy of the array values and is drawing a line to the old coords stored in the array.

My guess (without knowing how Lemur works internally especially with regards to what gets processed/updated in a frame) is that the cursor move and the redraw are happening in the same frame so even though the array looks like it was updated, the values being used are old.... I think.

To observe, download this version and start drawing a line. As soon as the counter gets close to 255 move the mouse very slowly to see the counter go up to 255, 0, and then when it goes to 1 you can see the line connect back to where you started drawing even though the array values in the rightmost window show different points.

The Monitors on the left side show the x (top) and y (bottom) cords of the array for positions 254, 255, 0, 1, and 2

Am I correct or did I miss something obvious?
Attachments
debug_draw.jzml
debug version
(23.76KiB)Downloaded 338 times

Softcore
Regular
Posts:1639
Joined:04 Nov 2012 08:34

Re: Simple drawing program help

Post by Softcore » 26 Feb 2015 14:36

I've been following and downloading your templates in this post, but I havent commented because frankly, I am, like you, still trying to figure out basic stuff in Canvas.

Keep it up! ;)


Post Reply