Simple drawing program help

[oldgearguy]

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]

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.

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 (72.66 KiB) Viewed 8982 times

[Phil999]

brilliant work.

[oldgearguy]

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]

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

[Traxus]

Envelopes for anything!

[oldgearguy]

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]

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?

[Softcore]

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!

[ndivuyo]

super fun!