Merge branch 'dev-2.0' into comma-included-in-loadFont

Author: perminder-17

.vscode/settings.json

@@ -10,4 +10,4 @@
 	"editor.formatOnSave": false,
   "editor.codeActionsOnSave": {},
 	"javascript.format.enable": false
-}
+}

lib/empty-example/sketch.js

@@ -4,4 +4,4 @@ function setup() {
 
  function draw() {
    // put drawing code here
- }
+ }

preview/global/sketch.js

@@ -1,21 +1,16 @@
-p5.disableFriendlyErrors = true;
-
-function windowResized() {
-  resizeCanvas(windowWidth, windowHeight);
-}
-
-let starShader;
-let starStrokeShader;
+let instancedShader;
+let instancedStrokeShader;
 let stars;
-let originalFrameBuffer;
-let pixellizeShader;
+let originalImage;
+let pixelateShader;
 let fresnelShader;
 let bloomShader;
 
 function fresnelShaderCallback() {
   const fresnelPower = uniformFloat(2);
   const fresnelBias = uniformFloat(-0.1);
   const fresnelScale = uniformFloat(2);
+
   getCameraInputs((inputs) => {
     let n = normalize(inputs.normal);
     let v = normalize(-inputs.position);
@@ -29,18 +24,19 @@ function fresnelShaderCallback() {
 
 function starShaderCallback() {
   const time = uniformFloat(() => millis());
-  const skyRadius = uniformFloat(1000);
+  const skyRadius = uniformFloat(250);
 
   function rand2(st) {
     return fract(sin(dot(st, [12.9898, 78.233])) * 43758.5453123);
   }
 
   function semiSphere() {
     let id = instanceID();
-    let theta = rand2([id, 0.1234]) * TWO_PI;
-    let phi = rand2([id, 3.321]) * PI+time/10000;
+    let theta = rand2([id, 0.1234])  * TWO_PI + time / 100000;
+    let phi = rand2([id, 3.321]) * PI + time / 50000;
+  
     let r = skyRadius;
-    r *= 1.5 * sin(phi);
+    r *= sin(phi);
     let x = r * sin(phi) * cos(theta);
     let y = r * 1.5 * cos(phi);
     let z = r * sin(phi) * sin(theta);
@@ -53,72 +49,80 @@ function starShaderCallback() {
   });
 
   getObjectInputs((inputs) => {
-    let scale = 1 + 0.1 * sin(time * 0.002 + instanceID());
-    inputs.position *= scale;
+    let size = 1 + 0.5 * sin(time * 0.002 + instanceID());
+    inputs.position *= size;
     return inputs;
   });
 }
 
-function pixellizeShaderCallback() {
-  const pixelSize = uniformFloat(()=> width*.75);
-  getColor((input, canvasContent) => {
-    let coord = input.texCoord;
+function pixelateShaderCallback() {
+  const pixelCountX = uniformFloat(()=> 280);
+
+  getColor((inputs, canvasContent) => {
+    const aspectRatio = inputs.canvasSize.x / inputs.canvasSize.y;
+    const pixelSize = [pixelCountX, pixelCountX / aspectRatio];
+
+    let coord = inputs.texCoord;
     coord = floor(coord * pixelSize) / pixelSize;
-    let col = texture(canvasContent, coord);
-    return col;
+
+    let col = getTexture(canvasContent, coord);
+    return col//[coord, 0, 1];
   });
 }
 
 function bloomShaderCallback() {
-  const preBlur = uniformTexture(() => originalFrameBuffer);
+  const preBlur = uniformTexture(() => originalImage);
+
   getColor((input, canvasContent) => {
-    const blurredCol = texture(canvasContent, input.texCoord);
-    const originalCol = texture(preBlur, input.texCoord);
-    const brightPass = max(originalCol, 0.3) * 1.5;
-    const bloom = originalCol + blurredCol * brightPass;
-    return bloom;
+    const blurredCol = getTexture(canvasContent, input.texCoord);
+    const originalCol = getTexture(preBlur, input.texCoord);
+
+    const intensity = max(originalCol, 0.1) * 12.2;
+    const bloom = originalCol + blurredCol * intensity;
+    return [bloom.rgb, 1];
   });
 }
 
 async function setup(){
-  createCanvas(windowWidth, windowHeight, WEBGL);
-  stars = buildGeometry(() => sphere(30, 4, 2))
-  originalFrameBuffer = createFramebuffer();
+  createCanvas(800, 600, WEBGL);
+  pixelDensity(1);
+  stars = buildGeometry(() => sphere(8, 4, 2))
+  originalImage = createFramebuffer();
 
   starShader = baseMaterialShader().modify(starShaderCallback); 
   starStrokeShader = baseStrokeShader().modify(starShaderCallback)
   fresnelShader = baseColorShader().modify(fresnelShaderCallback);
   bloomShader = baseFilterShader().modify(bloomShaderCallback);
-  pixellizeShader = baseFilterShader().modify(pixellizeShaderCallback);
+  pixelateShader = baseFilterShader().modify(pixelateShaderCallback);
 }
 
 function draw(){
-  originalFrameBuffer.begin();
+  originalImage.begin();
   background(0);
   orbitControl();
 
   push()
-  strokeWeight(4)
+  strokeWeight(2)
   stroke(255,0,0)
   rotateX(PI/2 + millis() * 0.0005);
   fill(255,100, 150)
   strokeShader(starStrokeShader)
   shader(starShader);
-  model(stars, 2000);
+  model(stars, 1000);
   pop()
 
   push()
   shader(fresnelShader)
   noStroke()
-  sphere(500);
+  sphere(90);
+  filter(pixelateShader);
   pop()
-  filter(pixellizeShader);
 
-  originalFrameBuffer.end();
+  originalImage.end();
 
   imageMode(CENTER)
-  image(originalFrameBuffer, 0, 0)
+  image(originalImage, 0, 0)
 
-  filter(BLUR, 20)
+  filter(BLUR, 15)
   filter(bloomShader);
-}
+}

src/color/creating_reading.js

@@ -1043,8 +1043,25 @@ function creatingReading(p5, fn){
    * </div>
    */
   fn.hue = function(c) {
-    // p5._validateParameters('hue', arguments);
-    return this.color(c)._getHue();
+    let colorMode = HSL;
+    let i = 0;
+
+    if(
+      this._renderer.states.colorMode === HSB ||
+      this._renderer.states.colorMode === HSL
+    ){
+      colorMode = this._renderer.states.colorMode;
+    }else if(
+      this._renderer.states.colorMode === LCH ||
+      this._renderer.states.colorMode === OKLCH
+    ){
+      colorMode = this._renderer.states.colorMode;
+      i = 2;
+    }
+
+    return this.color(c)._getHue(
+      this._renderer.states.colorMaxes[colorMode][i]
+    );
   };
 
   /**
@@ -1220,8 +1237,10 @@ function creatingReading(p5, fn){
    * </div>
    */
   fn.saturation = function(c) {
-    // p5._validateParameters('saturation', arguments);
-    return this.color(c)._getSaturation();
+    const colorMode = (this._renderer.states.colorMode === HSB) ? HSB : HSL;
+    return this.color(c)._getSaturation(
+      this._renderer.states.colorMaxes[colorMode][1]
+    );
   };
 
   /**
@@ -1365,8 +1384,9 @@ function creatingReading(p5, fn){
    * </div>
    */
   fn.brightness = function(c) {
-    // p5._validateParameters('brightness', arguments);
-    return this.color(c)._getBrightness();
+    return this.color(c)._getBrightness(
+      this._renderer.states.colorMaxes.hsb[2]
+    );
   };
 
   /**
@@ -1510,8 +1530,9 @@ function creatingReading(p5, fn){
    * </div>
    */
   fn.lightness = function(c) {
-    // p5._validateParameters('lightness', arguments);
-    return this.color(c)._getLightness();
+    return this.color(c)._getLightness(
+      this._renderer.states.colorMaxes.hsl[2]
+    );
   };
 
   /**

src/color/p5.Color.js

@@ -689,14 +689,14 @@ class Color {
       return map(to(this._color, 'hsl').coords[1], colorjsMax[0], colorjsMax[1], max[0], max[1]);
     }
   }
+
   /**
    * Brightness obtains the HSB brightness value from either a p5.Color object,
    * an array of color components, or a CSS color string.Depending on value,
    * when `colorMode()` is set to HSB, this function will return the
    * brightness value in the range. By default, this function will return
    * the HSB brightness within the range 0 - 100.
    */
-
   _getBrightness(max=[0, 100]) {
     if(!Array.isArray(max)){
       max = [0, max];

src/color/setting.js

@@ -439,6 +439,11 @@ function setting(p5, fn){
    * in RGB values. Calling `background(255, 204, 0)` sets the background a bright
    * yellow color.
    *
+   * The version of `background()` with four parameters interprets them as RGBA,
+   * HSBA, or HSLA colors, depending on the current
+   * <a href="#/p5/colorMode">colorMode()</a>. The last parameter sets the alpha
+   * (transparency) value.
+   *
    * @method background
    * @param {p5.Color} color  any value created by the <a href="#/p5/color">color()</a> function
    * @chainable
@@ -487,6 +492,19 @@ function setting(p5, fn){
    * function setup() {
    *   createCanvas(100, 100);
    *
+   * // R, G, B, and Alpha values.
+   *   background(255, 0, 0, 128);
+   *
+   *   describe('A canvas with a semi-transparent red background.');
+   * }
+   * </code>
+   * </div>
+   *
+   * <div>
+   * <code>
+   * function setup() {
+   *   createCanvas(100, 100);
+   *
    *   // Use HSB color.
    *   colorMode(HSB);
    *
@@ -1213,6 +1231,10 @@ function setting(p5, fn){
    * <a href="#/p5/colorMode">colorMode()</a>. The default color space is RGB,
    * with each value in the range from 0 to 255.
    *
+   * The version of `fill()` with four parameters interprets them as `RGBA`, `HSBA`,
+   * or `HSLA` colors, depending on the current <a href="#/p5/colorMode">colorMode()</a>. The last parameter
+   * sets the alpha (transparency) value.
+   *
    * @method fill
    * @param  {Number}        v1      red value if color mode is RGB or hue value if color mode is HSB.
    * @param  {Number}        v2      green value if color mode is RGB or saturation value if color mode is HSB.
@@ -1257,6 +1279,22 @@ function setting(p5, fn){
    * function setup() {
    *   createCanvas(100, 100);
    *
+   *   background(200);
+   *
+   *   // R, G, B, and Alpha values.
+   *   fill(255, 0, 0, 128);
+   *   square(20, 20, 60);
+   *
+   *   describe('A semi-transparent red square with a black outline.');
+   * }
+   * </code>
+   * </div>
+   *
+   * <div>
+   * <code>
+   * function setup() {
+   *   createCanvas(100, 100);
+   *
    *   background(100);
    *
    *   // Use HSB color.
@@ -1551,7 +1589,7 @@ function setting(p5, fn){
    * Sets the color used to draw points, lines, and the outlines of shapes.
    *
    * Calling `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn
-   * after calling `stroke()` will be filled with the color orange. The way
+   * after calling `stroke()` will be outlined with the color orange. The way
    * these parameters are interpreted may be changed with the
    * <a href="#/p5/colorMode">colorMode()</a> function.
    *

src/core/friendly_errors/param_validator.js

@@ -573,7 +573,10 @@ function validateParams(p5, fn, lifecycles) {
   lifecycles.presetup = function(){
     loadP5Constructors();
 
-    if(p5.disableParameterValidator !== true){
+    if(
+      p5.disableParameterValidator !== true &&
+      p5.disableFriendlyErrors !== true
+    ){
       const excludes = ['validate'];
       for(const f in this){
         if(!excludes.includes(f) && !f.startsWith('_') && typeof this[f] === 'function'){

src/core/internationalization.js

@@ -1,6 +1,7 @@
 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
@@ -147,8 +148,12 @@ export const initialize = () => {
       },
       backend: {
         fallback: 'en',
-        loadPath:
-          'https://cdn.jsdelivr.net/npm/p5/translations/{{lng}}/{{ns}}.json'
+        
+        // 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