Processing/JS

Vídeo Ejemplos 3

Pixelación

cunado leemos los pixeles de una imagen o un vídeo, se almacena como un array unidemensional, el número de cvalores de este array es el ancho por el alto de la imagen

Para localizar un pixel de la imagen en este array es:

Localización = X+(Y*ANCHO)


en este ejemplo la posición del pixel número 13, en una imagen de 5 pixel de ancho es:

Localización = X+(Y*ANCHO)

Localización = 3+(2*5)

Localización = 13

ejemplo:

import processing.video.*;

//tamaño de la celda del pixelado
int videoScale = 12;
int cols, rows;
Capture video;

void setup() {
size(640,480);
// inicializa columnas y filas, dependiendo de la escala del pixelado
cols = width/videoScale;
rows = height/videoScale;
video = new Capture(this,640,480,30);
video.start();
}

void draw() {
if (video.available()) {
video.read();
}
video.loadPixels();
// bucle columnas
for (int i = 0; i < cols; i++) {
// bucle filas
for (int j = 0; j < rows; j++) {

// Escala la imagen agrandando eligiendo los pixeles según la escala
int x = i*videoScale;
int y = j*videoScale;

//elige el color del pixel según el tamaño del pixelado
color c = video.pixels[(i+(j*width))*videoScale];
fill(c);
stroke(0);
// Se dibuja un rectángulo del color del pixel que le corresponde en la posición (x,y) que depende del tamaño de la ventana y de la escala.
rect(x,y,videoScale,videoScale);
}
}
}

Este mismo ejemplo se pued modificar para dibujar circulos y rectángulos de un tamaño que dependa del brillo

import processing.video.*;

int videoScale = 12;
int cols, rows;
Capture video;

void setup() {
size(640,480);
// Initialize columns and rows
cols = width/videoScale;
rows = height/videoScale;
smooth();
video = new Capture(this,640,480,30);
video.start();
}

void draw() {
if (video.available()) {
video.read();
}
background(0);

video.loadPixels();

for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
int x = i*videoScale;
int y = j*videoScale;

color c = video.pixels[(i+(j*width))*videoScale];

// El tamaño del rectángulo se calcula en función del valor del brillo de la imagen. un pixel con mucho brillo es más grande y un pixel con poco brillo es más pequeño
float sz = (brightness(c)/255.0)*videoScale;
rectMode(CENTER);
// de color negro
fill(255);
//del color del pixel de la imagen
//fill(c);
noStroke();
//rect(x + videoScale/2,y + videoScale/2,sz,sz);
ellipse(x + videoScale/2,y + videoScale/2,sz,sz);
}
}
}

Learning Processing
Daniel Shiffman
http://www.learningprocessing.com