add screenshots and increase ui size

lischilpp · Jun 21, 2024 · 4b2266e · 4b2266e
1 parent f21a869
commit 4b2266e
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -7,3 +7,6 @@ You can enter any arbitrary numbers for the four matrix values, and the resultin
  [Interactive Page](https://lischilpp.github.io/Linear-Transformation-Plotter)
 
  # Screenshots
+![](screenshots/identity.png)
+![](screenshots/skew_y.png)
+![](screenshots/mirror_x.png)
diff --git a/index.html b/index.html
@@ -1,11 +1,13 @@
 <script src="index.js"></script>
 <style>
     canvas {
-        margin: 10px;
+        display: block;
+        margin: 30px auto;
     }
 
     #control {
-        margin-left: 90px;
+        margin: 30px;
+        text-align: center;
     }
 
     input {
@@ -21,7 +23,7 @@
     <input type="number" id="a21" value="0">
     <input type="number" id="a22" value="1">
 </div>
-<canvas id="canvas" width="256" height="256">
+<canvas id="canvas" width="512" height="512">
 
 </canvas>
 </body>
diff --git a/index.js b/index.js
@@ -11,7 +11,7 @@ var F = [
     new vec(1, 1)
 ]
 
-var scale = 20;
+var scale = 20; // scaling of the shape
 var can, ctx, halfWidth, halfHeight;
 
 var a11, a12, a21, a22

diff --git a/screenshots/identity.png b/screenshots/identity.png
diff --git a/screenshots/mirror_x.png b/screenshots/mirror_x.png
diff --git a/screenshots/skew_y.png b/screenshots/skew_y.png