asif/ab-particles
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

set colours via css variables

Browse Source
This commit is contained in:
Asif Bacchus 2020-04-08 04:47:22 -06:00
parent e937b17e17
commit 89263b1495
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/particles.js
View File

@ -5,6 +5,12 @@
const canvas = document.getElementById('particles'); const canvas = document.getElementById('particles');
const canvasContext = canvas.getContext('2d'); const canvasContext = canvas.getContext('2d');
// read css colour variables from root element
const particleColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle');
const strokeColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke');
const strokeHoverColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke-hover');
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
@ -37,7 +43,7 @@ class Particle{
draw(){ draw(){
canvasContext.beginPath(); canvasContext.beginPath();
canvasContext.arc(this.x, this.y, this.size, 0, Math.PI * 2, false); canvasContext.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
canvasContext.fillStyle = '#8c5523'; canvasContext.fillStyle = particleColour;
canvasContext.fill(); canvasContext.fill();
} }
// check particle position, mouse position, move particle and draw it // check particle position, mouse position, move particle and draw it
@ -107,10 +113,12 @@ function connect(){
let dy = mousePosition.y - particlesArray[a].y; let dy = mousePosition.y - particlesArray[a].y;
let mouseDistance = Math.sqrt((dx * dx) + (dy * dy)); let mouseDistance = Math.sqrt((dx * dx) + (dy * dy));
if (mouseDistance < 200) { if (mouseDistance < 200) {
canvasContext.strokeStyle = `rgba(60, 40, 15, ${opacityValue})`; canvasContext.globalAlpha = opacityValue;
canvasContext.strokeStyle = strokeHoverColour;
} }
else { else {
canvasContext.strokeStyle = `rgba(140, 85, 31, ${opacityValue})`; canvasContext.globalAlpha = opacityValue;
canvasContext.strokeStyle = strokeColour;
} }
canvasContext.lineWidth = 1; canvasContext.lineWidth = 1;
canvasContext.beginPath(); canvasContext.beginPath();

6
scss/_palette.scss
View File

@ -1,7 +1,7 @@
// colours used thoughout site // colours used thoughout site
:root { :root {
--col-bg-canvas: #2c2830; --col-bg-canvas: #2c2830;
--col-particle: #692e50; --col-particle: #ebe7c5;
--col-stroke: #692e50; --col-particle-stroke: #692e50;
--col-stroke-hover: #9aa68b; --col-particle-stroke-hover: #9aa68b;
} }