@@ -1376,7 +1376,7 @@ p5.Vector.prototype.equals = function equals(x, y, z) {
*
* @method fromAngle
* @static
- * @param {Number} angle the desired angle, in radians
+ * @param {Number} angle the desired angle, in radians (unaffected by
angleMode)
* @param {Number} [length] the length of the new vector (defaults to 1)
* @return {p5.Vector} the new
p5.Vector object
* @example
@@ -1387,7 +1387,6 @@ p5.Vector.prototype.equals = function equals(x, y, z) {
*
* // Create a variable, proportional to the mouseX,
* // varying from 0-360, to represent an angle in degrees.
- * angleMode(DEGREES);
* let myDegrees = map(mouseX, 0, width, 0, 360);
*
* // Display that variable in an onscreen text.
diff --git a/src/utilities/string_functions.js b/src/utilities/string_functions.js
index afe75b51f8..4d6c30f7e7 100644
--- a/src/utilities/string_functions.js
+++ b/src/utilities/string_functions.js
@@ -382,7 +382,7 @@ function addNfp(num) {
* Utility function for formatting numbers into strings. Similar to
nf() but
* puts an additional "_" (space) in front of positive numbers just in case to align it with negative
* numbers which includes "-" (minus) sign.
- * The main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive
+ * The main usecase of nfs() can be seen when one wants to align the digits (place values) of a non-negative
* number with some negative number (See the example to get a clear picture).
* There are two versions: one for formatting float, and one for formatting int.
* The values for the digits, left, and right parameters should always be positive integers.
@@ -453,7 +453,7 @@ p5.prototype.nfs = function() {
};
function addNfs(num) {
- return parseFloat(num) > 0 ? ' ' + num.toString() : num.toString();
+ return parseFloat(num) >= 0 ? ' ' + num.toString() : num.toString();
}
/**
diff --git a/src/webgl/light.js b/src/webgl/light.js
index a0dfd376f4..e7b2e1ca23 100644
--- a/src/webgl/light.js
+++ b/src/webgl/light.js
@@ -285,7 +285,7 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
};
/**
- * Sets the default ambient and directional light. The defaults are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1). Lights need to be included in the draw() to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop.
+ * Sets the default ambient and directional light. The defaults are
ambientLight(128, 128, 128) and
directionalLight(128, 128, 128, 0, 0, -1). Lights need to be included in the
draw() to remain persistent in a looping program. Placing them in the
setup() of a looping program will cause them to only have an effect the first time through the loop.
* @method lights
* @chainable
* @example
diff --git a/src/webgl/loading.js b/src/webgl/loading.js
index 51ad31d040..dde38d4613 100755
--- a/src/webgl/loading.js
+++ b/src/webgl/loading.js
@@ -29,7 +29,7 @@ require('./p5.Geometry');
* once the model is loaded. Will be passed
* the 3D model object.
* @param {function(Event)} [failureCallback] called with event error if
- * the image fails to load.
+ * the model fails to load.
* @return {p5.Geometry} the
p5.Geometry object
*
* @example
diff --git a/src/webgl/material.js b/src/webgl/material.js
index f413d8ba34..72788f05ea 100644
--- a/src/webgl/material.js
+++ b/src/webgl/material.js
@@ -188,6 +188,66 @@ p5.prototype.createShader = function(vertSrc, fragSrc) {
* @chainable
* @param {p5.Shader} [s] the desired
p5.Shader to use for rendering
* shapes.
+ *
+ * @example
+ *
+ *
+ * // Click within the image to toggle
+ * // the shader used by the quad shape
+ * // Note: for an alternative approach to the same example,
+ * // involving changing uniforms please refer to:
+ * // https://p5js.org/reference/#/p5.Shader/setUniform
+ *
+ * let redGreen;
+ * let orangeBlue;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ * // note that we are using two instances
+ * // of the same vertex and fragment shaders
+ * redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * // initialize the colors for redGreen shader
+ * shader(redGreen);
+ * redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+ * redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+ *
+ * // initialize the colors for orangeBlue shader
+ * shader(orangeBlue);
+ * orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+ * orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+ *
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // update the offset values for each shader,
+ * // moving orangeBlue in vertical and redGreen
+ * // in horizontal direction
+ * orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ * redGreen.setUniform('offset', [sin(millis() / 2000), 1]);
+ *
+ * if (showRedGreen === true) {
+ * shader(redGreen);
+ * } else {
+ * shader(orangeBlue);
+ * }
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ * showRedGreen = !showRedGreen;
+ * }
+ *
+ *
+ *
+ * @alt
+ * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
*/
p5.prototype.shader = function(s) {
this._assert3d('shader');
diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js
index 0688a75566..5c5525488e 100644
--- a/src/webgl/p5.Shader.js
+++ b/src/webgl/p5.Shader.js
@@ -277,6 +277,55 @@ p5.Shader.prototype.useProgram = function() {
* @param {Object|Number|Boolean|Number[]} data the data to be associated
* with that uniform; type varies (could be a single numerical value, array,
* matrix, or texture / sampler reference)
+ *
+ * @example
+ *
+ *
+ * // Click within the image to toggle the value of uniforms
+ * // Note: for an alternative approach to the same example,
+ * // involving toggling between shaders please refer to:
+ * // https://p5js.org/reference/#/p5/shader
+ *
+ * let grad;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ * // note that we are using two instances
+ * // of the same vertex and fragment shaders
+ * grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * shader(grad);
+ * noStroke();
+ * }
+ *
+ * function draw() {
+ * // update the offset values for each scenario,
+ * // moving the "grad" shader in either vertical or
+ * // horizontal direction each with differing colors
+ *
+ * if (showRedGreen === true) {
+ * grad.setUniform('colorCenter', [1, 0, 0]);
+ * grad.setUniform('colorBackground', [0, 1, 0]);
+ * grad.setUniform('offset', [sin(millis() / 2000), 1]);
+ * } else {
+ * grad.setUniform('colorCenter', [1, 0.5, 0]);
+ * grad.setUniform('colorBackground', [0.226, 0, 0.615]);
+ * grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ * }
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ * showRedGreen = !showRedGreen;
+ * }
+ *
+ *
+ *
+ * @alt
+ * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
*/
p5.Shader.prototype.setUniform = function(uniformName, data) {
//@todo update all current gl.uniformXX calls
diff --git a/src/webgl/shaders/light.vert b/src/webgl/shaders/light.vert
index ee825e3f56..c8bdd2703b 100644
--- a/src/webgl/shaders/light.vert
+++ b/src/webgl/shaders/light.vert
@@ -49,7 +49,7 @@ void main(void){
for (int j = 0; j < 8; j++) {
if (uDirectionalLightCount == j) break;
- vec3 dir = uLightingDirection[j];
+ vec3 dir = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;
float directionalLightWeighting = max(dot(vertexNormal, -dir), 0.0);
directionalLightFactor += uDirectionalColor[j] * directionalLightWeighting;
}
diff --git a/src/webgl/shaders/phong.frag b/src/webgl/shaders/phong.frag
index 25671409ad..b90e66540e 100644
--- a/src/webgl/shaders/phong.frag
+++ b/src/webgl/shaders/phong.frag
@@ -73,7 +73,8 @@ void main(void) {
for (int j = 0; j < 8; j++) {
if (uDirectionalLightCount == j) break;
- LightResult result = light(uLightingDirection[j]);
+ vec3 dir = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;
+ LightResult result = light(dir);
diffuse += result.diffuse * uDirectionalColor[j];
specular += result.specular;
}
diff --git a/src/webgl/text.js b/src/webgl/text.js
index 256ea476c5..b8c16d74f1 100644
--- a/src/webgl/text.js
+++ b/src/webgl/text.js
@@ -650,6 +650,7 @@ p5.RendererGL.prototype._renderText = function(p, line, x, y, maxY) {
var initializeShader = !this._defaultFontShader;
var sh = this._getFontShader();
sh.init();
+ sh.bindShader(); // first time around, bind the shader fully
if (initializeShader) {
// these are constants, really. just initialize them one-time.
@@ -688,7 +689,6 @@ p5.RendererGL.prototype._renderText = function(p, line, x, y, maxY) {
try {
var dx = 0; // the x position in the line
var glyphPrev = null; // the previous glyph, used for kerning
- var shaderBound = false;
// fetch the glyphs in the line of text
var glyphs = font.stringToGlyphs(line);
for (var ig = 0; ig < glyphs.length; ++ig) {
@@ -709,12 +709,7 @@ p5.RendererGL.prototype._renderText = function(p, line, x, y, maxY) {
sh.setUniform('uGlyphRect', gi.uGlyphRect);
sh.setUniform('uGlyphOffset', dx);
- if (!shaderBound) {
- shaderBound = true;
- sh.bindShader(); // first time around, bind the shader fully
- } else {
- sh.bindTextures(); // afterwards, only textures need updating
- }
+ sh.bindTextures(); // afterwards, only textures need updating
// draw it
gl.drawElements(gl.TRIANGLES, 6, this.GL.UNSIGNED_SHORT, 0);
diff --git a/tasks/build/browserify.js b/tasks/build/browserify.js
index 24ce9b8550..f4319e3397 100644
--- a/tasks/build/browserify.js
+++ b/tasks/build/browserify.js
@@ -2,6 +2,7 @@
const path = require('path');
const browserify = require('browserify');
+const prettier = require('prettier');
const derequire = require('derequire');
const bannerTemplate =
@@ -35,7 +36,10 @@ module.exports = function(grunt) {
browseified = browseified.exclude('../../docs/reference/data.json');
}
- const bundle = browseified.transform('brfs').bundle();
+ const bundle = browseified
+ .transform('brfs')
+ .transform('babelify')
+ .bundle();
// Start the generated output with the banner comment,
let code = banner + '\n';
@@ -47,11 +51,22 @@ module.exports = function(grunt) {
})
.on('end', function() {
// "code" is complete: create the distributable UMD build by running
- // the bundle through derequire, then write the bundle to disk.
+ // the bundle through derequire
// (Derequire changes the bundle's internal "require" function to
// something that will not interfere with this module being used
// within a separate browserify bundle.)
- grunt.file.write(libFilePath, derequire(code));
+ code = derequire(code);
+
+ // and prettify the code
+ if (!isMin) {
+ code = prettier.format(code, {
+ singleQuote: true,
+ printWidth: 80 + 12
+ });
+ }
+
+ // finally, write it to disk
+ grunt.file.write(libFilePath, code);
// Print a success message
grunt.log.writeln(
diff --git a/test/js/mocha_setup.js b/test/js/mocha_setup.js
new file mode 100644
index 0000000000..52cfde607e
--- /dev/null
+++ b/test/js/mocha_setup.js
@@ -0,0 +1,2 @@
+mocha.setup('tdd');
+mocha.reporter('html');
diff --git a/test/node/helpers.js b/test/node/helpers.js
index f7367b6936..19d2da73a1 100644
--- a/test/node/helpers.js
+++ b/test/node/helpers.js
@@ -1,4 +1,4 @@
-var expect = require('chai').expect;
+var { expect } = require('chai');
var constants = require('../../src/core/constants.js');
var helpers = require('../../src/core/helpers.js');
@@ -8,20 +8,20 @@ var c = 50;
var d = 150;
var result;
-describe('helpers/modeAdjust', function() {
- it('should set mode to corner', function() {
+suite('helpers/modeAdjust', function() {
+ test('should set mode to corner', function() {
result = helpers.modeAdjust(a, b, c, d, constants.CORNER);
expect(result).to.eql({ x: 100, y: 200, w: 50, h: 150 });
});
- it('should set mode to corners', function() {
+ test('should set mode to corners', function() {
result = helpers.modeAdjust(a, b, c, d, constants.CORNERS);
expect(result).to.eql({ x: 100, y: 200, w: -50, h: -50 });
});
- it('should set mode to radius', function() {
+ test('should set mode to radius', function() {
result = helpers.modeAdjust(a, b, c, d, constants.RADIUS);
expect(result).to.eql({ x: 50, y: 50, w: 100, h: 300 });
});
- it('should set mode to center', function() {
+ test('should set mode to center', function() {
result = helpers.modeAdjust(a, b, c, d, constants.CENTER);
expect(result).to.eql({ x: 75, y: 125, w: 50, h: 150 });
});
diff --git a/test/node/test-docs-preprocessor.js b/test/node/test-docs-preprocessor.js
index 8998826751..86a6ec9df3 100644
--- a/test/node/test-docs-preprocessor.js
+++ b/test/node/test-docs-preprocessor.js
@@ -1,9 +1,8 @@
-var expect = require('chai').expect;
-
+var { expect } = require('chai');
var preprocessor = require('../../docs/preprocessor');
-describe('docs preprocessor', function() {
- describe('mergeOverloadedMethods()', function() {
+suite('docs preprocessor', function() {
+ suite('mergeOverloadedMethods()', function() {
var merge = preprocessor.mergeOverloadedMethods;
var ensureMergeDoesNothing = function(data) {
@@ -12,7 +11,7 @@ describe('docs preprocessor', function() {
expect(dataCopy).to.eql(data);
};
- it('should merge methods with the same name', function() {
+ test('should merge methods with the same name', function() {
var data = {
classes: {
Bar: {},
@@ -71,7 +70,7 @@ describe('docs preprocessor', function() {
});
});
- it('should not merge methods from different classes', function() {
+ test('should not merge methods from different classes', function() {
ensureMergeDoesNothing({
classes: {
Bar: {},
@@ -85,7 +84,7 @@ describe('docs preprocessor', function() {
});
});
- it('should not merge properties', function() {
+ test('should not merge properties', function() {
ensureMergeDoesNothing({
classes: {
Bar: {},
@@ -100,10 +99,10 @@ describe('docs preprocessor', function() {
});
});
- describe('renderDescriptionsAsMarkdown', function() {
+ suite('renderDescriptionsAsMarkdown', function() {
var render = preprocessor.renderDescriptionsAsMarkdown;
- it('should work', function() {
+ test('should work', function() {
var data = {
modules: {},
classes: {
diff --git a/test/test-minified.html b/test/test-minified.html
index 2d1006b58b..55cfc193d3 100644
--- a/test/test-minified.html
+++ b/test/test-minified.html
@@ -11,11 +11,7 @@
-
+
diff --git a/test/test-reference.html b/test/test-reference.html
index 1e83aefd44..4c33a0f25e 100644
--- a/test/test-reference.html
+++ b/test/test-reference.html
@@ -12,11 +12,7 @@
-
+
diff --git a/test/test.html b/test/test.html
index e0d3c29425..838a4caaf3 100644
--- a/test/test.html
+++ b/test/test.html
@@ -10,11 +10,7 @@
-
+
@@ -33,7 +29,7 @@