{"id":2266,"date":"2014-06-25T14:22:00","date_gmt":"2014-06-25T18:22:00","guid":{"rendered":"http:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/?p=2266"},"modified":"2014-07-02T23:16:35","modified_gmt":"2014-07-03T03:16:35","slug":"line-test-demo","status":"publish","type":"post","link":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/2014\/06\/line-test-demo\/","title":{"rendered":"Line Test Demo"},"content":{"rendered":"<p>While entangled in the bowels of a diseased telecon I decided to make good use of my time and wrote this simple test:<\/p>\n\n<!-- iframe plugin v.6.0 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"http:\/\/rocketshipgames.com\/tmp\/20140625-linetest.html\" width=\"100%\" height=\"300\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Click, drag, and release to draw a new line. The text will (should?!) indicate whether or not the two points are on the same side of the line or not.<\/p>\n<p>The demo uses some basic <a href=\"http:\/\/phaser.io\/\">Phaser<\/a> features for the interaction and drawing. Really though it&#8217;s just quadruple checking a basic calculation:<\/p>\n<blockquote><p>(Bx &#8211; Ax) * (Cy &#8211; Ay) &#8211; (By &#8211; Ay) * (Cx &#8211; Ax)<\/p><\/blockquote>\n<p>Where the line is defined by (Ax,Ay)&#8211;(Bx,By) and a point is (Cx, Cy). The value will be 0 if the point is on the line, and otherwise negative or positive depending on which side of the line it is on.  The specific sign depends on the orientation of the line, but you can compare the sign for two points to determine if they&#8217;re on the same side or not. That can be boiled down into a single calculation. However, testing if four points are on the same side is a key part of a simple line\/rectangle intersection test. For that use it seemed simpler to just calculate each separately.<\/p>\n<p>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 line;\r\nvar setting = false;\r\n\r\nvar point1;\r\nvar point2;\r\n\r\nvar textSame;\r\nvar textDiff;\r\n\r\n\r\nfunction create() {\r\n\r\n  line = 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\r\n  point1 = new Phaser.Point(game.world.width\/2, game.world.height\/4);\r\n  point2 = new Phaser.Point(game.world.width\/2, 3*game.world.height\/4);\r\n\r\n  textSame = game.add.text(4, 0, &quot;Same Side&quot;, { fill: '#ffffff' });\r\n  textSame.visible = false;\r\n\r\n  textDiff = game.add.text(0, 0, &quot;Different Side&quot;, { fill: '#ffffff' });\r\n  textDiff.visible = false;\r\n\r\n  game.input.onDown.add(click, this);\r\n\r\n  setting = true;\r\n\r\n}\r\n\r\nfunction update() {\r\n\r\n  if (setting) {\r\n    if (game.input.activePointer.isDown) {\r\n      line.end.set(game.input.activePointer.x, game.input.activePointer.y);\r\n    } else {\r\n      setting = false;\r\n\r\n        var sign1 =\r\n            (line.end.x - line.start.x) * (point1.y - line.start.y) -\r\n            (line.end.y - line.start.y) * (point1.x - line.start.x);\r\n\r\n        var sign2 =\r\n            (line.end.x - line.start.x) * (point2.y - line.start.y) -\r\n            (line.end.y - line.start.y) * (point2.x - line.start.x);\r\n\r\n        console.log(&quot;Signs are &quot; + sign1 + &quot;  &quot; + sign2);\r\n\r\n        if ((sign1&lt;0 &amp;&amp; sign2&lt;0) ||\r\n            (sign1&gt;0 &amp;&amp; sign2&gt;0) ||\r\n            (sign1==0 &amp;&amp; sign2==0)) {\r\n\r\n            textSame.visible = true;\r\n            textDiff.visible = false;\r\n\r\n        } else {\r\n            textSame.visible = false;\r\n            textDiff.visible = true;\r\n        }\r\n    }\r\n  }\r\n}\r\n\r\nfunction click(pointer) {\r\n  setting = true;\r\n  line.start.set(pointer.x, pointer.y);\r\n}\r\n\r\nfunction render() {\r\n  game.debug.geom(line);\r\n  game.debug.geom(point1, '#ff0000');\r\n  game.debug.geom(point2, '#ff0000');\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>While entangled in the bowels of a diseased telecon I decided to make good use of my time and wrote this simple test: Click, drag, and release to draw a new line. The text will (should?!) indicate whether or not the two points are on the same side of the line or not. The demo &hellip; <a href=\"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/2014\/06\/line-test-demo\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":7617,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58],"tags":[257,104,162,401,277],"class_list":["post-2266","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\/2266","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=2266"}],"version-history":[{"count":10,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts\/2266\/revisions"}],"predecessor-version":[{"id":2296,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts\/2266\/revisions\/2296"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/media\/7617"}],"wp:attachment":[{"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/media?parent=2266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/categories?post=2266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/tags?post=2266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}