Use sparkly breadsticks

diff --git a/jekyll/js/breadsticks.js b/jekyll/js/breadsticks.js
index 2675c0ce0dcb12660f02214c3cde37adaf292296..b42bc17a847ec9afef08825ff417490d93413f6c 100644 (file)
--- a/jekyll/js/breadsticks.js
+++ b/jekyll/js/breadsticks.js
@@ -5,6 +5,8 @@ const kGap = 50;
 const kDrawDelay = 100;
 const kDarkDrawingColor = '#fff';
 const kLightDrawingColor = '#000';
+const kMaxVectorMagnitude = 150; // max size of a vector
+const kMagnitudeColorMultiplier = 2.5; // how large should the magnitude be before it's completely transparent
 
 /***********************************************
  * Breadstick generates a matrix of points
@@ -54,8 +56,8 @@ const updateFieldMatrixFromMouse = (field, matrix, gap = 50) => {
   fillMatrix(matrix, mousePosition.x, mousePosition.y, field.width, field.height, gap);
 
   const updateMousePosition = document.addEventListener('mousemove', (event) => {
-    mousePosition.x = event.offsetX;
-    mousePosition.y = event.offsetY;
+    mousePosition.x = event.clientX;
+    mousePosition.y = event.clientY;
     fillMatrix(matrix, mousePosition.x, mousePosition.y, field.width, field.height, gap);
   });
 };
@@ -78,13 +80,16 @@ const calculateOffsetVector = (sourceX, sourceY, targetX, targetY, w, h) => {
   const xOffset = targetX - sourceX;
   const yOffset = targetY - sourceY;
 
+  const calculatedMagnitude = Math.sqrt(Math.pow(xOffset, 2) + Math.pow(yOffset, 2));
+
   return {
     position: {
       x: targetX,
       y: targetY
     },
+    color: getColor(calculatedMagnitude),
     angle: Math.atan2(xOffset, yOffset),
-    magnitude: Math.sqrt(Math.pow(xOffset, 2) + Math.pow(yOffset, 2))
+    magnitude: Math.min(calculatedMagnitude, kMaxVectorMagnitude)
   };
 };
 
@@ -93,28 +98,30 @@ const calculateOffsetVector = (sourceX, sourceY, targetX, targetY, w, h) => {
  * Drawing
  */
 
-// draw a vector from center
+// draw a vector
 const drawVector = (context, i, j, vector) => {
-  const origin = {
-    x: context.canvas.width  / 2,
-    y: context.canvas.height / 2
-  };
-  const x = origin.x - vector.magnitude * Math.cos(vector.angle);
-  const y = origin.y - vector.magnitude * Math.sin(vector.angle);
+  const x = vector.position.x - vector.magnitude * Math.sin(vector.angle);
+  const y = vector.position.y - vector.magnitude * Math.cos(vector.angle);
+  context.strokeStyle = vector.color;
   context.beginPath();
   context.moveTo(vector.position.x, vector.position.y);
   context.lineTo(Math.round(x), Math.round(y));
   context.stroke();
 };
 
-// Gets the color depending on the team
+// Gets the color depending on the calculated magnitude
+// as well as the color scheme
+
+const getColor = (calculatedMagnitude) => {
+
+  let colorValue = Math.round(calculatedMagnitude * 255 / (kMaxVectorMagnitude * kMagnitudeColorMultiplier)) % 255;
 
-const getColor = () => {
   if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    return kDarkDrawingColor;
+    colorValue = 255 - colorValue % 255;
   }
 
-  return kLightDrawingColor;
+  // Initialize an array with the value, converts it to a hex string and joins it.
+  return `#${Array(3).fill(colorValue.toString(16)).join('')}`;
 };
 
 
@@ -122,7 +129,7 @@ const getColor = () => {
 
 const drawFieldMatrixOnCanvas = (matrix, context) => {
 
-  context.strokeStyle = getColor();
+  context.setLineDash([25, 10])
   context.clearRect(0, 0, context.canvas.width, context.canvas.height);
 
   for (let i = 0; i < matrix.length; ++i) {