linkBasic, negative and Gray scale

asciiArt.js
1linklet img;

2linklet shaderLuma;

3linklet imgLuma;

4linklet symbols;

5linklet symbols1;

6linklet symbols2;

7linklet symbols3;

8linklet symbols4;

9linklet symbols5;

10linklet symbols6;

11linklet symbols7;

12linklet symbols8;

13linklet symbols9;

14linklet symbols10;

15linklet symbols11;

16linklet symbols12;

17linklet symbols13;

18linklet symbols14;

19linklet symbols15;

20linklet debug;

21link

22linkfunction preload() {

23link shaderLuma = loadShader(

24link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/shader.vert",

25link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/asciiArt.frag"

26link );

27link img = loadImage("/vc/docs/sketches/workshops/imaging/BabyYoda2.jpg");

28link symbols = loadImage(

29link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/0.png"

30link );

31link symbols1 = loadImage(

32link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/1.png"

33link );

34link symbols2 = loadImage(

35link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/2.png"

36link );

37link symbols3 = loadImage(

38link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/3.png"

39link);

40linksymbols4 = loadImage(

41link  "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/4.png"

42link symbols5 = loadImage(

43link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/5.png"

44link );

45link symbols6 = loadImage(

46link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/6.png"

47link);

48linksymbols7 = loadImage(

49link  "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/7.png"

50link );

51link symbols8 = loadImage(

52link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/8.png"

53link );

54linksymbols9 = loadImage(

55link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/9.png"

56link );

57link symbols10 = loadImage(

58link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/10.png"

59link);

60linksymbols11 = loadImage(

61link  "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/11.png"

62link );

63link symbols12 = loadImage(

64link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/12.png"

65link );

66link symbols13 = loadImage(

67link  "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/13.png"

68link );

69link symbols14 = loadImage(

70link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/14.png"

71link );

72link symbols15 = loadImage(

73link   "/vc/docs/sketches/workshops/imaging/hardware/asciiArt/symbols/20.png"

74link );

75linkdebug = false;

76link}

77link

78linkfunction setup() {

79link createCanvas(windowWidth - 15, windowHeight - 21);

80link noLoop();

81linkbutton = createButton("FullScreen");

82link button.attribute(

83link  "style",

84link  "box-shadow:inset 0px 1px 0px 0px #000000;\n" +

85link     "\tborder-radius:6px;\n" +

86link     "\tborder:1px solid #000000;\n" +

87link     "\tdisplay:inline-block;\n" +

88link     "\tcursor:pointer;\n" +

89link     "\tcolor:#000000;\n" +

90link     "\tfont-family:Arial;\n" +

91link     "\tfont-size:15px;\n" +

92link     "\tfont-weight:bo ld;\n" +

93link     "\tpadding:6px 24px;\n" +

94link     "\ttext-decoration:none;\n"

95link );

96link button.position(3, 3);

97link button.mousePressed(fullScreen);

98link

99link imgLuma = shaderImage(shaderLuma);

100link}

101link

102linkfunction draw() {

103link console.time("Ascii Art image");

104link image(img, 0, 0, windowWidth, windowHeight);

105link rect(windowWidth/2, 0, windowWidth/2, windowHeight);

106link image(imgLuma, windowWidth / 2, 0, windowWidth, windowHeight);

107link fill(255, 255, 255);

108link console.timeEnd("GrayScale image");

109link}

110link

111linkfunction shaderImage(shader) {

112link graphic = createGraphics(windowWidth - 15, windowHeight - 21, WEBGL);

113link graphic.textureMode(NORMAL);

114link graphic.shader(shader);

115link shader.setUniform("texture", img);

116link shader.setUniform("symbols", symbols);

117link shader.setUniform("symbols1", symbols1);

118link shader.setUniform("symbols2", symbols2);

119link shader.setUniform("symbols3", symbols3);

120link shader.setUniform("symbols4", symbols4);

121link shader.setUniform("symbols5", symbols5);

122link shader.setUniform("symbols6", symbols6);

123link shader.setUniform("symbols7", symbols7);

124link shader.setUniform("symbols8", symbols8);

125link shader.setUniform("symbols9", symbols9);

126link shader.setUniform("symbols10", symbols10);

127link shader.setUniform("symbols11", symbols11);

128link shader.setUniform("symbols12", symbols12);

129link shader.setUniform("symbols13", symbols13);

130link shader.setUniform("symbols14", symbols14);

131link shader.setUniform("symbols15", symbols15);

132link shader.setUniform("verticalOffset", 1 / img.height);

133link shader.setUniform("horizontalOffset", 1 / img.width);

134link shader.setUniform("resolution", 160);

135link shader.setUniform("debug", debug);

136link graphic.beginShape();

137link graphic.vertex(-width / 2, -height / 2, 0, 0);

138link graphic.vertex(width / 2, -height / 2, 1, 0);

139link graphic.vertex(width / 2, height / 2, 1, 1);

140link graphic.vertex(-width / 2, height / 2, 0, 1);

141link graphic.endShape(CLOSE);

142link return graphic;

143link}

144link

145linkfunction fullScreen() {

146link let fs = fullscreen();

147link fullscreen(!fs);

148link}

149link

150linkfunction windowResized() {

151link resizeCanvas(windowWidth - 15, windowHeight - 21);

152link}

153link

asciiArt.frag
1linkprecision mediump float;

2linkuniform sampler2D texture;

3linkuniform sampler2D symbols;

4linkuniform sampler2D symbols1;

5linkuniform sampler2D symbols2;

6linkuniform sampler2D symbols3;

7linkuniform sampler2D symbols4;

8linkuniform sampler2D symbols5;

9linkuniform sampler2D symbols6;

10linkuniform sampler2D symbols7;

11linkuniform sampler2D symbols8;

12linkuniform sampler2D symbols9;

13linkuniform sampler2D symbols10;

14linkuniform sampler2D symbols11;

15linkuniform sampler2D symbols12;

16linkuniform sampler2D symbols13;

17linkuniform sampler2D symbols14;

18link//uniform sampler2D symbols15;

19link

20linkuniform float resolution;

21linkvec4 textureColor;

22linkfloat luma;

23linkvarying vec2 vTexCoord;

24linkvarying vec4 vVertexColor;

25link

26linkfloat sRGBtoLin(in float colorChannel) {

27link   if(colorChannel <= 0.04045) {

28link       return colorChannel / 12.92;

29link   } else {

30link       return pow(((colorChannel + 0.055) / 1.055), 2.2);

31link   }

32link}

33link

34linkfloat gam_sRGB(in float v) {

35link   if(v <= 0.0031308) {

36link       v *= 12.92;

37link   } else {

38link       v = (1.055 * (pow(v, 1.0 / 2.4))) - 0.055;

39link   }

40link   return v * 255.0;

41link}

42link

43linkfloat lumaFunc(in float r, in float g, in float b) {

44link   float rY = 0.212655;

45link   float gY = 0.715158;

46link   float bY = 0.072187;

47link   //Convert all sRGB 8 bit integer values to decimal 0.0-1.0

48link   float vR = r / 255.0;

49link   float vG = g / 255.0;

50link   float vB = b / 255.0;

51link   //Convert a gamma encoded RGB to a linear value.

52link   float rLin = sRGBtoLin(vR);

53link   float gLin = sRGBtoLin(vG);

54link   float bLin = sRGBtoLin(vB);

55link   //Find Luminance (Y)

56link   float Y = ((rY * rLin) + (gY * gLin) + (bY * bLin));

57link   //float Y = ((rY) + (gY) + (bY)) * 255.0;

58link   return gam_sRGB(Y);

59link}

60link

61linkvoid main() {

62link   vec2 symbolCoord = vTexCoord * resolution;

63link   vec2 imageCoord = floor(symbolCoord);

64link   symbolCoord = symbolCoord - imageCoord;

65link   imageCoord = imageCoord * vec2(1.0) / vec2(resolution);

66link   textureColor = texture2D(texture, imageCoord);

67link

68link   luma = lumaFunc(textureColor.r, textureColor.g, textureColor.b);

69link   textureColor.r = luma;

70link   textureColor.g = luma;

71link   textureColor.b = luma;

72link   textureColor.a = 1.0;

73link   float result = luma;

74link   if(result > 0.0 && result <= 0.0625) {

75link       textureColor = texture2D(symbols, symbolCoord);

76link   } else if(result > 0.0625 && result <= 0.125) {

77link       textureColor = texture2D(symbols1, symbolCoord);

78link   } else if(result > 0.125 && result <= 0.1875) {

79link       textureColor = texture2D(symbols2, symbolCoord);

80link   } else if(result > 0.1875 && result <= 0.25) {

81link       textureColor = texture2D(symbols3, symbolCoord);

82link   } else if(result > 0.25 && result <= 0.3125) {

83link       textureColor = texture2D(symbols4, symbolCoord);

84link   } else if(result > 0.3125 && result <= 0.375) {

85link       textureColor = texture2D(symbols5, symbolCoord);

86link   } else if(result > 0.375 && result <= 0.4375) {

87link       textureColor = texture2D(symbols6, symbolCoord);

88link   } else if(result > 0.4375 && result <= 0.5) {

89link       textureColor = texture2D(symbols7, symbolCoord);

90link   } else if(result > 0.5 && result <= 0.5625) {

91link       textureColor = texture2D(symbols8, symbolCoord);

92link   } else if(result > 0.5625 && result <= 0.625) {

93link       textureColor = texture2D(symbols9, symbolCoord);

94link   } else if(result > 0.625 && result <= 0.6875) {

95link       textureColor = texture2D(symbols10, symbolCoord);

96link   } else if(result > 0.6875 && result <= 0.75) {

97link       textureColor = texture2D(symbols11, symbolCoord);

98link   } else if(result > 0.75 && result <= 0.8125) {

99link       textureColor = texture2D(symbols12, symbolCoord);

100link   } else if(result > 0.8125 && result <= 0.875) {

101link       textureColor = texture2D(symbols13, symbolCoord);

102link   } else if(result > 0.875 && result <= 0.9375) {

103link       textureColor = texture2D(symbols14, symbolCoord);

104link   }/* else if(result > 0.9375 && result <= 1.0) {

105link       textureColor = texture2D(symbols15, symbolCoord);

106link   }*/

107link   gl_FragColor = textureColor * vVertexColor;

108link}

109link