title: /index.html
description: "unlimited.pizza - ruben beltran del río surfs the internet: programming, music, fun times, hugs, bad jokes, and unlimited pizza"
---
-<div>
- <h2> Projects</h2>
+<main title="Projects">
+ <h1>Projects</h1>
<ul>
<li>
<article>
<a href="http://blog.unlimited.pizza">blog</a>
- <aside>(Ongoing)</aside>:
+ <span>(Ongoing)</span>:
My blog. Only 3 posts at a time.
- <a href="https://gitlab.com/rbdr/blog">See the source</a>.
+ <a aria-label="See the source of my blog" href="https://gitlab.com/rbdr/blog">See the source</a>.
</article>
</li>
<li>
<article>
<a href="https://gitlab.com/serpentity">Serpentity</a>
- <aside>(Ongoing)</aside>:
+ <span>(Ongoing)</span>:
An entity framework for JavaScript.
</article>
</li>
<li>
<article>
- <a href="https://gitlab.com/rbdr/api-notation.vim">API Notation for vim</a>,
+ <a href="https://gitlab.com/rbdr/api-notation.vim">API notation for vim</a>,
<a href="https://gitlab.com/rbdr/api-notation-atom">atom</a>, &
<a href="https://gitlab.com/rbdr/api-notation.vscode">vscode</a>, &
<a href="https://gitlab.com/rbdr/api-notation.tmLanguage">sublime text</a>
- <aside>(Ongoing)</aside>:
+ <span>(Ongoing)</span>:
A syntax for notating component APIs in a way that's easy to embed in text documents.
</article>
</li>
<li>
<article>
<a href="https://gitlab.com/rbdr/ngx_http_office_hours_filter_module">Nginx Office Hours</a>
- <aside>(2019)</aside>:
+ <span>(2019)</span>:
A victory for the server's labor rights: An nginx module that allows you to serve your content only during office hours.
</article>
</li>
<li>
<article>
<a href="https://flower.unlimited.pizza">Flower</a>
- <aside>(2018)</aside>:
- 🌹🌸🌺💐🌼🌻🌷 draw a flower rotating a cube 🌷🌻🌼💐🌺🌸🌹
+ <span>(2018)</span>:
+ <span aria-hidden="true">🌹🌸🌺💐🌼🌻🌷</span>
+ draw a flower rotating a cube
+ <span aria-hidden="true">🌷🌻🌼💐🌺🌸🌹</span>
</article>
</li>
<li>
<article>
<a href="https://gitlab.com/rbdr/sorting-hat">Sorting Hat</a>
& <a href="https://gitlab.com/rbdr/sorting-hat-renderer">Renderer</a>
- <aside>(2017)</aside>:
+ <span>(2017)</span>:
Reads your brain and places you in a category based on your mental activity
</article>
</li>
<li>
<article>
<a href="https://gitlab.com/rbdr/dasein">Dasein</a>
- <aside>(2017)</aside>:
+ <span>(2017)</span>:
Ephemeral posts experiment: the posts stay alive as the conversation
continues, but disappear shortly after activity stops.
</article>
<li>
<article>
<a href="https://frames.unlimited.pizza">Frames</a>
- <aside>(2017)</aside>:
+ <span>(2017)</span>:
🆒
</article>
</li>
<li lang="es-MX">
<article>
<a href="https://gitlab.com/rbdr/dead-drop/">Dead Drop</a>
- <aside>(2017, Spanish)</aside>:
+ <span>(2017, Spanish)</span>:
Marca un número de 📞 y deja un mensaje secreto, o escucha algo al azar.
+ </article>
</li>
<li>
<article>
<a href="telnet:unlimited.pizza:7777">telnet unlimited.pizza 7777</a>
- <aside>(2016)</aside>:
+ <span>(2016)</span>:
a random work of ansi art. Better with 24-bit enabled terminals. Powered by
<a href="https://gitlab.com/rbdr/tomato-sauce">Tomato Sauce</a>.
</article>
<li>
<article>
<a href="https://lgtm.unlimited.pizza">LGTM</a>
- <aside>(2016)</aside>:
+ <span>(2016)</span>:
Looks Good To Me! 👍
- <a href="https://gitlab.com/rbdr/lgtm">See the source</a>.
+ <a aria-label="See the source of LGTM" href="https://gitlab.com/rbdr/lgtm">See the source</a>.
</article>
</li>
<li>
<article>
<a href="https://heart.unlimited.pizza">Heart</a>
- <aside>(2016)</aside>:
+ <span>(2016)</span>:
❤️💜💙💛💚
</article>
</li>
<li lang="es-MX">
<article>
<a href="http://insultos.unlimited.pizza">Generador de Insultos</a>
- <aside>(2015, Spanish)</aside>:
+ <span>(2015, Spanish)</span>:
Un generador de insultos multi-usos que te da un insulto nuevo cada vez
que lo cargas.
</article>
<li lang="es-MX">
<article>
<a href="https://gitlab.com/rbdr/Grita">Grita</a>
- <aside>(2010, Spanish)</aside>:
+ <span>(2010, Spanish)</span>:
Comparte texto anónimamente y distribuyelo con QR codes y URLs cortas.
</article>
</li>
<li>
<article>
<a href="/files/polarity.zip">Polarity</a>
- <aside>(2009)</aside>:
+ <span>(2009)</span>:
Top-down arena shooter game with magnetism.
</article>
</li>
<li>
<article>
<a href="https://gitlab.com/rbdr/Pico-Engine">Pico Engine</a>
- <aside>(2009)</aside>:
+ <span>(2009)</span>:
Platform game engine with lua scripting.
</article>
</li>
</ul>
+</main>
- <h2>Even more stuff.</h2>
+<aside title="Even more stuff.">
+ <h1>Even more stuff.</h1>
- <div>
- <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 aria-label="A picture of Rubén sleeping with an animated overlay changing the eyes, and showing a snake-like tongue">
+ <source src="/video/selfie.webm" type="video/webm">
+ <source src="/video/selfie.mp4" type="video/mp4">
+ </video>
- <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
+ <p><span aria-hidden="true">🍕</span> Unlimited pizza <span aria-hidden="true">🍕</span> / 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>
and <a href="https://myspace.bandcamp.com">bandcamp</a>,
- and code at <a href="https://gitlab.com/rbdr">gitlab</a>. I sometimes post
- gifs in <a href="https://ello.co/ososol">ello</a> and
+ and code at <a href="https://gitlab.com/rbdr">gitlab</a>.
+
I sometimes post gifs in <a href="https://ello.co/ososol">ello</a> and
pictures in <a href="https://youpic.com/photographer/microsoft/">youpic</a>
You can <a href="mailto:ruben+up@unlimited.pizza">write me an e-mail</a> if you
find a cool rock you want to show me, if you want to tell a story, if
But <a href="https://twitter.com/pigeonfolk">twitter</a> works better.
</p>
- <p>🦌.🛠.🐝</p>
-</div>
+ <p aria-label="Emoji Version">🌱.🏀.🐝</p>
+</aside>
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
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);
});
};
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)
};
};
* 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('')}`;
};
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) {
git.r.bdr.sh / rbdr / r.bdr.sh / commitdiff