{"id":2289,"date":"2014-07-02T22:41:35","date_gmt":"2014-07-03T02:41:35","guid":{"rendered":"http:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/?p=2289"},"modified":"2014-07-02T23:15:24","modified_gmt":"2014-07-03T03:15:24","slug":"line-intersection-test","status":"publish","type":"post","link":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/2014\/07\/line-intersection-test\/","title":{"rendered":"Line Intersection Test"},"content":{"rendered":"<p>Working on another game feature, I now need to compute actual line and rectangle intersections rather than <a href=\"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/2014\/06\/line-test-demo\/\">just detecting them<\/a>. This is a quick test:<\/p>\n\n<!-- iframe plugin v.6.0 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"http:\/\/rocketshipgames.com\/tmp\/20140702-intersectiontest.html\" width=\"100%\" height=\"300\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Click, drag, and release to draw a line. A point will be drawn at the intersection if there is one. Hit &#8216;S&#8217; to toggle between treating the geometry as line segments or lines.<\/p>\n<p>The demo uses some basic <a href=\"http:\/\/phaser.io\/\">Phaser<\/a> features for the interaction and drawing. The calculation is taken straight from Phaser&#8217;s Arcade Physics math. The full Javascript code is:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar game = new Phaser.Game(530, 300, Phaser.AUTO, 'gamecontainer',\r\n                           { create: create, update: update, render: render });\r\n\r\nvar linea;\r\nvar lineb;\r\n\r\nvar setting;\r\n\r\nvar result;\r\n\r\nvar segment;\r\n\r\nfunction create() {\r\n\r\n    linea = new Phaser.Line(game.world.width\/4, game.world.height\/4,\r\n                            3*game.world.width\/4, 3*game.world.height\/4);\r\n    lineb = new Phaser.Line(game.world.width\/4, 3*game.world.height\/4,\r\n                            3*game.world.width\/4, game.world.height\/4);\r\n\r\n    game.input.onDown.add(click, this);\r\n    setting = false;\r\n\r\n    result = new Phaser.Point();\r\n\r\n    segment = true;\r\n\r\n    game.input.keyboard.addKey(Phaser.Keyboard.S)\r\n        .onDown.add(function() {\r\n            segment = !segment;\r\n        }, this);\r\n}\r\n\r\n\r\nfunction update() {\r\n\r\n    if (setting) {\r\n        lineb.end.set(game.input.activePointer.x,\r\n                      game.input.activePointer.y);\r\n\r\n        if (!game.input.activePointer.isDown) {\r\n            setting = false;\r\n        }\r\n    }\r\n}\r\n\r\n\r\nfunction click(pointer) {\r\n    setting = true;\r\n    lineb.start.set(pointer.x, pointer.y);\r\n}\r\n\r\n\r\nfunction render() {\r\n    game.debug.geom(linea);\r\n    game.debug.geom(lineb);\r\n\r\n    if (intersection(linea.start.x, linea.start.y,\r\n                     linea.end.x, linea.end.y,\r\n                     lineb.start.x, lineb.start.y,\r\n                     lineb.end.x, lineb.end.y,\r\n                     segment,\r\n                     result)) {\r\n        result.x--;\r\n        result.y--;\r\n        game.debug.geom(result, '#ff0000');\r\n    }\r\n}\r\n\r\nfunction intersection(ax, ay, bx, by, ex, ey, fx, fy, asSegment, result) {\r\n\r\n    var a1 = by - ay;\r\n    var a2 = fy - ey;\r\n    var b1 = ax - bx;\r\n    var b2 = ex - fx;\r\n    var c1 = (bx * ay) - (ax * by);\r\n    var c2 = (fx * ey) - (ex * fy);\r\n    var denom = (a1 * b2) - (a2 * b1);\r\n\r\n    if (denom === 0) {\r\n        return false;\r\n    }\r\n\r\n    result.x = ((b1 * c2) - (b2 * c1)) \/ denom;\r\n    result.y = ((a2 * c1) - (a1 * c2)) \/ denom;\r\n\r\n    if (asSegment) {\r\n        if ( result.x &lt; Math.min(ax, bx) || result.x &gt; Math.max(ax, bx) ||\r\n             result.y &lt; Math.min(ay, by) || result.y &gt; Math.max(ay, by) ||\r\n             result.x &lt; Math.min(ex, fx) || result.x &gt; Math.max(ex, fx) ||\r\n             result.y &lt; Math.min(ey, fy) || result.y &gt; Math.max(ey, fy) ) {\r\n            return false;\r\n        }\r\n    }\r\n\r\n    return true;\r\n\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Working on another game feature, I now need to compute actual line and rectangle intersections rather than just detecting them. This is a quick test: Click, drag, and release to draw a line. A point will be drawn at the intersection if there is one. Hit &#8216;S&#8217; to toggle between treating the geometry as line &hellip; <a href=\"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/2014\/07\/line-intersection-test\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":7616,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58],"tags":[257,104,162,401,277],"class_list":["post-2289","post","type-post","status-publish","format-standard","hentry","category-code","tag-featured","tag-html5","tag-javascript","tag-math","tag-videogames"],"_links":{"self":[{"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts\/2289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/comments?post=2289"}],"version-history":[{"count":5,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts\/2289\/revisions"}],"predecessor-version":[{"id":2295,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts\/2289\/revisions\/2295"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/media\/7616"}],"wp:attachment":[{"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/media?parent=2289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/categories?post=2289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/tags?post=2289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}