add friendly localized error message helper and use it

src/core/friendly_errors/fes_core.js

@@ -201,6 +201,31 @@ if (typeof IS_MINIFIED !== 'undefined') {
     p5._report(message, func, color);
   };
 
+/**
+   * This can be called from anywhere in the p5 library to show users
+   * a localized error message. Instead of passing the message itself, we
+   * pass a "key" that refers to a message contained in our bank of
+   * translations for all our supported languages (including English). (See
+   * `/translations/en/translation.json`).
+   * 
+   * This works well for simple messages. If you want to do something more complex
+   * (like include a filename from an error), you'll need to use translator() and
+   * p5._friendlyError() together.
+   *
+   * @method _friendlyLocalizedError
+   * @private
+   * @param  {String}         messageKey    Key to localized message to be printed
+   * @param  {String}         [func]        Name of the function linked to error
+   * @param  {Number|String}  [color]       CSS color code
+   */
+p5._friendlyLocalizedError = function(messageKey, func, color) {
+  // in the future we could support more direct calls to translator()
+  // to support extra arguments for complex messages
+  // by adding a typeof if statement on messageKey
+  const message = translator(messageKey);
+  p5._report(message, func, color);
+};
+
   /**
    * This is called internally if there is an error with autoplay. Generates
    * and prints a friendly error message [fes.autoplay].
@@ -213,7 +238,7 @@ if (typeof IS_MINIFIED !== 'undefined') {
       src,
       url: 'https://developer.mozilla.org/docs/Web/Media/Autoplay_guide'
     });
-    console.log(translator('fes.pre', { message }));
+    p5._friendlyLocalizedError(message);
   };
 
   /**

src/core/shape/vertex.js

@@ -391,8 +391,8 @@ p5.prototype.bezierVertex = function(...args) {
     this._renderer.bezierVertex(...args);
   } else {
     if (vertices.length === 0) {
-      p5._friendlyError(
-        'vertex() must be used once before calling bezierVertex()',
+      p5._friendlyLocalizedError(
+        '',
         'bezierVertex'
       );
     } else {

src/webgl/p5.Geometry.js

@@ -122,9 +122,9 @@ p5.Geometry = class  {
     const ln = p5.Vector.mag(n);
     let sinAlpha = ln / (p5.Vector.mag(ab) * p5.Vector.mag(ac));
     if (sinAlpha === 0 || isNaN(sinAlpha)) {
-      console.warn(
-        'p5.Geometry.prototype._getFaceNormal:',
-        'face has colinear sides or a repeated vertex'
+      p5._friendlyLocalizedError(
+        'geometry.colinearSidesOrRepeatedVertex',
+        'p5.Geometry.prototype._getFaceNormal:'
       );
       return n;
     }

translations/en/translation.json

@@ -68,5 +68,11 @@
     },
     "welcome": "Welcome! This is your friendly debugger. To turn me off, switch to using p5.min.js.",
     "wrongPreload": "{{location}} An error with message \"{{error}}\" occurred inside the p5js library when \"{{func}}\" was called. If not stated otherwise, it might be due to \"{{func}}\" being called from preload. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function."
+  },
+  "webgl": {
+    "colinearSidesOrRepeatedVertex": "face has colinear sides or a repeated vertex."
+  },
+  "shape": {
+    "vertexBeforeBezierVertex": "vertex() must be used once before calling bezierVertex()"
   }
 }