{"id":15472,"date":"2015-06-18T05:01:36","date_gmt":"2015-06-17T19:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=15472"},"modified":"2016-02-08T21:07:30","modified_gmt":"2016-02-08T11:07:30","slug":"php-and-javascript-and-css-webgl-prism-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-and-javascript-and-css-webgl-prism-tutorial\/","title":{"rendered":"PHP and Javascript and CSS WebGL Prism Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP and Javascript and CSS WebGL Prism Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/OpenGL-95of.jpg\" title=\"PHP and Javascript and CSS WebGL Prism Tutorial\"  style=\"float:left;\"  id='zqpwo' onmouseover=\" this.src=this.src.replace('-94of.j','-95of.xj').replace('-95of.j','-96of.xj').replace('-96of.j','-94of.xj').replace('.x','.');   \" \/><\/a><p class=\"wp-caption-text\">PHP and Javascript and CSS WebGL Prism Tutorial<\/p><\/div>\n<p>To infinity and beyo<font size=4>n<\/font><font size=5>d!!<\/font> &#8230; well, at least to the 3rd  dimension &#8230; yes, we&#8217;re rejoining our Geometry and Land Surveying theme today, rejoining the discussion of <a target=_blank title='PHP and Javascript and CSS Shape Rotation Tutorial' href='#pajacsrt'>PHP and Javascript and CSS Shape Rotation Tutorial<\/a> as shown below, but giving some additional functionality to show the Convex Polygon shape with an added dimension by displaying its 3D prism equivalent via the <a target=_blank href='https:\/\/www.safaribooksonline.com\/library\/view\/webgl-up-and\/9781449326487\/ch01.html' title='WebGL information ... thanks'>WebGL API<\/a>, modelling the additional code via the public generosity and wonderful resources from the <a target=_blank title='Useful resources for WebGL within here ... thanks' href='http:\/\/www.cs.unm.edu\/'>University of New Mexico<\/a> &#8230; our heartfelt thanks.<\/p>\n<p>If you have been a recent reader you&#8217;ll have seen that we have been discussing <a target=_blank title='OpenGL information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/OpenGL'>OpenGL<\/a>. OpenGL has a <a target=_blank title='OpenGL landing page' href='http:\/\/OpenGL.org'>OpenGL.org<\/a> landing page which will talk about all the platforms supported, and let&#8217;s just remind you about the purpose, with a quote from the webpage &#8230;<\/p>\n<blockquote>\n<p>\nThe Industry&#8217;s Foundation for High Performance Graphics<br \/>\nfrom games to virtual reality, mobile phones to supercomputers\n<\/p>\n<\/blockquote>\n<p> &#8230; well, today, we use <i>some<\/i> of that knowledge &#8230; <i>some<\/i> being the operative word, and we&#8217;ll talk more on this tomorrow, but &#8230; with the sequence of blog posts culminating in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/c-opengl-in-xcode-generic-regular-prism-drawing-tutorial\/' title='C++ OpenGL in Xcode Generic Regular Prism Drawing Tutorial'>C++ OpenGL in Xcode Generic Regular Prism Drawing Tutorial<\/a> we learnt some things about graphics software and the concepts of &#8230;<\/p>\n<ul>\n<li>object vertices definition<\/li>\n<li>object colour<\/li>\n<li>lighting \u2026 direction, type, angle, numbers of sources etcetera<\/li>\n<li>perspective \u2026 field of view, aspect ratio, Z position<\/li>\n<\/ul>\n<p> &#8230; and the Land Surveying use of thinking about Survey Traverses as an idea to genericize the vertex definition phase, as this is the major difference between drawing a &#8220;cube&#8221; or a &#8220;hexagonal prism&#8221; or a &#8220;butterfly in Brazil&#8221; (just kidding &#8230; that&#8217;s for tomorrow (in Klingon time)).<\/p>\n<p>So the wonderful code from the <a target=_blank title='Useful resources for WebGL within here ... thanks' href='http:\/\/stackoverflow.com\/questions\/26742317\/drawing-a-cube-in-webgl'>University of New Mexico<\/a> (via StackOverflow) was to show a cube, and the use of buttons to display animation and rendering &#8220;smarts&#8221; &#8230; so am really really really keen for you to examine this additional HTML code of today you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/webgl_test.html_GETME' title='webgl_test.html'>webgl_test.html<\/a> &#8230; we change it to add some Land Surveying feeling to the creation of vertices for our Convex Polygon extended into a Prism arrangement as per the Javascript code &#8230;<\/p>\n<p><code><br \/>\nvar numsides = location.search.split('numsides=')[1] ? location.search.split('numsides=')[1].split('&')[0] : 4;<br \/>\nvar NumVertices  = eval((numsides * 2) * 3);<br \/>\nvar evalc=\"\", evalcol=\"\";<br \/>\nvar delim=\"[\";<br \/>\nvar sidelen=eval((1.0 * 3.0) \/ numsides);<br \/>\nvar x=eval(0.0 - (sidelen \/ 2.0) * (numsides \/ 3)), y=eval(0.0 - (sidelen \/ 2.0) * (numsides \/ 3)), z=1.5, otherz=0.5, thisis=1;<br \/>\nvar bearing=0.0;<br \/>\nvar prevbearing;<br \/>\nvar nextx, nexty, nextis=2;<br \/>\nvar prevx, prevy, previs=numsides, downis=eval(numsides);<br \/>\ndownis++;<br \/>\nevalc=\"\";<br \/>\nfor (ij=0; ij&lt;eval(numsides * 2); ij++) {<br \/>\n  if (ij == numsides) {<br \/>\n    z=0.5;<br \/>\n    otherz=1.5;<br \/>\n  }<br \/>\n  nextx=eval(x + sidelen * Math.sin(bearing \/ 57.2957795));<br \/>\n  if (Math.abs(nextx) &lt; 0.00001) nextx = 0.0;<br \/>\n  nexty=eval(y + sidelen * Math.cos(bearing \/ 57.2957795));<br \/>\n  if (Math.abs(nexty) &lt; 0.00001) nexty = 0.0;<br \/>\n  prevbearing = ((bearing + 540 - (360.0 \/ numsides)) % 360.0);<br \/>\n  prevx=eval(x + sidelen * Math.sin(prevbearing \/ 57.2957795));<br \/>\n  if (Math.abs(prevx) &lt; 0.00001) prevx = 0.0;<br \/>\n  prevy=eval(y + sidelen * Math.cos(prevbearing \/ 57.2957795));<br \/>\n  if (Math.abs(prevy) &lt; 0.00001) prevy = 0.0;<br \/>\n  if (eval((ij + 1) % numsides) != 0) {<br \/>\n   evalc += (delim + \"vec4(\" + x + \",\" + y + \",\" + z + \",1.0) \/\" + \"\/\" + thisis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n   delim=\",\";<br \/>\n   evalc += (delim + \"vec4(\" + nextx + \",\" + nexty + \",\" + z + \",1.0) \/\" + \"\/\" + nextis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n  }<br \/>\n  if ((ij % numsides) == 0) {<br \/>\n   evalc += (delim + \"vec4(\" + x + \",\" + y + \",\" + z + \",1.0) \/\" + \"\/\" + thisis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n   evalc += (delim + \"vec4(\" + prevx + \",\" + prevy + \",\" + z + \",1.0) \/\" + \"\/\" + previs + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n   previs = eval(previs * 2);<br \/>\n  }<br \/>\n  if (ij &lt; numsides) {<br \/>\n   evalc += (delim + \"vec4(\" + x + \",\" + y + \",\" + z + \",1.0) \/\" + \"\/\" + thisis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n   evalc += (delim + \"vec4(\" + x + \",\" + y + \",\" + otherz + \",1.0) \/\" + \"\/\" + downis + \"\\n\");<br \/>\n   evalcol += (delim + \"vec4( 1.0, 0.0, 0.0, 1.0 ) \/\" + \"\/red \\n\");<br \/>\n  }<br \/>\n  x = nextx;<br \/>\n  y = nexty;<br \/>\n  thisis++;<br \/>\n  nextis++;<br \/>\n  downis++;<br \/>\n  bearing += (360.0 \/ numsides);<br \/>\n}<br \/>\nevalc += \"];\";<br \/>\nevalcol += \"];\";<br \/>\nvar vertices;<br \/>\nvertices = eval(evalc);<br \/>\n<\/code><\/p>\n<p>WebGL API performs its graphics via the use of the HTML5 <a target=_blank title='HTML5 canvas element information from w3schools ... thanks' href='http:\/\/www.w3schools.com\/html\/html5_canvas.asp'>canvas<\/a> element.  We&#8217;ll be discussing more on this topic, no doubt, as time goes on.<\/p>\n<p>Here is a link to Shape Draw live run (with Google Line Chart and HTML svg and WebGL 3D Prism drawing and University of New Mexico inspired animation functionality) <a target=_blank title='Shape Draw live run with Google Line Chart and HTML svg' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php'>here<\/a>.<br \/>\nHere is a link to Shape Draw PHP source code <a target=_blank title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php---GETME'>ShapeDraw.php<\/a> with changes from previous code as per <a target=_blank title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php---GETME'>this link<\/a>.<\/p>\n<p>Try it out, and get into web based 3D graphics via the WebGL API &#8230; you&#8217;ll be drawing <a target=_blank title='Prism animals' href='https:\/\/www.google.com.au\/search?q=%22prism+animals%22&#038;biw=1280&#038;bih=661&#038;source=lnms&#038;tbm=isch&#038;sa=X&#038;ved=0CAYQ_AUoAWoVChMI2JCo672WxgIViIG8Ch1BPQAD#q=%22prism+animals%22&#038;tbm=isch&#038;tbs=itp:clipart&#038;imgrc=mXgZpl8bE4nNTM%253A%3B8gO4cHyO2xrs5M%3Bhttp%253A%252F%252Fpayload107.cargocollective.com%252F1%252F8%252F262499%252F4458273%252F2.jpg%3Bhttp%253A%252F%252Fwww.rodrigodimarzo.com%252FVortex%3B670%3B446'>prism animals<\/a> before the sun goes down!<\/p>\n<hr>\n<p id=\"pajacsrt\">Previous relevant <a target=_blank title='PHP and Javascript and CSS Shape Rotation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-and-javascript-and-css-shape-rotation-tutorial\/'>PHP and Javascript and CSS Shape Rotation 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\/ShapeDraw\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP and Javascript and CSS Shape Rotation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.gif\" title=\"PHP and Javascript and CSS Shape Rotation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP and Javascript and CSS Shape Rotation Tutorial<\/p><\/div>\n<p>We&#8217;re continuing on with our Geometry and Land Surveying theme today, following on from yesterday&#8217;s <a target=_blank title='PHP and Javascript and CSS Shape Drawing Tutorial' href='#pajacsdt'>PHP and Javascript and CSS Shape Drawing Tutorial<\/a> as shown below.  When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn&#8217;t come into the equation.  When Earth curvature matters, over longer distances, in Land Surveying the term <a target=_blank href='http:\/\/civilengineersforum.com\/geodetic-surveying\/'>Geodetic Surveying<\/a> is often used.  Here, the equations used need to model the Earth as close as possible to known measurements.<\/p>\n<p>If you read yesterday&#8217;s posting you&#8217;ll see that we added some popup window functionality to display the Convex Polygon created by the web application in a relative sense, and to do this we called on (where var<font size=1>iable<\/font> &#8220;opop&#8221; is global in scope) &#8230;<\/p>\n<ul>\n<li><code><br \/>\n  opop = <a target=_blank title='Window.open method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'>window.open<\/a>(\"\", \"Polygon \" + numlegs, \"left=400,top=250,height=\" + parseFloat(50 + maxy) + \",width=\" + parseFloat(50 + maxx));<br \/>\n<\/code><\/li>\n<li><code><br \/>\n  opop.<a target=_blank title='Document.write method information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_output.asp'>document.write<\/a>([someDerivedHTML]);<br \/>\n<\/code><\/li>\n<\/ul>\n<p>We&#8217;re here, today, to remind you, that that popup doesn&#8217;t have to be like a dead fish, just displaying information.  It can be interactive itself, and is known to the &#8220;parent&#8221; window, so can have its own &#8220;hidden input&#8221; HTML element (for example) as per &#8230;<\/p>\n<p><code><br \/>\n&lt;input id=\"myunload\" type=\"hidden\" value=\"\"&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p>&#8230; that is updated when a button as per (this function, that is used to create this button and a related dropdown) &#8230;<\/p>\n<p><code><br \/>\nfunction buttonideas() {<br \/>\n  var crotate1 = \"&lt;input type='button' onclick=' if (document.getElementById(\\\"myunload\\\") != null) { document.getElementById(\\\"myunload\\\").value=\\\"\" +  initiallength + \",\" + numlegs + \",\" + \"\\\" + document.getElementById(\\\"myselect\\\").value; }' value='Rotate Clockwise'&gt;&lt;\/input&gt;&nbsp;&lt;select id='myselect'&gt;&lt;option value='\" + eval(180.0 \/ numlegs) + \"'&gt;By \" + eval(180.0 \/ numlegs) + \"\u00b0 ... vs ...&lt;\/option&gt;&lt;\/select&gt;\";<br \/>\n  for (var steps=0; steps&lt;=360; steps++) {<br \/>\n    crotate1=crotate1.replace(\"&lt;\/option&gt;&lt;\/select&gt;\", \"&lt;\/option&gt;&lt;option value='\" + steps + \"'&gt;By \" + steps + \"\u00b0&lt;\/option&gt;&lt;\/select&gt;\");<br \/>\n  }<br \/>\n  return crotate1;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>&#8230; then our &#8220;parent&#8221; window can swing into action via a setInterval() scenario (where var<font size=1>iable<\/font> sipos is global) &#8230;<\/p>\n<p><code><br \/>\n  sipos = <a target=_blank title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'>setInterval<\/a>(takealook, 5000);<br \/>\n<\/code><\/p>\n<p>&#8230; with code like &#8230;<\/p>\n<p><code><br \/>\nfunction takealook() {<br \/>\n  var things;<br \/>\n  if (opop != null) {<br \/>\n    if (opop.document.getElementById('myunload').value.indexOf(\",\") != -1) {<br \/>\n      things = opop.document.getElementById('myunload').value.split(\",\");<br \/>\n      opop.close();<br \/>\n      opop = null;<br \/>\n      if (things.length >= 3) {<br \/>\n        if (sipos != null) { clearInterval(sipos); sipos = null; }<br \/>\n        var bis = 0.0;<br \/>\n        bis += parseFloat(initialbearing);<br \/>\n        bis += parseFloat(things[2]);<br \/>\n        window.location = \".\/ShapeDraw.php?sides=\" + things[1] + \",0&length=\" + things[0] + \"&bearing=\" + posval(bis);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>&#8230; to allow for some HTML <a target=_blank title='SVG information from w3schools' href='http:\/\/www.w3schools.com\/svg\/'>&#8220;svg&#8221;<\/a> element rotation functionality, if the button is pressed, that is.  One last nicety is to use the Window Event &#8220;onunload&#8221; to clear the setInterval handler with a web browser close or a user closing the parent webpage as per &#8230;<\/p>\n<p><code><br \/>\n&lt;body onunload=\" if (sipos != null) { clearInterval(sipos); sipos = null; }\" style=\"background-color: #fffff0;\"&gt;<br \/>\n<\/code><\/p>\n<p>Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) <a target=_blank title='Shape Draw live run with Google Line Chart and HTML svg' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php'>here<\/a>.<br \/>\nLink to Shape Draw PHP source code <a target=_blank title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php--GETME'>ShapeDraw.php<\/a> with changes from code yesterday as per <a target=_blank title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php--GETME'>this link<\/a>.<\/p>\n<p>You may be interested in CSS3 ways to rotate HTML elements as well, so we&#8217;ll leave you with <a target=_blank title='Rotation blog posts here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=rotation'>this link<\/a> to point you in the direction of where we have discussed this previously.<\/p>\n<hr>\n<p id=\"pajacsdt\">Previous relevant <a target=_blank title='PHP and Javascript and CSS Shape Drawing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-and-javascript-and-css-shape-drawing-tutorial\/'>PHP and Javascript and CSS Shape Drawing 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\/ShapeDraw\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP and Javascript and CSS Shape Drawing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.jpg\" title=\"PHP and Javascript and CSS Shape Drawing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP and Javascript and CSS Shape Drawing Tutorial<\/p><\/div>\n<p>It is no coincidence that Geometry and Land Surveying have a lot in common.  When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn&#8217;t come into the equation.  When Earth curvature matters, over longer distances, in Land Surveying the term <a target=_blank href='http:\/\/civilengineersforum.com\/geodetic-surveying\/'>Geodetic Surveying<\/a> is often used.  Here, the equations used need to model the Earth as close as possible to known measurements.<\/p>\n<p>So today, with our Plane Geometry web application, we start with our previous Survey Traverse web application, and add to its functionality with ability for it to fill out more for the user to describe a regular polygon of their choosing, defined by &#8230;<\/p>\n<ol>\n<li>number of polygon sides<\/li>\n<li>length of each polygon side<\/li>\n<\/ol>\n<p>We also add to the Google Charts Line Graph of the Drawn Shape a popup window showing the polygon as an HTML <a target=_blank title='HTML svg information from w3schools' href='http:\/\/www.w3schools.com\/svg\/'>svg<\/a> element.  Part of the reason for this is that the Google Chart Line Graph can exaggerate the x or y co-ordinate of its plots, but with the HTML svg element, you avoid this issue, as we are just showing you a &#8220;relative&#8221; view of the shape (ie. as distinct from an &#8220;absolute&#8221; view with distinct co-ordinates).<\/p>\n<p>The thinking here started with a look at New Century Maths stages 5.2\/5.3 &#8220;Exterior angle sum of a convex polygon&#8221;.  Did you know?<\/p>\n<blockquote><p>\nThe sum of the exterior angles of a convex polygon is 360\u00b0.\n<\/p><\/blockquote>\n<p>What we found to be the case, practically speaking, to imagine the drawing of a regular even-sided convex polygon (with &#8220;numsides&#8221; sides) was &#8230;<\/p>\n<ul>\n<li>look north &#8230;<\/li>\n<li>turn clockwise (360\u00b0 \/ numsides) for first line to draw (NB. there is more symmetry if this number is then divided by 2) &#8230; then from then on &#8230;<\/li>\n<li>off this previous line, turn clockwise (180\u00b0 +  (360\u00b0 \/ numsides)) for subsequent lines<\/li>\n<\/ul>\n<p>Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) <a target=_blank title='Shape Draw live run with Google Line Chart and HTML svg' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php'>here<\/a>.<br \/>\nLink to Shape Draw PHP source code <a target=_blank title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php-GETME'>ShapeDraw.php<\/a> with changes from code below as per <a target=_blank title='ShapeDraw.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ShapeDraw\/ShapeDraw.php-GETME'>this link<\/a>.<\/p>\n<p>Hope you enjoy the geometry ideas, and will leave you with a very useful link that helped with the Convex Polygon method to calculate the Surface Area <a target=_blank href='http:\/\/www.mathsisfun.com\/geometry\/area-irregular-polygons.html' link='Useful link for surface area'>here<\/a>.<\/p>\n<hr>\n<p id=\"hajcstt\">Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Traverse Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-tutorial\/'>HTML and Javascript and CSS Survey Traverse 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\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.jpg\" title=\"HTML and Javascript and CSS Survey Traverse Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse Tutorial<\/p><\/div>\n<p>Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts.   The tutorial subject matter is a webpage to perform Survey Traverse calculations.   A Survey Traverse is:<\/p>\n<blockquote><p>Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including:<\/p>\n<p>    Less reconnaissance and organization needed;<br \/>\n    While in other systems, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;<br \/>\n    Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;<br \/>\n    Traverse networks are free of the strength of figure considerations that happen in triangular systems;<br \/>\n    Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.<\/p>\n<p>The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]<\/p><\/blockquote>\n<p>Let&#8217;s see some simple <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/'>HTML<\/a> in action in a tutorial &#8230;<\/p>\n<p>Link to HTML &#8220;spiritual home&#8221; &#8230; <a target=_blank title='W3Schools' href='http:\/\/www.w3schools.com\/html\/'>at W3Schools<\/a> has many tutorials.<br \/>\nLink to Survey Traverse live run &#8230; <a target=_blank title='Survey Traverse live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html'>here<\/a>.<br \/>\nLink to Survey Traverse live run (additional Google Line Chart functionality)  <a target=_blank title='Survey Traverse live run with Google Line Chart' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php'>here<\/a>.<br \/>\nLink to Survey Traverse information &#8230; <a target=_blank title='Survey Traverse information' href='http:\/\/en.wikipedia.org\/wiki\/Traverse_(surveying)'>from Wikipedia from which quote above comes<\/a>.<br \/>\nLink to some downloadable HTML code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html_GETME' title='Download me'>SurveyTraverse.html<\/a> which packages up a lot of Javascript and a little bit of CSS &#8230; or JaCvasScriptS &#8230; not sure whether this would ever catch on.<br \/>\nLink to some downloadable PHP programming code (additional Google Line Chart functionality) &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php_GETME' title='Download me'>SurveyTraverse.php<\/a>\n<\/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='#d1271' onclick='var dv=document.getElementById(\"d1271\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d1271' 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='#d15361' onclick='var dv=document.getElementById(\"d15361\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15361' 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='#d15374' onclick='var dv=document.getElementById(\"d15374\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15374' 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='#d15472' onclick='var dv=document.getElementById(\"d15472\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=geometry\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15472' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>To infinity and beyond!! &#8230; well, at least to the 3rd dimension &#8230; yes, we&#8217;re rejoining our Geometry and Land Surveying theme today, rejoining the discussion of PHP and Javascript and CSS Shape Rotation Tutorial as shown below, but giving &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-and-javascript-and-css-webgl-prism-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,15,17,21,37],"tags":[84,88,281,484,576,578,652,679,1588,752,1589,997,1049,1319,1593],"class_list":["post-15472","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-gui","category-land-surveying","category-tutorials","tag-animation-2","tag-api","tag-css","tag-geometry","tag-html","tag-html5","tag-javascript","tag-land-surveying","tag-lighting","tag-mathematics","tag-perspective","tag-programming","tag-render","tag-tutorial","tag-webgl"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/15472"}],"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=15472"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/15472\/revisions"}],"predecessor-version":[{"id":20065,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/15472\/revisions\/20065"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=15472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=15472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=15472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}