https://puneet798.github.io/p5jsSketches/YouAreNumbers/sketch.js

1var myAsciiArt;
2
3/*
4  The size of generated ASCII graphics expressed in characters and lines.
5*/
6var asciiart_width = 120; var asciiart_height = 60;
7
8/*
9  Video capture device.
10*/
11var myCapture
12
13/*
14  Buffer for processed graphics, simplifying some operations. This will be an
15  object derived from the p5.Graphics class
16*/
17var gfx;
18
19/*
20  This variable will store a two-dimensional array - "image" in the form of
21  ASCII codes.
22*/
23var ascii_arr;
24
25/*
26  And this flag will inform the program whether to display the source image
27  from the camera. We will switch the flag with taps/clicks.
28*/
29var showOryginalImageFlag = false;
30
31/*
32  Here we are trying to get access to the camera.
33*/
34function initCaptureDevice() {
35  try {
36    myCapture = createCapture(VIDEO);
37    myCapture.size(320, 240);
38    myCapture.elt.setAttribute('playsinline', '');
39    myCapture.hide();
40    console.log(
41      '[initCaptureDevice] capture ready. Resolution: ' +
42      myCapture.width + ' ' + myCapture.height
43    );
44  } catch(_err) {
45    console.log('[initCaptureDevice] capture error: ' + _err);
46  }
47}
48
49function setup() {
50  createCanvas(640, 480); // we need some space...
51  initCaptureDevice(); // and access to the camera
52  /*
53    In this particular case the gfx helper should have dimensions the same as
54    the target graphic.
55  */
56  gfx = createGraphics(asciiart_width, asciiart_height);
57  gfx.pixelDensity(1);
58  /*
59    Here we create an object derived from the AsciiArt pseudo-class from the
60    p5.asciiart library:
61      new AsciiArt(_sketch);
62      new AsciiArt(_sketch, _fontName);
63      new AsciiArt(_sketch, _fontName, _fontSize);
64      new AsciiArt(_sketch, _fontName, _fontSize, _textStyle);
65  */
66  myAsciiArt = new AsciiArt(this);
67  /*
68    After initializing the object, look at (in the console) the listing of the
69    array containing the glyphs sorted according to the amount of space
70    occupied. This table is the basis for the procedure that converts
71    individual image pixels into glyphs.
72  */
73  myAsciiArt.printWeightTable();
74  /*
75    Here we set the font family, size and style. By default ASCII Art library
76    is using 'monospace' font, so we want to apply the same setting to our
77    sketch.
78  */
79  textAlign(CENTER, CENTER); textFont('monospace', 8); textStyle(NORMAL);
80  noStroke(); fill(255);
81  /*
82    Finally we set the framerate.
83  */
84  frameRate(30);
85}
86
87function draw() {
88  if(myCapture !== null && myCapture !== undefined) { // safety first
89    background(0);
90    /*
91      Let's prepare the image for conversion. Although the object derived from
92      the AsciiArt pseudo-class has it's own mechanism of changing the size of
93      the image, we will use the external one. Thanks to this we will be able -
94      before transferring the image for conversion - to perform the posterize
95      effect on it, which will make the final effect better.
96    */
97    gfx.background(0);
98    gfx.image(myCapture, 0, 0, gfx.width, gfx.height);
99    /*
100      It is worth experimenting with the value of the parameter defining the
101      level of posterization. Depending on the characteristics of the image,
102      different values may have the best effect. And sometimes it is worth not
103      to apply the effect of posterization on the image.
104    */
105    gfx.filter(POSTERIZE, 5);
106    /*
107      Here the processed image is converted to the ASCII art. The convert()
108      function in this case is used with just one parameter (image we want to
109      convert), so the resultant ASCII graphics will have the same resolution
110      as the image. If necessary (especially if the resolution of the converted
111      image is relatively high), it is possible to use the converter function
112      in the version with three parameters: then the second and third
113      parameters will be respectively the width and height of the generated
114      glyph table. The convert() function returns a two-dimensional array of
115      characters containing the representation of the converted graphics in the
116      form of the ASCII art. If the conversion fails, the function returns
117      null.
118    */
119    ascii_arr = myAsciiArt.convert(gfx);
120    /*
121      We can only watch ASCII art or display it against the background of the
122      original image from the camera. The flag controlling the display of the
123      image coming from the camera is switched by tap/click.
124    */
125    if(showOryginalImageFlag) image(myCapture, 0, 0, width, height);
126    /*
127      Now it's time to show ASCII art on the screen. First, we set drawing
128      parametrs. Next, we call the function typeArray2d() embedded in the
129      ASCII Art library, that writes the contents of a two-dimensional array
130      containing (implicitly) text characters (chars) on the screen. In this
131      case, we call a function with 2 parameters: the first is the table
132      whose contents we want to print, and the second is the destination (an
133      object with "canvas" property). If you use the function with two
134      parameters (as we do in this example), it will assume that you need to
135      fill the entire surface of the target canvass with a drawing. However,
136      the function can be called in 3 variants:
137        [AsciiArt instance].typeArray2d(_arr2d, _dst);
138        [AsciiArt instance].typeArray2d(_arr2d, _dst, _x, _y);
139        [AsciiArt instance].typeArray2d(_arr2d, _dst, _x, _y, _w, _h);
140      The parameters are as follows:
141        _arr2d - 2-dimentional array containing glyphs (chars)
142        _dst - destination (typically the sketch itself)
143        _x, _y - coordinates of the upper left corner
144        _w, _h - width and height
145      It is relatively easy to write your own function that formats the contents
146      of an array to ASCII graphics. At the end of this example, I glue the
147      function code from a non-minimized version of the library - it can be
148      used as a base for your own experiments.
149    */
150    myAsciiArt.typeArray2d(ascii_arr, this);
151  }
152  else {
153    /*
154      If there are problems with the capture device (it's a simple mechanism so
155      not every problem with the camera will be detected, but it's better than
156      nothing) we will change the background color to alarmistically red.
157    */
158    background(255, 0, 0);
159  }
160}
161
162function mouseReleased() {
163  /*
164    The flag controlling the display of the image coming from the camera is
165    switched by tap/click.
166  */
167 showOryginalImageFlag = !showOryginalImageFlag;
168}
169
170/*
171  *****************************************************************************
172  ******************************** typeArray2d ********************************

173  Slightly reworked part of the oryginal code from the ASCII Art library - you
174  can redesign this to suit your needs.
175  *****************************************************************************
176  A simple function to help us print the ASCII Art on the screen. The function
177  prints a two-dimensional array of glyphs and it is used similarly to the
178  standard method of displaying images. It can be used in versions with 2, 4 or
179  6 parameters. When using the version with 2 parameters, the function assumes
180  that the width and height of the printed text block is equal to the width and
181  height of the working space (that's mean: equal to the _dst size) and it
182  starts drawing from upper left corner (coords: 0, 0). When using the version
183  with 4 parameters, the function assumes that the width and height of the
184  printed text block is equal to the width and height of the working space
185  (that's mean: equal to the _dst size). _arr2d is the two-dimensional array of
186  glyphs, _dst is destinetion (basically anything with 'canvas' property, such
187  as p5js sketch or p5.Graphics).
188*/
189typeArray2d = function(_arr2d, _dst, _x, _y, _w, _h) {
190  if(_arr2d === null) {
191    console.log('[typeArray2d] _arr2d === null');
192    return;
193  }
194  if(_arr2d === undefined) {
195    console.log('[typeArray2d] _arr2d === undefined');
196    return;
197  }
198  switch(arguments.length) {
199    case 2: _x = 0; _y = 0; _w = width; _h = height; break;
200    case 4: _w = width; _h = height; break;
201    case 6: /* nothing to do */ break;
202    default:
203      console.log(
204        '[typeArray2d] bad number of arguments: ' + arguments.length
205      );
206      return;
207  }
208  /*
209    Because Safari in macOS seems to behave strangely in the case of multiple
210    calls to the p5js text(_str, _x, _y) method for now I decided to refer
211    directly to the mechanism for handling the canvas tag through the "pure"
212    JavaScript.
213  */
214  if(_dst.canvas === null) {
215    console.log('[typeArray2d] _dst.canvas === null');
216    return;
217  }
218  if(_dst.canvas === undefined) {
219    console.log('[typeArray2d] _dst.canvas === undefined');
220    return;
221  }
222  var temp_ctx2d = _dst.canvas.getContext('2d');
223  if(temp_ctx2d === null) {
224    console.log('[typeArray2d] _dst canvas 2d context is null');
225    return;
226  }
227  if(temp_ctx2d === undefined) {
228    console.log('[typeArray2d] _dst canvas 2d context is undefined');
229    return;
230  }
231  var dist_hor = _w / _arr2d.length;
232  var dist_ver = _h / _arr2d[0].length;
233  var offset_x = _x + dist_hor * 0.5;
234  var offset_y = _y + dist_ver * 0.5;
235  for(var temp_y = 0; temp_y < _arr2d[0].length; temp_y++)
236    for(var temp_x = 0; temp_x < _arr2d.length; temp_x++)
237      /*text*/temp_ctx2d.fillText(
238        _arr2d[temp_x][temp_y],
239        offset_x + temp_x * dist_hor,
240        offset_y + temp_y * dist_ver
241      );
242}