Interpolación. #
Se denomina interpolación a obtención de nuevos puntos partiendo del conocimiento de un conjunto de puntos. Como ejemplo simple, si tomara 15 minutos caminar 1 milla el lunes y 1 hora caminar 4 millas el martes, podríamos estimar razonablemente que tomaría 30 minutos caminar 2 millas.
Dentro del área de la computación gráfica, por medio de las coordenadas baricéntricas es posible llegar a interpolar caracteristicas importantes de los puntos que conforman un triangulo.
Coordenadas Baricéntricas #
Un sistema de coordenadas baricéntrico es un sistema de coordenadas en el que la ubicación de un punto se especifica por referencia a un símplex (un triángulo para puntos en un plano, un tetraedro para puntos en un espacio tridimensional, etc.). Las coordenadas baricéntricas de un punto se pueden interpretar como masas colocadas en los vértices del simplex, de modo que el punto es el centro de masa (o baricentro) de estas masas. Estas masas pueden ser cero o negativas; todos son positivos si y sólo si el punto está dentro del símplex.
En el contexto de un triángulo, las coordenadas baricéntricas de un punto son una tripla (w0, w1, w2) de números que actúan como “pesos” para los vértices correspondientes. Entonces las tres ternas de coordenadas (1,0,0), (0,1,0) y (0,0,1) corresponden a v0, v1 y v2, respectivamente.
Para obtener estas coordenadas es necesario calcular la función borde sobre el punto a interpolar. Si se tuviese un triángulo con vértices X1, X2, X3, y el punto (i,j) a interpolar, es posible obtener las coordenadas baricéntricas de la siguiente manera:
//Definición de función borde
function edgeF(v0x,v0y,v1x,v1y,px,py){
return (v0y - v1y) * px + (v1x - v0x) * py + ((v0x*v1y) - (v0y*v1x))
}
let F12 = edgeF(X1,Y1,X2,Y2,i,j) //Cálculo de la función borde del punto i,j sobre la arista X1X2
let F23 = edgeF(X2,Y2,X3,Y3,i,j) //Cálculo de la función borde del punto i,j sobre la arista X2X3
let F31 = edgeF(X3,Y3,X1,Y1,i,j) //Cálculo de la función borde del punto i,j sobre la arista X3X1
let A = F12 + F23 + F31
let N12 = F12/A // Peso normalizado de (i,j) sobre el borde X1X2
let N23 = F23/A // Peso normalizado de (i,j) sobre el borde X2X3
let N31 = F31/A // Peso normalizado de (i,j) sobre el borde X3X1
// Coordenada baricentrica normalizada
(N12,N23,N31)
Coordenadas Baricentricas
{{< p5-iframe sketch="/Template/sketches/interpolation_weights.js" width="520" height="520">}}
Para representar el concepto de manera visual, se puede graficar el triangulo en el canvas previo haciendo click sobre la cuadricula para definir los vertices. El interior del triangulo mostrará los pesos de cada uno de los pixeles con respecto a los números de los pixeles.
(vertice 1: 0, vertice 2: 5, vertice 3: 9)
Interpolación de color #
Por definición, se usan las coordenadas baricéntricas para las posiciones de los puntos internos del triangulo, pero podemos usar esos mismos pesos para interpolar cualquier otro atributo de información, proveniente de los vertices, que varía linealmente a lo largo de un triángulo.
Interpolación de color
{{< p5-iframe sketch="/Template/sketches/interpolation.js" width="520" height="520">}}
Haciendo click sobre el canvas anterior, se pueden definir los vertices del triangulo y se interpolará su color interno tomando como base los colores que el usuario escoja a través de los selectores de color ubicados en la parte superior. Adicionalmente es posible aplicar Antialiasing sobre los bordes presionando la tecla “a”
En este caso, para el rasterizar el triangulo con interpolación de color, es necesario obtener la cantidad de rojo, verde y azul que componen los colores de los vertices. De esta manera, para un punto arbitrario (i,j) dentro del triangulo, podemos determinar su tono interpolado calculando
let R = N12 * red(color3) + N23 * red(color1) + N31 * red(color2)
let G = N12 * green(color3) + N23 * green(color1) + N31 * green(color2)
let B = N12 * blue(color3) + N23 * blue(color1) + N31 * blue(color2)
quadrille.fill(i, j, color(R,G,B))
Referencias #
Interpolación lineal y triangular