first commit

samueleblanc · Aug 17, 2024 · c89d75d · c89d75d
commit c89d75d
Show file tree

Hide file tree

Showing 10 changed files with 4,378 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) [2024] [Samuel Leblanc]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,35 @@
+<img src="images/psl2rAction.png" width=35% alt="Poincaré half-plane model">
+
+*English below*
+
+## Demi-plan de Poincaré
+
+Ce programme, inspiré de <a href="https://github.com/samueleblanc/riemannsphere" target="_blank">celui-ci</a>, permet de visualiser de manière interactive des transformations sur le demi-plan de Poincaré directement sur internet. 
+
+### Téléchargement et utilisation
+
+* Cliquez sur la version la plus récente (*Latest*) dans la section **Releases** à la droite de l'écran.
+* Cliquez sur ``upperhalfplane-vx.zip``.
+* Dans votre dossier *Téléchargements*, vous devriez y voir ``upperhalfplane-vx.zip``, que vous pouvez décompresser (extraire).
+* Dans le nouveau dossier *upperhalfplane-vx*, double-cliquez sur ``index_fr.html``.
+
+N.B. Si un fichier texte s'ouvre, cliquez sur le bouton droit de la souris et cliquez sur *Ouvrir avec* [votre navigateur web favori]. 
+
+--------------------------------------
+
+## Poincaré half-plane model
+
+This program, inspired by <a href="https://github.com/samueleblanc/riemannsphere" target="_blank">this one</a>, lets you visualise in an interactive way transformations on the upper half-plane directly on the internet. 
+
+### Download and usage
+
+* Click on the latest version in the **Releases** section on the right of the screen.
+* Click on ``upperhalfplane-vx.zip``.
+* In your *Downloads* directory, you should see ``upperhalfplane-vx.zip``, which you can decompress (extract).
+* In the new *upperhalfplane-vx* directory, double-click on ``index.html``.
+
+N.B. If a text file opens, right-click on it and click on *Open with* [your favorite web browser].
+
+## License 
+
+MIT
diff --git a/home.css b/home.css
@@ -0,0 +1,47 @@
+body {
+    margin: 0.5em 3em;
+}
+header {
+    text-align: right;
+}
+h1 {
+    text-align: center;
+    color: black;
+}
+h1 a {
+    text-decoration: none;
+    color: black;
+}
+p, ol {
+    margin: 2% 10%;
+}
+p {
+    text-align: justify;
+}
+input[type=button] {
+    border: none;
+    border-radius: 7px;
+    background-color: whitesmoke;
+    padding: 12px;
+}
+input[type=button]:hover {
+    background-color: lightgray;
+}
+#sep {
+    padding: 1.5em;
+}
+/* Picture as link to other page */
+.picture_box {
+    display: block;
+    margin: auto;
+    text-align: center;
+}
+.picture_box img {
+    width: 40%;
+    height: auto;
+    display: inline-block;
+    opacity: 75%;
+}
+.picture_box img:hover {
+    opacity: 100%;
+}
diff --git a/images/poincaredisk.svg b/images/poincaredisk.svg
diff --git a/images/psl2rAction.png b/images/psl2rAction.png
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Home</title>
+        <link rel="icon" href="images/poincaredisk.svg">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Visualise isometries of the upper half-plane.">
+        <meta name="keywords" content="mathematic, geometry, visualisation, mobius, linear, group, hyperbolic">
+        <link rel="stylesheet" href="home.css">
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
+        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
+        <script>
+            document.addEventListener("DOMContentLoaded", function() {
+                renderMathInElement(document.body, {
+                delimiters: [
+                    {left: '\\(', right: '\\)', display: false},
+                    {left: '\\[', right: '\\]', display: true},
+                    {left: "\\begin{align}", right: "\\end{align}", display: true},
+                    {left: "\\begin{align*}", right: "\\end{align*}", display: true}
+                ],
+                throwOnError : false
+                });
+            });
+        </script>
+    </head>
+    <body>
+        <header><a href="index_fr.html"><input type="button" value="Français"></a></header>
+        <h1>Poincaré half-plane model</h1>
+
+        <p>
+            This website lets you visualize the action of \(\mathrm{PSL}(2,\mathbb{R})\) on \(\mathbb{H}_{\mathrm{sup}} \coloneqq \{x+iy \in \mathbb{C} : y>0\}\), the upper half-plane or Poincaré half-plane model. 
+            The action is a Möbius transformation, meaning that the action is defined by
+            \[\begin{pmatrix}a&b\\c&d\end{pmatrix}\cdot z = \frac{az+b}{cz+d},\]
+            where \(z \in \mathbb{H}_{\mathrm{sup}}\) and \(a,b,c,d \in \mathbb{R}\) are such that \(ad-bc=1\). 
+        </p>
+
+        <p>
+            The functioning of the program is based on the following theorem:
+        </p>
+
+        <p>
+            <b>Classification of isometries.</b> \(\mathrm{PSP}(2,\mathbb{R})\) is the group of orientation-preserving isometries of \(\mathbb{H}_{\mathrm{sup}}\).<br>
+            Furthermore, a transformation satisfies exactly one of these cases:
+            <ol>
+                <li>The transformation is the identity transformation,</li>
+                <li>There are two fixed points in \(\mathbb{R}\cup\{\infty\}\),</li>
+                <li>There is one fixed point in \(\mathbb{R}\cup\{\infty\}\),</li>
+                <li>There is one fixed point in \(\mathbb{H}_{\mathrm{sup}}\).</li>
+            </ol>
+        </p>
+
+        <p>
+            The program uses the fact that, given one of these situations, there exists a unique transformation that maps \(z_{1} \in \mathbb{H}_{\mathrm{sup}}\) to \(z_{2} \in \mathbb{H}_{\mathrm{sup}}\) 
+            or \(x_{1} \in \mathbb{R}\cup\{\infty\}\) to \(x_{2} \in \mathbb{R}\cup\{\infty\}\), depending of the case. 
+            The grey points represent the fixed points. By dragging your mouse, you specify \(z_{1} \mapsto z_{2}\) or \(x_{1} \mapsto x_{2}\). 
+            The program differentiates these cases for you. Then, it finds the unique transformation and applies it to the hyperbolic lines!
+        </p>
+
+        <div class="picture_box">
+            <a href="visualisation/hsup.html"><img src="images/psl2rAction.png"></a>
+        </div>
+
+        <p>
+            This website is greatly inspired by <a href="https://github.com/samueleblanc/riemannsphere" target="_blank">the one</a> made to visualize the action of \(\mathrm{PSP}(4,\mathbb{R})\) on the Riemann sphere. 
+            The code relating to this website is on <a href="https://github.com/samueleblanc/upperhalfplane" target="_blank">GitHub</a>. The visualizations 
+            were made using <a href="https://cindyjs.org/" target="_blank">CindyJS</a>. 
+        </p>
+    </body>
+</html>
diff --git a/index_fr.html b/index_fr.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8">
+        <title>Accueil</title>
+        <link rel="icon" href="images/poincaredisk.svg">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Visualise les isométries du demi-plan supérieur.">
+        <meta name="keywords" content="mathematiques, geometrie, visualisation, mobius, linéaire, groupe, hyperbolique">
+        <link rel="stylesheet" href="home.css">
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
+        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
+        <script>
+            document.addEventListener("DOMContentLoaded", function() {
+                renderMathInElement(document.body, {
+                delimiters: [
+                    {left: '\\(', right: '\\)', display: false},
+                    {left: '\\[', right: '\\]', display: true},
+                    {left: "\\begin{align}", right: "\\end{align}", display: true},
+                    {left: "\\begin{align*}", right: "\\end{align*}", display: true}
+                ],
+                throwOnError : false
+                });
+            });
+        </script>
+    </head>
+    <body>
+        <header><a href="index.html"><input type="button" value="English"></a></header>
+        <h1>Demi-plan de Poincaré</h1>
+
+        <p>
+            Ce site permet de voir l'action de \(\mathrm{PSL}(2,\mathbb{R})\) sur \(\mathbb{H}_{\mathrm{sup}} \coloneqq \{x+iy \in \mathbb{C} \mid y>0\}\), le demi-plan supérieur ou le demi-plan de Poincaré. 
+            L'action est une transformation de Möbius, c'est-à-dire que l'action est définie par 
+            \[\begin{pmatrix}a&b\\c&d\end{pmatrix}\cdot z = \frac{az+b}{cz+d},\]
+            où \(z \in \mathbb{H}_{\mathrm{sup}}\) et \(a,b,c,d \in \mathbb{R}\) sont tels que \(ad-bc=1\). 
+        </p>
+
+        <p>
+            Le fonctionnement du programme est basé sur le théorème suivant : 
+        </p>
+
+        <p>
+            <b>Classification des isométries.</b> \(\mathrm{PSP}(2,\mathbb{R})\) est le groupe des isométries de \(\mathbb{H}_{\mathrm{sup}}\) préservant l'orientation. <br>
+            De plus, une transformation satisfait exactement un de ces cas :
+            <ol>
+                <li>La transformation est la transformation identité;</li>
+                <li>Il y a deux points fixes dans \(\mathbb{R}\cup\{\infty\}\);</li>
+                <li>Il y a un point fixe dans \(\mathbb{R}\cup\{\infty\}\);</li>
+                <li>Il y a un point fixe dans \(\mathbb{H}_{\mathrm{sup}}\).</li>
+            </ol>
+        </p>
+
+        <p>
+            Le programme utilise le fait qu'étant donné un de ces cas, il existe une unique transformation qui envoie \(z_{1} \in \mathbb{H}_{\mathrm{sup}}\) à \(z_{2} \in \mathbb{H}_{\mathrm{sup}}\) 
+            ou \(x_{1} \in \mathbb{R}\cup\{\infty\}\) à \(x_{2} \in \mathbb{R}\cup\{\infty\}\), selon le cas où on se trouve. 
+            Les points gris représentent les points fixes. En glissant la souris, vous spécifiez \(z_{1} \mapsto z_{2}\) ou \(x_{1} \mapsto x_{2}\). 
+            Le programme différencie ces cas pour vous. Ensuite, il trouve l'unique transformation et l'applique aux droites hyperboliques!
+        </p>
+
+        <div class="picture_box">
+            <a href="visualisation/hsup_fr.html"><img src="images/psl2rAction.png"></a>
+        </div>
+
+        <p>
+            Le site est grandement inspiré de <a href="https://github.com/samueleblanc/riemannsphere" target="_blank">celui</a> fait pour visualiser l'action de \(\mathrm{PSP}(4,\mathbb{R})\) sur la sphère de Riemann. 
+            Le code relatif à ce site se trouve sur <a href="https://github.com/samueleblanc/upperhalfplane" target="_blank">GitHub</a>. Les visualisations 
+            ont été faites avec <a href="https://cindyjs.org/" target="_blank">CindyJS</a>. 
+        </p>
+    </body>
+</html>