From: Ben Beltran Date: Mon, 27 Jan 2020 22:02:04 +0000 (+0100) Subject: Merge branch 'develop' X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/commitdiff_plain/958f18f4af9ec5221d266698bd21992227eb630a?hp=42843f8a14874c2b062eb38b389ae267307f7c43 Merge branch 'develop' --- diff --git a/jekyll/_layouts/default.html b/jekyll/_layouts/default.html index 50fe27c..d382618 100644 --- a/jekyll/_layouts/default.html +++ b/jekyll/_layouts/default.html @@ -29,15 +29,9 @@
-

- Unlimited 🍕 Pizza -

+ Unlimited Pizza
-
-
- {{ content }} -
-
- + {{ content }} + diff --git a/jekyll/css/application.css b/jekyll/css/application.css index 171764c..43c15f8 100644 --- a/jekyll/css/application.css +++ b/jekyll/css/application.css @@ -12,21 +12,21 @@ header a, header a:visited { color: black; } -h2, -h3 { +h1, +h2 { display: inline-block; margin-left: 10px; font-weight: 300; } -h1 { +header { margin: -0.3em 0 0 -0.1em; font-size: 9.6em; font-style: italic; text-transform: uppercase; } -h2 { +h1 { font-size: 4.8em; } @@ -46,26 +46,27 @@ ul, p { font-family: 'Helvetica Neue', Arial, sans-serif; } -ul { - list-style: square; +li { + display: block; } -li { +li article { display: inline-block; line-height: 1.82em; } -aside { +span { display: inline; color: grey; } img, video { + display: block; max-width: 100vw; } -li, h2, h3, p { +header a, li article, h2, h3, p { background-color: white; } @@ -76,7 +77,7 @@ li, h2, h3, p { color: white; } - h1 a, h1 a:visited { + header a, header a:visited { color: white; } @@ -92,11 +93,11 @@ li, h2, h3, p { color: #55FF55; } - aside { + span { color: #FFEC27; } - li, h2, h3, p { + header a, li article, h1, h2, p { background-color: black; } } @@ -105,7 +106,7 @@ li, h2, h3, p { * Mini header */ @media (max-width: 600px) { - h1 { + header { font-size: 4.8em; } } diff --git a/jekyll/index.html b/jekyll/index.html index 2c3b8af..4a6bbe2 100644 --- a/jekyll/index.html +++ b/jekyll/index.html @@ -3,61 +3,63 @@ layout: default title: /index.html description: "unlimited.pizza - ruben beltran del río surfs the internet: programming, music, fun times, hugs, bad jokes, and unlimited pizza" --- -
-

Projects

+
+

Projects

  • Serpentity - : + (Ongoing): An entity framework for JavaScript.
  • Nginx Office Hours - : + (2019): A victory for the server's labor rights: An nginx module that allows you to serve your content only during office hours.
  • Flower - : - 🌹🌸🌺💐🌼🌻🌷 draw a flower rotating a cube 🌷🌻🌼💐🌺🌸🌹 + (2018): + + draw a flower rotating a cube +
  • Sorting Hat & Renderer - : + (2017): Reads your brain and places you in a category based on your mental activity
  • Dasein - : + (2017): Ephemeral posts experiment: the posts stay alive as the conversation continues, but disappear shortly after activity stops.
    @@ -65,20 +67,21 @@ description: "unlimited.pizza - ruben beltran del río surfs the internet: progr
  • Frames - : + (2017): 🆒
  • Dead Drop - : + (2017, Spanish): Marca un número de 📞 y deja un mensaje secreto, o escucha algo al azar. +
  • @@ -86,22 +89,22 @@ description: "unlimited.pizza - ruben beltran del río surfs the internet: progr
  • Heart - : + (2016): ❤️💜💙💛💚
  • Generador de Insultos - : + (2015, Spanish): Un generador de insultos multi-usos que te da un insulto nuevo cada vez que lo cargas.
    @@ -109,43 +112,43 @@ description: "unlimited.pizza - ruben beltran del río surfs the internet: progr
  • Grita - : + (2010, Spanish): Comparte texto anónimamente y distribuyelo con QR codes y URLs cortas.
  • Polarity - : + (2009): Top-down arena shooter game with magnetism.
  • Pico Engine - : + (2009): Platform game engine with lua scripting.
+
-

Even more stuff.

+
+

🌱.🏀.🐝

+ diff --git a/jekyll/js/breadsticks.js b/jekyll/js/breadsticks.js index 2675c0c..b42bc17 100644 --- 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) {