From eaed718106a15f82d2be8cb15237797758a9770e Mon Sep 17 00:00:00 2001 From: Muggyfox1 <47337746+Muggyfox1@users.noreply.github.com> Date: Tue, 5 Apr 2022 15:03:57 -0400 Subject: [PATCH] set up some file things for skills display --- Sketches/Skills page/Skills Page.css | 13 ++++ Sketches/Skills page/Skills Page.html | 7 ++- Sketches/Skills page/Skills Page.js | 85 +++++++++++++++++++++++++++ Sketches/SnowDrops/SnowDrops.js | 2 +- 4 files changed, 105 insertions(+), 2 deletions(-) create mode 100644 Sketches/Skills page/Skills Page.css create mode 100644 Sketches/Skills page/Skills Page.js diff --git a/Sketches/Skills page/Skills Page.css b/Sketches/Skills page/Skills Page.css new file mode 100644 index 0000000..e73c44b --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/Sketches/Skills page/Skills Page.html b/Sketches/Skills page/Skills Page.html index 15d9a30..c88baf7 100644 --- a/Sketches/Skills page/Skills Page.html +++ b/Sketches/Skills page/Skills Page.html @@ -4,10 +4,15 @@ - Document + + Skills display + +

This page is under construction 😅

+ + \ No newline at end of file diff --git a/Sketches/Skills page/Skills Page.js b/Sketches/Skills page/Skills Page.js new file mode 100644 index 0000000..3d71316 --- /dev/null +++ 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 index d725789..8683d5f 100644 --- 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 }; }