Skip to content

Commit 64fbc4b

Browse files
dibullapdibullap
committed
Escritos de reporte actualizados, faltan dof y rayos
1 parent fe231cd commit 64fbc4b

File tree

12 files changed

+902
-134
lines changed

12 files changed

+902
-134
lines changed

‎content/_index.md‎

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,58 @@ type: docs
66
# Posteffects
77
> Por *Diego Fernando Bulla Poveda*
88
9-
Esta es la página dedicada a crear una buena introducción del libro que
10-
presenta este trabajo, será escrita a su tiempo, cuando haya alcanzado etapas posteriores.
9+
El auge de la inteligencia artificial visto en los años más
10+
recientes pudo ser alcanzado gracias a las múltiples
11+
investigaciones realizadas en dicho campo y al cuantioso
12+
incremento de la potencia computacional disponible. Los
13+
avances en estos modelos ofrecen aplicaciones como la
14+
clasificación y extracción de características de imágenes,
15+
análisis de sentimientos e intenciones dentro de un texto
16+
o herramientas más sofisticadas, capaces de simular
17+
conversaciones y resumir escritos gracias a la interpretación
18+
del contexto, construcción de imágenes a partir de una
19+
descripción ofrecida por el usuario o la creación de escenas
20+
tridimensionales a partir de una colección de imágenes del
21+
entorno.
22+
23+
Dando un breve enfoque en los potentes modelos de lenguaje
24+
mencionados a priori, es necesario considerar que, por la
25+
naturaleza misma de la inteligencia artificial como
26+
disciplina, estos no han de producir respuestas de
27+
forma determinista sino que dan una contestación
28+
aleatoria (que no implica incoherencia). Dicho
29+
comportamiento hace que los usuarios, si desean
30+
que un modelo de lenguaje ejecute cierta tarea
31+
de forma regular, deban darle una serie de
32+
instrucciones que acoten su comportamiento, cosa
33+
que motiva y hace necesaria la creación de lenguajes
34+
para interactuar con tales modelos y el desarrollo
35+
de frameworks como LanChain, que está construido para
36+
desarrollar aplicaciones potenciadas por modelos de
37+
lenguaje, comportándose como un agente que interactúa
38+
con el entorno y conectando con fuentes de datos de
39+
las que se obtenga información según sea requerido..
40+
41+
Otra área de la informática beneficiada por el
42+
crecimiento tecnológico es la computación
43+
gráfica, área que tiene la renderización como
44+
uno de sus pilares. Esta consiste en la generación
45+
de una imagen a partir de un modelo bidimensional
46+
o tridimensional, es decir, el mecanismo por el que
47+
una escena se plasma y puede ser visualizada en una
48+
pantalla. Muchas veces es necesario que dicha imagen
49+
sea modificada según las necesidades de la
50+
situación, algunos ejemplos de esto son; el cambio
51+
en el contraste al observar tejido biológico usando
52+
un microscopio electrónico, la distorsión por
53+
profundidad de campo para acentuar elementos en una
54+
fotografía u ofrecer un cambio en la paleta de colores
55+
de una herramienta, amigable para personas con daltonismo.
56+
Estos ajustes se conocen como Efectos de Postprocesado
57+
y están presentes en situaciones que van desde el
58+
entretenimiento al análisis científico.
59+
60+
61+
62+
<!-- hugo server -D --disableFastRender -->
1163

12-
<!-- hugo server -D --disableFastRender -->

‎content/docs/Efectos/Caleidoscopio.md‎

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,102 @@ weight: 6
44

55
# Caleidoscopio
66

7+
> «En la memoria del hombre, ninguna invención y ningún trabajo, ya sea dirigido a la imaginación o al entendimiento, jamás producirá un efecto como tal»
8+
(Comentario de Peter Mark Roget sobre el caleidoscopio).
9+
10+
El caleidoscopio fue inventado en 1816 por el físico David Browster. Consta de un tubo en cuyo interior
11+
hay tres espejos que forman un prisma con las caras interiores reflectantes y en cuyo extremo, encerrados entre
12+
dos láminas translúcidas, hay varios objetos de diferente color y forma que se ven multiplicados al girar el tubo.
13+
14+
{{< columns >}}
15+
16+
17+
<--->
18+
19+
![Partes de un caleidoscopio hecho de forma artesanal](/posteffects/docs/Efectos/recursos/caleidoscopio_0.png)
20+
*Figura 1:* Esquema de un calidoscopio hecho artesanalmente.
21+
22+
<--->
23+
24+
{{< /columns >}}
25+
26+
El efecto de un caleidoscopio puede parecer complejo, sin embargo es de sencilla implementación; la escena
27+
a continuación es prueba de ello. Los diversos objetos que conforman la imagen se verán reflejados tantas veces
28+
como la barra de configuración lo permita
29+
730

831
{{< p5-iframe sketch="/posteffects/sketches/caleidoscopio/sketch.js" lib1="https://cdn.jsdelivr.net/gh/freshfork/p5.EasyCam/p5.easycam.js" lib2=
9-
"https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.js" width="625" height="625" >}}
32+
"https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.js" width="625" height="325" >}}
33+
34+
## Código del Fragment Shader del efecto:
35+
36+
{{< details "caleido.frag" open >}}
37+
```
38+
precision mediump float;
39+
40+
uniform sampler2D texture;
41+
uniform float segments;
42+
43+
varying vec2 texcoords2;
44+
45+
void main() {
46+
vec2 coord = 2.0 * texcoords2 - 1.0;
47+
48+
float r = length(coord);
49+
float theta = atan(coord.y, abs(coord.x));
50+
theta *= segments;
51+
coord = vec2(r * cos(theta), r * sin(theta));
52+
53+
coord = (coord + 1.0) / 2.0;
54+
gl_FragColor = texture2D(texture, coord);
55+
}
56+
57+
```
58+
{{< /details >}}
59+
60+
Como primer paso fundamental, se ejecuta un remapeo de las coordenadas de textura, considerando
61+
que lo que se desea es obtener reflejos usando radios como eje de simetría.
62+
```
63+
vec2 coord = 2.0 * texcoords2 - 1.0;
64+
```
65+
Ahora el punto {{< katex >}}(0,0) {{< /katex >}} se convirtió en el centro de la
66+
textura y el punto {{< katex >}} (-1, -1) {{< /katex >}} es alcanzable en consecuencia. Esto
67+
hace posible el manejo de operaciones de rotación.
68+
69+
La rotación es una operación mucho más sencilla de ejecutar en coordenadas polares, de modo que sería ideal
70+
transformar la actual coordenada {{< katex >}} (x, y) {{< /katex >}} en {{< katex >}} (r, \theta) {{< /katex >}}
71+
72+
{{< katex display >}}
73+
r = ||(x, y)|| \\
74+
\theta = \tan^{-1}\frac{y}{|x|}
75+
{{< /katex >}}
76+
77+
En este nuevo sistema de coordenadas, para rotar basta con modificar el ángulo, es decir, el
78+
punto se transforma a {{< katex >}} (r, k\cdot \theta) {{< /katex >}} después de
79+
la operación, siendo {{< katex >}} k {{< /katex >}} el parámetro que indica cuantose desplaza
80+
angularmente el punto.
81+
82+
Como el sistema lo requiere, es necesario volver a las coordenadas cartesianas, recordando que
83+
{{< katex display >}}
84+
x = r\cdot \cos(\theta) \\
85+
y = r \cdot \sin(\theta)
86+
{{< /katex >}}
87+
88+
```
89+
float r = length(coord);
90+
float theta = atan(coord.y, abs(coord.x));
91+
theta *= segments;
92+
coord = vec2(r * cos(theta), r * sin(theta));
93+
```
94+
Nótese que los puntos rotarán tanto como segmentos tenga la imagen caleidoscópica deseada.
95+
96+
Finalmente, se regresa al rango usual de coordenadas, {{<katex>}} [0, 1] {{</ katex>}}, y el
97+
fragmento actual adquiere el color del pixel encontrado en las coordenadas correspondientes.
98+
```
99+
coord = (coord + 1.0) / 2.0;
100+
gl_FragColor = texture2D(texture, coord);
101+
```
102+
103+
## Referencias
104+
* [SNAPVALE163, Caleidoscopio](https://snapvale163.wordpress.com/fisica/4-periodo/luz-optica-fisica/espejos/calidoscopio/)
105+
*

‎content/docs/Efectos/Desenfoque Horizontal.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
weight: 5
3+
---
4+
5+
# Desenfoque Horizontal
6+
7+
Los filtros de desenfoque son un efecto en el que
8+
se suaviza la textura sobre la que este se aplica, de
9+
modo que se atenúan las diferencias abruptas de color.
10+
11+
Existen diferentes tipos de efectos de desenfoque, sin embargo en este
12+
apartado se tratará el desenfoque horizontal, que difiere de los otros al
13+
incrementar la pérdida de detalle sobre los elementos que se encuentren a mayor
14+
distancia vertical de un horizonte dado.
15+
16+
La demostrasión de este efecto se hace sobre un conjunto de elementos aleatoriamente
17+
posicionados en el espacio, de modo que el observador pueda encontrar un objeto a
18+
diferentes alturas en la imagen y evidenciar de ese modo la forma en que el nivel de desenfoque
19+
varía.
20+
21+
{{< p5-iframe sketch="/posteffects/sketches/horizontal/sketch.js" lib1="https://cdn.jsdelivr.net/gh/freshfork/p5.EasyCam/p5.easycam.js" lib2=
22+
"https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.js" width="625" height="325" >}}
23+
24+
## Código del Fragment Shader del efecto.
25+
26+
{{< details "horizontal.frag" open >}}
27+
```
28+
precision mediump float;
29+
30+
uniform sampler2D tDiffuse;
31+
uniform float h;
32+
uniform float r;
33+
34+
varying vec2 texcoords2;
35+
36+
void main() {
37+
vec2 vUv = texcoords2.st;
38+
vec4 sum = vec4( 0.0 );
39+
40+
float hh = h * abs( r - vUv.y );
41+
42+
sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * hh, vUv.y ) ) * 0.051;
43+
sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * hh, vUv.y ) ) * 0.0918;
44+
sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * hh, vUv.y ) ) * 0.12245;
45+
sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * hh, vUv.y ) ) * 0.1531;
46+
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
47+
sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * hh, vUv.y ) ) * 0.1531;
48+
sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * hh, vUv.y ) ) * 0.12245;
49+
sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * hh, vUv.y ) ) * 0.0918;
50+
sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * hh, vUv.y ) ) * 0.051;
51+
52+
gl_FragColor = sum;
53+
}
54+
```
55+
{{< /details >}}
56+
57+
Considerando que `r` representa la altura del horizonte imaginario en la textura de entrada (por lo
58+
que su valor está normalizado) y `h` el nivel de desenfoque, es más sencillo intuir el
59+
funcionamiento del shader a partir de esta linea:
60+
```
61+
float hh = h * abs( r - vUv.y );
62+
```
63+
64+
Es decir que `hh` es la distancia horizontal entre los pixeles cuya
65+
diferencia se atenuará posteriormente. esta cantidad es proporcional
66+
a la distancia entre la vertical de la coordenada actual de textura y el
67+
horizonte.
68+
69+
Como es usual, este suavizado también depende de una convolución entre los
70+
valores de los pixeles y determinado kernel. En este caso, como los pixeles están siendo
71+
seleccionados unicamente en sentido horizontal, la máscara debe ser también un vector y el resultado
72+
de la operación (el nuevo color del fragmento) no es más que el producto punto entre estos elementos
73+
74+
{{< katex display >}}
75+
sum = (u - 4hh, u - 3hh, u - 2hh, u - hh, u, u + hh, u +2hh , u + 3hh, u + 4hh) \cdot \left[ \begin{matrix}
76+
0.051 \\
77+
0.0918 \\
78+
0.12245 \\
79+
0.1531 \\
80+
0.1633 \\
81+
0.1531 \\
82+
0.12245 \\
83+
0.0918 \\
84+
0.051
85+
\end{matrix} \right]
86+
{{< /katex >}}
87+
88+
Dónde {{< katex >}}u{{< /katex >}} es el componente horizontal de la coordenada
89+
de textura actual.
90+
91+
```
92+
sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * hh, vUv.y ) ) * 0.051;
93+
sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * hh, vUv.y ) ) * 0.0918;
94+
sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * hh, vUv.y ) ) * 0.12245;
95+
sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * hh, vUv.y ) ) * 0.1531;
96+
sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
97+
sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * hh, vUv.y ) ) * 0.1531;
98+
sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * hh, vUv.y ) ) * 0.12245;
99+
sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * hh, vUv.y ) ) * 0.0918;
100+
sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * hh, vUv.y ) ) * 0.051;
101+
102+
gl_FragColor = sum;
103+
```
104+
105+
## Referencias:
106+
* [OpenGL - Programming Guide, Chapter 9: Texture Mapping](http://www.glprogramming.com/red/chapter09.html#name3)
107+
* [Parte III: La Referencia de Funciones del GIMP, Capítulo 14, Filtros](https://docs.gimp.org/2.4/es/filters.html)

0 commit comments

Comments
 (0)