Interpolacion Lineal, un gran aliado para aplicaciones responsive y dinamicas

 Primero, ¿qué es la interpolación lineal?

La interpolación lineal es un concepto matemático que, en términos simples, busca definir una función matemática que pueda encontrar valores intermedios basados en dos puntos dados.

Imaginemos un eje de coordenadas de dos dimensiones (x, y), y en ese eje especificamos dos puntos.

A = (1, 1) B = (5, 5)

Ahora, con la fórmula de interpolación lineal, podemos encontrar cualquier punto dentro de una línea recta trazada desde el punto A hasta el punto B, al proporcionar un valor en X o un valor en Y.

Por ejemplo, al darle un valor a X=3, el valor de Y será igual a 3, lo que significa que el punto (3, 3) está dentro del conjunto.

¿Para qué nos puede ser útil?

Hasta ahora, hemos dejado sin significado los ejes X y Y. Sin embargo, esto no tiene por qué ser así. Por ejemplo:

Imaginemos el siguiente caso: queremos centrar un emoji dentro de un div.



Actualmente, el div tiene un ancho de unos 300px y el tamaño de fuente del emoji es de 100px.

¿Qué sucede si queremos que el div tenga un ancho de unos 90px?



Como podemos ver, el emoji ya no cabe en el div. Tendríamos que ajustar su tamaño manualmente, por ejemplo, con unos 60px podría encajar perfectamente.

Ahora viene el problema: ¿qué pasaría si el tamaño del div puede cambiar dinámicamente? La respuesta podría parecer un poco más sencilla que usar una interpolación lineal. Sin embargo, el problema radica en que el tamaño de fuente no se comporta como un simple ancho o alto, y los resultados en algunas ocasiones pueden no ser tan gratificantes. Por ejemplo:

• A lo mejor queremos que, mientras más grande sea el div, el emoji tenga algo de margen a sus alrededores.
• O que cuando el div sea muy pequeño, el emoji deba ser algo más grande en proporción a lo que era antes para seguir manteniendo la legibilidad.

¿Cuál es la solución?

Podemos establecer dos puntos óptimos como referencia. Por ejemplo:

• Podemos decir que cuando el div tenga 300px de ancho, el emoji debe tener 100px de tamaño de fuente.
• Y que cuando el div tenga 90px de ancho, entonces el emoji debe tener 65px de tamaño de fuente.

Si pasamos esto a un concepto matemático, podríamos expresar que el tamaño del div estaría representado por el eje X y el tamaño de fuente del emoji sería el eje Y.

En ese caso, los dos puntos óptimos en el plano cartesiano serían:

A = (300, 100) B = (90, 65)

Valores en píxeles, y en el plano se verían así.

¿Cómo lo calculo?

Ya he explicado la teoría y los conceptos, y probablemente te estarás preguntando, "Ok, pero ahora, ¿cómo lo implemento en el código?"

La verdad es que "Interpolación lineal" es solo un nombre muy bonito para llamar a "encontrar la ecuación de la recta dado dos puntos". Así que ahora vamos a entrar en un poco de matemática básica y luego al CSS, que es importante.

La fórmula para la ecuación de la recta es:

Y = Xm + b

Donde Y es igual al tamaño de fuente, X es el ancho del div, m es la pendiente o inclinación de la recta, y b es un valor para mover la recta hacia arriba o hacia abajo según convenga (olvidé el nombre técnico de b, ¡oops!).

Vamos a encontrar los valores constantes para nuestra recta en específico.

La fórmula para encontrar la pendiente o m es:

m = (y2 - y1)/(x2 - x1)

Donde los números al lado de las X y Y significan que pertenecen al punto 1 o punto 2, o más específicamente en este caso, punto A y punto B. Reemplacemos los valores por nuestros datos que ya conocemos y resolvamos.

m = (65 - 100)/(90 - 300)
  = (-35)/(-210)
  = -35/-210
  = 1/6 // solo simplificamos la fraccion

Al final, solo simplificamos la fracción. Principalmente por gusto personal, ya que con las fracciones podemos hacer los cálculos exactos sin tener que redondear los decimales. De todos modos, ya descubrimos que nuestra pendiente m = 1/6.

Ahora, para encontrar b, lo que podemos hacer es sustituir todos los valores que ya sabemos en la fórmula de la recta y desde ese punto empezar a despejar b. Para sustituir los valores podemos usar cualquiera de los dos puntos A o B. En mi caso será el punto A (300,100).

y = Xm + b //Formula original
100 = 300*(1/6) + b //sustituimos
100 = (300/1)*(1/6) + b //convertimos 300 a fraccion para hacer las cosas mas faciles.
100 = (300/6) + b //multiplicamos las fracciones
100 = (50/1) + b //simplificamos la fraccion dividiendo por 6 el nominador y denominador.
100 = 50 + b // 50 entre 1 da 50, Dah.
100 - 50 = 50 + b - 50 //restamos 50 en ambos lado para despejar b
50 = b // resolvemos el lado izquierdo y en el lado derecho el 50 y -50 se cancelan entre si.
b = 50 //le damos la vuelta a la igualdad para que se vea mas bonita, jeje.

Y de esa manera encontramos nuestro valor en b = 50. Ahora vamos a sustituir nuestras constantes en nuestra fórmula de la recta.

Y = (1/6)X + 50

Ahora vamos a probarla, ¿no? Supongamos que queremos hallar el valor de tamaño de fuente (Y) cuando el div tenga un ancho (X) de 145.

Y = (1/6)X + 50
Y = (1/6)*(145) + 50 // Sustituimos nuestra nueva X
Y = 445/6 // Cálculo con la calculadora, para no cansar
Y ≈ 74.166666 // Resolvemos a decimal si se desea 

Es decir, que cuando el ancho de nuestro div sea 145, el tamaño de fuente de nuestro emoji será aproximadamente 74.16. ¿No es genial?

¿Cómo pasarlo a CSS?

Bueno, podemos pasar el ancho del div a una variable y usar js para actualizar el fontsize Por ejemplo:

div {
    --my-width: 300px; /* Modificar con JS */
    width: var(--my-width);
}

#emoji {
    font-size: calc((var(--my-width) * (1/6)) + 50px);
}

-JS

const my-div = document.getElementById('my-div');

const emoji = document.getElementById('emoji');

function onWidthChange(newval){

    my-div.style.setProperty('--my-width', newval + 'px');

    emoji.style.setProperty('font-size', ((newval * (1/6)) + 50) + 'px'); 

} 

Ejemplo interactivo para jugar

emoji font size =

div width =



Créditos

Mi LinkedIn está AQUÍ, por si quieres echarle un vistazo. Actualmente estoy buscando empleo como programador, no dudes en contactarte conmigo.

También, si te gusta mi contenido, puedes seguirme en LinkedIn para estar al tanto de mis otros blogs, y pronto en un canal de YouTube.

Muchas gracias por su atención.

"Corrige las faltas ortográficas y mejora el texto".