Introducir el análisis de imágenes/video al implementar: Conversión a escala de grises: promedio rgb y lumaaa.
RGB es la composición del color en términos de la intensidad de los colores primarios de la luz. Es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores de luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en distintos dispositivos que usen este modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente.
Una de las opciones para realizar una conversión de una imagen a su equivalente en escala de grises es calculando el promedio de los valores RGB de cada pixel y definiendo los valores de dichos pixeles con el promedio calculado.
En una transmisión de señal de vídeo, luma es la componente que codifica la información de luminosidad de la imagen. En términos generales, es algo muy similar a la versión en blanco y negro de la imagen original. Luma y crominancia combinadas proporcionan la señal denominada señal de vídeo compuesto, utilizada en multitud de aplicaciones; pueden enviarse conjuntamente o transmitirse independientemente. Forman parte de la codificación de vídeo en los estándares de TV NTSC y PAL, entre otros.
Para generar la imagen equivalente en escala de grises, se operan los valores RGB de cada pixel por unos coeficientes predeterminados:
Código para una imagen:
1linklet img;
2link
3linkfunction preload() {
4link img = loadImage('/vc/docs/sketches/lenna.png', ImageLoaded)
5link}
6link
7linkfunction setup() {
8link createCanvas(512, 512)
9link}
10link
11linkfunction draw() {
12link image(img, 0, 0)
13link noLoop();
14link}
15link
16linkfunction ImageLoaded(){
17link console.log('image loaded')
18link img.loadPixels()
19link pixelDensity(1)
20link for (let x = 0; x < img.width; x++) {
21link for (let y = 0; y < img.height; y++) {
22link const i = 4 * (y * img.width + x);
23link const [r, g, b] = [img.pixels[i], img.pixels[i + 1], img.pixels[i + 2]];
24link average = (r + g + b) / 3
25link img.set(x, y, color(average, average, average))
26link }
27link }
28link img.updatePixels()
29link}
Resultado:
Código para un video:
1linklet vid;
2link
3linkfunction setup() {
4link createCanvas(320, 240);
5link vid = createVideo(['/vc/docs/sketches/fingers.mov', '/vc/docs/sketches/fingers.webm']);
6link vid.loop();
7link noStroke();
8link fill(0);
9link}
10link
11linkfunction draw() {
12link background(255);
13link fill(0);
14link noStroke();
15link vid.loadPixels();
16link for (var y = 0; y < height; y++) {
17link for (var x = 0; x < width; x++) {
18link const i = 4 * (y * vid.width + x);
19link const [r, g, b] = [vid.pixels[i], vid.pixels[i + 1], vid.pixels[i + 2]];
20link average = (r + g + b) / 3
21link vid.pixels[i] = average;
22link vid.pixels[i + 1] = average;
23link vid.pixels[i + 2] = average;
24link }
25link }
26link vid.updatePixels();
27link image(vid, 0, 0, width, height);
28link}
29link
Resultado:
Código para una imagen:
1linklet img;
2link
3linkfunction preload() {
4link img = loadImage('/vc/docs/sketches/lenna.png', ImageLoaded)
5link}
6link
7linkfunction setup() {
8link createCanvas(512, 512)
9link}
10link
11linkfunction draw() {
12link image(img, 0, 0)
13link noLoop();
14link}
15link
16linkfunction ImageLoaded(){
17link console.log('image loaded')
18link img.loadPixels()
19link pixelDensity(1)
20link for (let x = 0; x < img.width; x++) {
21link for (let y = 0; y < img.height; y++) {
22link const i = 4 * (y * img.width + x);
23link const [r, g, b] = [img.pixels[i], img.pixels[i + 1], img.pixels[i + 2]];
24link luma = r*0.299 + g*0.587 + b*0.0114;
25link img.set(x, y, color(luma, luma, luma))
26link }
27link }
28link img.updatePixels()
29link}
Resultado:
Código para un video:
1linklet vid;
2link
3linkfunction setup() {
4link createCanvas(320, 240);
5link vid = createVideo(['/vc/docs/sketches/fingers.mov', '/vc/docs/sketches/fingers.webm']);
6link vid.loop();
7link noStroke();
8link fill(0);
9link}
10link
11linkfunction draw() {
12link background(255);
13link fill(0);
14link noStroke();
15link vid.loadPixels();
16link for (var y = 0; y < height; y++) {
17link for (var x = 0; x < width; x++) {
18link const i = 4 * (y * vid.width + x);
19link const [r, g, b] = [vid.pixels[i], vid.pixels[i + 1], vid.pixels[i + 2]];
20link luma = r * 0.299 + g * 0.587 + b * 0.0114;
21link vid.pixels[i] = luma;
22link vid.pixels[i + 1] = luma;
23link vid.pixels[i + 2] = luma;
24link }
25link }
26link vid.updatePixels();
27link image(vid, 0, 0, width, height);
28link}
Resultado: