diff --git a/package-lock.json b/package-lock.json
index d23afc420a..cbd327b763 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "libtess": "^1.2.2",
         "omggif": "^1.0.10",
         "pako": "^2.1.0",
+        "tl-util": "npm:@limzykenneth/tl-util@0.0.1",
         "zod": "^4.2.1"
       },
       "devDependencies": {
@@ -12809,6 +12810,13 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tl-util": {
+      "name": "@limzykenneth/tl-util",
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@limzykenneth/tl-util/-/tl-util-0.0.1.tgz",
+      "integrity": "sha512-s7mR7HzSY7HUBzsVQWQzGm6GTGYOlJy/Y4WctTPtHepKIXYIB93mDrFggclEg/WqnWNP951shh2VAqDPZllGFw==",
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index 4242f1be5a..4b195f6204 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
     "libtess": "^1.2.2",
     "omggif": "^1.0.10",
     "pako": "^2.1.0",
-    "zod": "^4.2.1"
+    "zod": "^4.2.1",
+    "tl-util": "npm:@limzykenneth/tl-util@0.0.1"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
diff --git a/preview/index.html b/preview/index.html
index 055f642f2e..6e74e1e38e 100644
--- a/preview/index.html
+++ b/preview/index.html
@@ -18,241 +18,18 @@
 <body>
   <script type="module">
     import p5 from '../src/app.js';
-    import rendererWebGPU from '../src/webgpu/p5.RendererWebGPU.js';
-
-    p5.registerAddon(rendererWebGPU);
 
     const sketch = function (p) {
-      let fbo;
-      let sh, sh2;
-      let ssh;
-      let tex;
-      let font;
-      let redFilter;
-      let env;
-      let instance;
-
-      // Compute shader variables
-      let computeShader;
-      let particleBuffer;
-      let bouncingCirclesShader;
-      let circleGeometry;
-      const NUM_CIRCLES = 100;
-      const RADIUS = 2;
-
-      p.setup = async function () {
-        await p.createCanvas(400, 400, p.WEBGPU);
-        env = await p.loadImage('img/spheremap.jpg');
-        font = await p.loadFont(
-          'font/PlayfairDisplay.ttf'
-        );
-        fbo = p.createFramebuffer();
-
-        instance = p.buildGeometry(() => p.sphere(5));
-        circleGeometry = p.buildGeometry(() => p.sphere(RADIUS));
-
-        redFilter = p.baseFilterShader().modify(() => {
-          p.getColor((inputs, canvasContent) => {
-            let col = p.getTexture(canvasContent, inputs.texCoord);
-            col.g = col.r;
-            col.b = col.r;
-            return col;
-          })
-        }, { p })
-
-        tex = p.createImage(100, 100);
-        tex.loadPixels();
-        for (let x = 0; x < tex.width; x++) {
-          for (let y = 0; y < tex.height; y++) {
-            const off = (x + y * tex.width) * 4;
-            tex.pixels[off] = p.round((x / tex.width) * 255);
-            tex.pixels[off + 1] = p.round((y / tex.height) * 255);
-            tex.pixels[off + 2] = 0;
-            tex.pixels[off + 3] = 255;
-          }
-        }
-        tex.updatePixels();
-        fbo.draw(() => {
-          p.imageMode(p.CENTER);
-          p.image(tex, 0, 0, p.width, p.height);
-        });
-
-        sh = p.baseMaterialShader().modify(() => {
-          const time = p.uniformFloat(() => p.millis());
-          p.getWorldInputs((inputs) => {
-            inputs.position.y += 40 * p.sin(time * 0.005);
-            return inputs;
-          });
-        }, { p })
-        sh2 = p.baseMaterialShader().modify(() => {
-          p.getWorldInputs((inputs) => {
-            inputs.position.x += 20 * p.instanceID();
-            return inputs;
-          });
-        }, { p })
-
-        // Initialize storage buffers with random positions and velocities
-        const initialParticles = [];
-        for (let i = 0; i < NUM_CIRCLES; i++) {
-          initialParticles.push({
-            position: [p.random(-150, 150), p.random(-150, 150)],
-            velocity: [
-              0.1 * p.random(1, 3) * (p.random() > 0.5 ? 1 : -1),
-              0.1 * p.random(1, 3) * (p.random() > 0.5 ? 1 : -1)
-            ]
-          })
-        }
-
-        particleBuffer = p.createStorage(initialParticles);
-
-        // Create compute shader for physics simulation
-        computeShader = p.buildComputeShader(() => {
-          const particles = p.uniformStorage('particles', particleBuffer);
-          const bounds = p.uniformVec2(() => [p.width / 2 - RADIUS, p.height / 2 - RADIUS]);
-          const deltaTime = p.uniformFloat(() => p.deltaTime * 0.1);
-
-          const idx = p.index.x;
-
-          // Read current position and velocity
-          let position = particles[idx].position;
-          let velocity = particles[idx].velocity;
-
-          // Update position
-          position += velocity * deltaTime;
-
-          // Bounce off boundaries
-          if (position.x > bounds.x || position.x < -bounds.x) {
-            velocity.x = -velocity.x;
-            position.x = p.clamp(position.x, -bounds.x, bounds.x);
-          }
-          if (position.y > bounds.y || position.y < -bounds.y) {
-            velocity.y = -velocity.y;
-            position.y = p.clamp(position.y, -bounds.y, bounds.y);
-          }
-
-          particles[idx].position = position;
-          particles[idx].velocity = velocity;
-        }, { p, RADIUS, particleBuffer });
-
-        // Shader for rendering bouncing circles from storage buffer
-        bouncingCirclesShader = p.baseMaterialShader().modify(() => {
-          const particles = p.uniformStorage('particles', particleBuffer);
-
-          p.getWorldInputs((inputs) => {
-            const instanceIdx = p.instanceID();
-            inputs.position.xy += particles[instanceIdx].position;
-            return inputs;
-          });
-        }, { p, particleBuffer });
+      p.setup = function () {
+        p.createCanvas(400, 400);
+        p.noLoop();
       };
 
       p.draw = function () {
-        // Run compute shader to update physics
-        debugger
-        p.compute(computeShader, NUM_CIRCLES);
-
-        p.clear();
-        p.rotateY(p.millis() * 0.001);
-        p.push();
-        //p.clip(() => p.rect(-50, -50, 200, 200));
-        /*p.orbitControl();
-        p.push();
-        p.textAlign(p.CENTER, p.CENTER);
-        p.textFont(font);
-        p.textSize(85)
-        p.fill('red')
-        p.noStroke()
-        p.rect(0, 0, 100, 100);
-        p.fill(0);
-        p.push()
-        p.rotate(p.millis() * 0.001)
-        p.text('Hello!', 0, 0);
-        p.pop()
-        p.pop();
-        return;*/
-        p.orbitControl();
-        const t = p.millis() * 0.002;
-        p.background(200);
-        p.panorama(env);
-        p.push();
-        p.imageLight(env);
-        p.shader(sh);
-        // p.strokeShader(ssh)
-        p.ambientLight(10);
-        //p.directionalLight(100, 100, 100, 0, 1, -1);
-        //p.pointLight(155, 155, 155, 0, -200, 500);
-        p.specularMaterial(255);
-        p.shininess(50);
-        p.metalness(100);
-        //p.stroke('white');
-        p.noStroke();
-        for (const [i, c] of ['red', 'gray', 'blue'].entries()) {
-          p.push();
-          p.fill(c);
-          p.translate(
-            p.width/3 * p.sin(t + i * Math.E),
-            0, //p.width/3 * p.sin(t * 0.9 + i * Math.E + 0.2),
-            p.width/3 * p.sin(t * 1.2 + i * Math.E + 0.3),
-          )
-          if (i % 2 === 0) {
-            if (i === 0) {
-              p.texture(fbo)
-            }
-            p.box(30);
-          } else {
-            p.sphere(30);
-          }
-          p.pop();
-        }
-        p.pop();
-
-        p.push();
-        p.shader(sh2);
-        p.noStroke();
-        p.fill('red');
-        p.model(instance, 10);
-        p.pop();
-
-        // Draw compute shader-driven bouncing circles
-        p.push();
-        p.shader(bouncingCirclesShader);
-        p.noStroke();
-        p.fill('#4ECDC4');
-        p.model(circleGeometry, NUM_CIRCLES);
-        p.pop();
-
-        // Test beginShape/endShape with immediate mode shapes
-        p.push();
-        p.translate(0, 100, 0);
-        p.fill('yellow');
-        p.noStroke();
-
-        // Draw a circle using beginShape/endShape
-        p.beginShape();
-        const numPoints = 16;
-        for (let i = 0; i < numPoints; i++) {
-          const angle = (i / numPoints) * Math.PI * 2;
-          const x = Math.cos(angle) * 50;
-          const y = Math.sin(angle) * 50;
-          p.vertex(x, y);
-        }
-        p.endShape(p.CLOSE);
-
-        p.translate(100, 0, 0);
-        p.fill('purple');
-
-        // Draw a square using beginShape/endShape
-        p.beginShape();
-        p.vertex(-30, -30);
-        p.vertex(30, -30);
-        p.vertex(30, 30);
-        p.vertex(-30, 30);
-        p.endShape(p.CLOSE);
-
-        p.pop();
-
-        // p.filter(p.BLUR, 10)
-        p.pop();
+        p.background(220);
+        p.fill(false);
+        p.line(0);
+        p.ellipse(200, 200, 100, 100);
       };
     };
 
diff --git a/src/app.js b/src/app.js
index b0fc757d67..77ee64902b 100644
--- a/src/app.js
+++ b/src/app.js
@@ -15,7 +15,7 @@ color(p5);
 
 // core
 // currently, it only contains the test for parameter validation
-import friendlyErrors from './core/friendly_errors';
+import friendlyErrors from './friendly_errors';
 friendlyErrors(p5);
 
 // data
@@ -60,8 +60,7 @@ p5.registerAddon(shader);
 import strands from './strands/p5.strands';
 p5.registerAddon(strands);
 
-import { waitForDocumentReady, waitingForTranslator, _globalInit } from './core/init';
-Promise.all([waitForDocumentReady(), waitingForTranslator]).then(_globalInit);
+import { waitForDocumentReady, _globalInit } from './core/init';
+waitForDocumentReady().then(_globalInit);
 
 export default p5;
-
diff --git a/src/core/friendly_errors/fes_core.js b/src/core/friendly_errors/fes_core.js
deleted file mode 100644
index 21b6f60310..0000000000
--- a/src/core/friendly_errors/fes_core.js
+++ /dev/null
@@ -1,1155 +0,0 @@
-/**
- * @for p5
- *
- * This is the main file for the Friendly Error System (FES), containing
- * the core as well as miscellaneous functionality of the FES. Here is a
- * brief outline of the functions called in this system.
- *
- * The FES may be invoked by a call to either
- * (1) _validateParameters, (2) _friendlyFileLoadError, (3) _friendlyError,
- * (4) helpForMisusedAtTopLevelCode, or (5) _fesErrorMonitor.
- *
- * _validateParameters is located in validate_params.js along with other code
- * used for parameter validation.
- * _friendlyFileLoadError is located in file_errors.js along with other code
- * used for dealing with file load errors.
- * Apart from this, there's also a file stacktrace.js, which contains the code
- * to parse the error stack, borrowed from:
- * https://github.com/stacktracejs/stacktrace.js
- *
- * For more detailed information on the FES functions, including the call
- * sequence of each function, please look at the FES Reference + Dev Notes:
- * https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md
- */
-import { translator } from '../internationalization';
-import errorTable from './browser_errors';
-import * as contants from '../constants';
-
-function fesCore(p5, fn, lifecycles){
-  // p5.js blue, p5.js orange, auto dark green; fallback p5.js darkened magenta
-  // See testColors below for all the color codes and names
-  const typeColors = ['#2D7BB6', '#EE9900', '#4DB200', '#C83C00'];
-  let misusedAtTopLevelCode = null;
-  let defineMisusedAtTopLevelCode = null;
-
-  // the threshold for the maximum allowed levenshtein distance
-  // used in misspelling detection
-  const EDIT_DIST_THRESHOLD = 2;
-
-  // to enable or disable styling (color, font-size, etc. ) for fes messages
-  const ENABLE_FES_STYLING = false;
-
-  // Used for internally thrown errors that should not get wrapped by another
-  // friendly error handler
-  class FESError extends Error {};
-
-  if (typeof IS_MINIFIED !== 'undefined') {
-    p5._friendlyError =
-      p5._checkForUserDefinedFunctions =
-      p5._fesErrorMonitor =
-      () => {};
-  } else {
-    let doFriendlyWelcome = false; // TEMP until we get it all working LM
-
-    // const errorTable = require('./browser_errors').default;
-
-    // -- Borrowed from jQuery 1.11.3 --
-    const class2type = {};
-    const toString = class2type.toString;
-    const names = [
-      'Boolean',
-      'Number',
-      'String',
-      'Function',
-      'Array',
-      'Date',
-      'RegExp',
-      'Object',
-      'Error'
-    ];
-    for (let n = 0; n < names.length; n++) {
-      class2type[`[object ${names[n]}]`] = names[n].toLowerCase();
-    }
-    const getType = obj => {
-      if (obj == null) {
-        return `${obj}`;
-      }
-      return typeof obj === 'object' || typeof obj === 'function'
-        ? class2type[toString.call(obj)] || 'object'
-        : typeof obj;
-    };
-
-    // -- End borrow --
-
-    // entry points into user-defined code
-    const entryPoints = [
-      'setup',
-      'draw',
-      'deviceMoved',
-      'deviceTurned',
-      'deviceShaken',
-      'doubleClicked',
-      'mousePressed',
-      'mouseReleased',
-      'mouseMoved',
-      'mouseDragged',
-      'mouseClicked',
-      'mouseWheel',
-      'touchStarted',
-      'touchMoved',
-      'touchEnded',
-      'keyPressed',
-      'keyReleased',
-      'keyTyped',
-      'windowResized'
-    ];
-
-    const friendlyWelcome = () => {
-      // p5.js brand - magenta: #ED225D
-      //const astrixBgColor = 'transparent';
-      //const astrixTxtColor = '#ED225D';
-      //const welcomeBgColor = '#ED225D';
-      //const welcomeTextColor = 'white';
-      const welcomeMessage = translator('fes.pre', {
-        message: translator('fes.welcome')
-      });
-      console.log(
-        '    _ \n' +
-          ' /\\| |/\\ \n' +
-          " \\ ` ' /  \n" +
-          ' / , . \\  \n' +
-          ' \\/|_|\\/ ' +
-          '\n\n' +
-          welcomeMessage
-      );
-    };
-
-    /**
-     * Takes a message and a p5 function func, and adds a link pointing to
-     * the reference documentation of func at the end of the message
-     *
-     * @method mapToReference
-     * @private
-     * @param {String}  message   the words to be said
-     * @param {String}  [func]    the name of function
-     *
-     * @returns {String}
-     */
-    const mapToReference = (message, func) => {
-      let msgWithReference = '';
-      if (func == null || func.substring(0, 4) === 'load') {
-        msgWithReference = message;
-      } else {
-        const methodParts = func.split('.');
-        const referenceSection =
-          methodParts.length > 1 ? `${methodParts[0]}.${methodParts[1]}` : 'p5';
-
-        const funcName =
-          methodParts.length === 1 ? func : methodParts.slice(2).join('/');
-
-        //Whenever func having p5.[Class] is encountered, we need to have the error link as mentioned below else different link
-        funcName.startsWith('p5.')  ?
-          msgWithReference = `${message} (https://p5js.org/reference/${referenceSection}.${funcName})` :
-          msgWithReference = `${message} (https://p5js.org/reference/${referenceSection}/${funcName})`;
-      }
-      return msgWithReference;
-    };
-
-    /**
-     * Prints out a fancy, colorful message to the console log
-     * Attaches Friendly Errors prefix [fes.pre] to the message.
-     *
-     * @method _report
-     * @private
-     * @param  {String}          message  Message to be printed
-     * @param  {String}          [func]   Name of function
-     * @param  {Number|String}   [color]  CSS color code
-     *
-     * @return console logs
-     */
-    p5._report = (message, func, color) => {
-      // if p5._fesLogger is set ( i.e we are running tests ), use that
-      // instead of console.log
-      const log =
-        p5._fesLogger == null ? console.log.bind(console) : p5._fesLogger;
-
-      if (doFriendlyWelcome) {
-        friendlyWelcome();
-        doFriendlyWelcome = false;
-      }
-      if ('undefined' === getType(color)) {
-        color = '#B40033'; // dark magenta
-      } else if (getType(color) === 'number') {
-        // Type to color
-        color = typeColors[color];
-      }
-
-      // Add a link to the reference docs of func at the end of the message
-      message = mapToReference(message, func);
-      let style = [`color: ${color}`, 'font-family: Arial', 'font-size: larger'];
-      const prefixedMsg = translator('fes.pre', { message });
-
-      if (ENABLE_FES_STYLING) {
-        log('%c' + prefixedMsg, style.join(';'));
-      } else {
-        log(prefixedMsg);
-      }
-    };
-
-    /**
-     * Throws an error with helpful p5 context. Similar to _report, but
-     * this will stop other code execution to prevent downstream errors
-     * from being logged.
-     *
-     * @method _error
-     * @private
-     * @param                    context  p5 instance the error is from
-     * @param  {String}          message  Message to be printed
-     * @param  {String}          [func]   Name of function
-     */
-    p5._error = (context, message, func) => {
-      p5._report(message, func);
-      context.hitCriticalError = true;
-      // Throw an error to stop the current function (e.g. setup or draw) from
-      // running more code
-      throw new FESError('Stopping sketch to prevent more errors');
-    };
-
-    /**
-     * This is a generic method that can be called from anywhere in the p5
-     * library to alert users to a common error.
-     *
-     * @method _friendlyError
-     * @private
-     * @param  {String}         message   Message to be printed
-     * @param  {String}         [func]    Name of the function linked to error
-     * @param  {Number|String}  [color]   CSS color code
-     */
-    p5._friendlyError = function(message, func, color) {
-      if (p5.disableFriendlyErrors) return;
-      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].
-     *
-     * @method _friendlyAutoplayError
-     * @private
-     */
-    p5._friendlyAutoplayError = function(src) {
-      const message = translator('fes.autoplay', {
-        src,
-        url: 'https://developer.mozilla.org/docs/Web/Media/Autoplay_guide'
-      });
-      console.log(translator('fes.pre', { message }));
-    };
-
-    /**
-     * Measures dissimilarity between two strings by calculating
-     * the Levenshtein distance.
-     *
-     * If the "distance" between them is small enough, it is
-     * reasonable to think that one is the misspelled version of the other.
-     *
-     * Specifically, this uses the Wagner–Fischer algorithm.
-     * @method computeEditDistance
-     * @private
-     * @param {String} w1 the first word
-     * @param {String} w2 the second word
-     *
-     * @returns {Number} the "distance" between the two words, a smaller value
-     *                   indicates that the words are similar
-     */
-    const computeEditDistance = (w1, w2) => {
-      const l1 = w1.length,
-        l2 = w2.length;
-      if (l1 === 0) return w2;
-      if (l2 === 0) return w1;
-
-      let prev = [];
-      let cur = [];
-
-      for (let j = 0; j < l2 + 1; j++) {
-        cur[j] = j;
-      }
-
-      prev = cur;
-
-      for (let i = 1; i < l1 + 1; i++) {
-        cur = [];
-        for (let j = 0; j < l2 + 1; j++) {
-          if (j === 0) {
-            cur[j] = i;
-          } else {
-            let a1 = w1[i - 1],
-              a2 = w2[j - 1];
-            let temp = 999999;
-            let cost = a1.toLowerCase() === a2.toLowerCase() ? 0 : 1;
-            temp = temp > cost + prev[j - 1] ? cost + prev[j - 1] : temp;
-            temp = temp > 1 + cur[j - 1] ? 1 + cur[j - 1] : temp;
-            temp = temp > 1 + prev[j] ? 1 + prev[j] : temp;
-            cur[j] = temp;
-          }
-        }
-        prev = cur;
-      }
-
-      return cur[l2];
-    };
-
-    /**
-     * Whether or not p5.js is running in an environment where `preload` will be
-     * run before `setup`.
-     *
-     * This will return false for default builds >= 2.0, but backwards compatibility
-     * addons may set this to true.
-     *
-     * @private
-     */
-    p5.isPreloadSupported = function() {
-      return false;
-    };
-
-    /**
-     * Checks capitalization for user defined functions.
-     *
-     * Generates and prints a friendly error message using key:
-     * "fes.checkUserDefinedFns".
-     *
-     * @method checkForUserDefinedFunctions
-     * @private
-     * @param {*} context   Current default context. Set to window in
-     *                      "global mode" and to a p5 instance in "instance mode"
-     */
-    const checkForUserDefinedFunctions = context => {
-      if (p5.disableFriendlyErrors) return;
-
-      // if using instance mode, this function would be called with the current
-      // instance as context
-      const instanceMode = context instanceof p5;
-      context = instanceMode ? context : window;
-      const fnNames = entryPoints;
-
-      if (context.preload && !p5.isPreloadSupported()) {
-        p5._error(context, translator('fes.preloadDisabled'));
-      }
-
-      const fxns = {};
-      // lowercasename -> actualName mapping
-      fnNames.forEach(symbol => {
-        fxns[symbol.toLowerCase()] = symbol;
-      });
-
-      for (const prop of Object.keys(context)) {
-        const lowercase = prop.toLowerCase();
-
-        // check if the lowercase property name has an entry in fxns, if the
-        // actual name with correct capitalization doesnt exist in context,
-        // and if the user-defined symbol is of the type function
-        if (
-          fxns.hasOwnProperty(lowercase) &&
-          !context[fxns[lowercase]] &&
-          typeof context[prop] === 'function'
-        ) {
-          const msg = translator('fes.checkUserDefinedFns', {
-            name: prop,
-            actualName: fxns[lowercase]
-          });
-
-          p5._friendlyError(msg, fxns[lowercase]);
-        }
-      }
-    };
-
-    /**
-     * Compares the symbol caught in the ReferenceError to everything in
-     * misusedAtTopLevel ( all public p5 properties ).
-     *
-     * Generates and prints a friendly error message using key: "fes.misspelling".
-     *
-     * @method handleMisspelling
-     * @private
-     * @param {String} errSym   Symbol to whose spelling to check
-     * @param {Error} error     ReferenceError object
-     *
-     * @returns {Boolean} tell whether error was likely due to typo
-     */
-    const handleMisspelling = (errSym, error) => {
-      if (!misusedAtTopLevelCode) {
-        defineMisusedAtTopLevelCode();
-      }
-
-      const distanceMap = {};
-      let min = 999999;
-      // compute the levenshtein distance for the symbol against all known
-      // public p5 properties. Find the property with the minimum distance
-      misusedAtTopLevelCode.forEach(symbol => {
-        let dist = computeEditDistance(errSym, symbol.name);
-        if (distanceMap[dist]) distanceMap[dist].push(symbol);
-        else distanceMap[dist] = [symbol];
-
-        if (dist < min) min = dist;
-      });
-
-      // if the closest match has more "distance" than the max allowed threshold
-      if (min > Math.min(EDIT_DIST_THRESHOLD, errSym.length)) return false;
-
-      // Show a message only if the caught symbol and the matched property name
-      // differ in their name ( either letter difference or difference of case )
-      const matchedSymbols = distanceMap[min].filter(
-        symbol => symbol.name !== errSym
-      );
-      if (matchedSymbols.length !== 0) {
-        const parsed = p5._getErrorStackParser().parse(error);
-        let locationObj;
-        if (
-          parsed &&
-          parsed[0] &&
-          parsed[0].fileName &&
-          parsed[0].lineNumber &&
-          parsed[0].columnNumber
-        ) {
-          locationObj = {
-            location: `${parsed[0].fileName}:${parsed[0].lineNumber}:${
-              parsed[0].columnNumber
-            }`,
-            file: parsed[0].fileName.split('/').slice(-1),
-            line: parsed[0].lineNumber
-          };
-        }
-
-        let msg;
-        if (matchedSymbols.length === 1) {
-          // To be used when there is only one closest match. The count parameter
-          // allows i18n to pick between the keys "fes.misspelling" and
-          // "fes.misspelling_plural"
-          msg = translator('fes.misspelling', {
-            name: errSym,
-            actualName: matchedSymbols[0].name,
-            type: matchedSymbols[0].type,
-            location: locationObj ? translator('fes.location', locationObj) : '',
-            count: matchedSymbols.length
-          });
-        } else {
-          // To be used when there are multiple closest matches. Gives each
-          // suggestion on its own line, the function name followed by a link to
-          // reference documentation
-          const suggestions = matchedSymbols
-            .map(symbol => {
-              const message =
-                '▶️ ' + symbol.name + (symbol.type === 'function' ? '()' : '');
-              return mapToReference(message, symbol.name);
-            })
-            .join('\n');
-
-          msg = translator('fes.misspelling', {
-            name: errSym,
-            suggestions,
-            location: locationObj ? translator('fes.location', locationObj) : '',
-            count: matchedSymbols.length
-          });
-        }
-
-        // If there is only one closest match, tell _friendlyError to also add
-        // a link to the reference documentation. In case of multiple matches,
-        // this is already done in the suggestions variable, one link for each
-        // suggestion.
-        p5._friendlyError(
-          msg,
-          matchedSymbols.length === 1 ? matchedSymbols[0].name : undefined
-        );
-        return true;
-      }
-      return false;
-    };
-
-    /**
-     * Prints a friendly stacktrace for user-written functions for "global" errors
-     *
-     * Generates and prints a friendly error message using key:
-     * "fes.globalErrors.stackTop", "fes.globalErrors.stackSubseq".
-     *
-     * @method printFriendlyStack
-     * @private
-     * @param {Array} friendlyStack
-     */
-    const printFriendlyStack = friendlyStack => {
-      const log =
-        p5._fesLogger && typeof p5._fesLogger === 'function'
-          ? p5._fesLogger
-          : console.log.bind(console);
-      if (friendlyStack.length > 1) {
-        let stacktraceMsg = '';
-        friendlyStack.forEach((frame, idx) => {
-          const location = `${frame.fileName}:${frame.lineNumber}:${
-            frame.columnNumber
-          }`;
-          let frameMsg,
-            translationObj = {
-              func: frame.functionName,
-              line: frame.lineNumber,
-              location,
-              file: frame.fileName.split('/').slice(-1)
-            };
-          if (idx === 0) {
-            frameMsg = translator('fes.globalErrors.stackTop', translationObj);
-          } else {
-            frameMsg = translator('fes.globalErrors.stackSubseq', translationObj);
-          }
-          stacktraceMsg += frameMsg;
-        });
-        log(stacktraceMsg);
-      }
-    };
-
-    /**
-     * Takes a stacktrace array and filters out all frames that show internal p5
-     * details.
-     *
-     * Generates and prints a friendly error message using key:
-     * "fes.wrongPreload", "fes.libraryError".
-     *
-     * The processed stack is used to find whether the error happened internally
-     * within the library, and if the error was due to a non-loadX() method
-     * being used in preload.
-     *
-     * "Internally" here means that the exact location of the error (the top of
-     * the stack) is a piece of code written in the p5.js library (which may or
-     * may not have been called from the user's sketch).
-     *
-     * @method processStack
-     * @private
-     * @param {Error} error
-     * @param {Array} stacktrace
-     *
-     * @returns {Array} An array with two elements, [isInternal, friendlyStack]
-     *                 isInternal: a boolean value indicating whether the error
-     *                             happened internally
-     *                 friendlyStack: the filtered (simplified) stacktrace
-     */
-    const processStack = (error, stacktrace) => {
-      // cannot process a stacktrace that doesn't exist
-      if (!stacktrace) return [false, null];
-
-      stacktrace.forEach(frame => {
-        frame.functionName = frame.functionName || '';
-      });
-
-      // isInternal - Did this error happen inside the library
-      let isInternal = false;
-      let p5FileName, friendlyStack, currentEntryPoint;
-
-      // Intentionally throw an error that we catch so that we can check the name
-      // of the current file. Any errors we see from this file, we treat as
-      // internal errors.
-      try {
-        throw new Error();
-      } catch (testError) {
-        const testStacktrace = p5._getErrorStackParser().parse(testError);
-        p5FileName = testStacktrace[0].fileName;
-      }
-
-      for (let i = stacktrace.length - 1; i >= 0; i--) {
-        let splitted = stacktrace[i].functionName.split('.');
-        if (entryPoints.includes(splitted[splitted.length - 1])) {
-          // remove everything below an entry point function (setup, draw, etc).
-          // (it's usually the internal initialization calls)
-          friendlyStack = stacktrace.slice(0, i + 1);
-          currentEntryPoint = splitted[splitted.length - 1];
-          // We call the error "internal" if the source of the error was a
-          // function from within the p5.js library file, but called from the
-          // user's code directly. We only need to check the topmost frame in
-          // the stack trace since any function internal to p5 should pass this
-          // check, not just public p5 functions.
-          if (stacktrace[0].fileName === p5FileName) {
-            isInternal = true;
-            break;
-          }
-          break;
-        }
-      }
-
-      // in some cases ( errors in promises, callbacks, etc), no entry-point
-      // function may be found in the stacktrace. In that case just use the
-      // entire stacktrace for friendlyStack
-      if (!friendlyStack) friendlyStack = stacktrace;
-
-      if (isInternal) {
-        // the frameIndex property is added before the filter, so frameIndex
-        // corresponds to the index of a frame in the original stacktrace.
-        // Then we filter out all frames which belong to the file that contains
-        // the p5 library
-        friendlyStack = friendlyStack
-          .map((frame, index) => {
-            frame.frameIndex = index;
-            return frame;
-          })
-          .filter(frame => frame.fileName !== p5FileName);
-
-        // a weird case, if for some reason we can't identify the function called
-        // from user's code
-        if (friendlyStack.length === 0) return [true, null];
-
-        // get the function just above the topmost frame in the friendlyStack.
-        // i.e the name of the library function called from user's code
-        const func = stacktrace[friendlyStack[0].frameIndex - 1].functionName
-          .split('.')
-          .slice(-1)[0];
-
-        // Try and get the location (line no.) from the top element of the stack
-        let locationObj;
-        if (
-          friendlyStack[0].fileName &&
-          friendlyStack[0].lineNumber &&
-          friendlyStack[0].columnNumber
-        ) {
-          locationObj = {
-            location: `${friendlyStack[0].fileName}:${
-              friendlyStack[0].lineNumber
-            }:${friendlyStack[0].columnNumber}`,
-            file: friendlyStack[0].fileName.split('/').slice(-1),
-            line: friendlyStack[0].lineNumber
-          };
-
-          // if already handled by another part of the FES, don't handle again
-          if (p5._fesLogCache[locationObj.location]) return [true, null];
-        }
-
-        // Check if the error is due to a non loadX method being used incorrectly
-        // in preload
-        if (
-          currentEntryPoint === 'preload' &&
-          fn._preloadMethods[func] == null
-        ) {
-          p5._friendlyError(
-            translator('fes.wrongPreload', {
-              func,
-              location: locationObj
-                ? translator('fes.location', locationObj)
-                : '',
-              error: error.message
-            }),
-            'preload'
-          );
-        } else {
-          // Library error
-          p5._friendlyError(
-            translator('fes.libraryError', {
-              func,
-              location: locationObj
-                ? translator('fes.location', locationObj)
-                : '',
-              error: error.message
-            }),
-            func
-          );
-        }
-
-        // Finally, if it's an internal error, print the friendlyStack
-        // ( fesErrorMonitor won't handle this error )
-        if (friendlyStack && friendlyStack.length) {
-          printFriendlyStack(friendlyStack);
-        }
-      }
-      return [isInternal, friendlyStack];
-    };
-
-    /**
-     * Handles "global" errors that the browser catches.
-     *
-     * Called when an error event happens and detects the type of error.
-     *
-     * Generates and prints a friendly error message using key:
-     * "fes.globalErrors.syntax.[*]", "fes.globalErrors.reference.[*]",
-     * "fes.globalErrors.type.[*]".
-     *
-     * @method fesErrorMonitor
-     * @private
-     * @param {*} e  Event object to extract error details from
-     */
-    const fesErrorMonitor = e => {
-      if (p5.disableFriendlyErrors) return;
-
-      // Don't try to handle an error intentionally emitted by FES to halt execution
-      if (e && (e instanceof FESError || e.reason instanceof FESError)) return;
-
-      // Try to get the error object from e
-      let error;
-      if (e instanceof Error) {
-        error = e;
-      } else if (e instanceof ErrorEvent) {
-        error = e.error;
-      } else if (e instanceof PromiseRejectionEvent) {
-        error = e.reason;
-        if (!(error instanceof Error)) return;
-      }
-      if (!error) return;
-
-      let stacktrace = p5._getErrorStackParser().parse(error);
-      // process the stacktrace from the browser and simplify it to give
-      // friendlyStack.
-      let [isInternal, friendlyStack] = processStack(error, stacktrace);
-
-      // if this is an internal library error, the type of the error is not relevant,
-      // only the user code that lead to it is.
-      if (isInternal) {
-        return;
-      }
-
-      const errList = errorTable[error.name];
-      if (!errList) return; // this type of error can't be handled yet
-      let matchedError;
-      for (const obj of errList) {
-        let string = obj.msg;
-        // capture the primary symbol mentioned in the error
-        string = string.replace(new RegExp('{{}}', 'g'), '([a-zA-Z0-9_]+)');
-        string = string.replace(new RegExp('{{.}}', 'g'), '(.+)');
-        string = string.replace(new RegExp('{}', 'g'), '(?:[a-zA-Z0-9_]+)');
-        let matched = error.message.match(string);
-
-        if (matched) {
-          matchedError = Object.assign({}, obj);
-          matchedError.match = matched;
-          break;
-        }
-      }
-
-      if (!matchedError) return;
-
-      // Try and get the location from the top element of the stack
-      let locationObj;
-      if (
-        stacktrace &&
-        stacktrace[0].fileName &&
-        stacktrace[0].lineNumber &&
-        stacktrace[0].columnNumber
-      ) {
-        locationObj = {
-          location: `${stacktrace[0].fileName}:${stacktrace[0].lineNumber}:${
-            stacktrace[0].columnNumber
-          }`,
-          file: stacktrace[0].fileName.split('/').slice(-1),
-          line: friendlyStack[0].lineNumber
-        };
-      }
-
-      switch (error.name) {
-        case 'SyntaxError': {
-          // We can't really do much with syntax errors other than try to use
-          // a simpler framing of the error message. The stack isn't available
-          // for syntax errors
-          switch (matchedError.type) {
-            case 'INVALIDTOKEN': {
-              //Error if there is an invalid or unexpected token that doesn't belong at this position in the code
-              //let x = “not a string”; -> string not in proper quotes
-              let url =
-                'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Illegal_character#What_went_wrong';
-              p5._friendlyError(
-                translator('fes.globalErrors.syntax.invalidToken', {
-                  url
-                })
-              );
-              break;
-            }
-            case 'UNEXPECTEDTOKEN': {
-              //Error if a specific language construct(, { ; etc) was expected, but something else was provided
-              //for (let i = 0; i < 5,; ++i) -> a comma after i<5 instead of a semicolon
-              let url =
-                'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Unexpected_token#What_went_wrong';
-              p5._friendlyError(
-                translator('fes.globalErrors.syntax.unexpectedToken', {
-                  url
-                })
-              );
-              break;
-            }
-            case 'REDECLAREDVARIABLE': {
-              //Error if a variable is redeclared by the user. Example=>
-              //let a = 10;
-              //let a = 100;
-              let errSym = matchedError.match[1];
-              let url =
-                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter#what_went_wrong';
-              p5._friendlyError(
-                translator('fes.globalErrors.syntax.redeclaredVariable', {
-                  symbol: errSym,
-                  url
-                })
-              );
-              break;
-            }
-            case 'MISSINGINITIALIZER': {
-              //Error if a const variable is not initialized during declaration
-              //Example => const a;
-              let url =
-                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const#what_went_wrong';
-              p5._friendlyError(
-                translator('fes.globalErrors.syntax.missingInitializer', {
-                  url
-                })
-              );
-              break;
-            }
-            case 'BADRETURNORYIELD': {
-              //Error when a return statement is misplaced(usually outside of a function)
-              // const a = function(){
-              //  .....
-              //  }
-              //  return; -> misplaced return statement
-              let url =
-                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield#what_went_wrong';
-              p5._friendlyError(
-                translator('fes.globalErrors.syntax.badReturnOrYield', {
-                  url
-                })
-              );
-              break;
-            }
-          }
-          break;
-        }
-        case 'ReferenceError': {
-          switch (matchedError.type) {
-            case 'NOTDEFINED': {
-              //Error if there is a non-existent variable referenced somewhere
-              //let a = 10;
-              //console.log(x);
-              let errSym = matchedError.match[1];
-
-              if (errSym && handleMisspelling(errSym, error)) {
-                break;
-              }
-
-              // if the flow gets this far, this is likely not a misspelling
-              // of a p5 property/function
-              let url = 'https://p5js.org/examples/data-variable-scope.html';
-              p5._friendlyError(
-                translator('fes.globalErrors.reference.notDefined', {
-                  url,
-                  symbol: errSym,
-                  location: locationObj
-                    ? translator('fes.location', locationObj)
-                    : ''
-                })
-              );
-
-              if (friendlyStack) printFriendlyStack(friendlyStack);
-              break;
-            }
-            case 'CANNOTACCESS': {
-              //Error if a lexical variable was accessed before it was initialized
-              //console.log(a); -> variable accessed before it was initialized
-              //let a=100;
-              let errSym = matchedError.match[1];
-              let url =
-                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init#what_went_wrong';
-              p5._friendlyError(
-                translator('fes.globalErrors.reference.cannotAccess', {
-                  url,
-                  symbol: errSym,
-                  location: locationObj
-                    ? translator('fes.location', locationObj)
-                    : ''
-                })
-              );
-
-              if (friendlyStack) printFriendlyStack(friendlyStack);
-              break;
-            }
-          }
-          break;
-        }
-
-        case 'TypeError': {
-          switch (matchedError.type) {
-            case 'NOTFUNC': {
-              //Error when some code expects you to provide a function, but that didn't happen
-              //let a = document.getElementByID('foo'); -> getElementById instead of getElementByID
-              let errSym = matchedError.match[1];
-              let splitSym = errSym.split('.');
-              let url =
-                'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_a_function#What_went_wrong';
-
-              // if errSym is aa.bb.cc , symbol would be cc and obj would aa.bb
-              let translationObj = {
-                url,
-                symbol: splitSym[splitSym.length - 1],
-                obj: splitSym.slice(0, splitSym.length - 1).join('.'),
-                location: locationObj
-                  ? translator('fes.location', locationObj)
-                  : ''
-              };
-
-              // There are two cases to handle here. When the function is called
-              // as a property of an object and when it's called independently.
-              // Both have different explanations.
-              if (splitSym.length > 1) {
-                p5._friendlyError(
-                  translator('fes.globalErrors.type.notfuncObj', translationObj)
-                );
-              } else {
-                p5._friendlyError(
-                  translator('fes.globalErrors.type.notfunc', translationObj)
-                );
-              }
-
-              if (friendlyStack) printFriendlyStack(friendlyStack);
-              break;
-            }
-            case 'READNULL': {
-              //Error if a property of null is accessed
-              //let a = null;
-              //console.log(a.property); -> a is null
-              let errSym = matchedError.match[1];
-              let url =
-                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong';
-              /*let url2 =
-                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null';*/
-              p5._friendlyError(
-                translator('fes.globalErrors.type.readFromNull', {
-                  url,
-                  symbol: errSym,
-                  location: locationObj
-                    ? translator('fes.location', locationObj)
-                    : ''
-                })
-              );
-
-              if (friendlyStack) printFriendlyStack(friendlyStack);
-              break;
-            }
-            case 'READUDEFINED': {
-              //Error if a property of undefined is accessed
-              //let a; -> default value of a is undefined
-              //console.log(a.property); -> a is undefined
-              let errSym = matchedError.match[1];
-              let url =
-                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong';
-              /*let url2 =
-                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined#description';*/
-              p5._friendlyError(
-                translator('fes.globalErrors.type.readFromUndefined', {
-                  url,
-                  symbol: errSym,
-                  location: locationObj
-                    ? translator('fes.location', locationObj)
-                    : ''
-                })
-              );
-
-              if (friendlyStack) printFriendlyStack(friendlyStack);
-              break;
-            }
-            case 'CONSTASSIGN': {
-              //Error when a const variable is reassigned a value
-              //const a = 100;
-              //a=10;
-              let url =
-                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment#what_went_wrong';
-              p5._friendlyError(
-                translator('fes.globalErrors.type.constAssign', {
-                  url,
-                  location: locationObj
-                    ? translator('fes.location', locationObj)
-                    : ''
-                })
-              );
-
-              if (friendlyStack) printFriendlyStack(friendlyStack);
-              break;
-            }
-          }
-        }
-      }
-    };
-
-    p5._fesErrorMonitor = fesErrorMonitor;
-    p5._checkForUserDefinedFunctions = checkForUserDefinedFunctions;
-
-    // logger for testing purposes.
-    p5._fesLogger = null;
-    p5._fesLogCache = {};
-
-    lifecycles.presetup = function () {
-      window.addEventListener('load', checkForUserDefinedFunctions, false);
-      window.addEventListener('error', p5._fesErrorMonitor, false);
-      window.addEventListener('unhandledrejection', p5._fesErrorMonitor, false);
-    };
-
-    /**
-     * Prints out all the colors in the color pallete with white text.
-     * For color blindness testing.
-     */
-    /* function testColors() {
-      const str = 'A box of biscuits, a box of mixed biscuits and a biscuit mixer';
-      p5._friendlyError(str, 'print', '#ED225D'); // p5.js magenta
-      p5._friendlyError(str, 'print', '#2D7BB6'); // p5.js blue
-      p5._friendlyError(str, 'print', '#EE9900'); // p5.js orange
-      p5._friendlyError(str, 'print', '#A67F59'); // p5.js light brown
-      p5._friendlyError(str, 'print', '#704F21'); // p5.js gold
-      p5._friendlyError(str, 'print', '#1CC581'); // auto cyan
-      p5._friendlyError(str, 'print', '#FF6625'); // auto orange
-      p5._friendlyError(str, 'print', '#79EB22'); // auto green
-      p5._friendlyError(str, 'print', '#B40033'); // p5.js darkened magenta
-      p5._friendlyError(str, 'print', '#084B7F'); // p5.js darkened blue
-      p5._friendlyError(str, 'print', '#945F00'); // p5.js darkened orange
-      p5._friendlyError(str, 'print', '#6B441D'); // p5.js darkened brown
-      p5._friendlyError(str, 'print', '#2E1B00'); // p5.js darkened gold
-      p5._friendlyError(str, 'print', '#008851'); // auto dark cyan
-      p5._friendlyError(str, 'print', '#C83C00'); // auto dark orange
-      p5._friendlyError(str, 'print', '#4DB200'); // auto dark green
-    } */
-  }
-
-  // This is a lazily-defined list of p5 symbols that may be
-  // misused by beginners at top-level code, outside of setup/draw. We'd like
-  // to detect these errors and help the user by suggesting they move them
-  // into setup/draw.
-  //
-  // For more details, see https://github.com/processing/p5.js/issues/1121.
-  misusedAtTopLevelCode = null;
-  const FAQ_URL =
-    'https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup';
-
-  /**
-   * A helper function for populating misusedAtTopLevel list.
-   *
-   * @method defineMisusedAtTopLevelCode
-   * @private
-   */
-  defineMisusedAtTopLevelCode = () => {
-    const uniqueNamesFound = {};
-
-    const getSymbols = obj =>
-      Object.getOwnPropertyNames(obj)
-        .filter(name => {
-          if (name[0] === '_') {
-            return false;
-          }
-          if (name in uniqueNamesFound) {
-            return false;
-          }
-
-          uniqueNamesFound[name] = true;
-
-          return true;
-        })
-        .map(name => {
-          let type;
-
-          if (typeof obj[name] === 'function') {
-            type = 'function';
-          } else if (name === name.toUpperCase()) {
-            type = 'constant';
-          } else {
-            type = 'variable';
-          }
-
-          return { name, type };
-        });
-
-    misusedAtTopLevelCode = [].concat(
-      getSymbols(fn),
-      // At present, p5 only adds its constants to fn during
-      // construction, which may not have happened at the time a
-      // ReferenceError is thrown, so we'll manually add them to our list.
-      getSymbols(contants)
-    );
-
-    // This will ultimately ensure that we report the most specific error
-    // possible to the user, e.g. advising them about HALF_PI instead of PI
-    // when their code misuses the former.
-    misusedAtTopLevelCode.sort((a, b) => b.name.length - a.name.length);
-  };
-
-  /**
-   * Detects browser level error event for p5 constants/functions used outside
-   * of setup() and draw().
-   *
-   * Generates and prints a friendly error message using key:
-   * "fes.misusedTopLevel".
-   *
-   * @method helpForMisusedAtTopLevelCode
-   * @private
-   * @param {Event} e       Error event
-   * @param {Boolean} log   false
-   *
-   * @returns {Boolean} true
-   */
-  const helpForMisusedAtTopLevelCode = (e, log) => {
-    if (!log) {
-      log = console.log.bind(console);
-    }
-
-    if (!misusedAtTopLevelCode) {
-      defineMisusedAtTopLevelCode();
-    }
-
-    // If we find that we're logging lots of false positives, we can
-    // uncomment the following code to avoid displaying anything if the
-    // user's code isn't likely to be using p5's global mode. (Note that
-    // setup/draw are more likely to be defined due to JS function hoisting.)
-    //
-    //if (!('setup' in window || 'draw' in window)) {
-    //  return;
-    //}
-
-    misusedAtTopLevelCode.some(symbol => {
-      // Note that while just checking for the occurrence of the
-      // symbol name in the error message could result in false positives,
-      // a more rigorous test is difficult because different browsers
-      // log different messages, and the format of those messages may
-      // change over time.
-      //
-      // For example, if the user uses 'PI' in their code, it may result
-      // in any one of the following messages:
-      //
-      //   * 'PI' is undefined                           (Microsoft Edge)
-      //   * ReferenceError: PI is undefined             (Firefox)
-      //   * Uncaught ReferenceError: PI is not defined  (Chrome)
-
-      if (e.message && e.message.match(`\\W?${symbol.name}\\W`) !== null) {
-        const symbolName =
-          symbol.type === 'function' ? `${symbol.name}()` : symbol.name;
-        if (typeof IS_MINIFIED !== 'undefined') {
-          log(
-            `Did you just try to use p5.js's ${symbolName} ${
-              symbol.type
-            }? If so, you may want to move it into your sketch's setup() function.\n\nFor more details, see: ${FAQ_URL}`
-          );
-        } else {
-          log(
-            translator('fes.misusedTopLevel', {
-              symbolName,
-              symbolType: symbol.type,
-              url: FAQ_URL
-            })
-          );
-        }
-        return true;
-      }
-    });
-  };
-
-  // Exposing this primarily for unit testing.
-  fn._helpForMisusedAtTopLevelCode = helpForMisusedAtTopLevelCode;
-
-  if (typeof document !== 'undefined' && document.readyState !== 'complete') {
-    window.addEventListener('error', helpForMisusedAtTopLevelCode, false);
-
-    // Our job is only to catch ReferenceErrors that are thrown when
-    // global (non-instance mode) p5 APIs are used at the top-level
-    // scope of a file, so we'll unbind our error listener now to make
-    // sure we don't log false positives later.
-    window.addEventListener('load', () => {
-      window.removeEventListener('error', helpForMisusedAtTopLevelCode, false);
-    });
-  }
-}
-
-export default fesCore;
-
-if (typeof p5 !== 'undefined') {
-  p5.registerAddon(fesCore);
-}
diff --git a/src/core/friendly_errors/file_errors.js b/src/core/friendly_errors/file_errors.js
deleted file mode 100644
index 75b8462b72..0000000000
--- a/src/core/friendly_errors/file_errors.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * @for p5
- */
-import { translator } from '../internationalization';
-
-function fileErrors(p5, fn){
-  // mapping used by `_friendlyFileLoadError`
-  const fileLoadErrorCases = (num, filePath) => {
-    const suggestion = translator('fes.fileLoadError.suggestion', {
-      filePath,
-      url: 'https://github.com/processing/p5.js/wiki/Local-server'
-    });
-    switch (num) {
-      case 0:
-        return {
-          message: translator('fes.fileLoadError.image', {
-            suggestion
-          }),
-          method: 'loadImage'
-        };
-      case 1:
-        return {
-          message: translator('fes.fileLoadError.xml', {
-            suggestion
-          }),
-          method: 'loadXML'
-        };
-      case 2:
-        return {
-          message: translator('fes.fileLoadError.table', {
-            suggestion
-          }),
-          method: 'loadTable'
-        };
-      case 3:
-        return {
-          message: translator('fes.fileLoadError.strings', {
-            suggestion
-          }),
-          method: 'loadStrings'
-        };
-      case 4:
-        return {
-          message: translator('fes.fileLoadError.font', {
-            suggestion
-          }),
-          method: 'loadFont'
-        };
-      case 5:
-        return {
-          message: translator('fes.fileLoadError.json', {
-            suggestion
-          }),
-          method: 'loadJSON'
-        };
-      case 6:
-        return {
-          message: translator('fes.fileLoadError.bytes', {
-            suggestion
-          }),
-          method: 'loadBytes'
-        };
-      case 7:
-        return {
-          message: translator('fes.fileLoadError.large'),
-          method: 'loadX'
-        };
-      case 8:
-        return {
-          message: translator('fes.fileLoadError.gif'),
-          method: 'loadImage'
-        };
-    }
-  };
-
-  /**
-   * Called internally if there is an error during file loading.
-   *
-   * Generates and prints a friendly error message using key:
-   * "fes.fileLoadError.[*]".
-   *
-   * @method _friendlyFileLoadError
-   * @private
-   * @param  {Number} errorType   Number of file load error type
-   * @param  {String} filePath    Path to file caused the error
-   */
-  p5._friendlyFileLoadError = function(errorType, filePath) {
-    const { message, method } = fileLoadErrorCases(errorType, filePath);
-    p5._friendlyError(message, method, 3);
-  };
-}
-
-export default fileErrors;
-
-if (typeof p5 !== 'undefined') {
-  fileErrors(p5, p5.prototype);
-}
diff --git a/src/core/init.js b/src/core/init.js
index 0ba781e406..736fd3cec1 100644
--- a/src/core/init.js
+++ b/src/core/init.js
@@ -1,5 +1,4 @@
 import p5 from '../core/main';
-import { initialize as initTranslator } from './internationalization';
 
 /**
  * This file setup global mode automatic instantiation
@@ -55,8 +54,3 @@ export const waitForDocumentReady = () =>{
     });
   }
 };
-
-// only load translations if we're using the full, un-minified library
-export const waitingForTranslator =
-  typeof IS_MINIFIED === 'undefined' ? initTranslator() :
-    Promise.resolve();
diff --git a/src/core/internationalization.js b/src/core/internationalization.js
deleted file mode 100644
index b29ef72989..0000000000
--- a/src/core/internationalization.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import i18next from 'i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import { default as fallbackResources, languages } from '../../translations';
-import { VERSION } from './constants';
-
-if (typeof IS_MINIFIED === 'undefined') {
-  // internationalization is only for the unminified build
-
-  if (typeof P5_DEV_BUILD !== 'undefined') {
-    // When the library is built in development mode ( using npm run dev )
-    // we want to use the current translation files on the disk, which may have
-    // been updated but not yet pushed to the CDN.
-    let completeResources = require('../../translations/dev');
-    for (const language of Object.keys(completeResources)) {
-      // In es_translation, language is es and namespace is translation
-      // In es_MX_translation, language is es-MX and namespace is translation
-      const parts = language.split('_');
-      const lng = parts.slice(0, parts.length - 1).join('-');
-      const ns = parts[parts.length - 1];
-
-      fallbackResources[lng] = fallbackResources[lng] || {};
-      fallbackResources[lng][ns] = completeResources[language];
-    }
-  }
-}
-
-/*
- * This is our i18next "backend" plugin. It tries to fetch languages
- * from a CDN.
- * @private
- */
-class FetchResources {
-  constructor(services, options) {
-    this.init(services, options);
-  }
-
-  // run fetch with a timeout. Automatically rejects on timeout
-  // default timeout = 2000 ms
-  fetchWithTimeout(url, options, timeout = 2000) {
-    return Promise.race([
-      fetch(url, options),
-      new Promise((_, reject) =>
-        setTimeout(() => reject(new Error('timeout')), timeout)
-      )
-    ]);
-  }
-
-  init(services, options = {}) {
-    this.services = services;
-    this.options = options;
-  }
-
-  read(language, namespace, callback) {
-    const loadPath = this.options.loadPath;
-
-    if (language === this.options.fallback) {
-      // if the default language of the user is the same as our inbuilt fallback,
-      // there's no need to fetch resources from the cdn. This won't actually
-      // need to run when we use "partialBundledLanguages" in the init
-      // function.
-      callback(null, fallbackResources[language][namespace]);
-    } else if (languages.includes(language)) {
-      // The user's language is included in the list of languages
-      // that we so far added translations for.
-
-      const url = this.services.interpolator.interpolate(loadPath, {
-        lng: language,
-        ns: namespace
-      });
-      this.loadUrl(url, callback);
-    } else {
-      // We don't have translations for this language. i18next will use
-      // the default language instead.
-      callback('Not found', false);
-    }
-  }
-
-  loadUrl(url, callback) {
-    this.fetchWithTimeout(url)
-      .then(
-        response => {
-          const ok = response.ok;
-
-          if (!ok) {
-            // caught in the catch() below
-            throw new Error(`failed loading ${url}`);
-          }
-          return response.json();
-        },
-        () => {
-          // caught in the catch() below
-          throw new Error(`failed loading ${url}`);
-        }
-      )
-      .then(data => {
-        return callback(null, data);
-      })
-      .catch(callback);
-  }
-}
-FetchResources.type = 'backend';
-
-/**
- * This is our translation function. Give it a key and
- * it will retrieve the appropriate string
- * (within supported languages) according to the
- * user's browser's language settings.
- * @function translator
- * @param {String} key a key that corresponds to a message in our translation files
- * @param {Object} values values for use in the message under the given `key`
- * @returns {String} message (with values inserted) in the user's browser language
- * @private
- */
-export let translator = (key, values) => {
-  console.debug('p5.js translator called before translations were loaded');
-
-  // Certain FES functionality may trigger before translations are downloaded.
-  // Using "partialBundledLanguages" option during initialization, we can
-  // still use our fallback language to display messages
-  i18next.t(key, values); /* i18next-extract-disable-line */
-};
-// (We'll set this to a real value in the init function below!)
-
-/*
- * Set up our translation function, with loaded languages
- * @private
- */
-export const initialize = () => {
-  let i18init = i18next
-    .use(LanguageDetector)
-    .use(FetchResources)
-    .init({
-      fallbackLng: 'en',
-      nestingPrefix: '$tr(',
-      nestingSuffix: ')',
-      defaultNS: 'translation',
-      returnEmptyString: false,
-      interpolation: {
-        escapeValue: false
-      },
-      detection: {
-        checkWhitelist: false,
-
-        // prevent storing or locating language from cookie or localStorage
-        // more info on https://github.com/processing/p5.js/issues/4862
-        order: ['querystring', 'navigator', 'htmlTag', 'path', 'subdomain'],
-        caches: []
-      },
-      backend: {
-        fallback: 'en',
-        
-        // ensure that the FES internationalization strings are loaded
-        // from the latest patch of the current minor version of p5.js
-        loadPath: `https://cdn.jsdelivr.net/npm/p5@${
-          VERSION.replace(/^(\d+\.\d+)\.\d+.*$/, '$1')
-        }/translations/{{lng}}/{{ns}}.json`
-      },
-      partialBundledLanguages: true,
-      resources: fallbackResources
-    })
-    .then(
-      translateFn => {
-        translator = translateFn;
-      },
-      e => console.debug(`Translations failed to load (${e})`)
-    );
-
-  // i18next.init() returns a promise that resolves when the translations
-  // are loaded. We use this in core/init.js to hold p5 initialization until
-  // we have the translation files.
-  return i18init;
-};
-
-/*
- * Returns a list of languages we have translations loaded for
- * @private
- */
-export const availableTranslatorLanguages = () => {
-  return i18next.languages;
-};
-
-/*
- * Returns the current language selected for translation
- * @private
- */
-export const currentTranslatorLanguage = language => {
-  return i18next.language;
-};
-
-/*
- * Sets the current language for translation
- * Returns a promise that resolved when loading is finished,
- * or rejects if it fails.
- * @private
- */
-export const setTranslatorLanguage = language => {
-  return i18next.changeLanguage(language || undefined, e =>
-    console.debug(`Translations failed to load (${e})`)
-  );
-};
diff --git a/src/core/noop.js b/src/core/noop.js
index 9e68a6318e..1f7eae86f1 100644
--- a/src/core/noop.js
+++ b/src/core/noop.js
@@ -1,5 +1,4 @@
 export default function (p5) {
     p5._friendlyError = () => {};
     p5._checkForUserDefinedFunctions = () => {};
-    p5._fesErrorMonitor = () => {};
   }
diff --git a/src/dom/p5.MediaElement.js b/src/dom/p5.MediaElement.js
index 84f93e9cfd..744620a5ae 100644
--- a/src/dom/p5.MediaElement.js
+++ b/src/dom/p5.MediaElement.js
@@ -4,6 +4,8 @@
  */
 
 import { Element } from './p5.Element';
+// import { friendlyAutoplayError } from '../friendly_errors/fes_core';
+import { FES, TL } from '../friendly_errors/fes';
 
 /**
  * @typedef {'video'} VIDEO
@@ -126,7 +128,8 @@ class MediaElement extends Element {
         // if it's an autoplay failure error
         if (e.name === 'NotAllowedError') {
           if (typeof IS_MINIFIED === 'undefined') {
-            p5._friendlyAutoplayError(this.src);
+            // friendlyAutoplayError(this.src);
+            FES.log`The media that tried to play (with '${this.src}') wasn't allowed to by this browser, most likely due to the browser's autoplay policy.\n\n+ More info: https://developer.mozilla.org/docs/Web/Media/Autoplay_guide`();
           } else {
             console.error(e);
           }
@@ -364,7 +367,8 @@ class MediaElement extends Element {
   _setupAutoplayFailDetection() {
     const timeout = setTimeout(() => {
       if (typeof IS_MINIFIED === 'undefined') {
-        p5._friendlyAutoplayError(this.src);
+        // friendlyAutoplayError(this.src);
+        FES.log`The media that tried to play (with '${this.src}') wasn't allowed to by this browser, most likely due to the browser's autoplay policy.\n\n+ More info: https://developer.mozilla.org/docs/Web/Media/Autoplay_guide`();
       } else {
         console.error(e);
       }
diff --git a/src/core/friendly_errors/browser_errors.js b/src/friendly_errors/browser_errors.js
similarity index 88%
rename from src/core/friendly_errors/browser_errors.js
rename to src/friendly_errors/browser_errors.js
index 74ac394866..52eabd25d0 100644
--- a/src/core/friendly_errors/browser_errors.js
+++ b/src/friendly_errors/browser_errors.js
@@ -7,7 +7,7 @@
 // them into types and extract the required information.
 // The FES can use the extracted info to generate a friendly error message
 // for the matching error.
-const strings = {
+export const errorTable = {
   ReferenceError: [
     {
       msg: '{{}} is not defined',
@@ -126,4 +126,24 @@ const strings = {
   ]
 };
 
-export default strings;
+export const entryPoints = [
+  'setup',
+  'draw',
+  'deviceMoved',
+  'deviceTurned',
+  'deviceShaken',
+  'doubleClicked',
+  'mousePressed',
+  'mouseReleased',
+  'mouseMoved',
+  'mouseDragged',
+  'mouseClicked',
+  'mouseWheel',
+  'touchStarted',
+  'touchMoved',
+  'touchEnded',
+  'keyPressed',
+  'keyReleased',
+  'keyTyped',
+  'windowResized'
+];
diff --git a/src/friendly_errors/fes.js b/src/friendly_errors/fes.js
new file mode 100644
index 0000000000..eccfa3b7a6
--- /dev/null
+++ b/src/friendly_errors/fes.js
@@ -0,0 +1,181 @@
+import { TL } from 'tl-util';
+
+TL.addTranslations(['en', 'en-US', 'en-GB'], {
+  paramTooFew: {
+    '${minArgs}_[one]': 'Expected at least ${minArgs} argument, but received fewer in ${functionName}(). ${referenceLink}',
+    '${minArgs}_[*]': 'Expected at least ${minArgs} arguments, but received fewer in ${functionName}(). ${referenceLink}'
+  },
+  paramTooMany: {
+    '${minArgs}_[one]': 'Expected at most ${minArgs} argument, but received fewer in ${functionName}(). ${referenceLink}',
+    '${minArgs}_[*]': 'Expected at most ${minArgs} arguments, but received fewer in ${functionName}(). ${referenceLink}'
+  },
+  paramType: 'Expected ${expectedType} at the ${position} parameter in ${functionName}.',
+  redeclare: '${errorType} "${name}" on line ${line} is being redeclared and conflicts with a p5.js ${errorType}. p5.js reference: ${url}',
+  referenceLink: 'For more information, see ${referenceURL}.',
+  ordinalFirst: 'first',
+  typeString: 'string',
+  typeBoolean: 'boolean',
+  typeFunction: 'function',
+  typeNumber: 'number'
+});
+
+const defaultLanguage = navigator.language;
+const localTranslation = window.localStorage.getItem(defaultLanguage);
+let translationPromise;
+if (localTranslation) {
+  TL.addTranslations(defaultLanguage, JSON.parse(localTranslation));
+  translationPromise = Promise.resolve();
+}else{
+  translationPromise = fetch('./fes-zh.json')
+    .then(res => {
+      if (res.ok) return res.json();
+      throw null;
+    })
+    .then(data => {
+      TL.addTranslations(defaultLanguage, data);
+      window.localStorage.setItem(defaultLanguage, JSON.stringify(data));
+    })
+    .catch(() => Promise.resolve());
+}
+
+export class FES {
+  static languageCode = navigator.languages;
+  static translationPromise = translationPromise;
+
+  // Rather than logging directly, provide an interface to
+  // compose a message
+  // This static method is not used directly, other methods curry it
+  static #printMessage(method, strings, ...values) {
+    const styleStrings = [];
+    const translation = TL.tl(strings, ...values.map(
+      value => {
+        if(value instanceof StyledMessage){
+          const ret = `%c${value.message.toString(FES.languageCode)}%c`;
+          styleStrings.push(value.styleString, '');
+          return ret;
+        } else if (value.message && value.styleStrings) {
+          styleStrings.push(...value.styleStrings);
+          return value.message;
+        } else {
+          return value;
+        }
+      }
+    ));
+    const results = translation.toString(FES.languageCode);
+
+    const executor = options => {
+      const { prefix } = Object.assign({
+        prefix: TL.tl`🌸 p5.js says: `
+      }, options);
+
+      if (prefix instanceof TL) {
+        console[method](
+          prefix.toString(FES.languageCode) + results,
+          ...styleStrings
+        );
+      } else if (prefix === false) {
+        console[method](results, ...styleStrings);
+      } else {
+        console[method](prefix + results, ...styleStrings);
+      }
+    };
+
+    executor.message = results;
+    executor.styleStrings = styleStrings;
+
+    executor.toString = function (lang) {
+      return translation.toString(lang);
+    };
+
+    return executor;
+  }
+
+  static log(strings, ...values) {
+    return FES.#printMessage('log', strings, ...values);
+  }
+
+  static debug(strings, ...values) {
+    return FES.#printMessage('debug', strings, ...values);
+  }
+
+  static error(strings, ...values) {
+    return FES.#printMessage('error', strings, ...values);
+  }
+
+  static info(strings, ...values) {
+    return FES.#printMessage('info', strings, ...values);
+  }
+
+  static warn(strings, ...values) {
+    return FES.#printMessage('warn', strings, ...values);
+  }
+
+  // Just an alias to TL
+  static TL = TL;
+
+  static premade = {
+    ordinals: [
+      TL.tl`first`
+    ],
+    types: {
+      string: TL.tl`string`,
+      boolean: TL.tl`boolean`,
+      number: TL.tl`number`
+    }
+  }
+}
+
+export class StyledMessage {
+  message;
+  styleString;
+
+  constructor(message, styleString) {
+    this.message = message;
+    this.styleString = styleString;
+  }
+
+  toString(lang) {
+    return this.message.toString(lang);
+  }
+}
+
+export function style(message, mod) {
+  const styleString = Object.entries(mod)
+    .reduce((acc, [key, val]) => {
+      acc += `${key}: ${val};`;
+      return acc;
+    }, '');
+  if (message instanceof StyledMessage) {
+    message.styleString += styleString;
+    return message;
+  } else {
+    return new StyledMessage(message, styleString);
+  }
+}
+
+export function red(message) {
+  return style(message, { color: 'red' });
+}
+
+export function white(message) {
+  return style(message, { color: 'white' });
+}
+
+export function bgBlack(message) {
+  return style(message, { background: 'black' });
+}
+
+export function bgGrey(message) {
+  return style(message, { background: 'grey' });
+}
+
+export function underline(message) {
+  return style(message, { 'text-decoration': 'underline' });
+}
+
+// Re-export TL
+export { TL };
+
+export default function (p5, fn, lifecycles) {
+  p5.FES = FES;
+}
diff --git a/src/friendly_errors/fes_core.js b/src/friendly_errors/fes_core.js
new file mode 100644
index 0000000000..fbbe026b30
--- /dev/null
+++ b/src/friendly_errors/fes_core.js
@@ -0,0 +1,686 @@
+/**
+ * @for p5
+ * @requires core
+ *
+ * This is the main file for the Friendly Error System (FES), containing
+ * the core as well as miscellaneous functionality of the FES. Here is a
+ * brief outline of the functions called in this system.
+ *
+ * The FES may be invoked by a call to either
+ * (1) _validateParameters, (2) _friendlyFileLoadError, (3) _friendlyError,
+ * (4) helpForMisusedAtTopLevelCode, or (5) _fesErrorMonitor.
+ *
+ * _validateParameters is located in validate_params.js along with other code
+ * used for parameter validation.
+ * _friendlyFileLoadError is located in file_errors.js along with other code
+ * used for dealing with file load errors.
+ * Apart from this, there's also a file stacktrace.js, which contains the code
+ * to parse the error stack, borrowed from:
+ * https://github.com/stacktracejs/stacktrace.js
+ *
+ * For more detailed information on the FES functions, including the call
+ * sequence of each function, please look at the FES Reference + Dev Notes:
+ * https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md
+ */
+import { errorTable, entryPoints } from './browser_errors';
+import { errorStackParser, processStack, printFriendlyStack, getFriendlyStack } from './stacktrace';
+import { FES } from './fes';
+
+function fesCore(p5, fn, lifecycles){
+  // This is a lazily-defined list of p5 symbols that may be
+  // misused by beginners at top-level code, outside of setup/draw. We'd like
+  // to detect these errors and help the user by suggesting they move them
+  // into setup/draw.
+  //
+  // For more details, see https://github.com/processing/p5.js/issues/1121.
+  let misusedAtTopLevelCode = null;
+  /**
+   * A helper function for populating misusedAtTopLevel list.
+   *
+   * @method defineMisusedAtTopLevelCode
+   * @private
+   */
+  let defineMisusedAtTopLevelCode = () => {
+    const uniqueNamesFound = {};
+    const getSymbols = obj =>
+      Object.getOwnPropertyNames(obj)
+        .filter(name => {
+          if (name[0] === '_') {
+            return false;
+          }
+          if (name in uniqueNamesFound) {
+            return false;
+          }
+
+          uniqueNamesFound[name] = true;
+
+          return true;
+        })
+        .map(name => {
+          let type;
+
+          if (typeof obj[name] === 'function') {
+            type = 'function';
+          } else if (name === name.toUpperCase()) {
+            type = 'constant';
+          } else {
+            type = 'variable';
+          }
+
+          return { name, type };
+        });
+
+    misusedAtTopLevelCode = getSymbols(fn);
+
+    // This will ultimately ensure that we report the most specific error
+    // possible to the user, e.g. advising them about HALF_PI instead of PI
+    // when their code misuses the former.
+    misusedAtTopLevelCode.sort((a, b) => b.name.length - a.name.length);
+  };
+
+  // the threshold for the maximum allowed levenshtein distance
+  // used in misspelling detection
+  const EDIT_DIST_THRESHOLD = 2;
+
+  if (typeof IS_MINIFIED !== 'undefined') {
+    p5._friendlyError =
+      p5._checkForUserDefinedFunctions =
+      () => {};
+  } else {
+    /**
+     * Takes a message and a p5 function func, and adds a link pointing to
+     * the reference documentation of func at the end of the message
+     *
+     * @method mapToReference
+     * @private
+     * @param {String}  message   the words to be said
+     * @param {String}  [func]    the name of function
+     *
+     * @returns {String}
+     */
+    const mapToReference = (message, func) => {
+      let msgWithReference = '';
+      if (func == null || func.substring(0, 4) === 'load') {
+        msgWithReference = message;
+      } else {
+        const methodParts = func.split('.');
+        const referenceSection =
+          methodParts.length > 1 ? `${methodParts[0]}.${methodParts[1]}` : 'p5';
+
+        const funcName =
+          methodParts.length === 1 ? func : methodParts.slice(2).join('/');
+
+        //Whenever func having p5.[Class] is encountered, we need to have the error link as mentioned below else different link
+        if(funcName.startsWith('p5.')){
+          msgWithReference = FES.log`${message} (https://p5js.org/reference/${referenceSection}.${funcName})`;
+        }else{
+          msgWithReference = FES.log`${message} (https://p5js.org/reference/${referenceSection}/${funcName})`;
+        }
+      }
+      return msgWithReference;
+    };
+
+    /**
+     * Prints out a fancy, colorful message to the console log
+     * Attaches Friendly Errors prefix [fes.pre] to the message.
+     *
+     * @method _report
+     * @private
+     * @param  {String}          message  Message to be printed
+     * @param  {String}          [func]   Name of function
+     *
+     * @return console logs
+     */
+    p5._report = (message, func) => {
+      // Add a link to the reference docs of func at the end of the message
+      message = mapToReference(message, func);
+      FES.log`${message}`();
+    };
+
+    /**
+     * This is a generic method that can be called from anywhere in the p5
+     * library to alert users to a common error.
+     *
+     * @method _friendlyError
+     * @private
+     * @param  {String}         message   Message to be printed
+     * @param  {String}         [func]    Name of the function linked to error
+     */
+    p5._friendlyError = function(message, func) {
+      if (p5.disableFriendlyErrors) return;
+      p5._report(message, func);
+    };
+
+    /**
+     * Whether or not p5.js is running in an environment where `preload` will be
+     * run before `setup`.
+     *
+     * This will return false for default builds >= 2.0, but backwards compatibility
+     * addons may set this to true.
+     *
+     * @private
+     */
+    p5.isPreloadSupported = function() {
+      return false;
+    };
+
+    /**
+     * Checks capitalization for user defined functions.
+     *
+     * Generates and prints a friendly error message using key:
+     * "fes.checkUserDefinedFns".
+     *
+     * @method checkForUserDefinedFunctions
+     * @private
+     * @param {*} context   Current default context. Set to window in
+     *                      "global mode" and to a p5 instance in "instance mode"
+     */
+    const checkForUserDefinedFunctions = context => {
+      if (p5.disableFriendlyErrors) return;
+
+      // if using instance mode, this function would be called with the current
+      // instance as context
+      const instanceMode = context instanceof p5;
+      context = instanceMode ? context : window;
+      const fnNames = entryPoints;
+
+      if (context.preload && !p5.isPreloadSupported()) {
+        // Print a message but don't stop execution, it is reasonable
+        // for someone to have their own `function preload()` if they want.
+        p5._friendlyError(
+          FES.log`The preload() function has been removed in p5.js 2.0. Please load assets in setup() using async / await keywords or callbacks instead. See https://github.com/processing/p5.js-compatibility for more information about 2.0 and compatibility, or https://dev.to/limzykenneth/asynchronous-p5js-20-458f for more information about promises and async/await.`
+        );
+      }
+
+      const fxns = {};
+      // lowercasename -> actualName mapping
+      fnNames.forEach(symbol => {
+        fxns[symbol.toLowerCase()] = symbol;
+      });
+
+      for (const prop of Object.keys(context)) {
+        const lowercase = prop.toLowerCase();
+
+        // check if the lowercase property name has an entry in fxns, if the
+        // actual name with correct capitalization doesnt exist in context,
+        // and if the user-defined symbol is of the type function
+        if (
+          fxns.hasOwnProperty(lowercase) &&
+          !context[fxns[lowercase]] &&
+          typeof context[prop] === 'function'
+        ) {
+          const msg = FES.log`It seems that you may have accidentally written ${prop} instead of ${fxns[lowercase]}. Please correct it if it's not intentional.`;
+
+          p5._friendlyError(msg, fxns[lowercase]);
+        }
+      }
+    };
+
+    /**
+     * Compares the symbol caught in the ReferenceError to everything in
+     * misusedAtTopLevel ( all public p5 properties ).
+     *
+     * Generates and prints a friendly error message using key: "fes.misspelling".
+     *
+     * @method handleMisspelling
+     * @private
+     * @param {String} errSym   Symbol to whose spelling to check
+     * @param {Error} error     ReferenceError object
+     *
+     * @returns {Boolean} tell whether error was likely due to typo
+     */
+    const handleMisspelling = (errSym, error) => {
+      const distanceMap = {};
+      let min = 999999;
+      // compute the levenshtein distance for the symbol against all known
+      // public p5 properties. Find the property with the minimum distance
+      misusedAtTopLevelCode.forEach(symbol => {
+        let dist = computeEditDistance(errSym, symbol.name);
+        if (distanceMap[dist]) distanceMap[dist].push(symbol);
+        else distanceMap[dist] = [symbol];
+
+        if (dist < min) min = dist;
+      });
+
+      // if the closest match has more "distance" than the max allowed threshold
+      if (min > Math.min(EDIT_DIST_THRESHOLD, errSym.length)) return false;
+
+      // Show a message only if the caught symbol and the matched property name
+      // differ in their name ( either letter difference or difference of case )
+      const matchedSymbols = distanceMap[min].filter(
+        symbol => symbol.name !== errSym
+      );
+      if (matchedSymbols.length !== 0) {
+        const parsed = errorStackParser.parse(error);
+        let locationObj;
+        if (
+          parsed &&
+          parsed[0] &&
+          parsed[0].fileName &&
+          parsed[0].lineNumber &&
+          parsed[0].columnNumber
+        ) {
+          locationObj = {
+            location: `${parsed[0].fileName}:${parsed[0].lineNumber}:${
+              parsed[0].columnNumber
+            }`,
+            file: parsed[0].fileName.split('/').slice(-1),
+            line: parsed[0].lineNumber
+          };
+        }
+
+        let msg;
+        if (matchedSymbols.length === 1) {
+          // To be used when there is only one closest match
+          msg = FES.log`${locationObj ? FES.log`[${locationObj.file}, line ${locationObj.line}]` : ''} It seems that you may have accidentally written "${errSym}"" instead of "${matchedSymbols[0].name}". Please correct it to ${matchedSymbols[0].name} if you wish to use the ${matchedSymbols[0].type} from p5.js.`;
+        } else {
+          // To be used when there are multiple closest matches. Gives each
+          // suggestion on its own line, the function name followed by a link to
+          // reference documentation
+          const suggestions = matchedSymbols
+            .map(symbol => {
+              const message =
+                '▶️ ' + symbol.name + (symbol.type === 'function' ? '()' : '');
+              return mapToReference(message, symbol.name);
+            })
+            .join('\n');
+          msg = FES.log`${locationObj ? FES.log`[${locationObj.file}, line ${locationObj.line}]` : ''} It seems that you may have accidentally written "${errSym}".\nYou may have meant one of the following: \n${suggestions}`;
+        }
+
+        // If there is only one closest match, tell _friendlyError to also add
+        // a link to the reference documentation. In case of multiple matches,
+        // this is already done in the suggestions variable, one link for each
+        // suggestion.
+        p5._friendlyError(
+          msg,
+          matchedSymbols.length === 1 ? matchedSymbols[0].name : undefined
+        );
+        return true;
+      }
+      return false;
+    };
+
+    /**
+     * Detects browser level error event for p5 constants/functions used outside
+     * of setup() and draw().
+     *
+     * Generates and prints a friendly error message using key:
+     * "fes.misusedTopLevel".
+     *
+     * @method helpForMisusedAtTopLevelCode
+     * @private
+     * @param {Event} e       Error event
+     * @param {Boolean} log   false
+     *
+     * @returns {Boolean} true
+     */
+    const helpForMisusedAtTopLevelCode = e => {
+      // If we find that we're logging lots of false positives, we can
+      // uncomment the following code to avoid displaying anything if the
+      // user's code isn't likely to be using p5's global mode. (Note that
+      // setup/draw are more likely to be defined due to JS function hoisting.)
+      //
+      //if (!('setup' in window || 'draw' in window)) {
+      //  return;
+      //}
+
+      const matched = misusedAtTopLevelCode.some(symbol => {
+        // Note that while just checking for the occurrence of the
+        // symbol name in the error message could result in false positives,
+        // a more rigorous test is difficult because different browsers
+        // log different messages, and the format of those messages may
+        // change over time.
+        //
+        // For example, if the user uses 'PI' in their code, it may result
+        // in any one of the following messages:
+        //
+        //   * 'PI' is undefined                           (Microsoft Edge)
+        //   * ReferenceError: PI is undefined             (Firefox)
+        //   * Uncaught ReferenceError: PI is not defined  (Chrome)
+        if (e.message && e.message.match(`\\W?${symbol.name}\\W`) !== null) {
+          const FAQ_URL =
+            'https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup';
+          const symbolName =
+            symbol.type === 'function' ? `${symbol.name}()` : symbol.name;
+          FES.log`Did you just try to use p5.js's ${symbolName} ${
+            symbol.type
+          }? If so, you may want to move it into your sketch's setup() function.\n\nFor more details, see: ${FAQ_URL}`();
+          return true;
+        }
+      });
+
+      return matched;
+    };
+
+    /**
+     * Handles "global" errors that the browser catches.
+     *
+     * Called when an error event happens and detects the type of error.
+     *
+     * Generates and prints a friendly error message using key:
+     * "fes.globalErrors.syntax.[*]", "fes.globalErrors.reference.[*]",
+     * "fes.globalErrors.type.[*]".
+     *
+     * @method fesErrorMonitor
+     * @private
+     * @param {*} e  Event object to extract error details from
+     */
+    const fesErrorMonitor = e => {
+      if (p5.disableFriendlyErrors) return;
+
+      if (!misusedAtTopLevelCode) {
+        defineMisusedAtTopLevelCode();
+      }
+
+      // Try to get the error object from e
+      let error;
+      if (e instanceof Error) {
+        error = e;
+      } else if (e instanceof ErrorEvent) {
+        error = e.error;
+      } else if (e instanceof PromiseRejectionEvent) {
+        error = e.reason;
+        if (!(error instanceof Error)) return;
+      }
+      if (!error) return;
+
+      let stacktrace = errorStackParser.parse(error);
+      // process the stacktrace from the browser and simplify it to give
+      // friendlyStack.
+      let [isInternal, friendlyStack] = processStack(
+        error,
+        stacktrace
+      );
+
+      // if this is an internal library error, the type of the error is not relevant,
+      // only the user code that lead to it is.
+      if (isInternal) return;
+
+      const errList = errorTable[error.name];
+      if (!errList) return; // this type of error can't be handled yet
+
+      let matchedError;
+      for (const obj of errList) {
+        let string = obj.msg;
+        // capture the primary symbol mentioned in the error
+        string = string.replace(new RegExp('{{}}', 'g'), '([a-zA-Z0-9_]+)');
+        string = string.replace(new RegExp('{{.}}', 'g'), '(.+)');
+        string = string.replace(new RegExp('{}', 'g'), '(?:[a-zA-Z0-9_]+)');
+        let matched = error.message.match(string);
+
+        if (matched) {
+          matchedError = Object.assign({}, obj);
+          matchedError.match = matched;
+          break;
+        }
+      }
+
+      if (!matchedError) return; // this type of error can't be handled yet
+
+      // Try and get the location from the top element of the stack
+      let locationStr = '';
+      if (
+        stacktrace &&
+        stacktrace[0].fileName &&
+        stacktrace[0].lineNumber &&
+        stacktrace[0].columnNumber
+      ) {
+        locationStr = getFriendlyStack(stacktrace, true);
+      }
+
+      switch (error.name) {
+        case 'SyntaxError': {
+          // We can't really do much with syntax errors other than try to use
+          // a simpler framing of the error message. The stack isn't available
+          // for syntax errors
+          switch (matchedError.type) {
+            case 'INVALIDTOKEN': {
+              //Error if there is an invalid or unexpected token that doesn't belong at this position in the code
+              //let x = “not a string”; -> string not in proper quotes
+              let url =
+                'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Illegal_character#What_went_wrong';
+              p5._friendlyError(
+                FES.log`\nSyntax Error - Found a symbol that JavaScript doesn't recognize or didn't expect at it's place.\n\n+ More info: ${url}`
+              );
+              break;
+            }
+            case 'UNEXPECTEDTOKEN': {
+              //Error if a specific language construct(, { ; etc) was expected, but something else was provided
+              //for (let i = 0; i < 5,; ++i) -> a comma after i<5 instead of a semicolon
+              let url =
+                'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Unexpected_token#What_went_wrong';
+              p5._friendlyError(
+                FES.log`\nSyntax Error - Symbol present at a place that wasn't expected.\nUsually this is due to a typo. Check the line number in the error for anything missing/extra.\n\n+ More info: ${url}`
+              );
+              break;
+            }
+            case 'REDECLAREDVARIABLE': {
+              //Error if a variable is redeclared by the user. Example=>
+              //let a = 10;
+              //let a = 100;
+              let errSym = matchedError.match[1];
+              let url =
+                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter#what_went_wrong';
+              p5._friendlyError(
+                FES.log`\nSyntax Error - "${errSym}" is being redeclared. JavaScript doesn't allow declaring a variable more than once. Check the line number in error for redeclaration of the variable.\n\n+ More info: ${url}`
+              );
+              break;
+            }
+            case 'MISSINGINITIALIZER': {
+              //Error if a const variable is not initialized during declaration
+              //Example => const a;
+              let url =
+                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const#what_went_wrong';
+              p5._friendlyError(
+                FES.log`\nSyntax Error - A const variable is declared but not initialized. In JavaScript, an initializer for a const is required. A value must be specified in the same statement in which the variable is declared. Check the line number in the error and assign the const variable a value.\n\n+ More info: ${url}`
+              );
+              break;
+            }
+            case 'BADRETURNORYIELD': {
+              //Error when a return statement is misplaced(usually outside of a function)
+              // const a = function(){
+              //  .....
+              //  }
+              //  return; -> misplaced return statement
+              let url =
+                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield#what_went_wrong';
+              p5._friendlyError(
+                FES.log`\nSyntax Error - return lies outside of a function. Make sure you’re not missing any brackets, so that return lies inside a function.\n\n+ More info: ${url}`
+              );
+              break;
+            }
+          }
+          break;
+        }
+        case 'ReferenceError': {
+          switch (matchedError.type) {
+            case 'NOTDEFINED': {
+              //Error if there is a non-existent variable referenced somewhere
+              //let a = 10;
+              //console.log(x);
+              let errSym = matchedError.match[1];
+              if (
+                (errSym && handleMisspelling(errSym, error)) ||
+                helpForMisusedAtTopLevelCode(e)
+              ) {
+                break;
+              }
+
+              // if the flow gets this far, this is likely not a misspelling
+              // of a p5 property/function
+              let url = 'https://p5js.org/examples/data-variable-scope.html';
+              p5._friendlyError(
+                FES.log`${locationStr} "${errSym}" is not defined in the current scope. If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive).\n\n+ More info: ${url}`
+              );
+
+              if (friendlyStack) {
+                const msg = getFriendlyStack(friendlyStack);
+                if(msg) FES.log`${msg}`({
+                  prefix: false
+                });
+              }
+              break;
+            }
+            case 'CANNOTACCESS': {
+              //Error if a lexical variable was accessed before it was initialized
+              //console.log(a); -> variable accessed before it was initialized
+              //let a=100;
+              let errSym = matchedError.match[1];
+              let url =
+                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init#what_went_wrong';
+              p5._friendlyError(
+                FES.log`\n${locationStr} "${errSym} is used before declaration. Make sure you have declared the variable before using it.\n\n+ More info: ${url}`
+              );
+
+              if (friendlyStack) printFriendlyStack(friendlyStack);
+              break;
+            }
+          }
+          break;
+        }
+
+        case 'TypeError': {
+          switch (matchedError.type) {
+            case 'NOTFUNC': {
+              //Error when some code expects you to provide a function, but that didn't happen
+              //let a = document.getElementByID('foo'); -> getElementById instead of getElementByID
+              let errSym = matchedError.match[1];
+              let splitSym = errSym.split('.');
+              let url =
+                'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_a_function#What_went_wrong';
+
+              // if errSym is aa.bb.cc , symbol would be cc and obj would aa.bb
+              let translationObj = {
+                // url,
+                symbol: splitSym[splitSym.length - 1],
+                obj: splitSym.slice(0, splitSym.length - 1).join('.')
+              };
+
+              // There are two cases to handle here. When the function is called
+              // as a property of an object and when it's called independently.
+              // Both have different explanations.
+              if (splitSym.length > 1) {
+                p5._friendlyError(
+                  FES.log`\n${locationStr} "${translationObj.symbol}" could not be called as a function.\nVerify whether "${translationObj.obj}" has "${translationObj.symbol}" in it and check the spelling, letter-casing (JavaScript is case-sensitive) and its type.\n\n+ More info: ${url}`
+                );
+              } else {
+                p5._friendlyError(
+                  FES.log`\n${locationStr} "${translationObj.symbol}" could not be called as a function.\nCheck the spelling, letter-casing (JavaScript is case-sensitive) and its type.\n\n+ More info: ${url}`
+                );
+              }
+
+              if (friendlyStack) printFriendlyStack(friendlyStack);
+              break;
+            }
+            case 'READNULL': {
+              //Error if a property of null is accessed
+              //let a = null;
+              //console.log(a.property); -> a is null
+              let url =
+                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong';
+              p5._friendlyError(
+                FES.log`\n${locationStr} The property of null can't be read. In javascript the value null indicates that an object has no value.\n\n+ More info: ${url}`
+              );
+
+              if (friendlyStack) printFriendlyStack(friendlyStack);
+              break;
+            }
+            case 'READUDEFINED': {
+              //Error if a property of undefined is accessed
+              //let a; -> default value of a is undefined
+              //console.log(a.property); -> a is undefined
+              let url =
+                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong';
+              p5._friendlyError(
+                FES.log`\n${locationStr} Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.\n\n + More info: ${url}`
+              );
+
+              if (friendlyStack) printFriendlyStack(friendlyStack);
+              break;
+            }
+            case 'CONSTASSIGN': {
+              //Error when a const variable is reassigned a value
+              //const a = 100;
+              //a=10;
+              let url =
+                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment#what_went_wrong';
+              p5._friendlyError(
+                FES.log`\n${locationStr} A const variable is being re-assigned. In javascript, re-assigning a value to a constant is not allowed. If you want to re-assign new values to a variable, make sure it is declared as var or let.\n\n+ More info: ${url}`
+              );
+
+              if (friendlyStack) printFriendlyStack(friendlyStack);
+              break;
+            }
+          }
+        }
+      }
+    };
+
+    p5._checkForUserDefinedFunctions = checkForUserDefinedFunctions;
+    p5._fesLogCache = {};
+
+    window.addEventListener('load', checkForUserDefinedFunctions, false);
+    window.addEventListener('error', fesErrorMonitor, false);
+    window.addEventListener('unhandledrejection', fesErrorMonitor, false);
+  }
+}
+
+export default fesCore;
+
+if (typeof p5 !== 'undefined') {
+  p5.registerAddon(fesCore);
+}
+
+/**
+ * Measures dissimilarity between two strings by calculating
+ * the Levenshtein distance.
+ *
+ * If the "distance" between them is small enough, it is
+ * reasonable to think that one is the misspelled version of the other.
+ *
+ * Specifically, this uses the Wagner–Fischer algorithm.
+ *
+ * @method computeEditDistance
+ * @private
+ * @param {String} w1 the first word
+ * @param {String} w2 the second word
+ *
+ * @returns {Number} the "distance" between the two words, a smaller value
+ *                   indicates that the words are similar
+ */
+function computeEditDistance(w1, w2) {
+  const l1 = w1.length,
+    l2 = w2.length;
+  if (l1 === 0) return w2;
+  if (l2 === 0) return w1;
+
+  let prev = [];
+  let cur = [];
+
+  for (let j = 0; j < l2 + 1; j++) {
+    cur[j] = j;
+  }
+
+  prev = cur;
+
+  for (let i = 1; i < l1 + 1; i++) {
+    cur = [];
+    for (let j = 0; j < l2 + 1; j++) {
+      if (j === 0) {
+        cur[j] = i;
+      } else {
+        let a1 = w1[i - 1],
+          a2 = w2[j - 1];
+        let temp = 999999;
+        let cost = a1.toLowerCase() === a2.toLowerCase() ? 0 : 1;
+        temp = temp > cost + prev[j - 1] ? cost + prev[j - 1] : temp;
+        temp = temp > 1 + cur[j - 1] ? 1 + cur[j - 1] : temp;
+        temp = temp > 1 + prev[j] ? 1 + prev[j] : temp;
+        cur[j] = temp;
+      }
+    }
+    prev = cur;
+  }
+
+  return cur[l2];
+};
diff --git a/src/core/friendly_errors/index.js b/src/friendly_errors/index.js
similarity index 65%
rename from src/core/friendly_errors/index.js
rename to src/friendly_errors/index.js
index d69a3c604e..6895dd9768 100644
--- a/src/core/friendly_errors/index.js
+++ b/src/friendly_errors/index.js
@@ -1,13 +1,11 @@
 import fesCore from './fes_core';
-import stacktrace from './stacktrace';
 import validateParams from './param_validator.js';
 import sketchVerifier from './sketch_verifier.js';
-import fileErrors from './file_errors';
+import fes from './fes';
 
 export default function (p5) {
+  p5.registerAddon(fes);
   p5.registerAddon(fesCore);
-  p5.registerAddon(stacktrace);
   p5.registerAddon(validateParams);
   p5.registerAddon(sketchVerifier);
-  p5.registerAddon(fileErrors);
 }
diff --git a/src/core/friendly_errors/param_validator.js b/src/friendly_errors/param_validator.js
similarity index 87%
rename from src/core/friendly_errors/param_validator.js
rename to src/friendly_errors/param_validator.js
index 6277304168..7d4ce9600a 100644
--- a/src/core/friendly_errors/param_validator.js
+++ b/src/friendly_errors/param_validator.js
@@ -1,9 +1,13 @@
 /**
  * @for p5
  */
-import * as constants from '../constants.js';
-import { z } from 'zod/v4';
-import dataDoc from '../../../docs/parameterData.json';
+import * as constants from '../core/constants.js';
+import * as z from 'zod/mini';
+import dataDoc from '../../docs/parameterData.json';
+import { FES } from './fes.js';
+import { errorStackParser, processStack, getFriendlyStack } from './stacktrace.js';
+
+let documentationData = dataDoc;
 
 function validateParams(p5, fn, lifecycles) {
   // Cache for Zod schemas
@@ -62,7 +66,7 @@ function validateParams(p5, fn, lifecycles) {
     'Array': z.array(z.any()),
     'Boolean': z.boolean(),
     'Function': z.function(),
-    'Integer': z.number().int(),
+    'Integer': z.number().check(z.int()),
     'Number': z.union([z.number(), z.literal(Infinity), z.literal(-Infinity)]),
     'Object': z.object({}),
     'String': z.string()
@@ -142,7 +146,7 @@ function validateParams(p5, fn, lifecycles) {
    */
   const generateZodSchemasForFunc = function (func) {
     const { funcName, funcClass } = extractFuncNameAndClass(func);
-    let funcInfo = dataDoc[funcClass][funcName];
+    let funcInfo = documentationData[funcClass][funcName];
 
     if(!funcInfo) return;
 
@@ -237,7 +241,7 @@ function validateParams(p5, fn, lifecycles) {
       }
 
       if (isOptional) {
-        schema = schema.optional();
+        schema = z.optional(schema);
       }
       return { schema, rest: isRest };
     };
@@ -309,7 +313,7 @@ function validateParams(p5, fn, lifecycles) {
    * @returns {z.ZodSchema} Closest schema matching the input arguments.
    */
   const findClosestSchema = function (schema, args) {
-    if (!(schema instanceof z.ZodUnion)) {
+    if (!(schema instanceof z.ZodMiniUnion)) {
       return schema;
     }
 
@@ -317,7 +321,7 @@ function validateParams(p5, fn, lifecycles) {
     // Lower score means closer match.
     const scoreSchema = schema => {
       let score = Infinity;
-      if (!(schema instanceof z.ZodTuple)) {
+      if (!(schema instanceof z.ZodMiniTuple)) {
         console.warn('Schema below is not a tuple: ');
         printZodSchema(schema);
         return score;
@@ -327,7 +331,7 @@ function validateParams(p5, fn, lifecycles) {
       const schemaItems = schema.def.items;
       const numSchemaItems = schemaItems.length;
       const numRequiredSchemaItems = schemaItems
-        .filter(item => !item.isOptional())
+        .filter(item => !item.safeParse(undefined).success)
         .length;
 
       if (numArgs >= numRequiredSchemaItems && numArgs <= numSchemaItems) {
@@ -390,7 +394,8 @@ function validateParams(p5, fn, lifecycles) {
    * @returns {String} The friendly error message.
    */
   const friendlyParamError = function (zodErrorObj, func, args) {
-    let message = '🌸 p5.js says: ';
+    let message = '';
+
     let isVersionError = false;
     // The `zodErrorObj` might contain multiple errors of equal importance
     // (after scoring the schema closeness in `findClosestSchema`). Here, we
@@ -401,9 +406,9 @@ function validateParams(p5, fn, lifecycles) {
     // Helper function to build a type mismatch message.
     const buildTypeMismatchMessage =
       (actualType, expectedTypeStr, position) => {
-        const positionStr = position ? `at the ${ordinals[position]} parameter` : '';
-        const actualTypeStr = actualType ? `, but received ${actualType}` : '';
-        return `Expected ${expectedTypeStr} ${positionStr}${actualTypeStr}`;
+        const positionStr = position ? FES.log`at the ${ordinals[position]} parameter` : '';
+        const actualTypeStr = actualType ? FES.log`, but received ${actualType}` : '';
+        return FES.log`Expected ${expectedTypeStr} ${positionStr}${actualTypeStr}`;
       };
 
     // Union errors occur when a parameter can be of multiple types but is not
@@ -454,7 +459,6 @@ function validateParams(p5, fn, lifecycles) {
         if (error.path?.length > 0 && args[error.path[0]] instanceof Promise)  {
           message += 'Did you mean to put `await` before a loading function? ' +
             'An unexpected Promise was found. ';
-          isVersionError = true;
         }
 
         const expectedTypesStr = Array.from(expectedTypes).join(' or ');
@@ -468,6 +472,14 @@ function validateParams(p5, fn, lifecycles) {
       return message;
     };
 
+    // Generates a link to the documentation based on the given function name.
+    const generateDocumentationLink = func => {
+      const { funcName, funcClass } = extractFuncNameAndClass(func);
+      const p5BaseUrl = 'https://p5js.org/reference';
+      const url = `${p5BaseUrl}/${funcClass}/${funcName}`;
+
+      return url;
+    };
 
     switch (currentError.code) {
       case 'invalid_union': {
@@ -476,16 +488,21 @@ function validateParams(p5, fn, lifecycles) {
       }
       case 'too_small': {
         const minArgs = currentError.minimum;
-        message += `Expected at least ${minArgs} argument${minArgs > 1 ? 's' : ''}, but received fewer`;
+        const documentationLink = generateDocumentationLink(func);
+        const referenceLink = FES.log`For more information, see ${documentationLink}.`;
+        message = FES.log`Expected at least ${minArgs} argument, but received fewer in ${func}(). ${referenceLink}`;
         break;
       }
       case 'invalid_type': {
-        message += buildTypeMismatchMessage(currentError.message.split(', received ')[1], currentError.expected, currentError.path.join('.'));
+        const position = FES.premade.ordinals[currentError.path.join('.')];
+        const expectedType = FES.premade.types[currentError.expected];
+        message = FES.log`Expected ${expectedType} at the ${position} parameter in ${func + '()'}.`
         break;
       }
       case 'too_big': {
         const maxArgs = currentError.maximum;
-        message += `Expected at most ${maxArgs} argument${maxArgs > 1 ? 's' : ''}, but received more`;
+        const referenceLink = FES.log`For more information, see ${documentationLink}.`;
+        message = FES.log`Expected at most ${maxArgs} argument, but received more in ${func}(). ${referenceLink}`;
         break;
       }
       default: {
@@ -493,29 +510,15 @@ function validateParams(p5, fn, lifecycles) {
       }
     }
 
-    // Let the user know which function is generating the error.
-    message += ` in ${func}().`;
-
-    // Generates a link to the documentation based on the given function name.
-    // TODO: Check if the link is reachable before appending it to the error
-    // message.
-    const generateDocumentationLink = func => {
-      const { funcName, funcClass } = extractFuncNameAndClass(func);
-      const p5BaseUrl = 'https://p5js.org/reference';
-      const url = `${p5BaseUrl}/${funcClass}/${funcName}`;
-
-      return url;
-    };
-
-    if (currentError.code === 'too_big' || currentError.code === 'too_small') {
-      const documentationLink = generateDocumentationLink(func);
-      message += ` For more information, see ${documentationLink}.`;
-    }
-
     if (isVersionError) {
-      p5._error(this, message);
+      FES.log`${message}`();
     } else {
-      console.log(message);
+      const [_null, stacktrace] = processStack(
+        null,
+        errorStackParser.parse(Error()).slice(3)
+      );
+      const locationStr = getFriendlyStack(stacktrace, true);
+      FES.log`${locationStr} ${message}`();
     }
     return message;
   };
@@ -550,7 +553,7 @@ function validateParams(p5, fn, lifecycles) {
       args.length > 0 &&
       args.every(arg => arg === undefined)
     ) {
-      const undefinedErrorMessage = `🌸 p5.js says: All arguments for ${func}() are undefined. There is likely an error in the code.`;
+      const undefinedErrorMessage = `All arguments for ${func}() are undefined. There is likely an error in the code.`;
 
       return {
         success: false,
@@ -624,11 +627,38 @@ function validateParams(p5, fn, lifecycles) {
     }
   );
 
+  p5.extendParameterValidation = (data) => {
+    documentationData = mergeDeep(documentationData, data);
+  };
+
   lifecycles.presetup = function(){
     loadP5Constructors();
   };
 }
 
+function isObject(item) {
+  return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+// Deep merge implementation: https://stackoverflow.com/questions/27936772/how-to-deep-merge-instead-of-shallow-merge
+function mergeDeep(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        mergeDeep(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+
+  return mergeDeep(target, ...sources);
+}
+
 export default validateParams;
 
 if (typeof p5 !== 'undefined') {
diff --git a/src/core/friendly_errors/sketch_verifier.js b/src/friendly_errors/sketch_verifier.js
similarity index 94%
rename from src/core/friendly_errors/sketch_verifier.js
rename to src/friendly_errors/sketch_verifier.js
index 4bbb7a274b..6cb061039a 100644
--- a/src/core/friendly_errors/sketch_verifier.js
+++ b/src/friendly_errors/sketch_verifier.js
@@ -1,6 +1,7 @@
 import { parse } from 'acorn';
 import { simple as walk } from 'acorn-walk';
-import * as constants from '../constants';
+import * as constants from '../core/constants';
+import { FES } from './fes';
 
 // List of functions to ignore as they either are meant to be re-defined or
 // generate false positive outputs.
@@ -34,7 +35,6 @@ const ignoreFunction = [
 ];
 
 export const verifierUtils = {
-
   /**
    * Fetches the contents of a script element in the user's sketch.
    *
@@ -154,7 +154,7 @@ export const verifierUtils = {
     // reference on the p5.js website.
     function generateFriendlyError(errorType, name, line) {
       const url = `https://p5js.org/reference/p5/${name}`;
-      const message = `${errorType} "${name}" on line ${line} is being redeclared and conflicts with a p5.js ${errorType.toLowerCase()}. p5.js reference: ${url}`;
+      const message = FES.log`${errorType} "${name}" on line ${line} is being redeclared and conflicts with a p5.js ${errorType}. p5.js reference: ${url}`;
       return message;
     }
 
@@ -162,8 +162,8 @@ export const verifierUtils = {
     for (let { name, line } of allDefinitions) {
       const libDefinition = constants[name];
       if (libDefinition !== undefined) {
-        const message = generateFriendlyError('Constant', name, line);
-        console.log(message);
+        const message = generateFriendlyError('Constant', name, line+1);
+        FES.log`${message}`();
         return true;
       }
     }
@@ -179,8 +179,8 @@ export const verifierUtils = {
 
     for (let { name, line } of allDefinitions) {
       if (!ignoreFunction.includes(name) && globalFunctions.has(name)) {
-        const message = generateFriendlyError('Function', name, line);
-        console.log(message);
+        const message = generateFriendlyError(FES.log`function`, name, line+1);
+        FES.log`${message}`();
         return true;
       }
     }
@@ -230,5 +230,5 @@ function sketchVerifier(p5, _fn, lifecycles) {
 export default sketchVerifier;
 
 if (typeof p5 !== 'undefined') {
-  sketchVerifier(p5, p5.prototype);
+  p5.registerAddon(sketchVerifier);
 }
diff --git a/src/core/friendly_errors/stacktrace.js b/src/friendly_errors/stacktrace.js
similarity index 55%
rename from src/core/friendly_errors/stacktrace.js
rename to src/friendly_errors/stacktrace.js
index 1c60713f9f..6b2269e961 100644
--- a/src/core/friendly_errors/stacktrace.js
+++ b/src/friendly_errors/stacktrace.js
@@ -1,6 +1,9 @@
 /**
  * @for p5
  */
+import { FES } from './fes';
+import { entryPoints } from './browser_errors';
+
 // Borrow from stacktracejs https://github.com/stacktracejs/stacktrace.js with
 // minor modifications. The license for the same and the code is included below
 
@@ -237,15 +240,182 @@ function ErrorStackParser() {
 
 // End borrow
 
-// wrapper exposing ErrorStackParser
-function stacktrace(p5, fn){
-  p5._getErrorStackParser = function getErrorStackParser() {
-    return new ErrorStackParser();
-  };
-}
+export const errorStackParser = new ErrorStackParser();
+
+/**
+ * Takes a stacktrace array and filters out all frames that show internal p5
+ * details.
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.wrongPreload", "fes.libraryError".
+ *
+ * The processed stack is used to find whether the error happened internally
+ * within the library, and if the error was due to a non-loadX() method
+ * being used in preload.
+ *
+ * "Internally" here means that the exact location of the error (the top of
+ * the stack) is a piece of code written in the p5.js library (which may or
+ * may not have been called from the user's sketch).
+ *
+ * @method processStack
+ * @private
+ * @param {Error} error
+ * @param {Array} stacktrace
+ *
+ * @returns {Array} An array with two elements, [isInternal, friendlyStack]
+ *                 isInternal: a boolean value indicating whether the error
+ *                             happened internally
+ *                 friendlyStack: the filtered (simplified) stacktrace
+ */
+export const processStack = (error, stacktrace) => {
+  // cannot process a stacktrace that doesn't exist
+  if (!stacktrace) return [false, null];
+
+  stacktrace.forEach(frame => {
+    frame.functionName = frame.functionName || '';
+  });
+
+  // isInternal - Did this error happen inside the library
+  let isInternal = false;
+  let p5FileName, friendlyStack;
+
+  // Intentionally throw an error that we catch so that we can check the name
+  // of the current file. Any errors we see from this file, we treat as
+  // internal errors.
+  const testStacktrace = errorStackParser.parse(Error());
+  p5FileName = testStacktrace[0].fileName;
+
+  for (let i = stacktrace.length - 1; i >= 0; i--) {
+    let splitted = stacktrace[i].functionName.split('.');
+    if (entryPoints.includes(splitted[splitted.length - 1])) {
+      // remove everything below an entry point function (setup, draw, etc).
+      // (it's usually the internal initialization calls)
+      friendlyStack = stacktrace.slice(0, i + 1);
+      // We call the error "internal" if the source of the error was a
+      // function from within the p5.js library file, but called from the
+      // user's code directly. We only need to check the topmost frame in
+      // the stack trace since any function internal to p5 should pass this
+      // check, not just public p5 functions.
+      if (stacktrace[0].fileName === p5FileName) {
+        isInternal = true;
+        break;
+      }
+      break;
+    }
+  }
+
+  // in some cases ( errors in promises, callbacks, etc), no entry-point
+  // function may be found in the stacktrace. In that case just use the
+  // entire stacktrace for friendlyStack
+  if (!friendlyStack) friendlyStack = stacktrace;
+
+  if (isInternal) {
+    // the frameIndex property is added before the filter, so frameIndex
+    // corresponds to the index of a frame in the original stacktrace.
+    // Then we filter out all frames which belong to the file that contains
+    // the p5 library
+    friendlyStack = friendlyStack
+      .map((frame, index) => {
+        frame.frameIndex = index;
+        return frame;
+      })
+      .filter(frame => frame.fileName !== p5FileName);
+
+    // a weird case, if for some reason we can't identify the function called
+    // from user's code
+    if (friendlyStack.length === 0) return [true, null];
 
-export default stacktrace;
+    // get the function just above the topmost frame in the friendlyStack.
+    // i.e the name of the library function called from user's code
+    const func = stacktrace[friendlyStack[0].frameIndex - 1].functionName
+      .split('.')
+      .slice(-1)[0];
 
-if (typeof p5 !== 'undefined') {
-  stacktrace(p5, p5.prototype);
+    // Try and get the location (line no.) from the top element of the stack
+    let locationObj;
+    if (
+      friendlyStack[0].fileName &&
+      friendlyStack[0].lineNumber &&
+      friendlyStack[0].columnNumber
+    ) {
+      locationObj = {
+        location: `${friendlyStack[0].fileName}:${
+          friendlyStack[0].lineNumber
+        }:${friendlyStack[0].columnNumber}`,
+        file: friendlyStack[0].fileName.split('/').slice(-1),
+        line: friendlyStack[0].lineNumber
+      };
+
+      // if already handled by another part of the FES, don't handle again
+      if (p5._fesLogCache[locationObj.location]) return [true, null];
+    }
+
+    // Library error
+    // const message = TL.tl`${locationObj ? TL.tl`[${locationObj.file}, line ${locationObj.line}]` : ''} An error with message "${error.message}" occurred inside the p5js library when ${func} was called. If not stated otherwise, it might be an issue with the arguments passed to ${func}.`;
+    // p5._friendlyError(
+    //   message,
+    //   func
+    // );
+
+    // Finally, if it's an internal error, print the friendlyStack
+    // ( fesErrorMonitor won't handle this error )
+    // if (friendlyStack && friendlyStack.length) {
+    //   printFriendlyStack(friendlyStack);
+    // }
+  }
+  return [isInternal, friendlyStack];
+};
+
+/**
+ * Prints a friendly stacktrace for user-written functions for "global" errors
+ *
+ * Generates and prints a friendly error message using key:
+ * "fes.globalErrors.stackTop", "fes.globalErrors.stackSubseq".
+ *
+ * @method printFriendlyStack
+ * @private
+ * @param {Array} friendlyStack
+ */
+export function printFriendlyStack(friendlyStack) {
+  if (friendlyStack.length > 1) {
+    let stacktraceMsg = '';
+    friendlyStack.forEach((frame, idx) => {
+      const location = `${frame.fileName}:${frame.lineNumber}:${
+        frame.columnNumber
+      }`;
+      let frameMsg;
+      if (idx === 0) {
+        frameMsg = FES.log`┌[${location}] \n\t Error at line ${frame.lineNumber} in ${frame.functionName}()\n`;
+      } else {
+        frameMsg = FES.log`└[${location}] \n\t Called from line ${frame.lineNumber} in ${frame.functionName}()\n`;
+      }
+      stacktraceMsg += frameMsg;
+    });
+    FES.log`${stacktraceMsg}`({
+      prefix: false
+    });
+  }
+};
+
+export function getFriendlyStack(stacktrace, compact = false) {
+  if (compact) {
+    return `[${stacktrace[0].fileName.split('/').slice(-1)}, line ${stacktrace[0].lineNumber}]`;
+  } else {
+    if (stacktrace.length > 1) {
+      let stacktraceMsg = '';
+      stacktrace.forEach((frame, idx) => {
+        const location = `${frame.fileName}:${frame.lineNumber}:${frame.columnNumber}`;
+        let frameMsg;
+        // TODO: translate
+        if (idx === 0) {
+          frameMsg = `┌[${location}] \n\t Error at line ${frame.lineNumber} in ${frame.functionName}()\n`;
+        } else {
+          frameMsg = `└[${location}] \n\t Called from line ${frame.lineNumber} in ${frame.functionName}()\n`;
+        }
+        stacktraceMsg += frameMsg;
+      });
+
+      return stacktraceMsg || null;
+    }
+  }
 }
diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js
index 81f18b9a64..86722bb08e 100644
--- a/src/image/loading_displaying.js
+++ b/src/image/loading_displaying.js
@@ -146,7 +146,9 @@ function loadingDisplaying(p5, fn){
       return this._internal ? this._internal(cb) : cb();
 
     } catch(err) {
-      p5._friendlyFileLoadError(0, path);
+      // p5._friendlyFileLoadError(0, path);
+      // TODO: Additional general error message specific to image error
+      //       File error is already taken cared of by `request`
       if (typeof failureCallback === 'function') {
         return failureCallback(err);
       } else {
@@ -614,7 +616,8 @@ function loadingDisplaying(p5, fn){
       try {
         gifReader.decodeAndBlitFrameRGBA(frameNum, framePixels);
       } catch (e) {
-        p5._friendlyFileLoadError(8, pImg.src);
+        // p5._friendlyFileLoadError(8, pImg.src);
+        p5.FES.log`There was some trouble loading your GIF. Make sure that your GIF is using 87a or 89a encoding.`();
         throw e;
       }
     };
@@ -1137,7 +1140,7 @@ function loadingDisplaying(p5, fn){
    * sets the alpha value. For example, `tint(255, 0, 0, 100)` will give images
    * a red tint and make them transparent.
    *
-   * Calling `tint()` without an argument returns the current tint as a 
+   * Calling `tint()` without an argument returns the current tint as a
    * <a href="#/p5.Color">p5.Color</a> object.
    *
    * @method tint
diff --git a/src/io/files.js b/src/io/files.js
index 013f4803d5..d71468d98a 100644
--- a/src/io/files.js
+++ b/src/io/files.js
@@ -8,6 +8,7 @@ import { Renderer } from '../core/p5.Renderer';
 import { Graphics } from '../core/p5.Graphics';
 import { parse } from './csv';
 import { downloadFile, _checkFileExtension } from './utilities';
+import { FES, TL } from '../friendly_errors/fes';
 
 class HTTPError extends Error {
   status;
@@ -15,7 +16,8 @@ class HTTPError extends Error {
   ok;
 }
 
-export async function request(path, type){
+export async function request(path, type) {
+  let errorFileType = TL.tl`file`;
   try {
     const res = await fetch(path);
 
@@ -23,9 +25,11 @@ export async function request(path, type){
       let data;
       switch(type) {
         case 'json':
+          errorFileType = TL.tl`JSON file`;
           data = await res.json();
           break;
         case 'text':
+          errorFileType = TL.tl`text file`;
           data = await res.text();
           break;
         case 'arrayBuffer':
@@ -35,13 +39,7 @@ export async function request(path, type){
           data = await res.blob();
           break;
         case 'bytes':
-          // TODO: Chrome does not implement res.bytes() yet
-          if(res.bytes){
-            data = await res.bytes();
-          }else{
-            const d = await res.arrayBuffer();
-            data = new Uint8Array(d);
-          }
+          data = await res.bytes();
           break;
         default:
           throw new Error('Unsupported response type');
@@ -63,7 +61,10 @@ export async function request(path, type){
     if (err instanceof TypeError) {
       console.log('You may have encountered a CORS error');
     } else if (err instanceof HTTPError) {
-      console.log('You have encountered a HTTP error');
+      const infoURL = 'https://github.com/processing/p5.js/wiki/Local-server';
+      FES.log`It looks like there was a problem loading your ${errorFileType}. Try checking if the file path (${path}) is correct, hosting the file online, or running a local server.
+
++ More info: ${infoURL}`();
     } else if (err instanceof SyntaxError) {
       console.log('There is an error parsing the response to requested data structure');
     }
@@ -273,8 +274,6 @@ function files(p5, fn){
    * }
    */
   fn.loadJSON = async function (path, successCallback, errorCallback) {
-    // p5._validateParameters('loadJSON', arguments);
-
     try{
       const { data } = await request(path, 'json');
       const cb = () => {
@@ -282,8 +281,8 @@ function files(p5, fn){
         return data;
       };
       return this._internal ? this._internal(cb) : cb();
-    } catch(err) {
-      p5._friendlyFileLoadError(5, path);
+    } catch (err) {
+      // p5._friendlyFileLoadError(5, path);
       if(errorCallback) {
         return errorCallback(err);
       } else {
@@ -423,7 +422,7 @@ function files(p5, fn){
       };
       return this._internal ? this._internal(cb) : cb();
     } catch(err) {
-      p5._friendlyFileLoadError(3, path);
+      // p5._friendlyFileLoadError(3, path);
       if(errorCallback) {
         return errorCallback(err);
       } else {
@@ -530,7 +529,7 @@ function files(p5, fn){
       };
       return this._internal ? this._internal(cb) : cb();
     } catch(err) {
-      p5._friendlyFileLoadError(2, path);
+      // p5._friendlyFileLoadError(2, path);
       if(errorCallback) {
         return errorCallback(err);
       } else {
@@ -700,7 +699,7 @@ function files(p5, fn){
       };
       return this._internal ? this._internal(cb) : cb();
     } catch(err) {
-      p5._friendlyFileLoadError(1, path);
+      // p5._friendlyFileLoadError(1, path);
       if(errorCallback) {
         return errorCallback(err);
       } else {
@@ -749,7 +748,7 @@ function files(p5, fn){
       };
       return this._internal ? this._internal(cb) : cb();
     } catch(err) {
-      p5._friendlyFileLoadError(6, path);
+      // p5._friendlyFileLoadError(6, path);
       if(errorCallback) {
         return errorCallback(err);
       } else {
diff --git a/src/webgl/loading.js b/src/webgl/loading.js
index 5edd0d0791..5412d740d4 100755
--- a/src/webgl/loading.js
+++ b/src/webgl/loading.js
@@ -469,7 +469,7 @@ function loading(p5, fn){
         return this._internal ? this._internal(cb) : cb();
       }
     } catch(err) {
-      p5._friendlyFileLoadError(3, path);
+      // p5._friendlyFileLoadError(3, path);
       if(failureCallback) {
         return failureCallback(err);
       } else {
@@ -1264,7 +1264,7 @@ function loading(p5, fn){
         return;
       }
     } else {
-      p5._friendlyFileLoadError(3, modelString);
+      // p5._friendlyFileLoadError(3, modelString);
       if (failureCallback) {
         failureCallback();
       } else {
