p5 2.2.1-rc.0 → 2.2.1

package/dist/webgl/p5.Geometry.js

@@ -1,8 +1,7 @@
-import { a7 as FLAT, a8 as SMOOTH } from '../constants-DEJVKr9Z.js';
+import { a7 as FLAT, a8 as SMOOTH } from '../constants-DQyACdzq.js';
 import { DataArray } from './p5.DataArray.js';
 import { Vector } from '../math/p5.Vector.js';
 import { downloadFile } from '../io/utilities.js';
-import 'file-saver';
 
 /**
  * @module Shape
@@ -105,8 +104,6 @@ class Geometry {
    * @returns {Object} bounding box of the geometry.
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let particles;
@@ -165,8 +162,6 @@ class Geometry {
    *     pop();
    *   }
    * }
-   * </code>
-   * </div>
    */
   calculateBoundingBox() {
     if (this.boundingBoxCache) {
@@ -268,8 +263,6 @@ class Geometry {
    * <a href="#/p5/fill">fill()</a> function to apply color to the geometry.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -313,8 +306,6 @@ class Geometry {
    *     'Three squares drawn against a gray background. Red squares are at the center and the bottom-right. A blue square is at the top-right.'
    *   );
    * }
-   * </code>
-   * </div>
    */
   clearColors() {
     this.vertexColors = [];
@@ -334,8 +325,6 @@ class Geometry {
    * @param {String} [fileName='model.obj'] The name of the file to save the model as.
    *                                        If not specified, the default file name will be 'model.obj'.
    * @example
-   * <div>
-   * <code>
    * let myModel;
    * let saveBtn;
    * function setup() {
@@ -367,8 +356,6 @@ class Geometry {
    *   rotateY(millis() * 0.002);
    *   model(myModel);
    * }
-   * </code>
-   * </div>
    */
   saveObj(fileName = 'model.obj') {
     let objStr= '';
@@ -438,8 +425,6 @@ class Geometry {
    * @param {Object} [options] Optional settings.
    * @param {Boolean} [options.binary=false] Whether or not a binary .stl file is saved.
    * @example
-   * <div>
-   * <code>
    * let myModel;
    * let saveBtn1;
    * let saveBtn2;
@@ -478,8 +463,6 @@ class Geometry {
    *   rotateY(millis() * 0.002);
    *   model(myModel);
    * }
-   * </code>
-   * </div>
    */
   saveStl(fileName = 'model.stl', { binary = false } = {}){
     let modelOutput;
@@ -580,8 +563,6 @@ class Geometry {
    * @for p5.Geometry
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -621,8 +602,6 @@ class Geometry {
    * function createShape() {
    *   plane(40);
    * }
-   * </code>
-   * </div>
    */
   flipU() {
     this.uvs = this.uvs.flat().map((val, index) => {
@@ -672,8 +651,6 @@ class Geometry {
    * @for p5.Geometry
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -713,8 +690,6 @@ class Geometry {
    * function createShape() {
    *   plane(40);
    * }
-   * </code>
-   * </div>
    */
   flipV() {
     this.uvs = this.uvs.flat().map((val, index) => {
@@ -761,8 +736,6 @@ class Geometry {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -804,11 +777,8 @@ class Geometry {
    *   // Draw the p5.Geometry object.
    *   model(myGeometry);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -852,8 +822,6 @@ class Geometry {
    *   // Compute the faces array.
    *   this.computeFaces();
    * }
-   * </code>
-   * </div>
    */
   computeFaces() {
     this.faces.length = 0;
@@ -930,8 +898,6 @@ class Geometry {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -992,11 +958,8 @@ class Geometry {
    *     pop();
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -1041,11 +1004,8 @@ class Geometry {
    *   // Draw the p5.Geometry object.
    *   model(myGeometry);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -1092,11 +1052,8 @@ class Geometry {
    *   }
    *   endShape();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -1143,11 +1100,8 @@ class Geometry {
    *   }
    *   endShape();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -1197,8 +1151,6 @@ class Geometry {
    *   }
    *   endShape();
    * }
-   * </code>
-   * </div>
    */
   computeNormals(shadingType = FLAT, { roundToPrecision = 3 } = {}) {
     const vertexNormals = this.vertexNormals;
@@ -1353,8 +1305,6 @@ class Geometry {
 
   /**
    * @example
-   * <div>
-   * <code>
    * let tetrahedron;
    * function setup() {
    *   createCanvas(200, 200, WEBGL);
@@ -1382,6 +1332,7 @@ class Geometry {
    *   tetrahedron.faces.push([1, 2, 3]);
    *   tetrahedron.makeEdgesFromFaces();
    * }
+   *
    * function draw() {
    *   background(200);
    *   strokeWeight(2);
@@ -1389,8 +1340,6 @@ class Geometry {
    *   rotateY(millis() * 0.001);
    *   model(tetrahedron);
    * }
-   * </code>
-   * </div>
    */
   makeEdgesFromFaces() {
     this._makeTriangleEdges();
@@ -1681,8 +1630,6 @@ class Geometry {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * let myGeometry;
    *
    * function setup() {
@@ -1715,8 +1662,6 @@ class Geometry {
    *   // Draw the torus.
    *   model(myGeometry);
    * }
-   * </code>
-   * </div>
    */
   normalize() {
     if (this.vertices.length > 0) {
@@ -1771,8 +1716,6 @@ class Geometry {
    * See also the global <a href="#/p5/vertexProperty">vertexProperty()</a> function.
    *
    * @example
-   * <div>
-   * <code>
    * let geo;
    *
    * function cartesianToSpherical(x, y, z) {
@@ -1842,8 +1785,6 @@ class Geometry {
    *   // Draw the geometry
    *   model(geo);
    * }
-   * </code>
-   * </div>
    *
    * @param {String} propertyName the name of the vertex property.
    * @param {Number|Number[]} data the data tied to the vertex property.
@@ -1964,8 +1905,6 @@ function geometry(p5, fn){
    * @param {Function} [callback] function to call once the geometry is created.
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -1996,11 +1935,8 @@ function geometry(p5, fn){
    *   // Draw the p5.Geometry object.
    *   model(myGeometry);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -2040,11 +1976,8 @@ function geometry(p5, fn){
    *   // left to top to right.
    *   this.faces.push([0, 1, 2]);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -2087,11 +2020,8 @@ function geometry(p5, fn){
    *   // Compute the surface normals to help with lighting.
    *   this.computeNormals();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * // Adapted from Paul Wheeler's wonderful p5.Geometry tutorial.
@@ -2168,8 +2098,6 @@ function geometry(p5, fn){
    *   // Compute the surface normals to help with lighting.
    *   this.computeNormals();
    * }
-   * </code>
-   * </div>
    */
   p5.Geometry = Geometry;
 
@@ -2188,8 +2116,6 @@ function geometry(p5, fn){
    * @name vertices
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -2220,11 +2146,8 @@ function geometry(p5, fn){
    *   // Draw the p5.Geometry object.
    *   model(myGeometry);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -2272,8 +2195,6 @@ function geometry(p5, fn){
    *     pop();
    *   }
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -2292,8 +2213,6 @@ function geometry(p5, fn){
    * @for p5.Geometry
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -2354,11 +2273,8 @@ function geometry(p5, fn){
    *     pop();
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -2403,8 +2319,6 @@ function geometry(p5, fn){
    *   // Display the p5.Geometry object.
    *   model(myGeometry);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -2439,8 +2353,6 @@ function geometry(p5, fn){
    * @for p5.Geometry
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let myGeometry;
@@ -2490,8 +2402,6 @@ function geometry(p5, fn){
    *
    *   }
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -2514,8 +2424,6 @@ function geometry(p5, fn){
    * @for p5.Geometry
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -2555,8 +2463,6 @@ function geometry(p5, fn){
    * function createShape() {
    *   plane(40);
    * }
-   * </code>
-   * </div>
    */
 
   /**

package/dist/webgl/p5.Quat.js

@@ -1,5 +1,5 @@
 import { Vector } from '../math/p5.Vector.js';
-import '../constants-DEJVKr9Z.js';
+import '../constants-DQyACdzq.js';
 
 /**
  * @module Math

package/dist/webgl/p5.RendererGL.js

@@ -1,9 +1,9 @@
-import { ac as WEBGL, aa as WEBGL2, L as LIGHTEST, D as DARKEST, S as SUBTRACT, R as REPLACE, E as EXCLUSION, a as SCREEN, M as MULTIPLY, b as REMOVE, A as ADD, B as BLEND, c as TRIANGLES, p as CORNER, U as UNSIGNED_BYTE, g as LINEAR, aG as LINEAR_MIPMAP, h as TEXTURE, F as FLOAT, d as UNSIGNED_INT, H as HALF_FLOAT } from '../constants-DEJVKr9Z.js';
-import { R as Renderer3D, o as readPixelWebGL, q as readPixelsWebGL, M as MipmapTexture, h as getWebGLShaderAttributes, g as getWebGLUniformMetadata, s as setWebGLUniformValue, e as setWebGLTextureParams, j as populateGLSLHooks, u as checkWebGLCapabilities } from '../rendering-CsICjEXA.js';
+import { ac as WEBGL, aa as WEBGL2, L as LIGHTEST, D as DARKEST, S as SUBTRACT, R as REPLACE, E as EXCLUSION, a as SCREEN, M as MULTIPLY, b as REMOVE, A as ADD, B as BLEND, c as TRIANGLES, p as CORNER, U as UNSIGNED_BYTE, g as LINEAR, aG as LINEAR_MIPMAP, h as TEXTURE, F as FLOAT, d as UNSIGNED_INT, H as HALF_FLOAT } from '../constants-DQyACdzq.js';
+import { R as Renderer3D, o as readPixelWebGL, q as readPixelsWebGL, M as MipmapTexture, h as getWebGLShaderAttributes, g as getWebGLUniformMetadata, s as setWebGLUniformValue, e as setWebGLTextureParams, j as populateGLSLHooks, u as checkWebGLCapabilities } from '../rendering-h9unX5K0.js';
 import { getStrokeDefs } from './enums.js';
 import { Shader } from './p5.Shader.js';
-import { R as RGB, h as RGBA } from '../creating_reading-CgHCHxqN.js';
-import { I as Image } from '../p5.Renderer-QoFcvj3f.js';
+import { R as RGB, h as RGBA } from '../creating_reading-ZXzcZEsb.js';
+import { I as Image } from '../p5.Renderer-D-5LdCRz.js';
 import { glslBackend } from './strands_glslBackend.js';
 import '../strands/ir_types.js';
 import { getShaderHookTypes } from './shaderHookUtils.js';
@@ -23,7 +23,6 @@ import '../color/setting.js';
 import 'omggif';
 import '../io/csv.js';
 import '../io/utilities.js';
-import 'file-saver';
 import 'gifenc';
 import '../image/pixels.js';
 import '../image/filters.js';
@@ -52,7 +51,7 @@ import '../ir_builders-DXNgaB9N.js';
 import '../strands/ir_cfg.js';
 import '../strands/strands_builtins.js';
 
-var lightingShader = "#define PI 3.141592\n\nprecision highp float;\nprecision highp int;\n\nuniform mat4 uViewMatrix;\n\nuniform bool uUseLighting;\n\nuniform mat3 uCameraRotation;\nuniform int uDirectionalLightCount;\nuniform vec3 uLightingDirection[5];\nuniform vec3 uDirectionalDiffuseColors[5];\nuniform vec3 uDirectionalSpecularColors[5];\n\nuniform int uPointLightCount;\nuniform vec3 uPointLightLocation[5];\nuniform vec3 uPointLightDiffuseColors[5];\t\nuniform vec3 uPointLightSpecularColors[5];\n\nuniform int uSpotLightCount;\nuniform float uSpotLightAngle[5];\nuniform float uSpotLightConc[5];\nuniform vec3 uSpotLightDiffuseColors[5];\nuniform vec3 uSpotLightSpecularColors[5];\nuniform vec3 uSpotLightLocation[5];\nuniform vec3 uSpotLightDirection[5];\n\nuniform bool uSpecular;\nuniform float uShininess;\nuniform float uMetallic;\n\nuniform float uConstantAttenuation;\nuniform float uLinearAttenuation;\nuniform float uQuadraticAttenuation;\n\n// setting from  _setImageLightUniforms()\n// boolean to initiate the calculateImageDiffuse and calculateImageSpecular\nuniform bool uUseImageLight;\n// texture for use in calculateImageDiffuse\nuniform sampler2D environmentMapDiffused;\n// texture for use in calculateImageSpecular\nuniform sampler2D environmentMapSpecular;\n\nconst float specularFactor = 2.0;\nconst float diffuseFactor = 0.73;\n\nstruct LightResult {\n  float specular;\n  float diffuse;\n};\n\nfloat _phongSpecular(\n  vec3 lightDirection,\n  vec3 viewDirection,\n  vec3 surfaceNormal,\n  float shininess) {\n\n  vec3 R = reflect(lightDirection, surfaceNormal);\n  return pow(max(0.0, dot(R, viewDirection)), shininess);\n}\n\nfloat _lambertDiffuse(vec3 lightDirection, vec3 surfaceNormal) {\n  return max(0.0, dot(-lightDirection, surfaceNormal));\n}\n\nLightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector, float shininess, float metallic) {\n\n  vec3 lightDir = normalize(lightVector);\n\n  //compute our diffuse & specular terms\n  LightResult lr;\n  float specularIntensity = mix(1.0, 0.4, metallic);\n  float diffuseIntensity = mix(1.0, 0.1, metallic);\n  if (uSpecular)\n    lr.specular = (_phongSpecular(lightDir, viewDirection, normal, shininess)) * specularIntensity;\n    lr.diffuse = _lambertDiffuse(lightDir, normal) * diffuseIntensity;\n  return lr;\n}\n\n// converts the range of \"value\" from [min1 to max1] to [min2 to max2]\nfloat map(float value, float min1, float max1, float min2, float max2) {\n  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);\n}\n\nvec2 mapTextureToNormal( vec3 v ){\n  // x = r sin(phi) cos(theta)   \n  // y = r cos(phi)  \n  // z = r sin(phi) sin(theta)\n  float phi = acos( v.y );\n  // if phi is 0, then there are no x, z components\n  float theta = 0.0;\n  // else \n  theta = acos(v.x / sin(phi));\n  float sinTheta = v.z / sin(phi);\n  if (sinTheta < 0.0) {\n    // Turn it into -theta, but in the 0-2PI range\n    theta = 2.0 * PI - theta;\n  }\n  theta = theta / (2.0 * 3.14159);\n  phi = phi / 3.14159 ;\n  \n  vec2 angles = vec2( fract(theta + 0.25), 1.0 - phi );\n  return angles;\n}\n\n\nvec3 calculateImageDiffuse(vec3 vNormal, vec3 vViewPosition, float metallic){\n  // make 2 seperate builds \n  vec3 worldCameraPosition =  vec3(0.0, 0.0, 0.0);  // hardcoded world camera position\n  vec3 worldNormal = normalize(vNormal * uCameraRotation);\n  vec2 newTexCoor = mapTextureToNormal( worldNormal );\n  vec4 texture = TEXTURE( environmentMapDiffused, newTexCoor );\n  // this is to make the darker sections more dark\n  // png and jpg usually flatten the brightness so it is to reverse that\n  return mix(smoothstep(vec3(0.0), vec3(1.0), texture.xyz), vec3(0.0), metallic);\n}\n\nvec3 calculateImageSpecular(vec3 vNormal, vec3 vViewPosition, float shininess, float metallic){\n  vec3 worldCameraPosition =  vec3(0.0, 0.0, 0.0);\n  vec3 worldNormal = normalize(vNormal);\n  vec3 lightDirection = normalize( vViewPosition - worldCameraPosition );\n  vec3 R = reflect(lightDirection, worldNormal) * uCameraRotation;\n  vec2 newTexCoor = mapTextureToNormal( R );\n#ifdef WEBGL2\n  // In p5js the range of shininess is >= 1,\n  // Therefore roughness range will be ([0,1]*8)*20 or [0, 160]\n  // The factor of 8 is because currently the getSpecularTexture\n  // only calculated 8 different levels of roughness\n  // The factor of 20 is just to spread up this range so that,\n  // [1, max] of shininess is converted to [0,160] of roughness\n  float roughness = 20. / shininess;\n  vec4 outColor = textureLod(environmentMapSpecular, newTexCoor, roughness * 8.);\n#else\n  vec4 outColor = TEXTURE(environmentMapSpecular, newTexCoor);\n#endif\n  // this is to make the darker sections more dark\n  // png and jpg usually flatten the brightness so it is to reverse that\n  return mix(\n    pow(outColor.xyz, vec3(10)),\n    pow(outColor.xyz, vec3(1.2)),\n    metallic \n  );\n}\n\nvoid totalLight(\n  vec3 modelPosition,\n  vec3 normal,\n  float shininess,\n  float metallic,\n  out vec3 totalDiffuse,\n  out vec3 totalSpecular\n) {\n\n  totalSpecular = vec3(0.0);\n\n  if (!uUseLighting) {\n    totalDiffuse = vec3(1.0);\n    return;\n  }\n\n  totalDiffuse = vec3(0.0);\n\n  vec3 viewDirection = normalize(-modelPosition);\n\n  for (int j = 0; j < 5; j++) {\n    if (j < uDirectionalLightCount) {\n      vec3 lightVector = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;\n      vec3 lightColor = uDirectionalDiffuseColors[j];\n      vec3 specularColor = uDirectionalSpecularColors[j];\n      LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);\n      totalDiffuse += result.diffuse * lightColor;\n      totalSpecular += result.specular * lightColor * specularColor;\n    }\n\n    if (j < uPointLightCount) {\n      vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation[j], 1.0)).xyz;\n      vec3 lightVector = modelPosition - lightPosition;\n      //calculate attenuation\n      float lightDistance = length(lightVector);\n      float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n      vec3 lightColor = lightFalloff * uPointLightDiffuseColors[j];\n      vec3 specularColor = lightFalloff * uPointLightSpecularColors[j];\n\n      LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);\n      totalDiffuse += result.diffuse * lightColor;\n      totalSpecular += result.specular * lightColor * specularColor;\n    }\n\n    if(j < uSpotLightCount) {\n      vec3 lightPosition = (uViewMatrix * vec4(uSpotLightLocation[j], 1.0)).xyz;\n      vec3 lightVector = modelPosition - lightPosition;\n    \n      float lightDistance = length(lightVector);\n      float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n\n      vec3 lightDirection = (uViewMatrix * vec4(uSpotLightDirection[j], 0.0)).xyz;\n      float spotDot = dot(normalize(lightVector), normalize(lightDirection));\n      float spotFalloff;\n      if(spotDot < uSpotLightAngle[j]) {\n        spotFalloff = 0.0;\n      }\n      else {\n        spotFalloff = pow(spotDot, uSpotLightConc[j]);\n      }\n      lightFalloff *= spotFalloff;\n\n      vec3 lightColor = uSpotLightDiffuseColors[j];\n      vec3 specularColor = uSpotLightSpecularColors[j];\n     \n      LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);\n      \n      totalDiffuse += result.diffuse * lightColor * lightFalloff;\n      totalSpecular += result.specular * lightColor * specularColor * lightFalloff;\n    }\n  }\n\n  if( uUseImageLight ){\n    totalDiffuse += calculateImageDiffuse(normal, modelPosition, metallic);\n    totalSpecular += calculateImageSpecular(normal, modelPosition, shininess, metallic);\n  }\n\n  totalDiffuse *= diffuseFactor;\n  totalSpecular *= specularFactor;\n}\n";
+var lightingShader = "#define PI 3.141592\n\nprecision highp float;\nprecision highp int;\n\nuniform mat4 uViewMatrix;\nuniform mat3 uCameraNormalMatrix;\n\nuniform bool uUseLighting;\n\nuniform int uDirectionalLightCount;\nuniform vec3 uLightingDirection[5];\nuniform vec3 uDirectionalDiffuseColors[5];\nuniform vec3 uDirectionalSpecularColors[5];\n\nuniform int uPointLightCount;\nuniform vec3 uPointLightLocation[5];\nuniform vec3 uPointLightDiffuseColors[5];\t\nuniform vec3 uPointLightSpecularColors[5];\n\nuniform int uSpotLightCount;\nuniform float uSpotLightAngle[5];\nuniform float uSpotLightConc[5];\nuniform vec3 uSpotLightDiffuseColors[5];\nuniform vec3 uSpotLightSpecularColors[5];\nuniform vec3 uSpotLightLocation[5];\nuniform vec3 uSpotLightDirection[5];\n\nuniform bool uSpecular;\nuniform float uShininess;\nuniform float uMetallic;\n\nuniform float uConstantAttenuation;\nuniform float uLinearAttenuation;\nuniform float uQuadraticAttenuation;\n\n// setting from  _setImageLightUniforms()\n// boolean to initiate the calculateImageDiffuse and calculateImageSpecular\nuniform bool uUseImageLight;\n// texture for use in calculateImageDiffuse\nuniform sampler2D environmentMapDiffused;\n// texture for use in calculateImageSpecular\nuniform sampler2D environmentMapSpecular;\n\nconst float specularFactor = 2.0;\nconst float diffuseFactor = 0.73;\n\nstruct LightResult {\n  float specular;\n  float diffuse;\n};\n\nfloat _phongSpecular(\n  vec3 lightDirection,\n  vec3 viewDirection,\n  vec3 surfaceNormal,\n  float shininess) {\n\n  vec3 R = reflect(lightDirection, surfaceNormal);\n  return pow(max(0.0, dot(R, viewDirection)), shininess);\n}\n\nfloat _lambertDiffuse(vec3 lightDirection, vec3 surfaceNormal) {\n  return max(0.0, dot(-lightDirection, surfaceNormal));\n}\n\nLightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector, float shininess, float metallic) {\n\n  vec3 lightDir = normalize(lightVector);\n\n  //compute our diffuse & specular terms\n  LightResult lr;\n  float specularIntensity = mix(1.0, 0.4, metallic);\n  float diffuseIntensity = mix(1.0, 0.1, metallic);\n  if (uSpecular)\n    lr.specular = (_phongSpecular(lightDir, viewDirection, normal, shininess)) * specularIntensity;\n    lr.diffuse = _lambertDiffuse(lightDir, normal) * diffuseIntensity;\n  return lr;\n}\n\n// converts the range of \"value\" from [min1 to max1] to [min2 to max2]\nfloat map(float value, float min1, float max1, float min2, float max2) {\n  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);\n}\n\nvec2 mapTextureToNormal( vec3 v ){\n  // x = r sin(phi) cos(theta)   \n  // y = r cos(phi)  \n  // z = r sin(phi) sin(theta)\n  float phi = acos( v.y );\n  // if phi is 0, then there are no x, z components\n  float theta = 0.0;\n  // else \n  theta = acos(v.x / sin(phi));\n  float sinTheta = v.z / sin(phi);\n  if (sinTheta < 0.0) {\n    // Turn it into -theta, but in the 0-2PI range\n    theta = 2.0 * PI - theta;\n  }\n  theta = theta / (2.0 * 3.14159);\n  phi = phi / 3.14159 ;\n  \n  vec2 angles = vec2( fract(theta + 0.25), 1.0 - phi );\n  return angles;\n}\n\n\nvec3 calculateImageDiffuse(vec3 vNormal, vec3 vViewPosition, float metallic){\n  // make 2 seperate builds \n  vec3 worldCameraPosition =  vec3(0.0, 0.0, 0.0);  // hardcoded world camera position\n  vec3 worldNormal = normalize(vNormal * uCameraNormalMatrix);\n  vec2 newTexCoor = mapTextureToNormal( worldNormal );\n  vec4 texture = TEXTURE( environmentMapDiffused, newTexCoor );\n  // this is to make the darker sections more dark\n  // png and jpg usually flatten the brightness so it is to reverse that\n  return mix(smoothstep(vec3(0.0), vec3(1.0), texture.xyz), vec3(0.0), metallic);\n}\n\nvec3 calculateImageSpecular(vec3 vNormal, vec3 vViewPosition, float shininess, float metallic){\n  vec3 worldCameraPosition =  vec3(0.0, 0.0, 0.0);\n  vec3 worldNormal = normalize(vNormal);\n  vec3 lightDirection = normalize( vViewPosition - worldCameraPosition );\n  vec3 R = reflect(lightDirection, worldNormal) * uCameraNormalMatrix;\n  vec2 newTexCoor = mapTextureToNormal( R );\n#ifdef WEBGL2\n  // In p5js the range of shininess is >= 1,\n  // Therefore roughness range will be ([0,1]*8)*20 or [0, 160]\n  // The factor of 8 is because currently the getSpecularTexture\n  // only calculated 8 different levels of roughness\n  // The factor of 20 is just to spread up this range so that,\n  // [1, max] of shininess is converted to [0,160] of roughness\n  float roughness = 20. / shininess;\n  vec4 outColor = textureLod(environmentMapSpecular, newTexCoor, roughness * 8.);\n#else\n  vec4 outColor = TEXTURE(environmentMapSpecular, newTexCoor);\n#endif\n  // this is to make the darker sections more dark\n  // png and jpg usually flatten the brightness so it is to reverse that\n  return mix(\n    pow(outColor.xyz, vec3(10)),\n    pow(outColor.xyz, vec3(1.2)),\n    metallic \n  );\n}\n\nvoid totalLight(\n  vec3 modelPosition,\n  vec3 normal,\n  float shininess,\n  float metallic,\n  out vec3 totalDiffuse,\n  out vec3 totalSpecular\n) {\n\n  totalSpecular = vec3(0.0);\n\n  if (!uUseLighting) {\n    totalDiffuse = vec3(1.0);\n    return;\n  }\n\n  totalDiffuse = vec3(0.0);\n\n  vec3 viewDirection = normalize(-modelPosition);\n\n  for (int j = 0; j < 5; j++) {\n    if (j < uDirectionalLightCount) {\n      vec3 lightVector = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;\n      vec3 lightColor = uDirectionalDiffuseColors[j];\n      vec3 specularColor = uDirectionalSpecularColors[j];\n      LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);\n      totalDiffuse += result.diffuse * lightColor;\n      totalSpecular += result.specular * lightColor * specularColor;\n    }\n\n    if (j < uPointLightCount) {\n      vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation[j], 1.0)).xyz;\n      vec3 lightVector = modelPosition - lightPosition;\n      //calculate attenuation\n      float lightDistance = length(lightVector);\n      float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n      vec3 lightColor = lightFalloff * uPointLightDiffuseColors[j];\n      vec3 specularColor = lightFalloff * uPointLightSpecularColors[j];\n\n      LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);\n      totalDiffuse += result.diffuse * lightColor;\n      totalSpecular += result.specular * lightColor * specularColor;\n    }\n\n    if(j < uSpotLightCount) {\n      vec3 lightPosition = (uViewMatrix * vec4(uSpotLightLocation[j], 1.0)).xyz;\n      vec3 lightVector = modelPosition - lightPosition;\n    \n      float lightDistance = length(lightVector);\n      float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n\n      vec3 lightDirection = (uViewMatrix * vec4(uSpotLightDirection[j], 0.0)).xyz;\n      float spotDot = dot(normalize(lightVector), normalize(lightDirection));\n      float spotFalloff;\n      if(spotDot < uSpotLightAngle[j]) {\n        spotFalloff = 0.0;\n      }\n      else {\n        spotFalloff = pow(spotDot, uSpotLightConc[j]);\n      }\n      lightFalloff *= spotFalloff;\n\n      vec3 lightColor = uSpotLightDiffuseColors[j];\n      vec3 specularColor = uSpotLightSpecularColors[j];\n     \n      LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);\n      \n      totalDiffuse += result.diffuse * lightColor * lightFalloff;\n      totalSpecular += result.specular * lightColor * specularColor * lightFalloff;\n    }\n  }\n\n  if( uUseImageLight ){\n    totalDiffuse += calculateImageDiffuse(normal, modelPosition, metallic);\n    totalSpecular += calculateImageSpecular(normal, modelPosition, shininess, metallic);\n  }\n\n  totalDiffuse *= diffuseFactor;\n  totalSpecular *= specularFactor;\n}\n";
 
 var normalVert = "IN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\n#define HOOK_DEFINES\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\nuniform mat4 uModelMatrix;\nuniform mat4 uViewMatrix;\nuniform mat3 uModelNormalMatrix;\nuniform mat3 uCameraNormalMatrix;\n#else\nuniform mat4 uModelViewMatrix;\nuniform mat3 uNormalMatrix;\n#endif\nuniform mat4 uProjectionMatrix;\n\nuniform vec4 uMaterialColor;\nuniform bool uUseVertexColor;\n\nOUT vec3 vVertexNormal;\nOUT highp vec2 vVertTexCoord;\nOUT vec4 vColor;\n\nstruct Vertex {\n  vec3 position;\n  vec3 normal;\n  vec2 texCoord;\n  vec4 color;\n};\n\nvoid main(void) {\n  HOOK_beforeVertex();\n\n  Vertex inputs;\n  inputs.position = aPosition;\n  inputs.normal = aNormal;\n  inputs.texCoord = aTexCoord;\n  inputs.color = (uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor;\n#ifdef AUGMENTED_HOOK_getObjectInputs\n  inputs = HOOK_getObjectInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  inputs.position = (uModelMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uModelNormalMatrix * inputs.normal;\n  inputs = HOOK_getWorldInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  // Already multiplied by the model matrix, just apply view\n  inputs.position = (uViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uCameraNormalMatrix * inputs.normal;\n#else\n  // Apply both at once\n  inputs.position = (uModelViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uNormalMatrix * inputs.normal;\n#endif\n#ifdef AUGMENTED_HOOK_getCameraInputs\n  inputs = HOOK_getCameraInputs(inputs);\n#endif\n\n  // Pass varyings to fragment shader\n  vVertTexCoord = inputs.texCoord;\n  vVertexNormal = normalize(inputs.normal);\n  vColor = inputs.color;\n\n  gl_Position = uProjectionMatrix * vec4(inputs.position, 1.);\n\n  HOOK_afterVertex();\n}\n";
 
@@ -2008,8 +2007,6 @@ function rendererGL(p5, fn) {
    * @param  {String}  key Name of attribute
    * @param  {Boolean}        value New value of named attribute
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    * }
@@ -2024,11 +2021,8 @@ function rendererGL(p5, fn) {
    *   box(50);
    *   pop();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    *  // Now with the antialias attribute set to true.
    * function setup() {
    *   setAttributes('antialias', true);
@@ -2045,11 +2039,8 @@ function rendererGL(p5, fn) {
    *   box(50);
    *   pop();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // press the mouse button to disable perPixelLighting
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
@@ -2098,8 +2089,6 @@ function rendererGL(p5, fn) {
    *   noStroke();
    *   fill(255);
    * }
-   * </code>
-   * </div>
    *
    * @alt a rotating cube with smoother edges
    */

package/dist/webgl/p5.Shader.js

@@ -6,6 +6,7 @@
  * @requires core
  */
 
+const TypedArray = Object.getPrototypeOf(Uint8Array);
 class Shader {
   constructor(renderer, vertSrc, fragSrc, options = {}) {
     this._renderer = renderer;
@@ -256,7 +257,7 @@ class Shader {
    *   sketch.setup = function() {
    *     sketch.createCanvas(200, 200, sketch.WEBGL);
    *     myShader = sketch.baseMaterialShader().modify(({ sketch }) => {
-   *       let b = uniformFloat('b');
+   *       let b = sketch.uniformFloat('b');
    *       sketch.getPixelInputs((inputs) => {
    *         inputs.color = [inputs.texCoord, b, 1];
    *         return inputs;
@@ -488,8 +489,6 @@ class Shader {
    * @returns {p5.Shader} new shader compiled for the target context.
    *
    * @example
-   * <div>
-   * <code>
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * // Create a string with the vertex shader program.
@@ -560,11 +559,8 @@ class Shader {
    *   // Draw the p5.Graphics object to the main canvas.
    *   image(pg, -25, -25);
    * }
-   * </code>
-   * </div>
    *
-   * <div class='notest'>
-   * <code>
+   * @example
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * // Create a string with the vertex shader program.
@@ -633,8 +629,6 @@ class Shader {
    *   // Draw the box.
    *   box(50);
    * }
-   * </code>
-   * </div>
    */
   copyToContext(context) {
     const shader = new Shader(
@@ -660,7 +654,6 @@ class Shader {
     }
   }
 
-
   /**
    * Queries the active attributes for this shader and loads
    * their names and locations into the attributes array.
@@ -812,8 +805,6 @@ class Shader {
    * data value to assign to the uniform. Must match the uniform’s data type.
    *
    * @example
-   * <div>
-   * <code>
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * // Create a string with the vertex shader program.
@@ -866,11 +857,8 @@ class Shader {
    *
    *   describe('A cyan square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * // Create a string with the vertex shader program.
@@ -930,11 +918,8 @@ class Shader {
    *   // Add a plane as a drawing surface.
    *   plane(100, 100);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * // Create a string with the vertex shader program.
@@ -1018,10 +1003,8 @@ class Shader {
    *   // Add a plane as a drawing surface.
    *   plane(100, 100);
    * }
-   * </code>
-   * </div>
    */
-  setUniform(uniformName, rawData) {
+  setUniform(uniformName, data) {
     this.init();
 
     const uniform = this.uniforms[uniformName];
@@ -1029,10 +1012,6 @@ class Shader {
       return;
     }
 
-    const data = this._renderer._mapUniformData
-      ? this._renderer._mapUniformData(uniform, rawData)
-      : rawData;
-
     if (uniform.isArray) {
       if (
         uniform._cachedData &&
@@ -1045,9 +1024,13 @@ class Shader {
     } else if (uniform._cachedData && uniform._cachedData === data) {
       return;
     } else {
-      if (Array.isArray(data)) {
+      if (Array.isArray(data) || data instanceof TypedArray) {
+        if (uniform._cachedData && this._renderer._arraysEqual(uniform._cachedData, data)) {
+          return;
+        }
         uniform._cachedData = data.slice(0);
       } else {
+        if (uniform._cachedData === data) return;
         uniform._cachedData = data;
       }
     }
@@ -1136,8 +1119,6 @@ function shader(p5, fn){
    *  - `fragment`: An object describing the available frament shader hooks.
    *
    * @example
-   * <div>
-   * <code>
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * // Create a string with the vertex shader program.
@@ -1186,11 +1167,8 @@ function shader(p5, fn){
    *
    *   describe('A yellow square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * let mandelbrot;
@@ -1215,8 +1193,6 @@ function shader(p5, fn){
    *   // Add a quad as a display surface for the shader.
    *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
    * }
-   * </code>
-   * </div>
    */
   p5.Shader = Shader;
 }