Projects.

- +

The personal website of RubÃ©n BeltrÃ¡n del RÃo

+ â blog. +

Apps

- blog - (Ongoing): - My blog. Only 3 posts at a time. - See the source. -
-
-
- do - (Ongoing): - A task manager for iOS and MacOS that makes you write your thoughts down when the task is done. - See the source. + do: + A task manager for iOS and MacOS that makes you write a journal entry when the task is done. + (source)
map - (Ongoing): A MacOS app that lets you create wardley maps using text. - See the source. + (source)

Libraries

- Serpentity - (Ongoing): + serpentity: An entity framework for JavaScript.
- grafn - (Ongoing): + grafn: Flow based programming library for javascript.
- cologne - (Ongoing): + cologne: Log multiplexer for javascript with no dependencies.

Plugins

API notation for vim, atom, & vscode, & - sublime text - (Ongoing): + sublime text: A syntax for notating component APIs in a way that's easy to embed in text documents.
- Nginx Office Hours - (2019): + Nginx Office Hours: A victory for the server's labor rights: An nginx module that allows you to serve your content only during office hours.

My Things

+
+ music @ bandcamp: + Music I've made. +
+
+
+ music @ soundcloud: + More music I've made. +
+
+
+ photography @ youpic: + Pictures I've taken. +
+
+
+ talks @ youtube: + Talks I've given. +
+

Etc.

Flower @@ -112,8 +136,8 @@ description: "unlimited.pizza - ruben beltran del rÃo surfs the internet: progr
telnet unlimited.pizza 7777 (2016): - a random work of ansi art. Better with 24-bit enabled terminals. Powered by - Tomato Sauce. + a random work of ansi art. Better with 24-bit enabled terminals. + (source)
@@ -121,7 +145,7 @@ description: "unlimited.pizza - ruben beltran del rÃo surfs the internet: progr LGTM (2016): Looks Good To Me! ð - See the source. + (source)
@@ -163,32 +187,6 @@ description: "unlimited.pizza - ruben beltran del rÃo surfs the internet: progr

More about me.

- -

- Unlimited pizza / RubÃ©n BeltrÃ¡n del RÃo. - I have words written (espaÃ±ol e inglÃ©s) in my - blog, - spoken in a handy playlist, - music in soundcloud, - bandcamp, - and apple music. - You can find my code in gitlab. - I sometimes post pictures in youpic. -

- You can write me an e-mail if you - find a cool rock you want to show me, if you want to tell a story, if - you need a cyber high five, if robots are starting an uprising and you want us - to join, or if you want to get together to practice your latest dance moves. - But twitter works better. -

- -

ð±.ð.âï¸

+ diff --git a/jekyll/js/animation.js b/jekyll/js/animation.js new file mode 100644 index 0000000..3fc4a85 --- /dev/null +++ b/jekyll/js/animation.js @@ -0,0 +1,142 @@ +(function () { + + var canvas = document.querySelector('canvas'); + var context = canvas.getContext('2d'); + var fps = 30; + var lastFrame = 0; + var speed = 1; + var size = 5 + Roundom(10); + + var clear = !!(Math.random() > 0.5); + var changeColor = !!(Math.random() > 0.5); + var items = Array(Roundom(10) + 6).fill(null).map(() => ({ + x: Roundom(100), + y: Roundom(100), + angle: Math.random() * 2 * Math.PI, + color: Array(3).fill(null).map(() => Roundom(256)) + })); + var shapes = [square, circle, heart, chaos, lineChaos]; + var positions = [identity, spin(5), spin(15)]; + var draw = shapes[Roundom(shapes.length)]; + var position = positions[Roundom(positions.length)]; + + function Roundom (x) { + return Math.floor(Math.random() * x); + } + + function square(item) { + + var p = position(item); + context.fillRect(p.x, p.y, size, size); + } + + function circle(item) { + + var p = position(item); + context.beginPath(); + context.arc(p.x, p.y, size / 2, 0, 2 * Math.PI); + context.fill(); + } + + function chaos(item) { + + var p = position(item); + context.beginPath(); + context.moveTo(p.x, p.y); + context.lineTo(p.x * 10 * Math.cos(item.angle), p.y * 10 * Math.sin(item.angle)); + context.lineTo(Roundom(100), Roundom(100)); + context.fill(); + } + + function lineChaos(item) { + + var p = position(item); + context.beginPath(); + context.lineWidth = 5; + context.strokeStyle = `rgb(${item.color.join(',')})`; + context.moveTo(p.x, p.y); + context.lineTo(p.x * 10 * Math.cos(item.angle), p.y * 10 * Math.sin(item.angle)); + context.stroke(); + } + + function square(item) { + + var p = position(item); + context.fillRect(p.x, p.y, size, size); + } + + function heart(item) { + + var p = position(item); + context.fillRect(p.x, p.y, size, size); + + context.beginPath(); + context.arc(p.x + size / 2, p.y, size / 2, 0, 2 * Math.PI, false); + context.fill(); + context.closePath(); + + context.beginPath(); + context.arc(p.x + size, p.y + size / 2, size / 2, 0, 2 * Math.PI, false); + context.fill(); + context.closePath(); + } + + function identity(position) { + + return position; + } + + function spin(radius) { + return function (position) { + + return { + x: position.x + radius * Math.cos(lastFrame), + y: position.y + radius * Math.sin(lastFrame) + } + } + } + + function move(item) { + + item.x = item.x + speed * Math.cos(item.angle); + item.y = item.y + speed * Math.sin(item.angle); + + if (item.x < 0 || item.x > 100) { + item.angle = Math.atan2(Math.sin(item.angle), -Math.cos(item.angle)) + } + + if (item.y < 0 || item.y > 100) { + item.angle = Math.atan2(-Math.sin(item.angle), Math.cos(item.angle)) + } + } + + function updateColor(item) { + + item.color = item.color.map((c) => { + c = c + 5; + return c > 255 ? 0 : c; + }) + } + + function frame(time) { + + window.requestAnimationFrame(frame); + + var delta = time - lastFrame; + + if (delta > 1000 / fps) { + clear && context.clearRect(0, 0, 100, 100); + for (var item of items) { + context.fillStyle = `rgb(${item.color.join(',')})`; + draw(item); + changeColor && updateColor(item); + move(item); + } + + lastFrame = time; + } + } + + frame(); +} +)(); diff --git a/jekyll/js/breadsticks.js b/jekyll/js/breadsticks.js deleted file mode 100644 index b42bc17..0000000 --- a/jekyll/js/breadsticks.js +++ /dev/null @@ -1,173 +0,0 @@ -// App Config - -const kEntrypoint = "breadsticks"; -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 - * 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.clientX; - mousePosition.y = event.clientY; - 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; - - 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.min(calculatedMagnitude, kMaxVectorMagnitude) - }; -}; - - -/* - * Drawing - */ - -// draw a vector -const drawVector = (context, i, j, vector) => { - 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 calculated magnitude -// as well as the color scheme - -const getColor = (calculatedMagnitude) => { - - let colorValue = Math.round(calculatedMagnitude * 255 / (kMaxVectorMagnitude * kMagnitudeColorMultiplier)) % 255; - - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - colorValue = 255 - colorValue % 255; - } - - // Initialize an array with the value, converts it to a hex string and joins it. - return `#${Array(3).fill(colorValue.toString(16)).join('')}`; -}; - - -// Draws field on canvas - -const drawFieldMatrixOnCanvas = (matrix, context) => { - - context.setLineDash([25, 10]) - 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/js/offline_support.js b/jekyll/js/offline_support.js deleted file mode 100644 index b29c04c..0000000 --- a/jekyll/js/offline_support.js +++ /dev/null @@ -1,4 +0,0 @@ -if ('serviceWorker' in navigator) { - - navigator.serviceWorker.register('/service_worker.js'); -}