{"id":87,"date":"2023-12-21T20:06:34","date_gmt":"2023-12-21T19:06:34","guid":{"rendered":"https:\/\/inquirerslab.me\/?p=87"},"modified":"2023-12-21T20:19:12","modified_gmt":"2023-12-21T19:19:12","slug":"dihedral-group-visualizer","status":"publish","type":"post","link":"https:\/\/inquirerslab.me\/index.php\/2023\/12\/21\/dihedral-group-visualizer\/","title":{"rendered":"Dihedral group visualizer"},"content":{"rendered":"\n<link rel=\"stylesheet\" href=\"\/gadgets\/dihfstyle.css\">\n<script id=\"shaderVs\" type=\"x-shader\/x-vertex\">\n      attribute vec4 a_Position;\n      attribute vec4 a_Color;\n      uniform mat4 u_Transform;\n      uniform mat4 u_Projection;\n      uniform mat4 u_View;\n      uniform mat4 u_Model;\n      varying vec4 v_Color;\n      varying vec4 v_Position;\n\n      void main() {\n          gl_Position = u_Projection * u_View * u_Transform * u_Model * a_Position;\n          v_Color = a_Color;\n          v_Position = a_Position;\n      }\n    <\/script>\n    \n    <script id=\"shaderFs\" type=\"x-shader\/x-fragment\">\n      precision mediump float;\n      varying vec4 v_Color;\n      varying vec4 v_Position;\n\n      void main() {\n        gl_FragColor = v_Color;\n      }\n    <\/script>\n\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gl-matrix@3.4.3\/gl-matrix-min.min.js\"><\/script>\n    <script type=\"text\/javascript\" src=\"\/gadgets\/dihvis.js\"><\/script>\n\n\n\n<div class=\"visualizerContainer\">\n      <canvas id=\"glcanvas\" width=600 height=400>\n            It seems the browser does not support the &#8216;canvas&#8217; tag (part of HTML5)\n      <\/canvas>\n      <div id=\"overlay\">\n        <div>Current state: <span id=\"elemState\"><\/span><\/div>\n        <div><span id=\"elemDesc\"><\/span><\/div>\n      <\/div>\n      <div id=\"grpActCollection\">\n        <table>\n          <tr>\n            <th>Options<\/th>\n            <th>Controls<\/th>\n            <th>Rotations<\/th>\n            <th>Reflections<\/th>\n          <\/tr>\n          <tr id=\"tblGrpActButtons\">\n            <td>\n              <div>\n                <button onclick=\"groupStateReset()\">Reset<\/button>\n              <\/div>\n            <\/td>\n            <td>\n              <div>\n                <div>\n                  <select id=\"polySelector\" onchange=\"groupNew()\">\n                    <option value=\"3\"># sides<\/option>\n                    <option value=\"3\">3<\/option>\n                    <option value=\"4\">4<\/option>\n                    <option value=\"5\">5<\/option>\n                    <option value=\"6\">6<\/option>\n                    <option value=\"7\">7<\/option>\n                    <option value=\"8\">8<\/option>\n                    <option value=\"9\">9<\/option>\n                    <option value=\"10\">10<\/option>\n                  <\/select>\n                <\/div>\n            <\/div>\n            <\/td>\n            <td id=\"tblGrpColRotations\">\n              <button onclick=\"groupAction('r0')\">r0<\/button>\n              <button onclick=\"groupAction('r1')\">r1<\/button>\n              <button onclick=\"groupAction('r2')\">r2<\/button>\n            <\/td>\n            <td id=\"tblGrpColReflections\">\n              <button onclick=\"groupAction('s0')\">s0<\/button>\n              <button onclick=\"groupAction('s1')\">s1<\/button>\n              <button onclick=\"groupAction('s2')\">s2<\/button>\n            <\/td>\n          <\/tr>\n        <\/table>\n      <\/div>\n    <\/div>\n<script type=\"text\/javascript\">\n   init();\n<\/script>\n\n\n\n\n\n\n\n<p><strong>How to use the visualizer<\/strong><\/p>\n\n\n\n<p>With this tool you can visualize and interact with the dihedral group \\(D_{2n}\\) acting on a regular \\(n\\)-gon.<\/p>\n\n\n\n<p>The elements \\(r_0, r_1, r_2, \\ldots\\) represent rotations, while \\(s_0, s_1, s_2, \\ldots\\) are the reflections. (\\(r_0\\) is the identity element, as a rotation by \\(0\\) has no effect.)<\/p>\n\n\n\n<p>The visualizer will show in the top-left corner the result of the current computation. For example, one can start with the equilateral triangle, apply \\(s_1\\) (reflection across the axis \\(y=\\sqrt{3} x\\)) and then \\(r_1\\) (rotation by \\(\\frac{2 \\pi}{3}\\) radians). The result of this will be \\(s_2\\), in other words, composing these two actions is the same as a reflection across the axis \\(y=-\\sqrt{3}\\). In cycle notation, the operation \\(r_1 s_1 = s_2\\) can be written as \\((123)(12) = (23)\\).<\/p>\n\n\n\n<p>In this way, one can use the visualizer as a sort of calculator.<\/p>\n\n\n\n<p>One can also see fixed points very easily: all of the reflections in \\(D_6\\) fix one point, while none of the rotations have fixed points. On the other hand, in \\(D_8\\), the even reflections fix two points, while the odd reflections have no fixed points.<\/p>\n\n\n\n<p><strong>Rotations<\/strong><\/p>\n\n\n\n<p>\\(r_k\\) corresponds to a counterclockwise rotation by \\(\\frac{2\\pi k}{n}\\) radians.<\/p>\n\n\n\n<p><strong>Reflections<\/strong><\/p>\n\n\n\n<p>\\(s_k\\) corresponds to a reflection across the axis making an angle of \\(\\frac{\\pi k}{n}\\) radians from the origin.<\/p>\n\n\n\n<p><strong>Source<\/strong><\/p>\n\n\n\n<p>Source code is available <a href=\"https:\/\/github.com\/sakura57\/divis\" data-type=\"link\" data-id=\"https:\/\/github.com\/sakura57\/divis\">here<\/a> and licensed under GPLv2.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With this tool you can visualize and interact with the dihedral group D_2n acting on a regular n-gon.<\/p>\n","protected":false},"author":1,"featured_media":116,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/posts\/87"}],"collection":[{"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":26,"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/posts\/87\/revisions\/119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/media\/116"}],"wp:attachment":[{"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inquirerslab.me\/index.php\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}