Address linter warnings [wip]

README.md

@@ -26,7 +26,7 @@ function draw() {
 </td>
 <td>
 
-<img src="./contributor_docs/images/p5-readme-sketch.png" width="200" height="200" />
+<img src="./contributor_docs/images/p5-readme-sketch.png" width="200" height="200" alt="p5.js sketch of overlapping circles forming tube-like shapes in black outlines on a white background." />
 
 </td>
 </tr>

contributor_docs/ko/method.example.js

@@ -1,5 +1,5 @@
 /**
- * "이것은 메소드의 인라인 문서 템플릿입니다. 이 템플릿을 사용하려면 큰 따옴표 
+ * "이것은 메소드의 인라인 문서 템플릿입니다. 이 템플릿을 사용하려면 큰 따옴표
  * 사이의 모든 텍스트를 제거하십시오.  메소드에 대한 일부 설명은 여기에 들어갑니다.
  * 간단한 단어로 함수가 하는 일과 그에 대한 좋은/나쁜 사용 예를 설명하십시오.
  * 만약 비정상적인 케이스나 경고가 있다면 여기에서 설명해 주세요."
@@ -31,7 +31,7 @@
  * "두 번째 예시를 명확히 설명하는 줄입니다"
  */
 
-// "메소드에 둘 이상의 특징이 있으면, 각 특징은 다음과 같은 파라미터 설명과 함께 
+// "메소드에 둘 이상의 특징이 있으면, 각 특징은 다음과 같은 파라미터 설명과 함께
 // 자체 블록에 문서화할 수 있습니다."
 /**
  * @method "메소드명"
@@ -46,11 +46,11 @@ p5.prototype.methodName = function() {
 
 // 이 부분은 템플릿을 채운 예시입니다.
 /**
- *  <a href="#/p5/background">background()</a> 함수는 p5.js 캔버스의 배경 색상을 
- * 설정합니다. 이 함수는 일반적으로 draw()에서 각 프레임의 시작 부분에 디스플레이 
- * 윈도우를 지우는 데 사용되지만, 애니메이션의 첫 번째 프레임에 배경색을 설정하거나 
+ *  <a href="#/p5/background">background()</a> 함수는 p5.js 캔버스의 배경 색상을
+ * 설정합니다. 이 함수는 일반적으로 draw()에서 각 프레임의 시작 부분에 디스플레이
+ * 윈도우를 지우는 데 사용되지만, 애니메이션의 첫 번째 프레임에 배경색을 설정하거나
  * 배경을 한 번만 설정해야 할 경우 setup() 내에서 사용할 수 있습니다.
- * 
+ *
  * 배경색 기본 설정은 투명입니다.
  *
  * @method background
@@ -81,7 +81,7 @@ p5.prototype.methodName = function() {
 /**
  * @method background
  * @param {String} 문자열 형태의 색상 설정에 사용할 수 있는 형식:
-                   정수, rgb(), rgba(), rgb() 비율, rgba() 비율, 
+                   정수, rgb(), rgba(), rgb() 비율, rgba() 비율,
                    3자리 16진법, 6자리 16진법,
  * @param {Number} [a]
  * @chainable

contributor_docs/project_wrapups/akshaypadte_gsoc_2020.md

@@ -19,14 +19,14 @@
 #### Part 1: Addressing known problems with the FES
 
 I kicked off the summer by addressing the issue of speed and size. The FES has a component called `validateParameters()`, responsible for checking if the arguments passed by the user are correct. It does this by matching the arguments against a file auto-generated from the inline docs. Earlier, this file was imported directly into the main library for the FES to use, but it also has a lot of information that is not needed by the FES which increases size unnecessarily. Pre-processing this file to keep only what was needed helped reduce the size of the final built p5.js library by around 25%.
-![](https://akshay-fes-gsoc.surge.sh/image1.png)
+![Graphical representation of bundle size reduced from 4.7 to 3.6 MB](https://akshay-fes-gsoc.surge.sh/image1.png)
 
 Another issue was speed. validateParameters does a lot extra work before the actual function is executed. Sometimes, as seen in [this](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/) performance test, it would slow down a function by up to 10 times. My initial assumption to speed it up did not work so I played around in chrome dev tools to figure out what was actually happening. I learnt that most of the time was spent just trying to figure out the nearest matching overload intended by the user, and that this entire process happened over and over again if the function was called multiple times with the same arguments. I addressed this with a trie like data structure <sup>[[1]](https://github.com/processing/p5.js/blob/8226395d40a9df0113b13e42c983ae578b3856fa/src/core/error_helpers.js#L300)</sup>, where each node represents an argument. Thus if a function is called again with the same sequence of arguments, we don't need to run the entirety of validateParameters. This not only improved the speed but also prevented the FES from flooding the console on repetitive calls of the same function.
 
 There was another issue which caused validateParameters to ignore the last undefined argument passed to function. This sometimes used to cause confusing and inaccurate messages. Fixing this was pretty easy and only involved one line of change.
 
 Moving on. There was an issue that if one p5 function called another p5 function, validateParameters would run both times. For example, the function saveJSON() needs to call saveStrings() to do part of its work. It forwards the arguments it receives to saveStrings(). This meant that if arguments were wrong when calling saveJSON(), we used to get two messages: one for saveJSON() and one for saveStrings(). But the user never called the latter in their code! This could lead to confusion.
-![](https://akshay-fes-gsoc.surge.sh/image2.png)
+![Illustration of two FES messages, only one of which should be shown.](https://akshay-fes-gsoc.surge.sh/image2.png)
 To fix this, one can take a look at the stack trace. We need to answer "was the most recent p5 function invoked from another p5 function?" If so, we don't need to display a message even if the arguments are wrong. I used another library [stacktrace.js](https://www.stacktracejs.com/), to help with this. Analyzing stack traces was extensively employed later-on in the project as well. We'll come back to it later.
 
 As a next step, internationationalization support was added for validateParameters messages and the language of some of the messages was simplified <sup>[[2]](https://github.com/processing/p5.js/pull/4629)</sup>. There were a couple of other small problems that were also fixed in this phase. You can see them in the full list of pull requests.
@@ -45,7 +45,7 @@
 
 Here are a few example messages from this feature :
 
 ![](https://akshay-fes-gsoc.surge.sh/image3.png)
 
 The second new feature was Global Error Catching. This meant analyzing the errors thrown by the browser and trying to match them up with helpful explanations was to solve them.
 
@@ -59,14 +59,14 @@
 }
 ```
 It shows a very basic mistake with scope that a beginner can make. The error shown is:
 ![](https://akshay-fes-gsoc.surge.sh/image4.png)
 While the browser error message aims at being concise, the FES message aims to explain the error as much as possible and also provides links which have examples to fix this kind of error. This is more helpful to those who have just started learning to program and have not yet gotten used to deciphering error messages.
 
 Another distinction to be made was between errors in user-space and errors that happened inside the library. These could be differentiated by seeing their stack trace. Moreover, it's possible to simplify the stack trace itself to only include user-defined functions.
 
 Here's an example of an error that happens in library space:
 
 ![](https://akshay-fes-gsoc.surge.sh/image5.png)
 
 The FES filters out all the internal details from the stack trace, making it easier to understand.
 

contributor_docs/project_wrapups/slominski_gsoc_2022.md

@@ -47,6 +47,6 @@ The tutorials can be found on the p5.js websites Learn section here (to be added
 
 And the code and commits for these contributions can be found at (to be added):
 
-##Acknowledgements 
+## Acknowledgements 
 
 I want to express my gratitude towards my mentor Kate Hollenbach for her guidance throughout this project, as well as towards the p5.js community for its openness and helpfulness. 

src/color/p5.Color.js

@@ -12,7 +12,7 @@
   ColorSpace,
   to,
   toGamut,
   serialize,
   parse,
   range,
 
@@ -37,7 +37,7 @@
     result = Math.min(result, Math.max(start2, stop2));
   }
   return result;
-}
+};
 
 const serializationMap = {};
 
@@ -107,7 +107,7 @@
         throw new Error('Invalid color string');
       }
 
     }else{
       // Received individual channel values
       let mappedVals;
 
@@ -237,7 +237,7 @@
   }
 
   // Get raw coordinates of underlying library, can differ between libraries
   get _array() {
     return this._getRGBA();
   }
 
@@ -547,11 +547,11 @@
     let coords = structuredClone(to(this._color, 'srgb').coords);
     coords.push(this._color.alpha);
 
-    const rangeMaxes = maxes.map((v) => {
+    const rangeMaxes = maxes.map(v => {
       if(!Array.isArray(v)){
         return [0, v];
       }else{
-        return v
+        return v;
       }
     });
 

src/core/friendly_errors/sketch_verifier.js

@@ -24,7 +24,7 @@ const ignoreFunction = [
   'keyPressed',
   'keyReleased',
   'keyTyped',
-  'windowResized',
+  'windowResized'
   // 'name',
   // 'parent',
   // 'toString',

src/core/internationalization.js

@@ -148,7 +148,7 @@ export const initialize = () => {
       },
       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@${

src/image/filterRenderer2D.js

@@ -257,9 +257,9 @@ class FilterRenderer2D {
 
 
     const identityMatrix = [1, 0, 0, 0,
-                            0, 1, 0, 0,
-                            0, 0, 1, 0,
-                            0, 0, 0, 1];
+      0, 1, 0, 0,
+      0, 0, 1, 0,
+      0, 0, 0, 1];
     this._shader.setUniform('uModelViewMatrix', identityMatrix);
     this._shader.setUniform('uProjectionMatrix', identityMatrix);
 

src/image/loading_displaying.js

@@ -273,7 +273,7 @@ function loadingDisplaying(p5, fn){
     const silent = (options && options.silent) || false;
     const notificationDuration = (options && options.notificationDuration) || 0;
     const notificationID = (options && options.notificationID) || 'progressBar';
-     const resetAnimation = (options && options.reset !== undefined) ? options.reset : true;
+    const resetAnimation = (options && options.reset !== undefined) ? options.reset : true;
     // if arguments in the options object are not correct, cancel operation
     if (typeof delay !== 'number') {
       throw TypeError('Delay parameter must be a number');
@@ -328,7 +328,7 @@ function loadingDisplaying(p5, fn){
     // initialize variables for the frames processing
     let frameIterator;
     let totalNumberOfFrames;
-    
+
     if (resetAnimation) {
       frameIterator = nFramesDelay;
       this.frameCount = frameIterator;
@@ -379,7 +379,7 @@ function loadingDisplaying(p5, fn){
     //
     // Waiting on this empty promise means we'll continue as soon as setup
     // finishes without waiting for another frame.
-   await new Promise(requestAnimationFrame)
+    await new Promise(requestAnimationFrame);
 
     while (frameIterator < totalNumberOfFrames) {
       /*

src/shape/curves.js

@@ -517,22 +517,22 @@ function curves(p5, fn){
    * function setup() {
    *   createCanvas(200, 200);
    *   background(245);
-   * 
+   *
    *   // Ensure the curve includes both end spans p0->p1 and p2->p3
    *   splineProperty('ends', INCLUDE);
-   * 
+   *
    *   // Control / anchor points
    *   const p0 = createVector(30, 160);
    *   const p1 = createVector(60, 40);
    *   const p2 = createVector(140, 40);
    *   const p3 = createVector(170, 160);
-   * 
+   *
    *   // Draw the spline that passes through ALL four points (INCLUDE)
    *   noFill();
    *   stroke(0);
    *   strokeWeight(2);
    *   spline(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
-   * 
+   *
    *   // Draw markers + labels
    *   fill(255);
    *   stroke(0);
@@ -541,19 +541,19 @@ function curves(p5, fn){
    *   circle(p1.x, p1.y, r);
    *   circle(p2.x, p2.y, r);
    *   circle(p3.x, p3.y, r);
-   * 
+   *
    *   noStroke();
    *   fill(0);
    *   text('p0', p0.x - 14, p0.y + 14);
    *   text('p1', p1.x - 14, p1.y - 8);
    *   text('p2', p2.x + 4, p2.y - 8);
    *   text('p3', p3.x + 4, p3.y + 14);
-   * 
+   *
    *   describe('A black Catmull-Rom spline passes through p0, p1, p2, p3 with endpoints included.');
    * }
    * </code>
    * </div>
-   * 
+   *
    * <div>
    * <code>
    * function setup() {
@@ -848,45 +848,45 @@ function curves(p5, fn){
    * }
    * </code>
    * </div>
-   * 
+   *
    * <div>
    * <code>
    * let p0, p1, p2, p3;
-   * 
+   *
    * function setup() {
    *   createCanvas(200, 200);
    *   splineProperty('ends', INCLUDE); // make endpoints part of the curve
-   * 
+   *
    *   // Four points forming a gentle arch
    *   p0 = createVector(30, 160);
    *   p1 = createVector(60, 50);
    *   p2 = createVector(140, 50);
    *   p3 = createVector(170, 160);
-   * 
+   *
    *   describe('Black spline through p0–p3. A red dot marks the location at parameter t on p1->p2 using splinePoint.');
    * }
-   * 
+   *
    * function draw() {
    *   background(245);
-   * 
+   *
    *   // Draw the spline for context
    *   noFill();
    *   stroke(0);
    *   strokeWeight(2);
    *   spline(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
-   * 
+   *
    *   // Map mouse X to t in [0, 1] (span p1->p2)
    *   let t = constrain(map(mouseX, 0, width, 0, 1), 0, 1);
-   * 
+   *
    *   // Evaluate the curve point by axis (splinePoint works one axis at a time)
    *   let x = splinePoint(p0.x, p1.x, p2.x, p3.x, t);
    *   let y = splinePoint(p0.y, p1.y, p2.y, p3.y, t);
-   * 
+   *
    *   // Marker at the evaluated position
    *   noStroke();
    *   fill('red');
    *   circle(x, y, 8);
-   * 
+   *
    *   // Draw control/anchor points
    *   stroke(0);
    *   strokeWeight(1);
@@ -896,7 +896,7 @@ function curves(p5, fn){
    *   circle(p1.x, p1.y, r);
    *   circle(p2.x, p2.y, r);
    *   circle(p3.x, p3.y, r);
-   * 
+   *
    *   // Labels + UI hint
    *   noStroke();
    *   fill(20);
@@ -909,7 +909,7 @@ function curves(p5, fn){
    * }
    * </code>
    * </div>
-   * 
+   *
    */
 
   fn.splinePoint = function(a, b, c, d, t) {