From: Ben Beltran <redacted>
Date: Sun, 10 Nov 2019 17:27:16 +0000 (+0100)
Subject: Add breadsticks and new selfie
X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/commitdiff_plain/beaf29131ab0c363a235f63c2c1a197fed5a3976?hp=--cc

Add breadsticks and new selfie
---

beaf29131ab0c363a235f63c2c1a197fed5a3976
diff --git a/jekyll/_layouts/default.html b/jekyll/_layouts/default.html
index 93a352d..50fe27c 100644
--- a/jekyll/_layouts/default.html
+++ b/jekyll/_layouts/default.html
@@ -18,7 +18,7 @@
       <link rel="stylesheet" type="text/css" href="/css/application.css">
     </noscript>
 
-    <script src="/js/offline_support.js" defer></script>
+    <script src="/js/breadsticks.js" defer></script>
 
     <!--
         /\
@@ -38,5 +38,6 @@
         {{ content }}
       </section>
     </div>
+    <canvas id="breadsticks" class="background"></canvas>
   </body>
 </html>
diff --git a/jekyll/css/application.css b/jekyll/css/application.css
index 5084deb..171764c 100644
--- a/jekyll/css/application.css
+++ b/jekyll/css/application.css
@@ -14,6 +14,7 @@ header a, header a:visited {
 
 h2,
 h3 {
+  display: inline-block;
   margin-left: 10px;
   font-weight: 300;
 }
@@ -50,6 +51,7 @@ ul {
 }
 
 li {
+  display: inline-block;
   line-height: 1.82em;
 }
 
@@ -63,6 +65,10 @@ video {
   max-width: 100vw;
 }
 
+li, h2, h3, p {
+  background-color: white;
+}
+
 /* Dark mode overrides */
 @media (prefers-color-scheme: dark) {
   body {
@@ -89,4 +95,29 @@ video {
   aside {
     color: #FFEC27;
   }
+
+  li, h2, h3, p {
+    background-color: black;
+  }
+}
+
+/*
+ * Mini header
+ */
+@media (max-width: 600px) {
+  h1 {
+    font-size: 4.8em;
+  }
+}
+
+/*
+ * Breadsticks
+ */
+canvas.background {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
 }
diff --git a/jekyll/img/selfie.gif b/jekyll/img/selfie.gif
index 42b0d1f..8026530 100644
Binary files a/jekyll/img/selfie.gif and b/jekyll/img/selfie.gif differ
diff --git a/jekyll/index.html b/jekyll/index.html
index b20ae4b..2c3b8af 100644
--- a/jekyll/index.html
+++ b/jekyll/index.html
@@ -131,13 +131,15 @@ description: "unlimited.pizza - ruben beltran del río surfs the internet: progr
 
   <h2>Even more stuff.</h2>
 
-  <video autoplay muted loop>
-    <source src="/video/selfie.webm" type="video/webm">
-    <source src="/video/selfie.mp4" type="video/mp4">
-  </video>
+  <div>
+    <video autoplay muted loop>
+      <source src="/video/selfie.webm" type="video/webm">
+      <source src="/video/selfie.mp4" type="video/mp4">
+    </video>
+  </div>
 
-  <p>🍕 Unlimited pizza 🍕 is brought to you by blood magic, ancient rituals and
-  me, Rubén Beltrán del Río. I have words written <span lang="es-mx">(español e inglés)</span> on
+  <p>🍕 Unlimited pizza 🍕 Rubén Beltrán del Río. I have words written
+  <span lang="es-mx">(español e inglés)</span> on
   <a href="https://medium.com/@expertosenbing">medium</a>,
   spoken in <a href="https://www.youtube.com/playlist?list=PLYxitPB3WXb1B4zPAsj92l9ay5pBOyynt">a handy playlist</a>,
   music at <a href="https://soundcloud.com/benbeltran">soundcloud</a>
diff --git a/jekyll/js/breadsticks.js b/jekyll/js/breadsticks.js
new file mode 100644
index 0000000..2675c0c
--- /dev/null
+++ b/jekyll/js/breadsticks.js
@@ -0,0 +1,166 @@
+// App Config
+
+const kEntrypoint = "breadsticks";
+const kGap = 50;
+const kDrawDelay = 100;
+const kDarkDrawingColor = '#fff';
+const kLightDrawingColor = '#000';
+
+/***********************************************
+ * Breadstick generates a matrix of points
+ * and assigns a vector to each entry
+ * and then draws them
+ ***********************************************/
+
+/*
+ * Generate field of points in which to draw
+ */
+
+// Updates the field object using a canvas
+
+const updateFieldFromCanvas = (field, canvas) => {
+  updateFieldFromRect(field, canvas.getBoundingClientRect());
+
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    updateFieldFromRect(field, canvas.getBoundingClientRect());
+  });
+};
+
+// Updates a field object using a rect
+
+const updateFieldFromRect = (field, rect) => {
+  field.width = rect.width;
+  field.height = rect.height;
+}
+
+/*
+ * Generate the matrix of vectors
+ */
+
+// Updates a matrix for a given field using the mouse
+
+
+const updateFieldMatrixFromMouse = (field, matrix, gap = 50) => {
+  const mousePosition = {
+    x: 0,
+    y: 0
+  };
+
+  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;
+    fillMatrix(matrix, mousePosition.x, mousePosition.y, field.width, field.height, gap);
+  });
+};
+
+// Gets a matrix by calculating the offset between position and field.
+
+const fillMatrix = (matrix, x, y, w, h, gap = 50) => {
+  for (let i = 0; i < w / gap; ++i) {
+    matrix[i] = [];
+    for (let j = 0; j < h / gap; ++j) {
+      let targetX = i * gap;
+      let targetY = j * gap;
+      matrix[i][j] = calculateOffsetVector(x, y, targetX, targetY, w, h);
+    }
+  }
+};
+
+// Calculates the offset vector of a point
+const calculateOffsetVector = (sourceX, sourceY, targetX, targetY, w, h) => {
+  const xOffset = targetX - sourceX;
+  const yOffset = targetY - sourceY;
+
+  return {
+    position: {
+      x: targetX,
+      y: targetY
+    },
+    angle: Math.atan2(xOffset, yOffset),
+    magnitude: Math.sqrt(Math.pow(xOffset, 2) + Math.pow(yOffset, 2))
+  };
+};
+
+
+/*
+ * Drawing
+ */
+
+// draw a vector from center
+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);
+  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
+
+const getColor = () => {
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return kDarkDrawingColor;
+  }
+
+  return kLightDrawingColor;
+};
+
+
+// Draws field on canvas
+
+const drawFieldMatrixOnCanvas = (matrix, context) => {
+
+  context.strokeStyle = getColor();
+  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+
+  for (let i = 0; i < matrix.length; ++i) {
+    const row = matrix[i];
+    for (let j = 0; j < row.length; ++j) {
+      const vector = row[j]
+
+      if (vector) {
+        drawVector(context, i, j, vector);
+      }
+    }
+  }
+};
+
+/*
+ * Entrypoint
+ */
+
+const run = () => {
+
+  const field = {
+    width: 0,
+    height: 0
+  };
+  const canvas = document.getElementById(kEntrypoint);
+
+  updateFieldFromCanvas(field, canvas);
+
+  const matrix = [[]];
+  updateFieldMatrixFromMouse(field, matrix, kGap);
+
+  const context = canvas.getContext('2d');
+  const drawFunction = () => {
+    drawFieldMatrixOnCanvas(matrix, context);
+    setTimeout(drawFunction, kDrawDelay);
+  }
+
+  setTimeout(drawFunction, 0);
+};
+
+window.addEventListener('load', run);
diff --git a/jekyll/video/selfie.mp4 b/jekyll/video/selfie.mp4
index 1d9edd8..9c05264 100644
Binary files a/jekyll/video/selfie.mp4 and b/jekyll/video/selfie.mp4 differ
diff --git a/jekyll/video/selfie.webm b/jekyll/video/selfie.webm
index 0aa93b3..d9c9e9e 100644
Binary files a/jekyll/video/selfie.webm and b/jekyll/video/selfie.webm differ