Taller 1 #
Objetivo #
En este taller fortaleceremos conceptos de manipulación de píxeles para la modificación de una imagen mediante Kernels, reproduciremos ilusiones ópticas para familiarizarnos con P5.js y construiremos un visualizador de histogramas.
Types #
- Convoluciones
- 1. Convoluciones # Problem statement # Una convolucion sobre una imagen es un calculo matematico sobre un conjunto de pixeles sobre la misma, esta operacion hace uso de los denominados Kernel; Un kernel es una matriz con valores determinados los cuales permiten aplicar diferentes mascaras sobre las imagenes, los valores dentro de las matrices de los kernel se pueden alterar con base en el resultado que se desee obtener se pueden modificar.
- Histograma
- Histograma # Problem statement # Un histograma de imagen es una representación gráfica de la distribución tonal en una imagen digital. Para esto traza el número de píxeles para cada valor tonal de manera que al mirar el histograma de una imagen específica, un espectador podrá juzgar la distribución tonal completa de un vistazo. Tiene muchos usos entre ellos sirve dar al fotógrafo una mejor comprensión de los valores de brillo en una imagen.
- Ilusiones
- Taller 1 # Objetivo # En este taller fortaleceremos conceptos de manipulación de píxeles para la modificación de una imagen mediante Kernels, reproduciremos ilusiones ópticas para familiarizarnos con P5.js y construiremos un visualizador de histogramas. Types # Binding Movement Movimiento Enlazado # Problem statement # La presente ilusión muestra 4 líneas aparentemente moviéndose de forma independiente, sin embargo, al revisarlas de forma extensiva se puede notar que se mueven en pares ordenados paralelos.
- Lightness
- Lightness # Problem statement # Sería útil tener una herramienta que permita la manipulación de luminosidad de una imagen, y de esta manera poder aclarar imágenes oscuras para poder ver sus siluetas. Background # Manipulación de pixeles usando P5.js Uso de HSL Conversión entre HSL y RGB Code # Pasos dentro del código: Cargar la imagen a manipular y el botón de rango Dado un valor en el botón de rango, se aumenta la luminosidad de cada pixel en la imagen.
- Multiplicacion Rgb
- Multiplicación RGB # Problem statement # ¿Qué sucede si multiplicamos dos colores RGB? Code # Pasos dentro del código: Obtener los 2 valores RGB de la paleta Calcular su multiplicación y mostrarla en pantalla source code let backgroundColor; let color1, color2 function setup() { createCanvas(200, 200); let c1 = createInput("0,0,0",'color') let c2 = createInput("0,0,0",'color') c1.input(()=> setColor1(c1,c2)) c2.input(()=> setColor1(c1,c2)) } function setColor1(c1,c2){ let color1 = color(red(c1.