solved canvas overflow again

JayexDesigns · Jul 21, 2024 · c57df8f · c57df8f
1 parent 4d09f22
commit c57df8f
Show file tree

Hide file tree

Showing 8 changed files with 501 additions and 493 deletions.
diff --git a/config.js b/config.js
diff --git a/css/style.css b/css/style.css
@@ -2,16 +2,18 @@ body,
 body * {
 	margin: 0;
 	padding: 0;
+	overflow: hidden;
 }
 
-body {
+#root {
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	width: 100vw;
 	height: 100vh;
-	display: grid;
-	place-content: center;
 }
 
 canvas {
-	max-width: 100%;
-	max-height: 100%;
+	width: 100%;
+	height: 100%;
 }
diff --git a/index.html b/index.html
@@ -9,8 +9,10 @@
 		<title>Particles Background</title>
 	</head>
 	<body onload="changeCanvasColor()">
-		<canvas id="particlesCanvas"></canvas>
-		<script src="config.js"></script>
+		<div id="root">
+			<canvas id="particlesCanvas"></canvas>
+		</div>
+		<script src="js/config.js"></script>
 		<script src="js/stats.min.js"></script>
 		<script src="js/vector.js"></script>
 		<script src="js/script.js"></script>

diff --git a/js/config.js b/js/config.js
@@ -0,0 +1,21 @@
+let showFPS = false;
+let fpsLimit = 60;
+
+let transparentBackground = false;
+let backgroundColor1 = "#7b00ff";
+let backgroundColor2 = "#1a237e";
+
+let particleColor = "#ffffff";
+let lineColor = "#ffffff";
+
+let particleQuantity = 100;
+
+let particleRadius = 3;
+let lineWidth = 2;
+
+let minVelocity = 0.5;
+let maxVelocity = 2;
+
+let disapearOffset = 150; // Distance At Which The Particles Disapear (Leave It Equal To The maxDistOpacity For Smooth Transition)
+let minDistOpacity = 50; // Distance Between Particles At Which The Line Starts To Fade
+let maxDistOpacity = 150; // Distance Between Particles At Which The Line Is No Longer Visible
diff --git a/js/vector.js b/js/vector.js
@@ -1,71 +1,70 @@
 //Class Vector2D
 class Vector2D {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+	}
 
-    //Adds A Vector To The Instance Vector
-    add(vector) {
-        let x = this.x + vector.x;
-        let y = this.y + vector.y;
-        return new Vector2D(x, y);
-    }
+	//Adds A Vector To The Instance Vector
+	add(vector) {
+		let x = this.x + vector.x;
+		let y = this.y + vector.y;
+		return new Vector2D(x, y);
+	}
 
-    //Subtracts A Vector To The Instance Vector
-    sub(vector) {
-        let x = this.x - vector.x;
-        let y = this.y - vector.y;
-        return new Vector2D(x, y);
-    }
+	//Subtracts A Vector To The Instance Vector
+	sub(vector) {
+		let x = this.x - vector.x;
+		let y = this.y - vector.y;
+		return new Vector2D(x, y);
+	}
 
-    //Multiplies The Vector By A Scalar Or Another Vector
-    mul(arg) {
-        if (arg instanceof Vector2D) {
-            let x = this.x * arg.x;
-            let y = this.y * arg.y;
-            return new Vector2D(x, y);
-        }
-        else {
-            let x = this.x * arg
-            let y = this.y * arg
-            return new Vector2D(x, y);
-        }
-    }
+	//Multiplies The Vector By A Scalar Or Another Vector
+	mul(arg) {
+		if (arg instanceof Vector2D) {
+			let x = this.x * arg.x;
+			let y = this.y * arg.y;
+			return new Vector2D(x, y);
+		} else {
+			let x = this.x * arg;
+			let y = this.y * arg;
+			return new Vector2D(x, y);
+		}
+	}
 
-    //Divides The Vector By A Scalar
-    div(num) {
-        let x = this.x/num;
-        let y = this.y/num;
-        return new Vector2D(x, y);
-    }
+	//Divides The Vector By A Scalar
+	div(num) {
+		let x = this.x / num;
+		let y = this.y / num;
+		return new Vector2D(x, y);
+	}
 
-    //Returns The Module Of The Vector
-    abs() {
-        return Math.sqrt(this.x**2 + this.y**2);
-    }
+	//Returns The Module Of The Vector
+	abs() {
+		return Math.sqrt(this.x ** 2 + this.y ** 2);
+	}
 
-    //Calculates The Distance Of Two Points
-    dist(vector) {
-        let vec = this.sub(vector);
-        return vec.abs();
-    }
+	//Calculates The Distance Of Two Points
+	dist(vector) {
+		let vec = this.sub(vector);
+		return vec.abs();
+	}
 
-    //Calculates The Distance Of Two Points Squared (More Efficient) Thanks Two Quid ^^
-    squaredDist(vector) {
-        let vec = this.sub(vector);
-        return vec.x**2 + vec.y**2;
-    }
+	//Calculates The Distance Of Two Points Squared (More Efficient) Thanks Two Quid ^^
+	squaredDist(vector) {
+		let vec = this.sub(vector);
+		return vec.x ** 2 + vec.y ** 2;
+	}
 
-    //Returns A Vector That Has The Same Direction As The Instance But Has Module 1
-    norm() {
-        return new Vector2D(this.x/this.abs(), this.y/this.abs());
-    }
+	//Returns A Vector That Has The Same Direction As The Instance But Has Module 1
+	norm() {
+		return new Vector2D(this.x / this.abs(), this.y / this.abs());
+	}
 
-    //Returns The Max Value Of A Vector, Max Value Specified By The Parameter
-    max(num) {
-        let x = num * this.x/this.abs();
-        let y = num * this.y/this.abs();
-        return new Vector2D(x, y);
-    }
-}
+	//Returns The Max Value Of A Vector, Max Value Specified By The Parameter
+	max(num) {
+		let x = (num * this.x) / this.abs();
+		let y = (num * this.y) / this.abs();
+		return new Vector2D(x, y);
+	}
+}