Interpolacion en el diseño web

Vista previa del material en texto

INTERPOLACIONES EN EL DISEÑO WEB 
La interpolación por polinomios de Lagrange es una técnica matemática utilizada en 
el diseño web para estimar valores desconocidos de una función, a partir de un 
conjunto de valores conocidos. En el diseño web, esto se utiliza, por ejemplo, para 
estimar el tamaño de una imagen o el tamaño de fuente en una página web en 
función del ancho de pantalla del dispositivo del usuario. 
La técnica de interpolación de Lagrange se basa en la idea de que es posible 
encontrar un polinomio que pase exactamente por un conjunto dado de puntos. 
Dado un conjunto de n puntos, existe un único polinomio de grado n-1 que pasa 
exactamente por esos puntos. 
Para encontrar el polinomio de interpolación de Lagrange, se utilizan las llamadas 
fórmulas de Lagrange. Estas fórmulas definen una serie de polinomios de grado n-
1 que son utilizados para interpolar los valores desconocidos de la función. En el 
diseño web, se utilizan estas fórmulas para estimar los valores desconocidos de 
tamaño de imagen o tamaño de fuente a partir de un conjunto de valores conocidos. 
La ventaja de la interpolación por polinomios de Lagrange es que es relativamente 
fácil de implementar en el diseño web, y proporciona resultados bastante precisos. 
Además, una vez que se ha calculado el polinomio de interpolación, es posible 
estimar los valores desconocidos de la función de forma muy eficiente. 
En el diseño web, es importante asegurarse de que el contenido se presente de 
manera adecuada en diferentes dispositivos y tamaños de pantalla. Esto incluye el 
tamaño de fuente, el tamaño de la imagen y otros aspectos visuales de la página 
web. Sin embargo, puede resultar complicado estimar el tamaño adecuado para 
cada dispositivo y pantalla, especialmente si se desea mantener una presentación 
visual uniforme en diferentes dispositivos. La interpolación por polinomios de 
Lagrange es una herramienta matemática útil para estimar valores desconocidos a 
partir de valores conocidos. 
 
EJEMPLO 1 
Planteamiento Del Problema 
Supongamos que queremos ajustar el tamaño de una imagen para que sea óptimo 
en diferentes tamaños de pantalla. Sabemos que para un tamaño de pantalla de 
320 píxeles de ancho, el tamaño de la imagen debe ser de 200 píxeles de ancho, 
para un tamaño de pantalla de 480 píxeles de ancho, el tamaño de la imagen debe 
ser de 300 píxeles de ancho, y para un tamaño de pantalla de 768 píxeles de ancho, 
el tamaño de la imagen debe ser de 500 píxeles de ancho. 
 
Solución 
Podemos utilizar el método de interpolación polinomial de Lagrange para encontrar 
una función que se ajuste a estos datos y que nos permita estimar el tamaño de la 
imagen para cualquier tamaño de pantalla. La fórmula de interpolación de Lagrange 
para un polinomio de segundo grado es: 
 
𝑓(𝑥) = (
(𝑥 − 𝑥1)(𝑥 − 𝑥2)
(𝑥0 − 𝑥1)(𝑥0 − 𝑥2)
) ∗ 𝑦0 + (
(𝑥 − 𝑥0)(𝑥 − 𝑥2)
(𝑥1 − 𝑥0)(𝑥1 − 𝑥2)
) ∗ 𝑦1 
+ (
(𝑥 − 𝑥0)(𝑥 − 𝑥1)
(𝑥2 − 𝑥0)(𝑥2 − 𝑥1)
) ∗ 𝑦2 
 
Donde 𝑥0, 𝑥1 y 𝑥2 son los valores conocidos del ancho de pantalla (320, 480 y 768 
píxeles, respectivamente), y 𝑦0, 𝑦1 y 𝑦2 son los tamaños conocidos de la imagen 
correspondientes a cada ancho de pantalla (200, 300 y 500 píxeles, 
respectivamente). Utilizando esta fórmula, podemos encontrar el tamaño de la 
imagen para cualquier tamaño de pantalla 𝑥. 
Código en JS UwU 
// Valores conocidos de tamaño de imagen para diferentes anchos de pantalla 
const imageSizes = [ 
 { width: 320, size: 200 }, 
 { width: 480, size: 300 }, 
 { width: 768, size: 500 } 
]; 
 
// Función que estima el tamaño de imagen para un ancho de pantalla dado 
function estimateImageSize(screenWidth) { 
 let size = 0; 
 
 // Calcular el tamaño de la imagen utilizando la fórmula de interpolación de Lagrange 
 const x0 = imageSizes[0].width; 
 const x1 = imageSizes[1].width; 
 const x2 = imageSizes[2].width; 
 const y0 = imageSizes[0].size; 
 const y1 = imageSizes[1].size; 
 const y2 = imageSizes[2].size; 
 const numerator1 = (screenWidth - x1) * (screenWidth - x2); 
 const numerator2 = (screenWidth - x0) * (screenWidth - x2); 
 const numerator3 = (screenWidth - x0) * (screenWidth - x1); 
 const denominator = (x0 - x1) * (x0 - x2) * (x1 - x2); 
 const a = (numerator1 / denominator) * y0; 
 const b = (numerator2 /denominator) * y1; 
 const c = (numerator3 / denominator) * y2; 
 size = a + b + c; 
 
 // Redondear el tamaño de la imagen al número entero más cercano 
 size = Math.round(size); 
 
 // Devolver el tamaño estimado de la imagen 
 return size; 
} 
 
// Ejemplo de uso: estimar el tamaño de la imagen para un ancho de pantalla de 600 
píxeles 
const screenWidth = 600; 
const estimatedSize = estimateImageSize(screenWidth); 
console.log(`El tamaño estimado de la imagen para un ancho de pantalla de 
${screenWidth} píxeles es de ${estimatedSize} píxeles.`); 
 
 
 
Explicación De Funcionamiento 
1. Primero se define una constante llamada imageSizes que contiene un 
arreglo de objetos, cada uno de los cuales representa un tamaño de imagen 
correspondiente a un ancho de pantalla determinado. Cada objeto tiene dos 
propiedades: width, que indica el ancho de pantalla correspondiente, y size, 
que indica el tamaño de imagen recomendado para ese ancho de pantalla. 
2. Luego se define una función llamada estimateImageSize que toma un 
parámetro screenWidth, que representa el ancho de pantalla para el que se 
quiere estimar el tamaño de imagen correspondiente. Dentro de esta función, 
se inicializa una variable llamada size con un valor de 0. 
3. A continuación, se realiza una serie de cálculos utilizando la fórmula de 
interpolación de Lagrange para estimar el tamaño de imagen para el ancho 
de pantalla proporcionado. Los valores necesarios para realizar estos 
cálculos se toman de los objetos del arreglo imageSizes. 
4. Una vez que se ha calculado el tamaño de imagen estimado, se redondea al 
número entero más cercano utilizando la función Math.round() 
5. Finalmente, se devuelve el tamaño de imagen estimado. 
6. En la última sección del código se define una variable screenWidth con un 
valor de 600 píxeles, y se llama a la función estimateImageSize() pasándole 
esta variable como parámetro. El tamaño de imagen estimado se almacena 
en una variable llamada estimatedSize, y se muestra en la consola utilizando 
la función console.log(). El resultado impreso es un mensaje que indica el 
tamaño estimado de la imagen para el ancho de pantalla proporcionado. 
EJEMPLO 2 
Planteamiento Del Problema 
Supongamos que tenemos una página web que contiene mucho contenido y 
queremos que la fuente del texto se adapte al ancho de la pantalla del usuario. Se 
desea calcular el tamaño de fuente óptimo en función del ancho de pantalla actual 
del usuario y asegurarnos de que los titulares se vean bien en diferentes 
dispositivos, desde teléfonos móviles hasta pantallas de escritorio. 
 
Solución 
Usando la función estimateFontSize podemos estimar el tamaño de fuente ideal 
basado en el ancho de pantalla actual del usuario, lo que nos permitirá mostrar el 
contenido de manera más atractiva y legible en diferentes dispositivos. 
 
Código en JS UwU 
// Valores conocidos de tamaño de fuente para diferentes anchos de pantalla 
const fontSizes = [ 
 { width: 320, size: 14 }, 
 { width: 480, size: 16 }, 
 { width: 768, size: 18 }, 
 { width: 1024, size: 20 }, 
 { width: 1280, size: 22 } 
]; 
 
// Función que estima el tamaño de fuente para un ancho de pantalla dado 
function estimateFontSize(screenWidth) { 
 let size = 0; 
 
 // Crear polinomio de Lagrange que se ajuste a los valores conocidos de tamaño de 
fuente 
 for (let i = 0; i < fontSizes.length; i++) { 
 let term = fontSizes[i].size; 
 for (let j = 0; j < fontSizes.length; j++) { 
 if (j != i) { 
 term *= (screenWidth - fontSizes[j].width)/ (fontSizes[i].width - 
fontSizes[j].width); 
 } 
 } 
 size += term; 
 } 
 
 return size; 
} 
 
// Ejemplo de uso 
const screenWidth = window.innerWidth; 
const fontSize = estimateFontSize(screenWidth); 
document.body.style.fontSize = `${fontSize}px`; 
 
Explicación De Funcionamiento 
1. Definición de la función lagrangeInterpolation que toma como argumentos dos 
arrays x y y, que contienen los valores de x e y respectivamente, y un valor xi 
que indica el punto en el que se quiere interpolar. 
2. Se define una variable n que representa el número de puntos conocidos. 
3. Se inicializa una variable yi en 0, que será el resultado de la interpolación. 
4. Se recorre el array x para calcular los polinomios Li correspondientes a cada 
punto conocido. El polinomio Li se calcula de la siguiente manera: 
a) Se define una variable numerator que será el numerador de Li. 
b) Se define una variable denominator que será el denominador de Li. 
c) Se recorre el array x de nuevo para calcular numerator y denominator 
para cada punto diferente de xi. 
d) Se calcula Li como el producto de numerator y denominator. 
5. Finalmente, se calcula el valor de yi como la suma de todos los polinomios Li 
multiplicados por el valor de yi correspondiente. 
6. Se devuelve el valor de yi.