For a few hours now I've been banging my head against the internet to figure out how to get the coordinates to make a specifically shaped polygon (traced around a picture) to use in HTML5 <canvas>.
I require a tool that allows me to trace a picture with connected points to create a polygon, be able to re-size the polygon and receive the new fixed coordinates in an array as copyable text to be used as a sprite in <canvas>
That is to say, I need to get several versions of the same polygon's fixed coordinates that have been uniformly scaled down or up.
A 'mirror points' feature would also be useful but is not necessary (I can live without perfect symmetry =P)
I found a few methods but each had their own problems these two were the closest I've gotten:
HTML image mapping tools (This one was the best) It gave me the coordinates I need, but I couldn't find one that allowed me to re-size the polygon and get the new coordinates, furthermore, I couldn't find another tool that I could put coordinates into and have it spit out the new resized coordinates. I would have to make the same polygon twice but at different sizes (and probably with mis-aligned points)
Interactive mathematical graph plotters (geogebra was the best one) This one would have been perfect, but I couldn't get it to give me the coordinates in a copyable fashion. I would have to individually write down each coordinate which would take ages.
So, my question is, what is the correct way to make complicated polygons/geometrical shapes and to get their coordinates? I'm pretty sure it's just basic geometry/algebra but are there any programs that are more oriented towards coders and do what I'm looking for?
I can't help but feel like I'm going about this entirely the wrong way..
Please don't laugh, maths are not my strong point.. and please forgive me if this is in the wrong stack exchange site, I didn't know where else to put it.
Thank you in advance for any help you can provide.
Oh man, do I feel sheepish.
I found out that geogebra was able to perform all of the functions I require (Although REALLY obscure and over complicated in some areas)
Rather than deleting my post, however, I think it's important I leave this here for others to find, considering I didn't find anything about creating polygon coordinates for image mapping and vector graphics in <canvas> from searching for hours on end.
I am able to make a list of polygon coordinates by using the following procedure (inside geogebra:
Make a polygon (either by using the polygon tool, the POLY LINE TOOL (which has no point limits but doesn't fill in polygon shapes) or Polygon[A,B,C,D] in the input box)
(If your polygon is named poly1 which it should be by default), put {Vertex[poly1]} into the input box at the bottom to make a list of coordinates in the algebra view.
Go to view > spreadsheet (or alternatively press ctrl+shift+S)
right click your new list (it's green) in the coordinates list and choose "Record to spreadsheet" then click close (simply pressing esc also works, alternatively, if you have a lot of polygons the box will be too large for your screen, the close button is on the right side of the box so drag the box over to the left until you can see the button)
Go to view > recompute all objects (or press ctrl+R)
Select/highlight all the numbers in the spreadsheet by clicking on the (2nd) table row and copy and paste them into notepad++ or another coding text editor and using the replace function (ctrl+H) search for \t (or a TAB) and replace all matches with ,\t(this will format your coordinates for use in your code)
To mirror nodes you may use the "reflect object in line" tool (left of the text tool) (select a node you want to mirror then select a vertices line to mirror it to X or Y)
You may re-size a polygon based on scale using this input: Dilate[poly1, 2] (Adjust the 2 to any scale you want to re-size it to) (Thank you to a math wizard named mathmum on the GeoGebra forum!)
Additional obscure information from math wizards named Zbynek and murkle on the Geogebra forum:
Alternative Method to creating a polygon use the 'Poly line' tool, it doesn't have a point limit but as a drawback it doesn't fill in the polygon. It's much faster than the second option and can be manipulated the same way as a polygon can.
Option two:
Polygon[A,B,C,D]
or, if you're editing an existing one from only coordinates (not points), you can use the syntax:
Polygon[(-5,4),(0,-12),(5,4)]
This is essential for large polygons because the interactive polygon tool has a point limit.
to move the polygon try something like
Translate[poly1,(1,1)]
("1,1" are the X and Y coords you want to move it to)
for rounding, you may do something like
list1={Vertex[poly1]}
text1=list1+""
then right-click text1, go to Object Properties > Text > Rounding > 0 decimal places.
Instead of transforming the actual polygon, you may apply the transform on the list >directly, eg.
2*list1, list1+(1,1)
I'm still not sure if this is the proper way to go about making 2D polygon vectors for use in canvas or image maps, but this is the easiest way I can conceive thus far.
Thank you to Joachim (and the math wizards) for taking the time to reply to my question =)