0

I'm looking to create a web based "bulletin board" so to speak, where the user can create/delete/drag/drop 'pins'--without being allowed to overlap 'pins.'

Here is a diagram that should help illustrate what I'm trying to create:

  • 'pins' are created, probably upon double click; they will prompt the user for a label.
  • 'pins' cannot overlap; (the final shape will be larger, more oval like.)
  • 'pins' will need to be able to "connect" with other 'pins' with a visual element (i.e. dotted line,) but not all pins will be "connected."

Diagram

I found GameQuery which allegedly supports bounding box collisions--but it's beyond important that the collisions be detected with ovals, not boxes (I know the above example might suggest otherwise, but that's just a diagram... not a mock up of the intended final design.)

The 'pins' may also vary in size/shape, depending on label size... this should be taken into account as well I imagine, to ensure an approach conducive to all the UX variables.

I've found Quadtree and Collision Detection along with this GameQuery collision demo, but it all sort of looks a little like gibberish. I'm looking to be pointed in the right direction, just so I know that what method I invest my time into, will work for my desired result... rather than busting my balls figuring out Quadtree and GameQuery for example, just to find it they won't work for this project.

...

Also, if any experienced developers are willing to be a mentor for me on this project--I am prepared to offer my extremely refined design experience, for a few "I need help" questions along the way.

How do I adopt an n-sided polygon into the pre-existing bounding box functionality of GameQuery? It doesn't need to be a perfect circle, but at least 8-sided.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
jlmakes
  • 2,945
  • 1
  • 26
  • 38

1 Answers1

3

I don't think that your problem is really one that relates to jQuery or even Javascript at all. Your problem is, how do I detect when an ellipse overlaps (or does not overlap) another ellipse? It's a math problem, and it's one that has already been asked here.

Be warned that this strikes me as a pretty difficult problem for someone who is new to programming. I'm not at all new to programming and I would see this as challenging, particularly with your other requirements - drag and drop, and so on. You've taken on a pretty advanced problem, and at this point, anything you can do to simplify (such as using bounding boxes) is something I would strongly recommend doing.

Community
  • 1
  • 1
adriandz
  • 999
  • 1
  • 10
  • 21
  • Thank you Adrian! I will diligently review that link--it already looks promising from what I've skimmed. I know this project is a difficult one, but that's the point--it's my "thesis" if you will, in my trek to become more familiar with web development. Maybe if I could get bounding "polygons"... a happy middle ground? I'd rather it take me a year, than compromise the UX by cutting corners... – jlmakes Nov 09 '10 at 04:07
  • 1
    I admire your ambition. If I could add one more comment, though, simply in the interest of providing the best advice I can, even though you never asked for it: I think that if you successfully accomplish this task, you will have become quite good at Javascript, and much better at programming, but not a great deal better at web programming in general. This is entirely front-end UI, which is fine if that is your focus, but if you seek to be better at web dev, then something that involves HTTP, form submissions, databases, etc., will likely serve better. Good luck! – adriandz Nov 09 '10 at 14:13