diff --git a/.all-contributorsrc b/.all-contributorsrc index 00b500170f..51c5529e12 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -6264,6 +6264,60 @@ "contributions": [ "doc" ] + }, + { + "login": "ibrand", + "name": "Ilona Brand", + "avatar_url": "https://avatars.githubusercontent.com/u/3953117?v=4", + "profile": "https://github.com/ibrand", + "contributions": [ + "bug" + ] + }, + { + "login": "aleannab", + "name": "Antoinette Bumatay-Chan", + "avatar_url": "https://avatars.githubusercontent.com/u/342223?v=4", + "profile": "http://www.antoinettecreates.com", + "contributions": [ + "doc" + ] + }, + { + "login": "benpalevsky", + "name": "benpalevsky", + "avatar_url": "https://avatars.githubusercontent.com/u/25121735?v=4", + "profile": "https://github.com/benpalevsky", + "contributions": [ + "doc" + ] + }, + { + "login": "jeanetteandrews", + "name": "jeanette", + "avatar_url": "https://avatars.githubusercontent.com/u/12685889?v=4", + "profile": "http://jeanetteandre.ws", + "contributions": [ + "code" + ] + }, + { + "login": "williamthazard", + "name": "William Hazard", + "avatar_url": "https://avatars.githubusercontent.com/u/105560469?v=4", + "profile": "https://github.com/williamthazard", + "contributions": [ + "example" + ] + }, + { + "login": "visheshrwl", + "name": "Vishesh Rawal", + "avatar_url": "https://avatars.githubusercontent.com/u/92795514?v=4", + "profile": "https://github.com/visheshrwl", + "contributions": [ + "bug", "doc", "code" + ] } ], "repoType": "github", diff --git a/README.md b/README.md index eb14510c9a..436ae81a1e 100644 --- a/README.md +++ b/README.md @@ -1053,6 +1053,14 @@ We recognize all types of contributions. This project follows the [all-contribut willallstet
willallstet
📖 Ashwani Dey
Ashwani Dey
📖 + + Ilona Brand
Ilona Brand
🐛 + Antoinette Bumatay-Chan
Antoinette Bumatay-Chan
📖 + benpalevsky
benpalevsky
📖 + jeanette
jeanette
💻 + William Hazard
William Hazard
💡 + Vishesh Rawal
Vishesh Rawal
💡 + diff --git a/contributor_docs/access.md b/contributor_docs/access.md index 164a029821..7fcac44946 100644 --- a/contributor_docs/access.md +++ b/contributor_docs/access.md @@ -54,5 +54,5 @@ This version of the p5.js Access Statement was revised in collaboration with Eve [^1]: Crenshaw, Kimberlé (1989). "Demarginalizing the intersection of race and sex: a black feminist critique of antidiscrimination doctrine, feminist theory and antiracist politics". University of Chicago Legal Forum. 1989 (1): 139–167. ISSN 0892-5593. Full text at Archive.org. [^2]: Capital ‘D’ Deaf refers to people who are culturally Deaf or part of the Deaf community while lower case ‘d’ deaf is an audiological term that can describe people not associated with Deaf identity. -[^3]: There are differing preferences between ‘person-first’ vs. ‘identity-first’ language within the disability community. Read [Unpacking the debate over person-first vs. identity-first language in the autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/). +[^3]: There are differing preferences between ‘person-first’ vs. ‘identity-first’ language within the disability community. Read [Unpacking the debate over person-first vs. identity-first language in the autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Language: Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), and [Person-First and Identity-First Language Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4]: Linguistic Imperialism, or Language Imperialism, refers to the ongoing domination/prioritization/imposition of certain languages such as English at the expense of native languages due to imperial expansion and globalization. diff --git a/contributor_docs/contributing_to_the_p5js_reference.md b/contributor_docs/contributing_to_the_p5js_reference.md index 09ee8015f5..849bfef6bf 100644 --- a/contributor_docs/contributing_to_the_p5js_reference.md +++ b/contributor_docs/contributing_to_the_p5js_reference.md @@ -73,7 +73,7 @@ Anything in a block in this manner will be interpreted as reference documentatio ## Reference comments block -Let’s break down the reference comments block above for the `sin()` function and see what each section does. You can compare what you see in the comments here and what you can see on the reference page for [`sin()`](https://p5js.org/reference/#/p5/sin). +Let’s break down the reference comments block above for the `sin()` function and see what each section does. You can compare what you see in the comments here and what you can see on the reference page for [`sin()`](https://p5js.org/reference/p5/sin/). ``` /** @@ -143,7 +143,7 @@ If the method returns the parent object, you can skip the `@return` tag and add ## Additional signatures -If a function has multiple possible parameter options, you can specify each individually. For example, the [`background()`](http://p5js.org/reference/#p5/background) function takes a number of different parameter options (see "Syntax" section on the reference page). Choose one version to list as the first signature using the template above. At the end of the first reference comment block, you can add additional signatures, each in its own block, using only the `@method` and `@param` tags following the example below. +If a function has multiple possible parameter options, you can specify each individually. For example, the [`background()`](https://p5js.org/reference/p5/background/) function takes a number of different parameter options (see "Syntax" section on the reference page). Choose one version to list as the first signature using the template above. At the end of the first reference comment block, you can add additional signatures, each in its own block, using only the `@method` and `@param` tags following the example below. ``` /** @@ -270,7 +270,7 @@ If you do not want the example to be run as part of the automated tests (for exa * ``` -If your example uses external asset files, put them in the [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) folder (or reuse one already in there) then link to them with "assets/filename.ext" in the code. See the [tint()](http://p5js.org/reference/#/p5/tint) reference for example. +If your example uses external asset files, put them in the [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) folder (or reuse one already in there) then link to them with "assets/filename.ext" in the code. See the [tint()](https://p5js.org/reference/p5/tint/) reference for example. ### Add a canvas description using `describe()` @@ -308,7 +308,7 @@ Finally, for every example you add, you are required to use the p5.js function ` * ``` -For more on `describe()` visit the [web accessibility contributor documentation](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions). +For more on `describe()` visit the [web accessibility contributor documentation](./web_accessibility/#describe). With all the above you should have most of the tools needed to write and edit p5.js reference comments. However, there are a few more specialized usage of JSDoc style reference comments that you may come across in p5.js. These are situationally useful and not something that you need often. @@ -412,5 +412,5 @@ This will launch a live preview of the rendered reference that will update each For additional details about the reference system, you can checkout the documentation for [JSDoc](https://jsdoc.app/) and [YUIDoc](https://yui.github.io/yuidoc/). -For examples of issues related to the reference, have a look at [#6519](https://github.com/processing/p5.js/issues/6519) and [#6045](https://github.com/processing/p5.js/issues/6045). The [contributor guidelines](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md) document is also a good place to start. +For examples of issues related to the reference, have a look at [#6519](https://github.com/processing/p5.js/issues/6519) and [#6045](https://github.com/processing/p5.js/issues/6045). The [contributor guidelines](./contributor_guidelines.md) document is also a good place to start. diff --git a/contributor_docs/steward_guidelines.md b/contributor_docs/steward_guidelines.md index e4966b953b..466fb9888b 100644 --- a/contributor_docs/steward_guidelines.md +++ b/contributor_docs/steward_guidelines.md @@ -71,7 +71,7 @@ Feature request issues should use the "New Feature Request" issue template. The - If a feature request does not have the "Increasing Access" field sufficiently filled out, you can ask the issue author how the feature increases access. - The access statement of a feature can be provided by a different member of the community, including the issue reviewers. 2. The new feature request can be assessed for inclusion based on the following criteria. - - Does the feature fit into the project scope and [design principles](design_principles.md) of p5.js? + - Does the feature fit into the project scope and [design principles](./contributor_guidelines.md#software-design-principles) of p5.js? - For example, a request to add a new drawing primitive shape may be considered, but a request to adopt a browser-based IOT protocol will likely be out of scope. - Overall, the scope of p5.js should be relatively narrow in order to avoid excessive bloat from rarely used features. - If a feature does not fit into the scope of p5.js, suggest that the issue author implement the feature as as an addon library. @@ -197,7 +197,7 @@ The `lint` task consists of two sub tasks: `lint:source` and `lint:samples`. `li The `lint:samples` task will first run the `yui` task which itself consists of `yuidoc:prod`, `clean:reference`, and `minjson`, which extract the documentation from the source code into a JSON document, remove unused files from the previous step, and minify the generated JSON file into `data.min.json` respectively. -Next in `lint:samples` is `eslint-samples:source`, which is a custom written task whose definition is in [./tasks/build/eslint-samples.js](tasks/build/eslint-samples.js); it will run ESLint to check the documentation example code to make sure they follow the same coding convention as the rest of p5.js (`yui` is run first here because we need the JSON file to be built first before we can lint the examples). +Next in `lint:samples` is `eslint-samples:source`, which is a custom written task whose definition is in [../tasks/build/eslint-samples.js](../tasks/build/eslint-samples.js); it will run ESLint to check the documentation example code to make sure they follow the same coding convention as the rest of p5.js (`yui` is run first here because we need the JSON file to be built first before we can lint the examples). #### `test` Task @@ -223,7 +223,7 @@ grunt.registerTask('build', [ ]); ``` -Tasks that start with `browserify` are defined in [./tasks/build/browserify.js](tasks/build/browserify.js). They all similar steps with minor differences. These are the main steps to build the full p5.js library from its many source code files into one: +Tasks that start with `browserify` are defined in [../tasks/build/browserify.js](../tasks/build/browserify.js). They all similar steps with minor differences. These are the main steps to build the full p5.js library from its many source code files into one: - `browserify` builds p5.js while `browserify:min` builds an intermediate file to be minified in the next step. The difference between `browserify` and `browserify:min` is that `browserify:min` does not contain data needed for FES to function. - `uglify` takes the output file of `browserify:min` and minify it into the final p5.min.js (configuration of this step is in the main Gruntfile.js). @@ -247,7 +247,7 @@ This step spins up a local server hosting the test files and built source code f mochaChrome ``` -This step is defined in [./tasks/test/mocha-chrome.js](tasks/test/mocha-chrome.js). It uses Puppeteer to spin up a headless version of Chrome that can be remote controlled and runs the tests associated with the HTML files in the `./test` folder, which includes testing the unminified and minified version of the library against the unit test suites as well as testing all reference examples. +This step is defined in [../tasks/test/mocha-chrome.js](../tasks/test/mocha-chrome.js). It uses Puppeteer to spin up a headless version of Chrome that can be remote controlled and runs the tests associated with the HTML files in the `./test` folder, which includes testing the unminified and minified version of the library against the unit test suites as well as testing all reference examples. ``` mochaTest diff --git a/contributor_docs/web_accessibility.md b/contributor_docs/web_accessibility.md index 5257d8f07b..6319739f07 100644 --- a/contributor_docs/web_accessibility.md +++ b/contributor_docs/web_accessibility.md @@ -6,7 +6,7 @@ This document describes the structure of p5.js’ web accessibility features for If you want to make your sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader)-accessible, visit the How to label your p5.js code tutorial. -If you want to use p5.js with a screen reader, visit the [Using p5.js with a Screen Reader tutorial](https://p5js.org/learn/p5-screen-reader.html). +If you want to use p5.js with a screen reader, visit the [Using p5.js with a Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader). The canvas HTML element is a grid of pixels. It doesn’t provide any screen reader-accessible information about the shapes drawn on it. p5.js has several functions that make the canvas more accessible to screen readers by providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions. I’ll describe some of the details around the implementation of these functions. diff --git a/contributor_docs/webgl_contribution_guide.md b/contributor_docs/webgl_contribution_guide.md index c7bc2ab331..8dcc80bab6 100644 --- a/contributor_docs/webgl_contribution_guide.md +++ b/contributor_docs/webgl_contribution_guide.md @@ -8,7 +8,7 @@ If you're reading this page, you're probably interested in helping work on WebGL ## Resources - Read our [p5.js WebGL architecture overview](webgl_mode_architecture.md) to understand how WebGL mode differs from 2D mode. This will be a valuable reference for some implementation specifics for shaders, strokes, and more. -- Read our [contributor guidelines](https://p5js.org/contributor-docs/#/./contributor_guidelines) for information on how to create issues, set up the codebase, and test changes. +- Read our [contributor guidelines](./contributor_guidelines) for information on how to create issues, set up the codebase, and test changes. - It can be helpful to know a bit about the browser's WebGL API, which is what p5.js's WebGL mode is built on top of: - [WebGL fundamentals](https://webglfundamentals.org/) goes over many core rendering concepts - [The Book of Shaders](https://thebookofshaders.com/) explains many techniques used in WebGL shaders diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 77dea3b48b..3801d1e146 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -953,11 +953,11 @@ p5.prototype.hue = function(c) { * values. 0 is equal to the first color, 0.1 is very near the first color, * 0.5 is halfway between the two colors, and so on. Negative numbers are set * to 0. Numbers greater than 1 are set to 1. This differs from the behavior of - * lerp. It's necessary because numbers outside of the + * lerp. It's necessary because numbers outside of the * interval [0, 1] will produce strange and unexpected colors. * * The way that colors are interpolated depends on the current - * colorMode(). + * colorMode(). * * @method lerpColor * @param {p5.Color} c1 interpolate from this color. diff --git a/src/core/friendly_errors/fes_core.js b/src/core/friendly_errors/fes_core.js index bd6ed609b6..f78fd957ce 100644 --- a/src/core/friendly_errors/fes_core.js +++ b/src/core/friendly_errors/fes_core.js @@ -145,8 +145,8 @@ if (typeof IS_MINIFIED !== 'undefined') { //Whenever func having p5.[Class] is encountered, we need to have the error link as mentioned below else different link funcName.startsWith('p5.') ? - msgWithReference = `${message} (http://p5js.org/reference/#/${referenceSection}.${funcName})` : - msgWithReference = `${message} (http://p5js.org/reference/#/${referenceSection}/${funcName})`; + msgWithReference = `${message} (http://p5js.org/reference/${referenceSection}.${funcName})` : + msgWithReference = `${message} (http://p5js.org/reference/${referenceSection}/${funcName})`; } return msgWithReference; }; @@ -777,7 +777,7 @@ if (typeof IS_MINIFIED !== 'undefined') { // if the flow gets this far, this is likely not a misspelling // of a p5 property/function - let url = 'https://p5js.org/examples/data-variable-scope.html'; + let url = 'https://p5js.org/tutorials/variables-and-change/'; p5._friendlyError( translator('fes.globalErrors.reference.notDefined', { url, diff --git a/src/core/friendly_errors/sketch_reader.js b/src/core/friendly_errors/sketch_reader.js index 0924bd8a85..01e0076edc 100644 --- a/src/core/friendly_errors/sketch_reader.js +++ b/src/core/friendly_errors/sketch_reader.js @@ -67,7 +67,7 @@ if (typeof IS_MINIFIED !== 'undefined') { //if the element in variableArray is a p5.js constant then the below condidion //will be true, hence a match is found if (constants[variableArray[i]] !== undefined) { - let url = `https://p5js.org/reference/#/p5/${variableArray[i]}`; + let url = `https://p5js.org/reference/p5/${variableArray[i]}`; //display the FES message if a match is found p5._friendlyError( translator('fes.sketchReaderErrors.reservedConst', { @@ -100,7 +100,7 @@ if (typeof IS_MINIFIED !== 'undefined') { undefined ) { //if a p5.js function is used ie it is in the funcs array - let url = `https://p5js.org/reference/#/p5/${variableArray[i]}`; + let url = `https://p5js.org/reference/p5/${variableArray[i]}`; p5._friendlyError( translator('fes.sketchReaderErrors.reservedFunc', { url, @@ -296,7 +296,7 @@ if (typeof IS_MINIFIED !== 'undefined') { //if the value is changed and if it is changed //then report. if (constants[tempArray[i]] !== element) { - let url = `https://p5js.org/reference/#/p5/${tempArray[i]}`; + let url = `https://p5js.org/reference/p5/${tempArray[i]}`; p5._friendlyError( translator('fes.sketchReaderErrors.reservedConst', { url, @@ -354,7 +354,7 @@ if (typeof IS_MINIFIED !== 'undefined') { p5Constructors[keyArray[k]].prototype[functionArray[i]] !== element ) { - let url = `https://p5js.org/reference/#/p5/${functionArray[i]}`; + let url = `https://p5js.org/reference/p5/${functionArray[i]}`; p5._friendlyError( translator('fes.sketchReaderErrors.reservedFunc', { url, diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 1e7506558b..ac41b13411 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -532,42 +532,6 @@ class Renderer2D extends p5.Renderer { // SHAPE | 2D Primitives ////////////////////////////////////////////// - /** - * Generate a cubic Bezier representing an arc on the unit circle of total - * angle `size` radians, beginning `start` radians above the x-axis. Up to - * four of these curves are combined to make a full arc. - * - * See ecridge.com/bezier.pdf for an explanation of the method. - */ - _acuteArcToBezier( - start, - size - ) { - // Evaluate constants. - const alpha = size / 2.0, - cos_alpha = Math.cos(alpha), - sin_alpha = Math.sin(alpha), - cot_alpha = 1.0 / Math.tan(alpha), - // This is how far the arc needs to be rotated. - phi = start + alpha, - cos_phi = Math.cos(phi), - sin_phi = Math.sin(phi), - lambda = (4.0 - cos_alpha) / 3.0, - mu = sin_alpha + (cos_alpha - lambda) * cot_alpha; - - // Return rotated waypoints. - return { - ax: Math.cos(start).toFixed(7), - ay: Math.sin(start).toFixed(7), - bx: (lambda * cos_phi + mu * sin_phi).toFixed(7), - by: (lambda * sin_phi - mu * cos_phi).toFixed(7), - cx: (lambda * cos_phi - mu * sin_phi).toFixed(7), - cy: (lambda * sin_phi + mu * cos_phi).toFixed(7), - dx: Math.cos(start + size).toFixed(7), - dy: Math.sin(start + size).toFixed(7) - }; - } - /* * This function requires that: * @@ -577,64 +541,51 @@ class Renderer2D extends p5.Renderer { */ arc(x, y, w, h, start, stop, mode) { const ctx = this.drawingContext; - const rx = w / 2.0; - const ry = h / 2.0; - const epsilon = 0.00001; // Smallest visible angle on displays up to 4K. - let arcToDraw = 0; - const curves = []; - - x += rx; - y += ry; - - // Create curves - while (stop - start >= epsilon) { - arcToDraw = Math.min(stop - start, constants.HALF_PI); - curves.push(this._acuteArcToBezier(start, arcToDraw)); - start += arcToDraw; - } - // Fill curves + const centerX = x + w / 2, + centerY = y + h / 2, + radiusX = w / 2, + radiusY = h / 2; + + // Determines whether to add a line to the center, which should be done + // when the mode is PIE or default; as well as when the start and end + // angles do not form a full circle. + const createPieSlice = ! ( + mode === constants.CHORD || + mode === constants.OPEN || + (stop - start) % constants.TWO_PI === 0 + ); + + // Fill if (this._doFill) { if (!this._clipping) ctx.beginPath(); - curves.forEach((curve, index) => { - if (index === 0) { - ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry); - } - /* eslint-disable indent */ - ctx.bezierCurveTo(x + curve.bx * rx, y + curve.by * ry, - x + curve.cx * rx, y + curve.cy * ry, - x + curve.dx * rx, y + curve.dy * ry); - /* eslint-enable indent */ - }); - if (mode === constants.PIE || mode == null) { - ctx.lineTo(x, y); - } + ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop); + if (createPieSlice) ctx.lineTo(centerX, centerY); ctx.closePath(); if (!this._clipping) ctx.fill(); } - // Stroke curves + // Stroke if (this._doStroke) { if (!this._clipping) ctx.beginPath(); - curves.forEach((curve, index) => { - if (index === 0) { - ctx.moveTo(x + curve.ax * rx, y + curve.ay * ry); - } - /* eslint-disable indent */ - ctx.bezierCurveTo(x + curve.bx * rx, y + curve.by * ry, - x + curve.cx * rx, y + curve.cy * ry, - x + curve.dx * rx, y + curve.dy * ry); - /* eslint-enable indent */ - }); - if (mode === constants.PIE) { - ctx.lineTo(x, y); - ctx.closePath(); - } else if (mode === constants.CHORD) { + ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop); + + if (mode === constants.PIE && createPieSlice) { + // In PIE mode, stroke is added to the center and back to path, + // unless the pie forms a complete ellipse (see: createPieSlice) + ctx.lineTo(centerX, centerY); + } + + if (mode === constants.PIE || mode === constants.CHORD) { + // Stroke connects back to path begin for both PIE and CHORD ctx.closePath(); } + if (!this._clipping) ctx.stroke(); } + return this; + } ellipse(args) { @@ -661,6 +612,7 @@ class Renderer2D extends p5.Renderer { if (!this._clipping) ctx.beginPath(); ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI); + ctx.closePath(); if (!this._clipping && doFill) { ctx.fill(); @@ -804,14 +756,7 @@ class Renderer2D extends p5.Renderer { bl = hh; } - // Draw shape - if (!this._clipping) ctx.beginPath(); - ctx.moveTo(x + tl, y); - ctx.arcTo(x + w, y, x + w, y + h, tr); - ctx.arcTo(x + w, y + h, x, y + h, br); - ctx.arcTo(x, y + h, x, y, bl); - ctx.arcTo(x, y, x + w, y, tl); - ctx.closePath(); + ctx.roundRect(x, y, w, h, [tl, tr, br, bl]); } if (!this._clipping && this._doFill) { ctx.fill(); diff --git a/src/core/rendering.js b/src/core/rendering.js index e2a80ea393..de8690afcc 100644 --- a/src/core/rendering.js +++ b/src/core/rendering.js @@ -1158,11 +1158,13 @@ p5.prototype.clearDepth = function(depth) { *
* * function setup() { - * createCanvas(100, 100); + * // Create a canvas with WEBGL mode. + * createCanvas(100, 100, WEBGL); * + * // Set the background color. * background(200); * - * // Set the blend mode. + * // Set the blend mode to SUBTRACT. * blendMode(SUBTRACT); * * // Style the lines. @@ -1170,11 +1172,11 @@ p5.prototype.clearDepth = function(depth) { * * // Draw the blue line. * stroke('blue'); - * line(25, 25, 75, 75); + * line(-25, -25, 25, 25); * * // Draw the red line. * stroke('red'); - * line(75, 25, 25, 75); + * line(25, -25, -25, 25); * * describe('A yellow line and a turquoise line form an X on a gray background. The area where they overlap is green.'); * }