From fc2d69bbc11e3acfe12bf1445d7b507cb990ee56 Mon Sep 17 00:00:00 2001 From: Sam-MARTis Date: Wed, 21 Feb 2024 11:47:23 +0530 Subject: [PATCH] Completed centering of elements --- .../top-components/SliderCardsGroup.jsx | 17 +++- src/scripts/ChaosAttractor.js | 82 +++++++++++++------ src/styles/Card.css | 5 +- src/styles/SliderCardsGroup.css | 7 +- 4 files changed, 77 insertions(+), 34 deletions(-) diff --git a/src/components/top-components/SliderCardsGroup.jsx b/src/components/top-components/SliderCardsGroup.jsx index caee513..e0f23c1 100644 --- 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" - > + handleClick={handleCardClick} + id="chaos" + > + + + + + + diff --git a/src/scripts/ChaosAttractor.js b/src/scripts/ChaosAttractor.js index 37e0432..2fd0f75 100644 --- 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,8 +207,12 @@ 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 @@ -219,10 +220,10 @@ const doChaos = () => { 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,6 +248,9 @@ 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 @@ -254,10 +258,10 @@ const doChaos = () => { 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 index ceb23c8..d4e65fe 100644 --- 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 index f8fbb01..1377f0a 100644 --- a/src/styles/SliderCardsGroup.css +++ b/src/styles/SliderCardsGroup.css @@ -3,7 +3,7 @@ display: flex; flex-direction: row; justify-content: space-evenly; - width: 60%; + width: 65%; height: 100%; left:0px @@ -11,11 +11,12 @@ .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;