dots-optimization

src/components/Dots.tsx

@@ -8,17 +8,22 @@ const Dots = () => {
 
   useEffect(() => {
     const dotSize:number = 4;
-    const spacing:number = dotSize * 16;
+    const spacing:number = dotSize * 8;
     const minTvalue:number = 50;
-    const areaAffected:number = 80;
+    const areaAffected:number = 50;
     let mouseIsMoving:boolean = false;
     let dots:any[] = [];
 
     const sketch = (p: p5) => {
+
+      p.disableFriendlyErrors = true;
+
       p.setup = () => {
-        p.createCanvas(p.windowWidth, document.documentElement.scrollHeight);
-        for (let i = 0; i < p.width; i += spacing) {
-          for (let j = 0; j < p.height; j += spacing) {
+        p.createCanvas(p.windowWidth, p.windowHeight);
+        for (let i = 0; i < p.width; i += spacing) 
+        {
+          for (let j = 0; j < p.height; j += spacing) 
+          {
             let dot = new Dot(i + spacing / 2, j + spacing / 2, dotSize);
             dots.push(dot);
           }

src/css/dots.module.css

@@ -1,6 +1,6 @@
 .background
 {
-    position: absolute;
+    position: fixed;
     z-index: -1;
     top: 0;
 }

src/css/terminal.module.css

@@ -2,13 +2,13 @@
 {
     height: 400px;
     width: 70%;
-    background-color: rgb(26, 26, 26);
+    background-color: rgb(39, 39, 39);
     color: white;
     box-sizing: border-box;
     font-size: 15px;
     overflow-y:auto;
     overflow-x: hidden;
-    border: 1px solid rgb(117, 117, 117);
+    border: 1px solid rgb(113, 113, 113);
 }
 
 .windowOptions