For any given shape drawn on a graph paper, a kid can calculate the area of any shape by counting the tiles with a simple formula: any edge covering 50% or more, mark the tile; total area = sum all the tiles.

Question: How can I "straighten" these paths so that it follows the grid's horizontal and vertical lines. In another words, the new path will match the orange tiles.

Note: Assume each tile is 1x1 square and we have simple paths intersecting these squares (eg: a smooth path with only one entry point and one exit point, doesn't have complex paths inside a 1x1 square).

Simplified question: how do I determine that for each tile the path intersects, the area is >50% ?

Am thinking of using <canvas>, fill the shape with a different color, then take a 1x1 square, count the # of pixels against # of white (background) pixels.

Edit: New image, old one had errors (thank you readers). Sample tile estimation

Update 20/10 Stackover question on generating tiles.

Alvin K.
  • 201
  • 1
  • 7
  • In your 50-unit example, you're including some of the tiles that are exactly bisected by the edge (those left of the apex), and excluding other exactly bisected tiles (those right of the apex). Is there a principle behind this? – hmakholm left over Monica Oct 17 '14 at 22:06
  • Any bisected tiles, if half or more is inside the shape, we mark the tile. Some unmarked tiles right of apex may be 50% inside. Same with circles, there are 4 tiles which may be inside the circle, again too close to tell. – Alvin K. Oct 17 '14 at 22:13
  • x @Alvin: By that rule there should be one more tile marked in each of the layers of the triangle example. – hmakholm left over Monica Oct 17 '14 at 22:15
  • What Henning Mankell is trying to say is that in the triangle, some tiles are divided _exactly_ 50-50 by the red line, and some of those are yellow while some are white. Is there a reason you include some but not others? (Bisection usually refers to something divided exactly in the middle.) – Arthur Oct 17 '14 at 22:17
  • They are referring in particular to the squares which are currently on the right side of the triangle which are currently where you step down. For example the square to the bottom right of one vertex to the right of the top corner of the triangle. – JMoravitz Oct 17 '14 at 22:21
  • Sorry, it is my (human) error. Big picture: I'm trying to figure out a javascript code which can estimate the area by marking out the tiles using either `` or ``. ie: kid draws a closed shape with mouse, the code estimate the area. – Alvin K. Oct 17 '14 at 22:26
  • In measure theory, we take rectangles that are of varying size such that it closely approximates the shape. In computing, I would expect that you could pretty well tell it to count every pixel and get a pretty exact measure (if you would do that during your algorithm anyways, no additional resources needed). Without doing that, if using only straight lines for your paths you could deduce for each tile that it is >50% filled if crossed on adjacent edges away from middle, or if opposite edges with one edge closer to the away corner than the other. How to actually implement the code I'll leave – JMoravitz Oct 17 '14 at 23:28
  • Why not applying the same principle? : Divide the tiles into mini-tiles, then calculate how many mini-tiles are colored within a tile. You are teaching integration after all. – chouaib Oct 18 '14 at 00:39
  • Thanks @chouaib, using your idea I will face the same issue: "(mini) tiles intersected by the line needs to be categorized". Counting pixels is not exact mathematics since some pixels may be in shade of grey (anti-aliased). – Alvin K. Oct 18 '14 at 01:12
  • @AlvinK. [This question](http://mathematica.stackexchange.com/questions/37460/combining-graphics) might be relevant – martin Oct 20 '14 at 22:00

0 Answers0