Completed centering of elements

Sam-MARTis · Feb 21, 2024 · fc2d69b · fc2d69b
1 parent 1e17e83
commit fc2d69b
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 34 deletions.
diff --git a/src/components/top-components/SliderCardsGroup.jsx b/src/components/top-components/SliderCardsGroup.jsx
@@ -37,19 +37,28 @@ const SliderCardsGroup = () => {
               posState={cardState[0]}
               idVal={"Chaos Attractors!"}
               idIndex={1}
-              handleClick={handleCardClick} id="chaos"
-            ><button id="pauseButton">Pause</button></Card>
+              handleClick={handleCardClick}
+              id="chaos"
+            >
+              <button id="pauseButton">Pause</button>
+              <button id="lorenz">lorenz</button>
+
+              <button id="chen">chen</button>
+              <button id="halvorsen">halvorsen</button>
+            </Card>
             <Card
               posState={cardState[1]}
               idVal={"Fractal Generator!"}
               idIndex={2}
-              handleClick={handleCardClick} id="fractal"
+              handleClick={handleCardClick}
+              id="fractal"
             ></Card>
             <Card
               posState={cardState[2]}
               idVal={"Network Fields!"}
               idIndex={3}
-              handleClick={handleCardClick} id="flow"
+              handleClick={handleCardClick}
+              id="flow"
             />
           </div>
         </div>

diff --git a/src/scripts/ChaosAttractor.js b/src/scripts/ChaosAttractor.js
@@ -1,7 +1,7 @@
 console.log("Jello?");
 const doChaos = () => {
   //Declaring some letiables and parameters
-  let pause = 0;
+  let pause = 1;
   let unitVel = 100; //used to normalize pen velocity. normalvel = penvel/unitVel
   let ff = 0; //Boolean. fast forward
   let timeDelay = 1; //How quickly it draws lines
@@ -12,8 +12,12 @@ const doChaos = () => {
   button.addEventListener("click", () => {
     pause = !pause;
   });
+  let card1 = document.getElementById("chaos");
   let card2 = document.getElementById("fractal");
   let card3 = document.getElementById("flow");
+  card1.addEventListener("click", () => {
+    pause = 0;
+  });
   card2.addEventListener("click", () => {
     pause = 1;
   });
@@ -35,7 +39,8 @@ const doChaos = () => {
   c.lineWidth = 1;
 
   // The below line is what resizes the graph to fit screensize in all devices.
-  let scaleFactor = Math.min(canvas.height / 968, canvas.width / 1260);
+  // let scaleFactor = Math.min(canvas.height / 968, canvas.width / 1260);
+  let scaleFactor =((canvas.width, canvas.height/2))/500;
 
   //More letiables. r, g, b are declared to make a gradient depending on pen velocity
   let state = 2;
@@ -132,22 +137,16 @@ const doChaos = () => {
     let count = 0;
 
     const animate = () => {
-      console.log("Pause From animate " + pause)
-      if (count >= k || pause == 1) {
-        console.log("Paused, Retruning from function");
-      }
-      else {
-
-
+      if (count < k && pause == 0) {
         if (state === 0) {
           move(normalizeX(x), normalizeY(z), { r: r, g: g, b: b });
         }
         if (state === 1) {
-          move(
-            normalizeX(y) * 1.86 - normalizeX(x) * 0.86,
-            normalizeY(z),
-            { r: r, g: g, b: b }
-          );
+          move(normalizeX(y) * 1.86 - normalizeX(x) * 0.86, normalizeY(z), {
+            r: r,
+            g: g,
+            b: b,
+          });
         }
 
         let dfxdt = dxdt(x, y, z);
@@ -170,27 +169,25 @@ const doChaos = () => {
     animate();
   };
 
-  const checkActive = () => {
-    console.log("Paused: " + pause);
-  };
-  setInterval(checkActive, 1000);
-
   //Depending on which attractor is called, different normalization equations, differential equations and time steps are used
   const lorenz = () => {
     //Starting positions for lorenz attractor
     x = -7.13;
     y = -7.11;
     z = 25.41;
+    let x_start = x;
+    let y_start = y;
+    let z_start = z;
     state = 0;
 
-    std_dt = 0.003;
+    std_dt = 0.004;
     dt = std_dt;
     unitVel = 100;
     normalizeX = (x) => {
-      return window.innerWidth / 2 + 30 * scaleFactor * (x - 12);
+      return canvas.width/ 2 + 30 * scaleFactor * (x-y_start -3);
     };
     normalizeY = (y) => {
-      return window.innerHeight / 2 - 18 * scaleFactor * (y - 25 * scaleFactor);
+      return canvas.height / 2 - 18 * scaleFactor * (y - z_start-6);
     };
     prev_pos = { x: normalizeX(y), y: normalizeY(z) };
 
@@ -210,19 +207,23 @@ const doChaos = () => {
   const chen = () => {
     //Starting positions for chen attractor
     x = 1.96;
+
     y = 2.04;
     z = 12.51;
+    let x_start = x;
+    let y_start = y;
+    let z_start = z;
     state = 0;
 
     std_dt = 0.0004; //Chen attractor is more sensitive
     dt = std_dt;
     unitVel = 1500;
 
     normalizeX = (x) => {
-      return window.innerWidth / 2 + 20 * scaleFactor * x;
+      return canvas.width/ 2 + 20 * scaleFactor * (x-x_start);
     };
     normalizeY = (y) => {
-      return window.innerHeight / 2 - 20 * scaleFactor * (y - 20 * scaleFactor);
+      return canvas.height / 2 - 20 * scaleFactor * (y-z_start -8);
     };
     prev_pos = { x: normalizeX(x), y: normalizeY(z) };
 
@@ -247,17 +248,20 @@ const doChaos = () => {
     x = -1.48;
     y = -1.51;
     z = 2.04;
+    let x_start = x;
+    let y_start = y;
+    let z_start = z;
     state = 1;
 
     std_dt = 0.001; //Chen attractor is more sensitive
     dt = std_dt;
     unitVel = 60;
 
     normalizeX = (t) => {
-      return window.innerWidth / (2 * 1.36) + 10 * scaleFactor * (t + 20);
+      return canvas.width/ (2) + 10 * scaleFactor * (t -y_start);
     };
     normalizeY = (t) => {
-      return window.innerHeight / (2 * 1.36) - 20 * scaleFactor * t;
+      return canvas.height / (2 ) - 20 * scaleFactor * (t -z_start);
     };
     prev_pos = { x: normalizeX(y), y: normalizeY(z) };
 
@@ -275,6 +279,32 @@ const doChaos = () => {
     proceed(Math.round(900000 * scaleFactor ** 0.2));
   };
 
+  document.getElementById("lorenz").addEventListener("click", () => {
+    clearScreen();
+    lorenz();
+    speedUp();
+    setTimeout(() => {
+      clearScreen();
+    }, 50);
+  });
+
+  document.getElementById("chen").addEventListener("click", () => {
+    clearScreen();
+    chen();
+    speedUp();
+    setTimeout(() => {
+      clearScreen();
+    }, 50);
+  });
+  document.getElementById("halvorsen").addEventListener("click", () => {
+    clearScreen();
+    halvorsen();
+    speedUp();
+    setTimeout(() => {
+      clearScreen();
+    }, 50);
+  });
+
   //Controls functionality of buttons
   speedUp();
   lorenz();

diff --git a/src/styles/Card.css b/src/styles/Card.css
@@ -2,13 +2,16 @@
     position: absolute;
     height: 400px;
     width: 300px;
+    top:0;
+    bottom:0;
     border-radius: 40px;
     color: black;
     background-color:white;
     z-index: 2;
     transition-duration: 1s;
     transition-timing-function: ease-in-out;
-    top:100px;
+    margin: auto 0;
+
 }
 .card:hover{
     /* transition-duration: 0.1s; */

diff --git a/src/styles/SliderCardsGroup.css b/src/styles/SliderCardsGroup.css
@@ -3,19 +3,20 @@
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
-    width: 60%;
+    width: 65%;
     height: 100%;
     left:0px
 
 }
 .cardContainerGroup{
     position: absolute;
     right: 0px;
-    width: 40%;
+    width: 35%;
     height: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
 }
 .projectContainerGroup{
     position: absolute;