Simple drawing program help

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

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

draw.jzml

brilliant work.

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.

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

Envelopes for anything!

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).

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?

debug_draw.jzml

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!

super fun!

latest (and probably last) iteration of this thing. This version allows you to draws lines of up to 256 points each. As an added bonus, after drawing a few lines, click on the color pad where the line width value is displayed.

I think I have a kludgy way to stitch together 256 point segments to create the appearance of one longer line, but for this demo, what's here should be fun enough.

I wanted to do a whole canvas fade out to black, but the best I could do was fade the last line drawn, which wasn't nearly as cool looking.

draw_mem.jzml

In case people are browsing around for examples of various techniques, I should mention that this program, even though it doesn't do anything with MIDI or OSC, does show a method for storing and retrieving values using Monitor objects (which can be found and sequenced using findobject() and related calls after building up the name dynamically from a string or counter) versus variables (which can't be sequenced without hardcoding). It also shows one way to use a MIDI clock to control playback speed of something you want to automate.

It also contains some Canvas stuff and given that it's my first attempt, may not be the most shining example...