From 21e7e60f51cdeef0cdda4eb09fb75875c7d70232 Mon Sep 17 00:00:00 2001
From: parsaa74 <parsaazari21@gmail.com>
Date: Fri, 11 Oct 2024 17:10:47 +0330
Subject: [PATCH] Add canvas resizing functionality for responsive design

- Implement windowResized() function to handle window size changes
- Adjust canvas size dynamically to fill the browser window
- Ensure proper display of simulation elements after resizing
---
 main.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/main.js b/main.js
index 873c82d..850f255 100644
--- a/main.js
+++ b/main.js
@@ -3,7 +3,9 @@ const socialDistancingRadius = 50;
 const interactionRadius = 30;
 
 function setup() {
-  createCanvas(800, 600);
+  // Create a responsive canvas that fills the browser window
+  let canvas = createCanvas(windowWidth, windowHeight);
+  canvas.style('display', 'block'); // Removes the scrollbars
   textAlign(CENTER, CENTER);
 }
 
@@ -73,4 +75,9 @@ function displayLonelinessMetric() {
   textSize(16);
   text(`Loneliness Score: ${lonelinessScore.toFixed(2)}`, width / 2, height - 40);
   text(`People: ${people.length}`, width / 2, height - 20);
+}
+
+// Add this function to handle window resizing
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
 }
\ No newline at end of file