Merge branch 'dev-2.0' into compute-shaders

Author: davepagurek

contributor_docs/contributing_to_the_p5js_reference.md

@@ -1190,7 +1190,7 @@ In some editors, such as vs code, you can hover over a function or variable to s
 
 ### Previewing your work on the website, locally
 
-At some point you will want to preview how your changes will look on the website.  This involves run the website locally and having it import your p5.js code from a branch of your repo.
+At some point you will want to preview how your changes will look on the website.  This involves running the website locally and having it import your p5.js code from a branch of your repo.
 
 Steps: 
 

contributor_docs/documentation_style_guide.md

@@ -234,7 +234,7 @@ let magicWord = 'Please';
 
 ## Accessible Canvas Labels
 
-- Use `describe()` to in p5.js example code, to add labels to your canvas so that it’s readable for screen readers.
+- Use `describe()` in p5.js example code to add labels to your canvas so that it’s readable for screen readers.
 
 > Why? It makes examples accessible to screen readers, and models how to write good canvas labels. 
 

contributor_docs/project_wrapups/katiejliu_gsoc_2021.md

@@ -3,7 +3,7 @@
   #### Mentors: Rachel Lim and Claire Kearney-Volpe
 
   ### Overview
-  For my Google Summer of Code project, I added alt text to the visual elements of the p5.js website, specfically to all of the examples. With the help of my mentors Rachel and Claire,  I was able to improve the accessibility of the p5.js website for users with visually impairment.
+  For my Google Summer of Code project, I added alt text to the visual elements of the p5.js website, specifically to all of the examples. With the help of my mentors Rachel and Claire,  I was able to improve the accessibility of the p5.js website for users with visually impairment.
 
   ### Process
   To begin, I did a lot of research on best alt text practices. I read about web accessibility through sources such as articles from WebAIM and the Web Content Accessibility Guidelines from W3C. I also familiarized myself with navigating and using the built-in screen reader on my Mac. 

src/color/setting.js

@@ -509,7 +509,7 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a transparent green background.');
    * }
-   * <
+   *
    * @example
    * function setup() {
    *   createCanvas(100, 100);

src/strands/strands_api.js

@@ -284,6 +284,16 @@ export function initGlobalStrandsAPI(p5, fn, strandsContext) {
     }
   }
 
+  // Alias lerp to GLSL mix in strands context
+  const originalLerp = fn.lerp;
+  augmentFn(fn, p5, 'lerp', function (...args) {
+    if (strandsContext.active) {
+      return fn.mix(...args);
+    } else {
+      return originalLerp.apply(this, args);
+    }
+  });
+
   augmentFn(fn, p5, 'getTexture', function (...rawArgs) {
     if (strandsContext.active) {
       const { id, dimension } = strandsContext.backend.createGetTextureCall(strandsContext, rawArgs);

src/webgl/p5.Geometry.js

@@ -330,7 +330,7 @@ class Geometry {
    * let saveBtn;
    * function setup() {
    *   createCanvas(200, 200, WEBGL);
-   *   myModel = buildGeometry(function()) {
+   *   myModel = buildGeometry(function() {
    *     for (let i = 0; i < 5; i++) {
    *       push();
    *       translate(

test/unit/visual/cases/webgl.js

@@ -1067,6 +1067,46 @@ visualSuite('WebGL', function() {
       screenshot();
     });
 
+    visualTest('lerp maps to mix in strands context', (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      // lerp should behave identically to mix inside strands
+      const shader = p5.baseColorShader().modify(() => {
+        p5.getFinalColor((color) => {
+          color = p5.lerp(
+            [1, 0, 0, 1],
+            [0, 0, 1, 1],
+            0.5
+          );
+          return color;
+        });
+      }, { p5 });
+      p5.background(0);
+      p5.shader(shader);
+      p5.noStroke();
+      p5.plane(50, 50);
+      screenshot();
+    });
+
+    visualTest('mix produces same result as lerp in strands', (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      // mix directly, should produce identical output to lerp test above
+      const shader = p5.baseColorShader().modify(() => {
+        p5.getFinalColor((color) => {
+          color = p5.mix(
+            [1, 0, 0, 1],
+            [0, 0, 1, 1],
+            0.5
+          );
+          return color;
+        });
+      }, { p5 });
+      p5.background(0);
+      p5.shader(shader);
+      p5.noStroke();
+      p5.plane(50, 50);
+      screenshot();
+    });
+
     visualSuite('auto-return for shader hooks', () => {
       visualTest('auto-returns input struct when return is omitted', (p5, screenshot) => {
         p5.createCanvas(50, 50, p5.WEBGL);

test/unit/visual/screenshots/WebGL/p5.strands/lerp maps to mix in strands context/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}