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;