I need to detect is someone has drawn around a square, I'm hoping not to have to use path finding (to find a route out of square), is there a simple of detecting that?
maybe store some points of the drawn shape (guessing a squiggly line) in an array. Then loop over those points and check if those points lie within the square's shape.
Another method may be to fill the square with a color, draw box into a bitmapData object, then draw the customShape as well with a "difference" blendMode, then run a getColorBoundsRect on the bitmapData, if the returned rectangle has width then the shape is intersecting some or all of the square.
I've attached a pic of what I mean. The line will always be straight, not squiggly , but it might be jagged, i'e up a bit, down a bit, but basically still surrounding the red square., the line will never intersect the square, it always has to be outside of the square.
How is the users input (the black line) represented? Do we have it an ordered sequence of points that are sampled from the users continuous gesture? Is it literally four points like that or could it be a funny lasso shape?
Given a segmented & ordered polyline like that, you can robustly compute its total winding angle around a point using a bunch of cross products. (A suitable point to check against could be the centroid of the square, for example). But if you're wanting to detect if their input curve closely resembles a square shape I'd have to think a little more.
How is the users input (the black line) represented? Do we have it an ordered sequence of points that are sampled from the users continuous gesture? Is it literally four points like that or could it be a funny lasso shape?
Given a segmented & ordered polyline like that, you can robustly compute its total winding angle around a point using a bunch of cross products. (A suitable point to check against could be the centroid of the square, for example). But if you're wanting to detect if their input curve closely resembles a square shape I'd have to think a little more.
Problems like this are so cool
Is there no non super complicated maths way of doing it? , The screen is actually made up of a grid, where each cell is 10x10 pixels, so on that image I posted the square fits into that grid (lets say in total its 5x5 cells in size), and the "line" would also be using those 10x10 pixels.
I thought a way to detect if theres a gap would be to use pathfinding out from the square to see if a path can escape say more then 4 cells from the outside of the edge of the square, but again I thought there must be a simpler way of doing it.
I also thought about just checking all those cells in a band or frame so to speak around the square in some way, but I can see that getting complicated because the line that can be drawn around the square does not have to be made up for 4 lines, but can be jagged (no diagonals though)
Couldn't you just get the angle between the squares center and the mouse, and then check to see how far around the square it has rotated? (although this would also require a separate check to make sure that it doesn't go inside the square)
If the square is moving you'll have to loop trough every point of the line once the line is complete, but if it's not I think you'd only have to do it once for every new point in the line when the new point is drawn.
Couldn't you just get the angle between the squares center and the mouse, and then check to see how far around the square it has rotated? (although this would also require a separate check to make sure that it doesn't go inside the square)
If the square is moving you'll have to loop trough every point of the line once the line is complete, but if it's not I think you'd only have to do it once for every new point in the line when the new point is drawn.
what if the line around the square was like the one in the attached image?
I like these kind of logical problems, in my opinion this is what fk is good for even if it takes a while to reach the answer! I tried some playing around in photoshop and couldn't find an obvious solution involving measuring the angles..
Mr_malee's blendmode solution sounds like an ingenius one to me that wouldn't take much work providing you know your way around the BitmapData methods :-)
I like these kind of logical problems, in my opinion this is what fk is good for even if it takes a while to reach the answer! I tried some playing around in photoshop and couldn't find an obvious solution involving measuring the angles..
Mr_malee's blendmode solution sounds like an ingenius one to me that wouldn't take much work providing you know your way around the BitmapData methods :-)
but the thing is, i don't need to know if the line is intersecting the square, I need to know if the line has fully enveloped the square, i'e completely been drawn around the square, without there being any gaps.
Here's the solution I had in mind. There was one requirement that I wasn't sure about - does the users gesture actually have to self intersect, or can it spiral around without intersecting and still count as a successful lasso?
The current code doesn't verify that the lasso is self-intersecting but I can add it if desired. The important function is test_lasso() - the rest is boilerplate to capture mouse input and draw the problem.
EDIT: There's actually a small detail I failed to comment: on line 86, the "twist" variable should accumulate the arcsin of that cross product, not the cross product itself. With digitized mouse motion, the angles between consecutive points are so small that theta and sin(theta) are basically equal, but if your curve is much more coarsely sampled (like the pictures you provided) you should correct that approximation.
I thought this would work simply by casting one ray from center of square in any direction and counting number of times it intersects with line drawn by player:
Here's the solution I had in mind. There was one requirement that I wasn't sure about - does the users gesture actually have to self intersect, or can it spiral around without intersecting and still count as a successful lasso?
The current code doesn't verify that the lasso is self-intersecting but I can add it if desired. The important function is test_lasso() - the rest is boilerplate to capture mouse input and draw the problem.
EDIT: There's actually a small detail I failed to comment: on line 86, the "twist" variable should accumulate the arcsin of that cross product, not the cross product itself. With digitized mouse motion, the angles between consecutive points are so small that theta and sin(theta) are basically equal, but if your curve is much more coarsely sampled (like the pictures you provided) you should correct that approximation.
That's helpful thanks. The lasso will be coarse like you suggested, there won't be any true curves, it will be squares of 10x10 pixels on a grid making up the "lines", so how would I do the correction?
A cheap workaround would just be to run a flood fill on the area enclosed by the lasso (make sure it's enclosed by attaching the end of the lasso to the start of it) and checking that 100% of the surface area of the shape gets covered (maybe just run a getPixel() in each corner of the rectangle).
A cheap workaround would just be to run a flood fill on the area enclosed by the lasso (make sure it's enclosed by attaching the end of the lasso to the start of it) and checking that 100% of the surface area of the shape gets covered (maybe just run a getPixel() in each corner of the rectangle).
a flood fill is an interesting approach, i'm just not sure it will work it will work with spirals, where you would it to register as complete surrounded, but yet there would be gaps, gives me something to think about though thanks.
Break the problem down and check for four lines, each one traverses the height, width of the square on the appropriate side, they all intersect with each other, and none of them intersect with the square.
edit.. and none of them are broken between their vital points of intersection with each other.
I'm not totally sure what you mean sometimes...Do you want a complete closed gap, or is spirals sufficient to count as complete surrounded?
If you do want a complete closed gap, then the floodFill way is the best way I see, except for the expensive BitmapData.draw() in real-time...
If no, then measuring the starting angle, and each one after that, and then seeing if it's more than 360 or not would work.
(Sorry for not contributing my own ideas...I had one, but I saw a few problems with it...I'll see if I think of anything)
Reply With Quote
, but it might be jagged, i'e up a bit, down a bit, but basically still surrounding the red square., the line will never intersect the square, it always has to be outside of the square.
Originally Posted by rachil0
