set up some file things for skills display

Muggyfox1 · Apr 5, 2022 · eaed718 · eaed718
1 parent edddf5e
commit eaed718
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 2 deletions.
diff --git a/Sketches/Skills page/Skills Page.css b/Sketches/Skills page/Skills Page.css
@@ -0,0 +1,13 @@
+h1 {
+    margin-top:40vh;
+    color:white;
+    outline:1px;
+    text-align:center;
+  }
+
+  #c{
+    position:fixed;
+    top:0;
+    left:0;
+    z-index:-1;
+  }
diff --git a/Sketches/Skills page/Skills Page.html b/Sketches/Skills page/Skills Page.html
@@ -4,10 +4,15 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="./Skills Page.css">
+    <title>Skills display</title>
 </head>
+
 <body>
+    <canvas id="c"></canvas>
     <h1 style="text-align: center;">This page is under construction 😅</h1>
 </body>
+
 <script src="/JavaScript/AddHomeButton.js"></script>
+<script src="./Skills Page.js"></script>
 </html>
diff --git a/Sketches/Skills page/Skills Page.js b/Sketches/Skills page/Skills Page.js
@@ -0,0 +1,85 @@
+//Variables
+let c = document.querySelector("#c");
+let ctx = c.getContext("2d");
+updateCanvas();
+
+let mousePosition = {"x":0,"y":0};
+let DRAW_INTERVAL = 10;
+
+let particles = [];
+particles.push(Particle("red", Math.random() * 10));
+particles.push(Particle("blue", Math.random() * 10));
+particles.push(Particle("green", Math.random() * 10));
+particles.push(Particle("yellow", Math.random() * 10));
+particles.push(Particle("cyan", Math.random() * 10));
+particles.push(Particle("purple", Math.random() * 10));
+particles.push(Particle("red", Math.random() * 10));
+particles.push(Particle("blue", Math.random() * 10));
+particles.push(Particle("green", Math.random() * 10));
+particles.push(Particle("yellow", Math.random() * 10));
+particles.push(Particle("cyan", Math.random() * 10));
+particles.push(Particle("purple", Math.random() * 10));
+
+
+//Set up functions
+setInterval(drawFrame, DRAW_INTERVAL);
+c.addEventListener("mousemove",updateMouse);
+
+//Functions
+function drawFrame(){
+    //update width and height of canvas
+    updateCanvas();
+
+    //draw background
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, c.width + 10, c.height + 10); //+ 10 because of white edges that may appear.
+
+    //update and draw particles
+
+    particles.forEach(p => {
+        updateParticle(p);
+        drawParticle(p);
+    });
+
+}
+
+function updateCanvas(){
+    c.width = window.innerWidth;
+    c.height = window.innerHeight;
+}
+
+function updateMouse(e){
+    mousePosition.x = e.pageX;
+    mousePosition.y = e.pageY;
+}
+
+function drawParticle(p){
+    if(p.size > 0){
+        ctx.beginPath();
+        ctx.fillStyle = p.color;
+        ctx.ellipse(p.position.x, p.position.y, 
+                    p.size, p.size,
+                    0, 0, 2*Math.PI);
+        ctx.fill();
+    }
+}
+
+//Particle methods
+function Particle(color, startSize){
+    return {color:color, 
+            size:startSize, 
+            position:{x:Math.random() * c.width, y:Math.random() * c.height},
+            shrinking:false};
+}
+
+function updateParticle(p, i){
+    let changeValue = .025;
+    p.size -= p.shrinking? -changeValue: changeValue;
+    if(p.size <= 0 || p.size >= 10){
+        p.shrinking = !p.shrinking;
+    }
+
+    if(p.size <= 0){
+        p.position = {x:Math.random() * c.width, y:Math.random() * c.height};
+    }
+}
diff --git a/Sketches/SnowDrops/SnowDrops.js b/Sketches/SnowDrops/SnowDrops.js
@@ -60,7 +60,7 @@ function drawParticle(p){
 function Particle(){
     return {size:Math.random() * 7.5, 
             position:{x:Math.random() * c.width, y:Math.random() * c.height},
-            speed:Math.random() / 2
+            speed:(Math.random() + 0.5) / 2
         };
 }