canvas thick line width

[foxschoo...@gmail.com]

I am trying to make a doodle app with variable line width. The thicker line width looks awful. It looks like a zig-zag. Is there a way to make a thick smooth line from a finger drag?

Thanks,
Brian

[Hal Abelson]

 Please  provide an example simple app(aia file) so we can see how you've set the line width.   Also, what device you are using?

== Hal

[Stephen Zipprich]

I don't know if this suggestion will fix the issue or not, but in your Slider.PositionChanged you are setting the Canvas line width to the global variable and then specifying the size of the global variable with the thumb position.  I'd recommend switching these blocks around (set the size first, then set the line width) and see if it fixes your problem.

[foxschoo...@gmail.com]

Thank you for your suggestions. I meant to move the set line width into a when screen init block, but forgot. I don't think that that would affect this at all though. I made a simplified version of it (without slider or variables). I am using a Droid Bionic running jelly bean, but I don't think that has anything to do with it either as it does the exact same thing in the emulator. I attached the aia for the simplified version. Is there another method for drawing a line from a finger drag that doesn't give the weird zig zag lines from my first post?

[Enis]

Tried it here... Replicated it... UGLY...  It appears there's no direction to the individual points that are drawn, and they're direction changes in bizarre ways the slower you drag (I'm using a mouse but still.  The slower you go, the more erratic the individual lines are.

[Hal Abelson]

Very interesting problem!  I have not looked in detail, but here is what I think is going on:

First, your program is not drawing "a line" or "a curve".  It's drawing a separate line segment from previous-x/y to current-x/y each time you move your finger.   And there's nothing in the program that says that all these lines are
part of the same "curve". 

Second, this is OK for thin lines, but when you have such a thick line, the "line segment" being drawn is actually a short stubby rectangle, and again, each rectangle is a separate object as far as the program is concerned.   So there's nothing that tells these rectangles to form a figure that has no gaps.

We could think about how to improve app inventor to fix this -- I'm not sure how.   But one issue you can explore is what is the exact relation that  the start point x, y  and the rectangle?  My guess is that it's at the lower left corner of the rectangle.
It might be better to make that start point be at the middle of the short side of the rectangle.   You can experiment in app inventor to change your program so that rather than drawing from prev-x/y to current-x/y, it applies a correction to these coordinates to take account of the width and slope of the "line segment"  (i.e., the rectangle).   Why don't you play with this as a geometry problem an see if that improves the situation?

Once we figure out what an appropriate correction is, we can think about installing that in App Inventor.

== Hal

[Hal Abelson]

Another way to deal with this might be to compute where the gap (wedge) is between the two consecutive rectangles and display a small ball that fills it in.    See how that works.


In any case, I don't see this a warranting a change to app inventor, unless someone want to work on a drawCurve operation for Canvas.    Take a look at the Android SDK and see if there's something we might add.

[foxschoo...@gmail.com]

That sounds like what it is doing, but I think it already is connecting at the middle. If the rectangle were drawn from one side, wouldn't that side be smooth? In the picture I uploaded the outer edge of the curve is always the wonky one, no matter which direction it is turning. But either way, I have no idea how to go about filling in the gaps.

Instead, I am trying to use the draw circle function to make a smooth line. It is looking promising so far, but when drawing a line between the lower left and upper right (either direction) it is drawing the lines perpendicular to my finger drag. Any idea what I could be doing wrong? I attached my aia file.

[Hal Abelson]

I don't have time to debug this, but it looks like it's only the first two circles that are in that orthogonal position.  Try tracing through your code by hand to see what this is happening.

[foxschoo...@gmail.com]

I think I figured it out. I'll post the result later.

[Enis]

By all means, please DO post the result and the fix... it would be very helpful for others, but I personally REALLY want to know how you got around it.

Thanks in advance!