Add responsiveness and styling

97x · Nov 20, 2024 · e089b2d · e089b2d
1 parent d79ac60
commit e089b2d
Showing 1 changed file with 31 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -3,41 +3,42 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Responsive Penrose Tiling</title>
+    <title>Penrose Tiling</title>
     <style>
         html, body {
             height: 100%;
             margin: 0;
             font-family: Arial, sans-serif;
             background-color: #f0f8ff;
+            padding: 20px 0;
+            box-sizing: border-box;
         }
 
         #wrapper {
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: center;
+            justify-content: flex-start;
             height: 100%;
+            box-sizing: border-box;
         }
 
         canvas {
             display: block;
             background-color: #ffffff;
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            width: 90%; /* Responsive width */
-            max-width: 700px; /* Maximum width for larger screens */
-            height: auto; /* Maintain aspect ratio */
+            margin-top: auto;
         }
 
         #info {
-            margin-bottom: 20px;
             text-align: center;
             color: #333;
+            margin-bottom: 10px;
         }
 
         h1 {
             font-size: 2rem;
-            margin: 0;
+            margin: 10px 0;
         }
 
         p {
@@ -49,7 +50,7 @@
 <body>
     <div id="wrapper">
         <div id="info">
-            <h1>Responsive Penrose Tiling</h1>
+            <h1>Penrose Tiling Generation</h1>
             <p id="current-depth">Depth: 0</p>
         </div>
         <canvas id="main"></canvas>
@@ -63,18 +64,23 @@ <h1>Responsive Penrose Tiling</h1>
         let currentDepth = 0;
         const maxDepth = 8;
 
-        // Color sets for variety
-        const colorSets = [
+        // Colour sets for variety
+        const colourSets = [
             ["#4682b4", "#ff6347"],
             ["#2e8b57", "#ffa500"],
             ["#8a2be2", "#deb887"],
             ["#556b2f", "#dc143c"],
             ["#ff69b4", "#1e90ff"],
             ["#8b4513", "#7fffd4"],
             ["#d2691e", "#ff7f50"],
-            ["#32cd32", "#ba55d3"],
+            ["#ec7d10", "#FFBC0A"],
+            ["#818aa3", "#A491D3"],
+            ["#f5f2b8", "#f9dad0"],
+            ["#639A88", "#3A5683"],
+            ["#E94F37", "#393E41"],
+            ["#EB8258", "#995D81"],
         ];
-        let currentColorSetIndex = 0;
+        let currentColourSetIndex = 0;
 
         class Vector {
             constructor(x, y) {
@@ -96,15 +102,15 @@ <h1>Responsive Penrose Tiling</h1>
         }
 
         class Triangle {
-            constructor(v1, v2, v3, fillColor) {
+            constructor(v1, v2, v3, fillColour) {
                 this.v1 = v1;
                 this.v2 = v2;
                 this.v3 = v3;
-                this.fillColor = fillColor;
+                this.fillColour = fillColour;
             }
 
             draw(ctx) {
-                ctx.fillStyle = this.fillColor;
+                ctx.fillStyle = this.fillColour;
                 ctx.beginPath();
                 ctx.moveTo(this.v1.x, this.v1.y);
                 ctx.lineTo(this.v2.x, this.v2.y);
@@ -120,7 +126,7 @@ <h1>Responsive Penrose Tiling</h1>
 
         class ThinLeftTriangle extends Triangle {
             constructor(v1, v2, v3) {
-                super(v1, v2, v3, colorSets[currentColorSetIndex][0]);
+                super(v1, v2, v3, colourSets[currentColourSetIndex][0]);
             }
 
             split() {
@@ -136,7 +142,7 @@ <h1>Responsive Penrose Tiling</h1>
 
         class ThinRightTriangle extends Triangle {
             constructor(v1, v2, v3) {
-                super(v1, v2, v3, colorSets[currentColorSetIndex][0]);
+                super(v1, v2, v3, colourSets[currentColourSetIndex][0]);
             }
 
             split() {
@@ -152,7 +158,7 @@ <h1>Responsive Penrose Tiling</h1>
 
         class ThickLeftTriangle extends Triangle {
             constructor(v1, v2, v3) {
-                super(v1, v2, v3, colorSets[currentColorSetIndex][1]);
+                super(v1, v2, v3, colourSets[currentColourSetIndex][1]);
             }
 
             split() {
@@ -172,7 +178,7 @@ <h1>Responsive Penrose Tiling</h1>
 
         class ThickRightTriangle extends Triangle {
             constructor(v1, v2, v3) {
-                super(v1, v2, v3, colorSets[currentColorSetIndex][1]);
+                super(v1, v2, v3, colourSets[currentColourSetIndex][1]);
             }
 
             split() {
@@ -191,15 +197,16 @@ <h1>Responsive Penrose Tiling</h1>
         }
 
         function resizeCanvas() {
-            canvas.width = Math.min(window.innerWidth * 0.9, 700);
-            canvas.height = canvas.width; // Keep it square
+            const size = Math.min(window.innerWidth * 0.9, window.innerHeight * 0.8 - 60); // Adjust for header and padding
+            canvas.width = size;
+            canvas.height = size; // Keep square
         }
 
         function drawPenroseTiling(depth) {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
 
             const triangles = [];
-            const side = Math.min(canvas.width, canvas.height);
+            const side = canvas.width;
             const center = new Vector(side / 2, side / 2);
 
             const radius = side / 2;
@@ -229,10 +236,10 @@ <h1>Responsive Penrose Tiling</h1>
                 currentDepth++;
             } else {
                 currentDepth = 0;
-                currentColorSetIndex = (currentColorSetIndex + 1) % colorSets.length; // Cycle colors
+                currentColourSetIndex = (currentColourSetIndex + 1) % colourSets.length; // Cycle colours
             }
 
-            setTimeout(cycleDepths, 4000);
+            setTimeout(cycleDepths, 3000); // Delay between cycles
         }
 
         window.onresize = () => {