{"id":48239,"date":"2020-03-13T03:01:56","date_gmt":"2020-03-12T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48239"},"modified":"2020-03-12T18:14:29","modified_gmt":"2020-03-12T08:14:29","slug":"javascript-rectangle-analyze-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-rectangle-analyze-primer-tutorial\/","title":{"rendered":"Javascript Rectangle Analyze Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Javascript Rectangle Analyze Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.jpg\" title=\"Javascript Rectangle Analyze Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript Rectangle Analyze Primer Tutorial<\/p><\/div>\n<p>We&#8217;re not trying to compare programming to Michelangelo&#8217;s art, but did you know that he chose the marble he wanted at the quarry, presumably imagining what was possible with that marble?<\/p>\n<p>In line with that, do you like &#8220;glass half full&#8221; thinking rather than &#8220;glass half empty&#8221; thinking?   We prefer the &#8220;glass half full&#8221; choice, and use that thinking (and a &#8220;laziness&#8221; &#8220;background noise&#8221;) to see what has come before to shape the workings of a new programming project.<\/p>\n<p>This new project touches on GIS (<a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Geographic_information_system' title='GIS information from Wikipedia'>Geographic Information System<\/a>) ideas, but is a simplified form, so far, regarding unrotated rectangle HTML (div) data set (of 11) to check (amongst them) for &#8230;<\/p>\n<ul>\n<li>does rectangle A <b>intersect with<\/b> rectangle B?<\/li>\n<li>is rectangle A <b>within<\/b> rectangle B?<\/li>\n<li>is rectangle A <b>adjacent to<\/b> rectangle B?<\/li>\n<li>is rectangle A <b>separate to<\/b> rectangle B?<\/li>\n<\/ul>\n<p>How to approach our programming aim above?  Well, we thought we&#8217;d base it on that of <a title='HTML\/Javascript PopUp Mouseover Event Game Tutorial' href='#html\/jpumegt'>HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/a>.  Huh?!  Yes, &#8220;laziness&#8221; thoughts will have a programmer&#8217;s mind fishing for another project that randomly creates those (HTML div) elements, and this was the attraction.  Then you need to start &#8220;Michelangelo&#8221;ing the new web application from the old, and we decided if we could not creep up on a web application that can create a &#8220;tabular report (of any sort) to the right&#8221; within an hour&#8217;s work, then we would classify that as a bad &#8220;glass half full&#8221; approach.  Thankfully, though, it panned out to be a good approach, so read on.<\/p>\n<p>And then there is all that knowledge on the &#8220;net&#8221; helping formulate three Javascript functions to help with the GIS logic thoughts above as per &#8230;<\/p>\n<p><code><br \/>\n        function intersectRect(r1, r2) { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection' href='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection'>https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection<\/a><br \/>\n         return !(r2.left &gt; r1.right ||<br \/>\n           r2.right &lt; r1.left ||<br \/>\n           r2.top &gt; r1.bottom ||<br \/>\n           r2.bottom &lt; r1.top);<br \/>\n        }<br \/>\n<br \/> <br \/>\n        function adjacentTo(r1, r2) { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection' href='https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection'>https:\/\/stackoverflow.com\/questions\/2752349\/fast-rectangle-to-rectangle-intersection<\/a><br \/>\n           if (intersectRect(r1, r2)) {<br \/>\n           return (r2.left == r1.right ||<br \/>\n           r2.right == r1.left ||<br \/>\n           r2.top == r1.bottom ||<br \/>\n           r2.bottom == r1.top);<br \/>\n           } else {<br \/>\n           return false;<br \/>\n           }<br \/>\n        }<br \/>\n<br \/> <br \/>\n        function contains(r1, r2) {  \/\/ thanks to <a target=_blankl title='https:\/\/stackoverflow.com\/questions\/27768039\/find-out-if-a-rectangle-is-inside-another-rectangle-c' href='https:\/\/stackoverflow.com\/questions\/27768039\/find-out-if-a-rectangle-is-inside-another-rectangle-c'>https:\/\/stackoverflow.com\/questions\/27768039\/find-out-if-a-rectangle-is-inside-another-rectangle-c<\/a><br \/>\n           if (   (r2.right) &lt; (r1.right)<br \/>\n               && (r2.left) &gt; (r1.left)<br \/>\n               && (r2.top) &gt; (r1.top)<br \/>\n               && (r2.bottom) &lt; (r1.bottom) ) {<br \/>\n             return true;<br \/>\n           } else {<br \/>\n             return false;<br \/>\n           }<br \/>\n        }<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=blue>&#8220;data organized&#8221;<\/font> via &#8230;<\/p>\n<p><code><br \/>\n        var cmds=[];<br \/>\n        var rects=[];<br \/>\n<br \/>\n        function MakePopup(event, popupWindow, popupIsShown, colis, lis, tis, wis, his<font color=blue>, indx<\/font>) {<br \/>\n            if (<font color=blue>1 == 56 && <\/font>window.createPopup) {        \/\/Internet Explorer<br \/>\n                if (!popupWindow) {<br \/>\n                    popupWindow = window.createPopup();<br \/>\n                    var popupBody = popupWindow.document.body;<br \/>\n                    popupBody.style.backgroundColor = colis; \/\/\"lightblue\";<br \/>\n                    <font color=blue>cmds.push(\"document.getElementById('col\" + indx + \"').style.backgroundColor='\" + colis + \"'\");<br \/>\n                    if (indx == 0) {  setTimeout(andlater,200);     } <\/font><br \/>\n                    popupBody.style.border = \"solid black 1px\";<br \/>\n                    if (1 == 2) popupBody.innerHTML = \"Click outside to close.\";<br \/>\n                }<br \/>\n                popupWindow.show (lis, tis, wis, his, document.body); \/\/100, 100, 150, 25, document.body);<br \/>\n                pword=\"client\";<br \/>\n            }<br \/>\n            else {<br \/>\n                if (!popupIsShown) {<br \/>\n                    if (!popupWindow) {<br \/>\n                       popupWindow = document.createElement(\"div\");<br \/>\n                        popupWindow.style.backgroundColor = colis; \/\/\"lightblue\";<br \/>\n                    <font color=blue>cmds.push(\"document.getElementById('col\" + indx + \"').style.backgroundColor='\" + colis + \"'\");<br \/>\n                    if (indx == 0) {  setTimeout(andlater,200);     } <\/font><br \/>\n                        popupWindow.style.border = \"solid black 1px\";<br \/>\n                        popupWindow.style.position = \"absolute\";<br \/>\n                        popupWindow.style.width = wis + \"px\";  \/\/150<br \/>\n                        popupWindow.style.height = his + \"px\";  \/\/25<br \/>\n                        popupWindow.style.top = tis + \"px\";  \/\/\"100px\";<br \/>\n                        popupWindow.style.left = lis + \"px\";  \/\/\"100px\";<br \/>\n                        if (1 == 2) popupWindow.innerHTML = \"Click outside to close.\";<br \/>\n                    }<br \/>\n<br \/>\n                    document.body.appendChild(popupWindow);<br \/>\n                    <font color=blue>rects.push(popupWindow.<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>());<\/font><br \/>\n                    if (pword == \"\") window.addEventListener('mouseover', MouseOver, true);<br \/>\n                    popupIsShown = true;<br \/>\n                    \/\/ to avoid that the current click event propagates up<br \/>\n                    if (pword == \"\") event.stopPropagation ();<br \/>\n                }<br \/>\n                pword=\"page\";<br \/>\n            }<br \/>\n        }<br \/>\n<\/code><\/p>\n<p> &#8230; and feeding into the GIS report HTML table updating Javascript &#8230;<\/p>\n<p><code><br \/>\n        function andlater() {<br \/>\n          for (var ji=0; ji&lt;cmds.length; ji++) {<br \/>\n            eval(cmds[ji]);<br \/>\n          }<br \/>\n          for (var kji=0; kji&lt;rects.length; kji++) {<br \/>\n            var seprt=false;<br \/>\n            document.getElementById('intersects' + kji).innerHTML='';<br \/>\n            document.getElementById('within' + kji).innerHTML='';<br \/>\n            document.getElementById('adjacent' + kji).innerHTML='';<br \/>\n            document.getElementById('separate' + kji).innerHTML='';<br \/>\n            for (var mji=0; mji&lt;rects.length; mji++) {<br \/>\n             if (mji != kji) {<br \/>\n              seprt=true;<br \/>\n              if (mji &gt; kji || 1 == 1) {<br \/>\n                if (intersectRect(rects[kji], rects[mji])) {<br \/>\n                  seprt=false;<br \/>\n                  if (document.getElementById('intersects' + kji).innerHTML.indexOf(cmds[mji].split(\"='\")[1].split(\"'\")[0]) == -1) {<br \/>\n                  document.getElementById('intersects' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n                  }<br \/>\n                }<br \/>\n                if (adjacentTo(rects[kji], rects[mji])) {<br \/>\n                  seprt=false;<br \/>\n                  if (document.getElementById('adjacent' + kji).innerHTML.indexOf(cmds[mji].split(\"='\")[1].split(\"'\")[0]) == -1) {<br \/>\n                  document.getElementById('adjacent' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n                  }<br \/>\n                }<br \/>\n              }<br \/>\n              if (contains(rects[mji], rects[kji])) {<br \/>\n                seprt=false;<br \/>\n                if (document.getElementById('within' + kji).innerHTML.indexOf(cmds[mji].split(\"='\")[1].split(\"'\")[0]) == -1) {<br \/>\n                document.getElementById('within' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n                }<br \/>\n              }<br \/>\n              if (seprt) {<br \/>\n                document.getElementById('separate' + kji).innerHTML+='&lt;span style=background-color:' + cmds[mji].split(\"='\")[1].split(\"'\")[0] + ';&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;';<br \/>\n              }<br \/>\n             }<br \/>\n            }<br \/>\n          }<br \/>\n          cmds=[];<br \/>\n          rects=[];<br \/>\n        }<br \/>\n<\/code><\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html--GETME\" title=\"rectangle_analyze.html\">The chiselled<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html--GETME\" title=\"rectangle_analyze.html\">rectangle_analyze.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectangle_analyze.html\" title=\"Click picture\">live run<\/a> link is there for your perusal should this be of interest.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-popup-mouseover-event-game-tutorial\/'>HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jpumegt'>Previous relevant <a target=_blank title='HTML\/Javascript PopUp Mouseover Event Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-popup-mouseover-event-game-tutorial\/'>HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript PopUp Mouseover Event Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.jpg\" title=\"HTML\/Javascript PopUp Mouseover Event Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript PopUp Mouseover Event Game Tutorial<\/p><\/div>\n<p>Are you &#8230;<\/p>\n<ul>\n<li>a fan of <a target=_blank title='Tom Cruise avoiding laser beams' href='http:\/\/www.youtube.com\/watch?v=ar0xLps7WSY'>Mission Impossible<\/a><\/li>\n<li>amazed when Rafael Nadal avoids walking on the lines<\/li>\n<li>when accidentally dropping your toast, hoping it lands butter up<\/li>\n<\/ul>\n<p>&#8230;?  If you scored 2 or above &#8230; please read on.  If you scored zero &#8230; well, I&#8217;m speechless!<\/p>\n<p>Today we&#8217;ve written a mouse movement and popup window game for your perusal after the great advice we stumbled upon with this webpage about the <a target=_blank title='Window object createPopup method' href='http:\/\/help.dottoro.com\/ljsxcrhv.php'>createPopup<\/a> Window (object) method &#8230; thanks.<\/p>\n<p>The idea of this game (for laptops) is to &#8230;<\/p>\n<ul>\n<li>not step on any tiles of the obstacle course presented to you once you click the button<\/li>\n<li>keep your mouse moving in an interesting way<\/li>\n<li>move the mouse fast enough to avoid the program claim of passivity &#8230; like in <a target=_blank title='Judo passivity' href='http:\/\/judoadvisor.com\/2011\/07\/pressure-passivity-shido-yuko-and-how-they-work-in-judo-competition\/'>Judo<\/a><\/li>\n<\/ul>\n<p>The workings of the game in HTML and Javascript rely on &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Window object createPopup method' href='http:\/\/help.dottoro.com\/ljsxcrhv.php'>createPopup<\/a> Window object method<\/li>\n<li>the <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/event_onmouseover.asp' title='Mouseover event information from w3schools'>(on)mouseover<\/a> mouse event<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp' title='Javascript setInterval information from w3schools'>setInterval<\/a> timer<\/li>\n<li>clearing and rewriting document.body.<a target=_blank href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp' title='Javascript DOM innerHTML information from w3schools'>innerHTML<\/a> (rather than reloading webpage with a URL of any sort)<\/li>\n<\/ul>\n<p>So try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.html\" title=\"Click picture\">live run<\/a> and\/or examine, download, or use the HTML and Javascript (DOM) source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popuptest.html_GETME\" title=\"popuptest.html\">popuptest.html<\/a><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d14772' onclick='var dv=document.getElementById(\"d14772\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=DOM\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14772' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d48239' onclick='var dv=document.getElementById(\"d48239\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gis\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48239' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re not trying to compare programming to Michelangelo&#8217;s art, but did you know that he chose the marble he wanted at the quarry, presumably imagining what was possible with that marble? In line with that, do you like &#8220;glass half &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-rectangle-analyze-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[3253,2654,484,2208,3252,748,752,2641,2132,3255,3254],"class_list":["post-48239","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-adjacent","tag-geographic-information-system","tag-geometry","tag-getboundingclientrect","tag-intersect","tag-mapping","tag-mathematics","tag-michelangelo","tag-rectangle","tag-separate","tag-within"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48239"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=48239"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48239\/revisions"}],"predecessor-version":[{"id":48247,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48239\/revisions\/48247"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}