Escritos de reporte actualizados, faltan dof y rayos

content/_index.md

@@ -6,7 +6,58 @@ type: docs
 # Posteffects
 > Por *Diego Fernando Bulla Poveda*
 
-Esta es la página dedicada a crear una buena introducción del libro que 
-presenta este trabajo, será escrita a su tiempo, cuando haya alcanzado etapas posteriores.
+El auge de la inteligencia artificial visto en los años más 
+recientes pudo ser alcanzado gracias a  las múltiples 
+investigaciones realizadas en dicho campo y al cuantioso 
+incremento de la potencia computacional disponible. Los 
+avances en estos modelos ofrecen aplicaciones como la 
+clasificación y extracción de características de imágenes, 
+análisis de sentimientos e intenciones dentro de un texto 
+o herramientas más sofisticadas, capaces de simular 
+conversaciones y resumir escritos gracias a la interpretación 
+del contexto, construcción de imágenes a partir de una 
+descripción ofrecida por el usuario o la creación de escenas 
+tridimensionales a partir de una colección de imágenes del 
+entorno.
+
+Dando un breve enfoque en los potentes modelos de lenguaje 
+mencionados a priori, es necesario considerar que, por la 
+naturaleza misma de la inteligencia artificial como 
+disciplina, estos no han de producir respuestas de 
+forma determinista sino que dan una contestación 
+aleatoria (que no implica incoherencia). Dicho 
+comportamiento hace que los usuarios, si desean 
+que un modelo de lenguaje ejecute cierta tarea 
+de forma regular, deban darle una serie de 
+instrucciones que acoten su comportamiento, cosa 
+que motiva y hace necesaria la creación de lenguajes 
+para interactuar con tales modelos y el desarrollo 
+de frameworks como LanChain, que está construido para 
+desarrollar aplicaciones potenciadas por modelos de 
+lenguaje, comportándose como un agente que interactúa 
+con el entorno y conectando con fuentes de datos de 
+las que se obtenga información según sea requerido.. 
+
+Otra área de la informática beneficiada por el 
+crecimiento tecnológico es la computación 
+gráfica, área que tiene la renderización como 
+uno de sus pilares. Esta consiste en la generación 
+de una imagen a partir de un modelo bidimensional 
+o tridimensional, es decir, el mecanismo por el que 
+una escena se plasma y puede ser visualizada en una 
+pantalla. Muchas veces es necesario que dicha imagen 
+sea modificada según las necesidades de la 
+situación, algunos ejemplos de esto son; el cambio 
+en el contraste al observar tejido biológico usando 
+un microscopio electrónico, la distorsión por 
+profundidad de campo para acentuar elementos en una 
+fotografía u ofrecer un cambio en la paleta de colores 
+de una herramienta, amigable para personas con daltonismo.
+  Estos ajustes se conocen como Efectos de Postprocesado 
+y están presentes en situaciones que van desde el 
+entretenimiento al análisis científico.
+
+
+
+<!-- hugo server -D --disableFastRender -->
 
-<!-- hugo server -D --disableFastRender -->

content/docs/Efectos/Caleidoscopio.md

@@ -4,6 +4,102 @@ weight: 6
 
 # Caleidoscopio
 
+> «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»
+(Comentario de Peter Mark Roget sobre el caleidoscopio).
+
+El caleidoscopio fue inventado en 1816 por el físico David Browster. Consta de un tubo en cuyo interior 
+hay tres espejos que forman un prisma con las caras interiores reflectantes y en cuyo extremo, encerrados entre 
+dos láminas translúcidas, hay varios objetos de diferente color y forma que se ven multiplicados al girar el tubo.
+
+{{< columns >}}
+
+
+<--->
+
+![Partes de un caleidoscopio hecho de forma artesanal](/posteffects/docs/Efectos/recursos/caleidoscopio_0.png)
+*Figura 1:* Esquema de un calidoscopio hecho artesanalmente.
+
+<--->
+
+{{< /columns >}}
+
+El efecto de un caleidoscopio puede parecer complejo, sin embargo es de sencilla implementación; la escena 
+a continuación es prueba de ello. Los diversos objetos que conforman la imagen se verán reflejados tantas veces 
+como la barra de configuración lo permita 
+
 
 {{< p5-iframe sketch="/posteffects/sketches/caleidoscopio/sketch.js" lib1="https://cdn.jsdelivr.net/gh/freshfork/p5.EasyCam/p5.easycam.js" lib2=
-"https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.js" width="625" height="625" >}}
+"https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.js" width="625" height="325" >}}
+
+## Código del Fragment Shader del efecto:
+
+{{< details "caleido.frag" open >}}
+```
+precision mediump float;
+
+uniform sampler2D texture;
+uniform float segments;
+
+varying vec2 texcoords2;
+
+void main() {
+    vec2 coord = 2.0 * texcoords2 - 1.0;
+
+    float r = length(coord);
+    float theta = atan(coord.y, abs(coord.x));
+    theta *= segments;
+    coord = vec2(r * cos(theta), r * sin(theta));
+  
+    coord = (coord + 1.0) / 2.0;
+    gl_FragColor = texture2D(texture, coord);
+}
+
+```
+{{< /details >}}
+
+Como primer paso fundamental, se ejecuta un remapeo de las coordenadas de textura, considerando 
+que lo que se desea es obtener reflejos usando radios como eje de simetría. 
+```
+    vec2 coord = 2.0 * texcoords2 - 1.0;
+```
+Ahora el punto {{< katex >}}(0,0) {{< /katex >}} se convirtió en el centro de la 
+textura y el punto {{< katex >}} (-1, -1) {{< /katex >}} es alcanzable en consecuencia. Esto 
+hace posible el manejo de operaciones de rotación.
+
+La rotación es una operación mucho más sencilla de ejecutar en coordenadas polares, de modo que sería ideal 
+transformar la actual coordenada {{< katex >}} (x, y) {{< /katex >}} en {{< katex >}} (r, \theta) {{< /katex >}}
+
+{{< katex display >}}
+r = ||(x, y)|| \\
+\theta = \tan^{-1}\frac{y}{|x|}
+{{< /katex >}}
+
+En este nuevo sistema de coordenadas, para rotar basta con modificar el ángulo, es decir, el 
+punto se transforma a {{< katex >}} (r, k\cdot \theta) {{< /katex >}} después de 
+la operación, siendo {{< katex >}} k {{< /katex >}} el parámetro que indica cuantose desplaza
+angularmente el punto. 
+
+Como el sistema lo requiere, es necesario volver a las coordenadas cartesianas, recordando que 
+{{< katex display >}}
+x = r\cdot \cos(\theta) \\
+y = r \cdot \sin(\theta)
+{{< /katex >}}
+
+```
+    float r = length(coord);
+    float theta = atan(coord.y, abs(coord.x));
+    theta *= segments;
+    coord = vec2(r * cos(theta), r * sin(theta));
+```
+Nótese que los puntos rotarán tanto como segmentos tenga la imagen caleidoscópica deseada.
+
+Finalmente, se regresa al rango usual de coordenadas, {{<katex>}} [0, 1] {{</ katex>}}, y el 
+fragmento actual adquiere el color del pixel encontrado en las coordenadas correspondientes.
+```
+    coord = (coord + 1.0) / 2.0;
+    gl_FragColor = texture2D(texture, coord);
+```
+
+## Referencias
+* [SNAPVALE163, Caleidoscopio](https://snapvale163.wordpress.com/fisica/4-periodo/luz-optica-fisica/espejos/calidoscopio/)
+* 

content/docs/Efectos/Desenfoque Horizontal.md

@@ -0,0 +1,107 @@
+---
+weight: 5
+---
+
+# Desenfoque Horizontal
+
+Los filtros de desenfoque son un efecto en el que 
+se suaviza la textura sobre la que este se aplica, de 
+modo  que se atenúan las diferencias abruptas de color. 
+
+Existen diferentes tipos de efectos de desenfoque, sin embargo en este 
+apartado se tratará el desenfoque horizontal, que difiere de los otros al 
+incrementar la pérdida de detalle sobre los elementos que se encuentren a mayor
+distancia vertical de un horizonte dado.
+
+La demostrasión de este efecto se hace sobre un conjunto de elementos aleatoriamente 
+posicionados en el espacio, de modo que el observador pueda encontrar un objeto a 
+diferentes alturas en la imagen y evidenciar de ese modo la forma en que el nivel de desenfoque
+varía.
+
+{{< p5-iframe sketch="/posteffects/sketches/horizontal/sketch.js" lib1="https://cdn.jsdelivr.net/gh/freshfork/p5.EasyCam/p5.easycam.js" lib2=
+"https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.js" width="625" height="325" >}}
+
+## Código del Fragment Shader del efecto.
+
+{{< details "horizontal.frag" open >}}
+```
+precision mediump float;
+
+uniform sampler2D tDiffuse;
+uniform float h;
+uniform float r;
+
+varying vec2 texcoords2;
+
+void main() {
+    vec2 vUv = texcoords2.st;
+    vec4 sum = vec4( 0.0 );
+
+    float hh = h * abs( r - vUv.y );
+
+    sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * hh, vUv.y ) ) * 0.051;
+    sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * hh, vUv.y ) ) * 0.0918;
+    sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * hh, vUv.y ) ) * 0.12245;
+    sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * hh, vUv.y ) ) * 0.1531;
+    sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
+    sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * hh, vUv.y ) ) * 0.1531;
+    sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * hh, vUv.y ) ) * 0.12245;
+    sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * hh, vUv.y ) ) * 0.0918;
+    sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * hh, vUv.y ) ) * 0.051;
+
+    gl_FragColor = sum;
+}
+```
+{{< /details >}}
+
+Considerando que `r` representa la altura del horizonte imaginario en la textura de entrada (por lo
+que su valor está normalizado) y `h` el nivel de desenfoque, es más sencillo intuir el 
+funcionamiento del shader a partir de esta linea:
+```
+    float hh = h * abs( r - vUv.y );
+```
+
+Es decir que `hh` es la distancia horizontal entre los pixeles cuya 
+diferencia se atenuará posteriormente. esta cantidad es proporcional 
+a la distancia entre la vertical de la coordenada actual de textura y el 
+horizonte.
+
+Como es usual, este  suavizado también depende de una convolución entre los 
+valores de los pixeles y determinado kernel. En este caso, como los pixeles están siendo 
+seleccionados unicamente en sentido horizontal, la máscara debe ser también un vector y el resultado 
+de la operación (el nuevo color del fragmento) no es más que el producto punto entre estos elementos 
+
+{{< katex display >}}
+sum = (u - 4hh, u - 3hh, u - 2hh, u - hh, u, u + hh, u +2hh , u + 3hh, u + 4hh) \cdot \left[ \begin{matrix}
+     0.051  \\
+     0.0918  \\
+     0.12245  \\
+     0.1531  \\
+     0.1633  \\
+     0.1531  \\
+     0.12245  \\
+     0.0918  \\
+     0.051 
+\end{matrix} \right]
+{{< /katex >}}
+
+Dónde {{< katex >}}u{{< /katex >}} es el componente horizontal de la coordenada 
+de textura actual.
+
+```
+    sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * hh, vUv.y ) ) * 0.051;
+    sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * hh, vUv.y ) ) * 0.0918;
+    sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * hh, vUv.y ) ) * 0.12245;
+    sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * hh, vUv.y ) ) * 0.1531;
+    sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
+    sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * hh, vUv.y ) ) * 0.1531;
+    sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * hh, vUv.y ) ) * 0.12245;
+    sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * hh, vUv.y ) ) * 0.0918;
+    sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * hh, vUv.y ) ) * 0.051;
+
+    gl_FragColor = sum;
+```
+
+## Referencias:
+* [OpenGL - Programming Guide, Chapter 9: Texture Mapping](http://www.glprogramming.com/red/chapter09.html#name3)
+* [Parte III: La Referencia de Funciones del GIMP, Capítulo 14, Filtros](https://docs.gimp.org/2.4/es/filters.html)