Star

Created With

linkConversión a Escala de Grises - Hardware

linkPlanteamiento del Problema

Convertir una imagen a color a escala de grises usando el promedio RGB y Luma por Hardware.

linkCodigo & Resultados

linkImagen Mahakal Original y en Escala de grises usando promedio RGB con P5

1link> precision mediump float;

2link> 

3link> uniform sampler2D texture;

4link> 

5link> varying vec4 vVertexColor;

6link> 

7link> varying vec2 vTexCoord;

8link> 

9link> void main() {

10link>   vec4 col = texture2D(texture, vTexCoord) * vVertexColor;

11link>   float grayRGB = dot(col.rgb, vec3(0.333, 0.333, 0.333));

12link>   gl_FragColor = vec4(vec3(grayRGB), 1.0);

13link> }

linkImagen Mahakala Original y en Escala de grises usando Luma con P5

Y=0.299∗R+0.587∗V+0.114∗AY = 0.299 * R + 0.587 * V + 0.114 * A1
Y=0.2126∗R+0.7152∗V+0.0722∗AY = 0.2126 * R + 0.7152 * V + 0.0722 * A1

El resultado es el siguiente:

1link> precision mediump float;

2link> 

3link> uniform sampler2D texture;

4link> 

5link> uniform bool form;

6link> 

7link> varying vec4 vVertexColor;

8link> 

9link> varying vec2 vTexCoord;

10link> 

11link> void main() {

12link>   vec4 col = texture2D(texture, vTexCoord) * vVertexColor;

13link>   float grayLuma;

14link>   if(form){

15link>     grayLuma = dot(col.rgb, vec3(0.299, 0.587, 0.114));

16link>   }else{

17link>     grayLuma = dot(col.rgb, vec3(0.2126, 0.7152, 0.0722));

18link>   }

19link>   gl_FragColor = vec4(vec3(grayLuma), 1.0);

20link> }

linkVideo Dedos Original y en Escala de grises usando Luma con P5

Hacer click para correr el video.

1link> precision mediump float;

2link> 

3link> uniform sampler2D texture;

4link> 

5link> varying vec4 vVertexColor;

6link> 

7link> varying vec2 vTexCoord;

8link> 

9link> void main() {

10link>   vec4 col = texture2D(texture, vTexCoord) * vVertexColor;

11link>   float grayRGB = dot(col.rgb, vec3(0.333, 0.333, 0.333));

12link>   gl_FragColor = vec4(vec3(grayRGB), 1.0);

13link> }

Conversión a Escala de Grises - HardwarePlanteamiento del ProblemaCodigo & ResultadosImagen Mahakal Original y en Escala de grises usando promedio RGB con P5Imagen Mahakala Original y en Escala de grises usando Luma con P5Video Dedos Original y en Escala de grises usando Luma con P5

Home

Workshopschevron_right
Imaging & Videochevron_right
Softwarechevron_right

Ejercicio Blanco & Negro Convolución Ascii Art Mosaico Conclusiones

Hardwarechevron_right

Ejercicio Blanco & Negro Convolución Ascii Art Mosaico Conclusiones

Renderingchevron_right

Ejercicio Lightcuts

Algovis Computer Graphics HCI

P5 Code Snippetschevron_right

P5 Component Basics Video on dom Video on canvas 3D Libs Sound

Memberschevron_right

Nicolas Rodriguez Salguero Carlos Daniel Rincon Mora Mateo Aguilar Cardona

GitHub