transformación de pixeles

src/index.md

@@ -73,6 +73,7 @@ title: "🍃 jardínBit"
 ## Manipulación de imágenes
 
 * [[Imágenes: Abrir, mostrar, leer]](/notas/imagenes-read.html)
+* [[Imágenes: Transformación de pixeles]](/notas/imagenes-pixeles.html)
 * [[Imágenes: Colores, filtros]](/notas/imagenes-colores.html)
 * [[Imágenes: Capas y máscaras]](/notas/imagenes-capas.html)
 * [[Video: Estructuras básicas]](/notas/video.html)

src/notas/imagenes-pixeles.md

@@ -0,0 +1,184 @@
+---
+title: Imágenes: Transformación de pixeles
+---
+
+# Fundamentos: cuadrícula
+
+Podemos considerar a una imagen como un arreglo de pixeles en dos dimensiones.
+
+A cada pixel lo podemos ubicar con un par de coordenadas `x,y` correspondientes al número de columna y de fila respectivamente.
+
+Partiendo del concepto de ciclos anidados para dibujar una cuadrícula, el siguiente ejemplo hace que cada celda tenga un color aleatorio.
+
+* [[Ciclos anidados: Repetición en dos dimensiones]](/notas/ciclos-anidados.html)
+
+```java
+void setup() {
+  size( 640, 480);
+}
+
+void draw() {
+  background(255);
+  randomSeed( 400045 );
+
+  // dibuja varias filas:
+  for (int y=0; y<height; y=y+10) {
+    
+    // dibuja una fila:
+    for (int x=0; x<width; x=x+10) {
+      fill( random(255) );     
+      rect( x, y, 10, 10);
+    } // cierra for x
+    
+  } // cierra for y
+  
+} // cierra draw
+```
+
+¿Qué pasa si en lugar de tener colores aleatorios, cada celda tomara su color de una estructura organiada como un arreglo?
+
+## Cargar y mostrar imagen
+
+En las siguientes notas hay ejemplos de cómo cargar y mostrar una imagen en Processing:
+* [[Imágenes: Abrir, mostrar, leer]](/notas/imagenes-read.html)
+
+```java
+PImage foto; // declarar variable
+
+void setup(){
+ size( 640, 480); 
+ 
+ foto = loadImage("trajinera.jpg"); // carga imagen
+}
+
+void draw(){
+  background( 0 );
+  // dibuja la foto en un rectángulo en 0,0, con ancho 320 y alto 240
+  image( foto, 0, 0, 320, 240);
+}
+```
+
+En los ejemplos siguientes cargaremos la imagen pero no la dibujaremos con `image( )`, sino que más bien leeremos y transformares la información contenida en ella.
+
+# Imagen como fuente de colores
+
+Este par de ejemplos muestran cómo utilizar el método `.get(x,y)` de las imágenes para obtener el color de un pixel dado, y utilizarlo para colorear a cada círculo.
+
+## Cuadrícula
+
+En este ejemplo las coordenadas `x,y` con obtenidas a partir de ciclos anidados que corresponden a una cuadrícula de círculos:
+
+```java
+PImage foto; // declarar variable
+
+void setup(){
+ size( 640, 480); 
+ 
+ foto = loadImage("trajinera.jpg");
+ foto.resize( width, height);
+}
+
+void draw(){
+  background( 0 );
+
+  for( int y=0; y<height; y=y+20){
+   for( int x=0; x<width; x=x+20){
+     // obtiene el color en el pixel x,y
+     color pixel = foto.get(x, y);
+     fill( pixel );
+     ellipse( x, y, 20, 20);
+   }
+  }
+  
+} // cierra draw()
+```
+
+## Aleatorios
+
+Saliendo de la cuadrícula, en este ejemplo se dibuja a un círculo con posición aleatoria con cada cuadro de enimación. Esa posición aleatoria se utiliza para obtener el color del pixel correspondiente en la imagen.
+
+```java
+PImage foto; // declarar variable
+
+void setup(){
+ size( 640, 480); 
+ 
+ foto = loadImage("trajinera.jpg");
+ foto.resize( width, height);
+}
+
+void draw(){
+
+  float x = random(width);
+  float y = random(height);
+  
+  color pixel = foto.get( int(x), int(y) );
+  fill( pixel, 180 );
+  noStroke();
+  ellipse( x, y, 20, 20);
+  
+}
+```
+
+### Más círculos
+
+Si quisiéramos que aparecieran más círculos en cada cuadro de animación, podemos utilizar un ciclo `for` que repita la operación múltiples veces:
+
+
+```java
+PImage foto; // declarar variable
+
+void setup(){
+ size( 640, 480); 
+ 
+ foto = loadImage("trajinera.jpg");
+ foto.resize( width, height);
+}
+
+void draw(){
+  noStroke();
+
+  // repite 10 veces:
+  for( int i=0; i<10; i++){
+    float x = random(width);
+    float y = random(height);
+    
+    color pixel = foto.get( int(x), int(y) );
+    fill( pixel, 180 );
+    ellipse( x, y, 20, 20);
+  } // cierra for
+  
+} // cierra draw()
+```
+
+# Transformación
+
+El siguiente ejemplo usa el brillo de una imagen para convertirlo al diámetro de cada círculo ordenado en cuadrícula:
+
+```java
+PImage foto; // declarar variable
+
+void setup(){
+ size( 640, 480); 
+ 
+ foto = loadImage("trajinera.jpg");
+ foto.resize( width, height);
+}
+
+void draw(){
+  background( 0 );
+
+  for( int y=0; y<height; y=y+12){
+   for( int x=0; x<width; x=x+12){
+     // obtiene el color en el pixel x,y
+     color pixel = foto.get(x, y);
+     // obtiene el brillo:
+     float brillo = brightness(  pixel );
+
+     fill( 255 );
+     // asigna un diámetro proporcional al brillo
+     circle( x, y, brillo/20);
+   }
+  }
+}
+```