Collision Detection in an Online Design Tool

We work on a wide variety of projects at Unstoppable Software. It’s great for us because it keeps us on our toes. And our clients are happy because they know we can handle almost anything they throw at us.

Recently one of our clients determined they needed a new online design tool that would allow users to place machinery in a room by dragging and dropping. They wanted to be able to configure the size of the items in the designer, and determine – in real-time – whether or not the arrangement could work in the real world. In other words, two objects can’t take up the same space, so our designer needed to reflect that.

The technical term for this is “Irregular Collision Detection”, and admittedly, we didn’t know much about it at the start of the project. So, we brainstormed with some of our colleagues who had experience in the video game industry. It became clear that what we needed to do was incorporate some techniques from video game development into our approach for this online design tool.

We quickly realized we had to do a little research. We went down to the local Barnes & Noble bookstore, walked over to the programmer’s bookshelf, and found some books on 3D Game Development to get pointers and ideas to solve our problem. We found some great tips in these books, such as:

  • How to represent my objects in code so it’s easy to determine if they are colliding.
  • A quick refresher in Linear Algebra and Matrices.
  • The general workflow for checking if items have collided when they are dragged around the screen.

Once we had a clear vision for how to solve the problem we quickly got to work coding. We integrated the code objects into the Silverlight platform we were using for the web application, did some quick testing, and voila – it worked!

Our client was pleased, since now their users see instant feedback (the objects get highlighted in the designer) when they drag it into the wrong spot. It was an interesting challenge for our team. And it certainly was not your typical “Forms over Data” web application.

Start typing and press Enter to search