Software Development:
Individual Programming

Goal

For a web planning application in HTML5, JavaScript and KineticJS (HTML5 Canvas JavaScript framework) the client needs a recognition function for 2D-collision between objects and a polygon workspace. Objects can be moved by mouse in real time, but may not overlap each other or the edge of the workspace. The objects may have various sizes and orientations. The polygon workspace may have any number of sides.

Screenshot: Collision detection in an HTML5/JavaScript/KineticJS sample web browser application and explanation, what the script must be able to do.

Implementation

Most of the competitors in a tender process were unable to offer a solution, simply because their performance horizon ends at the installation of ready-made plugins and adjusting configuration settings. Many competitors are unqualified with respect to programming autonomously and in engineering terms. However, for this particular problem in the field of computer graphics and game development there are no ready-made plugins or JavaScript libraries. JavaScript doesn't support vectors or matrices. Ready-made functions from graphics libraries for PC gaming developers cannot be used, since the application is not aimed at running in a compiled fashion on a PC, but instead is supposed to function interactively in a web browser with HTML5 and JavaScript. In addition, the solution requires a mathematical understanding.

The common "separating axis theorem" (hyperplane separation) falls short, since it solves the task only for convex polygons. However, the solution must also work for concave polygons, meaning polygons with "dents" in them. In the client's existing project the collision of rectangles had already been addressed with the "separating axis theorem". The collision detection with the workspace had not been taken into account yet (and would have remained unsolvable, since the polygon is concave).

removed the existing, special partial solution and instead created not only a generally applicable solution, but also reduced the coding effort to only 40% of the original script; further reducing it to a mere 20% after minimization.

Work Hours & Price

The ready-to-run solution has been planned & deveveloped in only approximately 3 hours. The total cost was approximately 100.00 US$ without VAT.

Client¹

New Media Arts UG
Hansapark 1
D-39116 Magdeburg (Germany)

www.mediagurus.de 

Software development case studies overview

Request a free quotation