Adjust canvas resolution to fit browser window

- Modified index.html to remove fixed dimensions - Updated main.js to use windowWidth and windowHeight - Implemented windowResized() function for dynamic resizing
parsaa74 · Oct 11, 2024 · 58de9eb · 58de9eb
1 parent 1249eb3
commit 58de9eb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -6,9 +6,15 @@
     <title>Post-Pandemic Loneliness</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
     <script src="main.js"></script>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+    </style>
 </head>
 <body>
-    <h1>Post-Pandemic Loneliness Simulator</h1>
-    <p>Click to add people. Watch how they interact (or don't) in a post-pandemic world.</p>
+    <!-- Remove the h1 and p tags if you want the canvas to take up the full page -->
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -71,6 +71,6 @@ function displayLonelinessMetric() {
 
   fill(0);
   textSize(16);
-  text(`Loneliness Score: ${lonelinessScore.toFixed(2)}`, width / 2, 20);
-  text(`People: ${people.length}`, width / 2, 40);
+  text(`Loneliness Score: ${lonelinessScore.toFixed(2)}`, width / 2, height - 40);
+  text(`People: ${people.length}`, width / 2, height - 20);
 }