Introducir el análisis de imágenes/video al implementar: Conversión de la imagen a ASCII Art Hardware.
El arte ASCII es una técnica de diseño gráfico que consta de imágenes ensambladas a partir de los 95 caracteres de impresión (de un total de 128) definidos por el estándar ASCII de 1963, adicionando los conjuntos de caracteres compatibles con ASCII con caracteres extendidos patentados (más allá de los 128 caracteres de ASCII estándar de 7 bits).
Javascript:
1link
2link
3linklet img;
4linklet theShader;
5linklet width = 400;
6linklet height = 480;
7linklet caracs = [];
8link
9linkfunction preload(){
10link theShader = loadShader('/vc/docs/sketches/ascii_images/shader.vert','/vc/docs/sketches/ascii_images/ascii.frag',shaderLoaded);
11link img = loadImage('/vc/docs/sketches/Workshop1/ASCII/example8.jpg',ImageLoaded);
12link
13link for(let i = 1; i <= 11; i++){
14link caracs[i-1]= loadImage('/vc/docs/sketches/ascii_images/'+i+'.png');
15link }
16link
17link}
18link
19linkfunction setup(){
20link createCanvas(width, height, WEBGL);
21link noStroke();
22link textureMode(NORMAL);
23link shader(theShader);
24link
25link theShader.setUniform('img', img);
26link for(let i = 1; i <= 11; i++){
27link theShader.setUniform('car_'+i, caracs[i-1]);
28link }
29link}
30link
31linkfunction draw(){
32link
33link
34link background(0);
35link beginShape();
36link vertex(-width/2, -height/2, 0, 0, 0);
37link vertex(width/2, -height/2, 0, 1, 0);
38link vertex(width/2, height/2, 0, 1, 1);
39link vertex(-width/2, height/2, 0, 0, 1);
40link endShape(CLOSE);
41link
42link}
43link
44linkfunction ImageLoaded(){
45link console.log('image loaded textureShader')
46link }
47link
48linkfunction shaderLoaded(){
49link console.log('shaderLoaded')
50link }
51link
52link
53link
Código fragment shader:
1link
2linkprecision mediump float;
3link
4linkuniform sampler2D img;
5link
6linkuniform sampler2D car_1,car_2,car_3,car_4,car_5,car_6,car_7,car_8,car_9,car_10,car_11;
7link
8linkvarying vec4 vVertexColor;
9linkvarying vec2 vTexCoord;
10link
11linkvoid main() {
12link
13link vec2 pixelCoord = vTexCoord * 100.0;
14link
15link pixelCoord = pixelCoord - floor(pixelCoord);
16link
17link vec4 car = texture2D(img, vTexCoord) * vVertexColor;
18link
19link float grey = (car.r + car.g + car.b)/3.0;
20link int indexasd = int(11.0* grey);
21link
22link if(indexasd == 1){
23link car = texture2D(car_1, pixelCoord);
24link } else if(indexasd == 2){
25link car = texture2D(car_2, pixelCoord);
26link }else if(indexasd == 3){
27link car = texture2D(car_3, pixelCoord);
28link } else if(indexasd == 4){
29link car = texture2D(car_4, pixelCoord);
30link } else if(indexasd == 5){
31link car = texture2D(car_5, pixelCoord);
32link } else if(indexasd == 6) {
33link car = texture2D(car_6, pixelCoord);
34link }else if(indexasd == 7) {
35link car = texture2D(car_7, pixelCoord);
36link } else if(indexasd == 8) {
37link car = texture2D(car_8, pixelCoord);
38link } else if(indexasd == 9) {
39link car = texture2D(car_9, pixelCoord);
40link } else if(indexasd == 10) {
41link car = texture2D(car_10, pixelCoord);
42link }else {
43link car = texture2D(car_5, pixelCoord);
44link }
45link
46link gl_FragColor = car;
47link
48link}
49link
50link
51link
Imagen Original:
Resultado: