` tag, you will insert the relevant example code. The basic principle of writing good example code for the reference is to keep things simple and minimal. The example should be meaningful and explain how the feature works without being too complicated. The example’s canvas should be 100x100 pixels and if the `setup()` function is not included, such as in the example above, the code will be automatically wrapped in a `setup()` function with a default 100x100 pixels gray background canvas created. We won’t go through the details about best practices and code style for the example code here; please see the reference style guide instead.
You can have multiple examples for one feature.To do so, add an additional `` and `
` HTML block right after the first closed, separated by a blank line.
@@ -235,7 +235,7 @@ You can have multiple examples for one feature.To do so, add an additional `
*
-*
+*
*
*
* arc(50, 50, 80, 80, 0, PI, OPEN);
@@ -262,8 +262,8 @@ If you do not want the example to be run as part of the automated tests (for exa
* @example
*
* function setup() {
-* let c = createCanvas(100, 100);
-* saveCanvas(c, 'myCanvas', 'jpg');
+* let c = createCanvas(100, 100);
+* saveCanvas(c, 'myCanvas', 'jpg');
* }
*
```
@@ -273,7 +273,7 @@ If your example uses external asset files, put them in the [/docs/yuidoc-p5-them
### Add a canvas description using `describe()`
-Finally, for every example you add, you are required to use the p5.js function `describe()` in the example to create a screen-reader accessible description for the canvas. Include only one parameter: a string with a brief description of what is happening on the canvas.
+Finally, for every example you add, you are required to use the p5.js function `describe()` in the example to create a screen-reader accessible description for the canvas. Include only one parameter: a string with a brief description of what is happening on the canvas.
```
* @example
@@ -281,26 +281,26 @@ Finally, for every example you add, you are required to use the p5.js function `
*
* let xoff = 0.0;
* function draw() {
-* background(204);
-* xoff = xoff + 0.01;
-* let n = noise(xoff) * width;
-* line(n, 0, n, height);
-* describe('A vertical line moves randomly from left to right.');
+* background(204);
+* xoff = xoff + 0.01;
+* let n = noise(xoff) * width;
+* line(n, 0, n, height);
+* describe('A vertical line moves randomly from left to right.');
* }
*
*
*
* let noiseScale = 0.02;
* function draw() {
-* background(0);
-* for (let x = 0; x < width; x += 1) {
-* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
-* stroke(noiseVal*255);
-* line(x, mouseY + noiseVal * 80, x, height);
-* }
-* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
+* background(0);
+* for (let x = 0; x < width; x += 1) {
+* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+* stroke(noiseVal*255);
+* line(x, mouseY + noiseVal * 80, x, height);
+* }
+* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
* }
*
*
@@ -315,15 +315,15 @@ With all the above you should have most of the tools needed to write and edit p5
You can use the `@private` if a property or variable is a private function or variable. If a feature is marked as `@private` it will not be included as part of the rendered reference on the website. The reason to use the `@private` tag to mark a reference comments block as private is when you document internal features for the library itself. For example, see the reference comments for `_start` below:
-
+
```
/**
- * _start calls preload() setup() and draw()
- *
- * @method _start
- * @private
- */
+ * _start calls preload() setup() and draw()
+ *
+ * @method _start
+ * @private
+ */
p5.prototype._start = function () {
```
@@ -338,12 +338,12 @@ The `@requires` tag defines the required imported modules that the current modul
```
/**
- * @module Color
- * @submodule Creating & Reading
- * @for p5
- * @requires core
- * @requires constants
- */
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
```
The convention p5.js follows is that each subfolder in the `src/` folder will be one `@module` while each file inside the subfolder will be its own `@submodule` under the overall subfolder’s `@module`. Unless you are adding new subfolders/files to the p5.js source code, you shouldn’t need to edit this reference comments block.
@@ -355,31 +355,31 @@ Class constructors are defined with the `@class` tag and the `@constructor` tag.
```
/**
- * A class to describe a color. Each `p5.Color` object stores the color mode
- * and level maxes that were active during its construction. These values are
- * used to interpret the arguments passed to the object's constructor. They
- * also determine output formatting such as when
- * saturation() is called.
- *
- * Color is stored internally as an array of ideal RGBA values in floating
- * point form, normalized from 0 to 1. These values are used to calculate the
- * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
- * are sent to the renderer.
- *
- * When different color representations are calculated, the results are cached
- * for performance. These values are normalized, floating-point numbers.
- *
- * color() is the recommended way to create an instance
- * of this class.
- *
- * @class p5.Color
- * @constructor
- * @param {p5} [pInst] pointer to p5 instance.
- *
- * @param {Number[]|String} vals an array containing the color values
- * for red, green, blue and alpha channel
- * or CSS color.
- */
+ * A class to describe a color. Each `p5.Color` object stores the color mode
+ * and level maxes that were active during its construction. These values are
+ * used to interpret the arguments passed to the object's constructor. They
+ * also determine output formatting such as when
+ * saturation() is called.
+ *
+ * Color is stored internally as an array of ideal RGBA values in floating
+ * point form, normalized from 0 to 1. These values are used to calculate the
+ * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+ * are sent to the renderer.
+ *
+ * When different color representations are calculated, the results are cached
+ * for performance. These values are normalized, floating-point numbers.
+ *
+ * color() is the recommended way to create an instance
+ * of this class.
+ *
+ * @class p5.Color
+ * @constructor
+ * @param {p5} [pInst] pointer to p5 instance.
+ *
+ * @param {Number[]|String} vals an array containing the color values
+ * for red, green, blue and alpha channel
+ * or CSS color.
+ */
```
@@ -387,7 +387,7 @@ Class constructors are defined with the `@class` tag and the `@constructor` tag.
The p5.js repository is set up so that you can generate and preview the reference without needing to build and run the p5.js website as well.
-- The main command to generate the reference from the reference comments in the source code is to run the following command.
+- The main command to generate the reference from the reference comments in the source code is to run the following command.
```
npm run docs
diff --git a/contributor_docs/creating_libraries.md b/contributor_docs/creating_libraries.md
index 0974213ae2..841d1e23c9 100644
--- a/contributor_docs/creating_libraries.md
+++ b/contributor_docs/creating_libraries.md
@@ -32,7 +32,7 @@ The main way to extend p5.js is by adding methods to the p5.prototype object. Fo
```js
p5.prototype.loadCSV = function(){
- console.log('I will load a CSV file soon!');
+ console.log('I will load a CSV file soon!');
};
```
@@ -42,7 +42,7 @@ You can also extend p5.js classes such as` p5.Element` or` p5.Graphics` by addin
```js
p5.Element.prototype.shout = function () {
- this.elt.innerHTML += '!';
+ this.elt.innerHTML += '!';
};
```
@@ -53,23 +53,23 @@ You now have a p5.loadcsv.js file with one method attached to the `p5.prototype`
```js
function setup() {
- createCanvas(400, 400);
- loadCSV();
+ createCanvas(400, 400);
+ loadCSV();
}
```
```html
-
-
+
+
-
-
+
+
-
-
-
-
+
+
+
+
```
@@ -83,20 +83,20 @@ To load a CSV file with your `loadCSV()` function, the function needs to accept
```js
p5.prototype.loadCSV = function (filename) {
- console.log(`I will load the CSV file ${filename} soon!`);
+ console.log(`I will load the CSV file ${filename} soon!`);
};
```
-
+
In our test sketch, we can use it like so:
```js
function setup() {
- createCanvas(400, 400);
+ createCanvas(400, 400);
- // Prints "I will load the CSV file data.csv soon!" to the console.
- loadCSV('data.csv');
+ // Prints "I will load the CSV file data.csv soon!" to the console.
+ loadCSV('data.csv');
}
```
@@ -111,17 +111,17 @@ You can access p5.js functions and variables such as `circle()` and `PI` in your
```js
p5.prototype.loadCSV = (filename) => {
- // this === window is true because
- // "this" refers to the window object.
- // This is almost never what you want.
- console.log(this === window);
+ // this === window is true because
+ // "this" refers to the window object.
+ // This is almost never what you want.
+ console.log(this === window);
};
p5.prototype.loadCSV = function (filename) {
- // Prints 'I will load the CSV file data.csv at 10:30'
- // to the console.
- console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute()}!`);
+ // Prints 'I will load the CSV file data.csv at 10:30'
+ // to the console.
+ console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute()}!`);
};
```
@@ -136,19 +136,19 @@ First make the following changes to your `loadCSV()` method:
```js
p5.prototype.loadCSV = function(filename){
- console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute}!`);
+ console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute}!`);
- let result = [];
+ let result = [];
- fetch(filename)
- .then((res) => res.text())
- .then((data) => {
- data.split('\n').forEach((line) => {
- result.push(line.split(','));
- });
- });
+ fetch(filename)
+ .then((res) => res.text())
+ .then((data) => {
+ data.split('\n').forEach((line) => {
+ result.push(line.split(','));
+ });
+ });
- return result;
+ return result;
};
```
@@ -158,9 +158,9 @@ Now, when you run the sketch, pass a file path to a simple CSV file to your `loa
```js
function setup(){
- createCanvas(400, 400);
- let myCSV = loadCSV('data.csv');
- print(myCSV);
+ createCanvas(400, 400);
+ let myCSV = loadCSV('data.csv');
+ print(myCSV);
}
```
@@ -172,12 +172,12 @@ Simply moving where you call `loadCSV()` to `preload()` in this case is not enou
let myCSV;
function preload(){
- myCSV = loadCSV('data.csv');
+ myCSV = loadCSV('data.csv');
}
function setup(){
- createCanvas(400, 400);
- print(myCSV); // Still prints []
+ createCanvas(400, 400);
+ print(myCSV); // Still prints []
}
```
@@ -185,21 +185,21 @@ p5 will need to be told that the addon’s `loadCSV()` function is something it
```js
p5.prototype.loadCSV = function (filename){
- console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute}!`);
+ console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute}!`);
- let result = [];
+ let result = [];
- fetch(filename)
- .then((res) => res.text())
- .then((data) => {
- data.split('\n').forEach((line) => {
- result.push(line.split(','));
- });
+ fetch(filename)
+ .then((res) => res.text())
+ .then((data) => {
+ data.split('\n').forEach((line) => {
+ result.push(line.split(','));
+ });
- this._decrementPreload();
- });
+ this._decrementPreload();
+ });
- return result;
+ return result;
};
p5.prototype.registerPreloadMethod('loadCSV', p5.prototype);
@@ -245,13 +245,13 @@ To create an action hook, you can use the snippet below.
```js
p5.prototype.doRemoveStuff = function (){
- // Addon library related cleanup
+ // Addon library related cleanup
};
p5.prototype.registerMethod("remove", p5.prototype.doRemoveStuff);
p5.prototype.setDefaultBackground = function(){
- // Set background to be p5 pink by default
- this.background("#ed225d");
+ // Set background to be p5 pink by default
+ this.background("#ed225d");
};
p5.prototype.registerMethod("pre", p5.prototype.setDefaultBackground);
```
diff --git a/contributor_docs/design_principles.md b/contributor_docs/design_principles.md
deleted file mode 100644
index a32d23d1c2..0000000000
--- a/contributor_docs/design_principles.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Design principles for p5.js
-
-- **Beginner Friendly** The p5.js API aims to be friendly to beginner coders, offering a low barrier to creating interactive and visual web content with cutting-edge HTML5/canvas/DOM APIs.
-
-- **Educational** p5.js is focused on an API and curriculum that supports educational use, including a complete reference to the API with supporting examples, as well as tutorials and sample class curricula that introduces core creative coding principles in a clear and engaging order.
-
-- **JavaScript and its community** p5.js aims to make web development practices more accessible to beginners by modeling proper JavaScript design patterns and usage, while abstracting them where necessary. As an open source library, p5.js also includes the wider JavaScript community in its creation, documentation and dissemination.
-
-- **Processing and its community** p5.js is a direct response to the Processing language and its community, and aims to make the transition from Processing to JavaScript easy and clear. Supporting the Processing API and community is a priority for p5.js, while also expanding to include the new possibilities of creative coding on the web, and taking a Processing-style approach to exposing that API to beginners.
-
diff --git a/contributor_docs/es/contributing_to_the_p5.js_reference.md b/contributor_docs/es/contributing_to_the_p5.js_reference.md
index 7180ddd000..e1dc00139c 100644
--- a/contributor_docs/es/contributing_to_the_p5.js_reference.md
+++ b/contributor_docs/es/contributing_to_the_p5.js_reference.md
@@ -10,57 +10,57 @@ Cuando mires el código fuente de p5.js, verás que muchas líneas en la bibliot
```
/**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * angleMode.
- *
- * @method sin
- * @param {Number} angle the angle.
- * @return {Number} sine of the angle.
- *
- * @example
- *
- *
- * function draw() {
- * background(200);
- *
- * let t = frameCount;
- * let x = 50;
- * let y = 30 * sin(t * 0.05) + 50;
- * line(x, 50, x, y);
- * circle(x, y, 20);
- *
- * describe('A white ball on a string oscillates up and down.');
- * }
- *
- *
- *
- *
- *
- * function draw() {
- * let x = frameCount;
- * let y = 30 * sin(x * 0.1) + 50;
- * point(x, y);
- *
- * describe('A series of black dots form a wave pattern.');
- * }
- *
- *
- *
- *
- *
- * function draw() {
- * let t = frameCount;
- * let x = 30 * cos(t * 0.1) + 50;
- * let y = 10 * sin(t * 0.2) + 50;
- * point(x, y);
- *
- * describe('A series of black dots form an infinity symbol.');
- * }
- *
- *
- */
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * angleMode.
+ *
+ * @method sin
+ * @param {Number} angle the angle.
+ * @return {Number} sine of the angle.
+ *
+ * @example
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let t = frameCount;
+ * let x = 50;
+ * let y = 30 * sin(t * 0.05) + 50;
+ * line(x, 50, x, y);
+ * circle(x, y, 20);
+ *
+ * describe('A white ball on a string oscillates up and down.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * let x = frameCount;
+ * let y = 30 * sin(x * 0.1) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form a wave pattern.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * let t = frameCount;
+ * let x = 30 * cos(t * 0.1) + 50;
+ * let y = 10 * sin(t * 0.2) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form an infinity symbol.');
+ * }
+ *
+ *
+ */
```
Por lo general, estos comentarios están seguidos del código JavaScript real que define a la función. Los comentarios de referencia siempre comienzan con `/**` y terminan con `*/`, con cada línea entre los dos con `*` al inicio.
@@ -73,18 +73,18 @@ Desglosemos el bloque de comentarios de referencia anterior para la función `si
```
/**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * angleMode.
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * angleMode.
```
En la parte superior del comentario está la descripción textual de la función. Esta descripción puede contener tanto sintaxis de markdown como HTML. La descripción debe ser concisa y describir qué hace la función y, si es necesario, algunos detalles sobre sus peculiaridades o comportamientos.
```
* @method sin
- * @param {Number} angle the angle.
- * @return {Number} sine of the angle.
+ * @param {Number} angle the angle.
+ * @return {Number} sine of the angle.
```
Una función normalmente tendrá las tres secciones anteriores, cada una comenzando con el símbolo `@` seguido de una de las siguientes palabras clave:
@@ -140,18 +140,18 @@ Si una función tiene múltiples opciones de parámetros posibles, puedes especi
```
/**
- * @method background
- * @param {String} colorstring color string, possible formats include: integer
- * rgb() or rgba(), percentage rgb() or rgba(),
- * 3-digit hex, 6-digit hex
- * @param {Number} [a] alpha value
- */
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ * rgb() or rgba(), percentage rgb() or rgba(),
+ * 3-digit hex, 6-digit hex
+ * @param {Number} [a] alpha value
+ */
/**
- * @method background
- * @param {Number} gray specifies a value between white and black
- * @param {Number} [a]
- */
+ * @method background
+ * @param {Number} gray specifies a value between white and black
+ * @param {Number} [a]
+ */
```
### Información adicional: Múltiples firmas
@@ -164,27 +164,27 @@ Hasta ahora hemos visto cómo escribir referencias para funciones y constantes.
```
/**
- * The system variable mouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the canvas. The value at
- * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
- * If touch is used instead of mouse input, mouseX will hold the x value
- * of the most recent touch point.
- *
- * @property {Number} mouseX
- * @readOnly
- *
- * @example
- *
- *
- * // Move the mouse across the canvas
- * function draw() {
- * background(244, 248, 252);
- * line(mouseX, 0, mouseX, 100);
- * describe('horizontal black line moves left and right with mouse x-position');
- * }
- *
- *
- */
+ * The system variable mouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseX will hold the x value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseX
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(mouseX, 0, mouseX, 100);
+ * describe('horizontal black line moves left and right with mouse x-position');
+ * }
+ *
+ *
+ */
```
El inicio del bloque contiene la descripción de la variable (`mouseX` en este caso). Para definir el nombre de la variable usamos `@property` en lugar de `@method`. `@property` sigue la misma sintaxis que `@param` para definir el tipo y su nombre. La etiqueta `@readonly` está presente en la mayoría de las variables de p5.js y se utiliza internamente para indicar que dicho valor no debe ser sobrescrito directamente por un usuario de la biblioteca.
@@ -199,20 +199,20 @@ El código con la etiqueta `@example` que crea el ejemplo anterior es el siguien
```
* @example
- *
- *
- * const c = color(255, 204, 0);
- * fill(c);
- * rect(15, 20, 35, 60);
- * // Sets 'redValue' to 255.
- * const redValue = red(c);
- * fill(redValue, 0, 0);
- * rect(50, 20, 35, 60);
- * describe(
- * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
- * );
- *
- *
+ *
+ *
+ * const c = color(255, 204, 0);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'redValue' to 255.
+ * const redValue = red(c);
+ * fill(redValue, 0, 0);
+ * rect(50, 20, 35, 60);
+ * describe(
+ * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
+ * );
+ *
+ *
```
Después de la etiqueta `@example`, debes comenzar con una etiqueta HTML `` seguida de una etiqueta `
`. Entre la etiqueta `` de apertura y cierre, insertarás el ejemplo de código en cuestión. El principio básico para escribir un buen ejemplo de código para la referencia es mantener las cosas simples y mínimas. El ejemplo debe ser significativo y explicar cómo funciona la función, valga la redundancia, sin ser demasiado complicado. El lienzo para el ejemplo debe ser de 100x100 pixeles y si la función `setup()` no está incluida, como en el ejemplo anterior, el código será envuelto automáticamente en una función `setup()` con un lienzo predeterminado de fondo gris y 100x100 píxeles. No entraremos aquí en detalles sobre buenas prácticas y estilo para los ejemplos de código; consulta la guía de estilo de referencia en su lugar.
@@ -254,8 +254,8 @@ Si no quieres que el ejemplo se ejecute como parte de las pruebas automatizadas
* @example
*
* function setup() {
-* let c = createCanvas(100, 100);
-* saveCanvas(c, 'myCanvas', 'jpg');
+* let c = createCanvas(100, 100);
+* saveCanvas(c, 'myCanvas', 'jpg');
* }
*
```
@@ -272,11 +272,11 @@ Por último, para cada ejemplo que añadas, se requiere que utilices la función
*
* let xoff = 0.0;
* function draw() {
-* background(204);
-* xoff = xoff + 0.01;
-* let n = noise(xoff) * width;
-* line(n, 0, n, height);
-* describe('A vertical line moves randomly from left to right.');
+* background(204);
+* xoff = xoff + 0.01;
+* let n = noise(xoff) * width;
+* line(n, 0, n, height);
+* describe('A vertical line moves randomly from left to right.');
* }
*
*
* let noiseScale = 0.02;
* function draw() {
-* background(0);
-* for (let x = 0; x < width; x += 1) {
-* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
-* stroke(noiseVal*255);
-* line(x, mouseY + noiseVal * 80, x, height);
-* }
-* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
+* background(0);
+* for (let x = 0; x < width; x += 1) {
+* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+* stroke(noiseVal*255);
+* line(x, mouseY + noiseVal * 80, x, height);
+* }
+* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
* }
*
*
- *
- * function draw() {
- * background(200);
- *
- * let t = frameCount;
- * let x = 50;
- * let y = 30 * sin(t * 0.05) + 50;
- * line(x, 50, x, y);
- * circle(x, y, 20);
- *
- * describe('A white ball on a string oscillates up and down.');
- * }
- *
- *
- *
- *
- *
- * function draw() {
- * let x = frameCount;
- * let y = 30 * sin(x * 0.1) + 50;
- * point(x, y);
- *
- * describe('A series of black dots form a wave pattern.');
- * }
- *
- *
- *
- *
- *
- * function draw() {
- * let t = frameCount;
- * let x = 30 * cos(t * 0.1) + 50;
- * let y = 10 * sin(t * 0.2) + 50;
- * point(x, y);
- *
- * describe('A series of black dots form an infinity symbol.');
- * }
- *
- *
- */
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * angleMode.
+ *
+ * @method sin
+ * @param {Number} angle the angle.
+ * @return {Number} sine of the angle.
+ *
+ * @example
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let t = frameCount;
+ * let x = 50;
+ * let y = 30 * sin(t * 0.05) + 50;
+ * line(x, 50, x, y);
+ * circle(x, y, 20);
+ *
+ * describe('A white ball on a string oscillates up and down.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * let x = frameCount;
+ * let y = 30 * sin(x * 0.1) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form a wave pattern.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function draw() {
+ * let t = frameCount;
+ * let x = 30 * cos(t * 0.1) + 50;
+ * let y = 10 * sin(t * 0.2) + 50;
+ * point(x, y);
+ *
+ * describe('A series of black dots form an infinity symbol.');
+ * }
+ *
+ *
+ */
```
레퍼런스 주석 뒤에는 일반적으로 함수를 정의하는 실제 자바스크립트 코드가 뒤따릅니다. 레퍼런스 주석은 항상 `/**`로 시작하고 `*/`로 끝나며, 시작과 끝 사이의 각 라인은 `*`로 시작합니다.
@@ -73,18 +73,18 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
```
/**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * angleMode.
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * angleMode.
```
주석의 맨 위에는 함수의 설명이 텍스트로 작성되어 있습니다. 이 설명에는 마크다운 구문과 HTML이 모두 포함될 수 있어요. 설명은 간결하게 작성되어야 하며, 필요하다면 함수의 특이사항이나 작동 방식에 관한 세부 내용을 추가하여 함수가 어떤 일을 하는지 최대한 잘 설명해야 합니다.
```
* @method sin
- * @param {Number} angle the angle.
- * @return {Number} sine of the angle.
+ * @param {Number} angle the angle.
+ * @return {Number} sine of the angle.
```
함수에 대한 주석은 일반적으로 위 세 개의 섹션을 포함하는데, 각각 `@` 기호 뒤에 다음 중 하나의 키워드가 따라옵니다.
@@ -140,18 +140,18 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
```
/**
- * @method background
- * @param {String} colorstring color string, possible formats include: integer
- * rgb() or rgba(), percentage rgb() or rgba(),
- * 3-digit hex, 6-digit hex
- * @param {Number} [a] alpha value
- */
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ * rgb() or rgba(), percentage rgb() or rgba(),
+ * 3-digit hex, 6-digit hex
+ * @param {Number} [a] alpha value
+ */
/**
- * @method background
- * @param {Number} gray specifies a value between white and black
- * @param {Number} [a]
- */
+ * @method background
+ * @param {Number} gray specifies a value between white and black
+ * @param {Number} [a]
+ */
```
### 더 알아보기: 다중 시그니처
@@ -164,27 +164,27 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
```
/**
- * The system variable mouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the canvas. The value at
- * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
- * If touch is used instead of mouse input, mouseX will hold the x value
- * of the most recent touch point.
- *
- * @property {Number} mouseX
- * @readOnly
- *
- * @example
- *
- *
- * // Move the mouse across the canvas
- * function draw() {
- * background(244, 248, 252);
- * line(mouseX, 0, mouseX, 100);
- * describe('horizontal black line moves left and right with mouse x-position');
- * }
- *
- *
- */
+ * The system variable mouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseX will hold the x value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseX
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * // Move the mouse across the canvas
+ * function draw() {
+ * background(244, 248, 252);
+ * line(mouseX, 0, mouseX, 100);
+ * describe('horizontal black line moves left and right with mouse x-position');
+ * }
+ *
+ *
+ */
```
블록의 시작 부분에는 변수의 설명이 작성되어 있습니다(이 예시에서는 `mouseX`). 변수의 이름을 정의하기 위해, `@method` 대신 `@property`를 사용합니다. `@property`는 `@params`와 같은 방식으로 타입과 이름을 정의할 수 있습니다. `@readonly` 태그는 대부분의 p5.js 변수에 설정되어 있으며, 사용자에 의해 값이 덮어씌워지지 않아야 함을 내부적으로 나타내기 위해 사용됩니다.
@@ -199,20 +199,20 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
```
* @example
- *
- *
- * const c = color(255, 204, 0);
- * fill(c);
- * rect(15, 20, 35, 60);
- * // Sets 'redValue' to 255.
- * const redValue = red(c);
- * fill(redValue, 0, 0);
- * rect(50, 20, 35, 60);
- * describe(
- * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
- * );
- *
- *
+ *
+ *
+ * const c = color(255, 204, 0);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'redValue' to 255.
+ * const redValue = red(c);
+ * fill(redValue, 0, 0);
+ * rect(50, 20, 35, 60);
+ * describe(
+ * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
+ * );
+ *
+ *
```
`@example` 태그 다음에는 HTML `` 태그가 시작되고, 그 다음에 `` 태그가 뒤따라옵니다. 그리고 열린 `` 태그와 닫힌 `` 태그 사이에, 예제 코드를 작성하면 됩니다. 좋은 예제 코드를 작성하기 위한 기본 원칙은 가능한 단순하고 작게 작성하는 겁니다. 예제는 의미가 있어야 하고, 기능이 어떻게 작동하는지 너무 복잡하지 않게 설명할 수 있어야 합니다. 예제의 캔버스는 100x100 픽셀의 크기를 가져야 합니다. 만약 위의 예제와 같이 `setup()` 함수가 작성되지 않은 경우라면, 100x100 픽셀 크기의 회색 배경 캔버스를 만드는 `setup()` 함수가 자동으로 래핑(wrapping)됩니다. 예제 코드에 대한 모범 사례 및 코드 스타일에 대한 자세한 내용은 여기서 다루지 않습니다. 대신 레퍼런스 스타일 가이드를 참고해 주세요.
@@ -227,7 +227,7 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
* describe('An ellipse created using an arc with its top right open.');
*
*
-*
+*
*
*
* arc(50, 50, 80, 80, 0, PI, OPEN);
@@ -254,8 +254,8 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
* @example
*
* function setup() {
-* let c = createCanvas(100, 100);
-* saveCanvas(c, 'myCanvas', 'jpg');
+* let c = createCanvas(100, 100);
+* saveCanvas(c, 'myCanvas', 'jpg');
* }
*
```
@@ -272,26 +272,26 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
*
* let xoff = 0.0;
* function draw() {
-* background(204);
-* xoff = xoff + 0.01;
-* let n = noise(xoff) * width;
-* line(n, 0, n, height);
-* describe('A vertical line moves randomly from left to right.');
+* background(204);
+* xoff = xoff + 0.01;
+* let n = noise(xoff) * width;
+* line(n, 0, n, height);
+* describe('A vertical line moves randomly from left to right.');
* }
*
*
*
* let noiseScale = 0.02;
* function draw() {
-* background(0);
-* for (let x = 0; x < width; x += 1) {
-* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
-* stroke(noiseVal*255);
-* line(x, mouseY + noiseVal * 80, x, height);
-* }
-* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
+* background(0);
+* for (let x = 0; x < width; x += 1) {
+* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+* stroke(noiseVal*255);
+* line(x, mouseY + noiseVal * 80, x, height);
+* }
+* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
* }
*
*
@@ -307,11 +307,11 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
```
/**
- * _start calls preload() setup() and draw()
- *
- * @method _start
- * @private
- */
+ * _start calls preload() setup() and draw()
+ *
+ * @method _start
+ * @private
+ */
p5.prototype._start = function () {
```
@@ -325,12 +325,12 @@ p5.prototype._start = function () {
```
/**
- * @module Color
- * @submodule Creating & Reading
- * @for p5
- * @requires core
- * @requires constants
- */
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
```
p5.js에서 따르는 규칙은 `src/` 폴더 내의 각 서브폴더가 하나의 `@module`이 되며, 서브폴더 내의 각 파일이 `@module`에 속한 `@submodule`이 된다는 것입니다. p5.js 소스 코드에 새로운 서브폴더나 파일을 추가하지 않는 한, 이 레퍼런스 주석 블록을 편집할 필요가 없습니다.
@@ -341,31 +341,31 @@ p5.js에서 따르는 규칙은 `src/` 폴더 내의 각 서브폴더가 하나
```
/**
- * A class to describe a color. Each `p5.Color` object stores the color mode
- * and level maxes that were active during its construction. These values are
- * used to interpret the arguments passed to the object's constructor. They
- * also determine output formatting such as when
- * saturation() is called.
- *
- * Color is stored internally as an array of ideal RGBA values in floating
- * point form, normalized from 0 to 1. These values are used to calculate the
- * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
- * are sent to the renderer.
- *
- * When different color representations are calculated, the results are cached
- * for performance. These values are normalized, floating-point numbers.
- *
- * color() is the recommended way to create an instance
- * of this class.
- *
- * @class p5.Color
- * @constructor
- * @param {p5} [pInst] pointer to p5 instance.
- *
- * @param {Number[]|String} vals an array containing the color values
- * for red, green, blue and alpha channel
- * or CSS color.
- */
+ * A class to describe a color. Each `p5.Color` object stores the color mode
+ * and level maxes that were active during its construction. These values are
+ * used to interpret the arguments passed to the object's constructor. They
+ * also determine output formatting such as when
+ * saturation() is called.
+ *
+ * Color is stored internally as an array of ideal RGBA values in floating
+ * point form, normalized from 0 to 1. These values are used to calculate the
+ * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+ * are sent to the renderer.
+ *
+ * When different color representations are calculated, the results are cached
+ * for performance. These values are normalized, floating-point numbers.
+ *
+ * color() is the recommended way to create an instance
+ * of this class.
+ *
+ * @class p5.Color
+ * @constructor
+ * @param {p5} [pInst] pointer to p5 instance.
+ *
+ * @param {Number[]|String} vals an array containing the color values
+ * for red, green, blue and alpha channel
+ * or CSS color.
+ */
```
## 레퍼런스 생성과 미리보기
diff --git a/contributor_docs/ko/design_principles.md b/contributor_docs/ko/design_principles.md
deleted file mode 100644
index 35a392b622..0000000000
--- a/contributor_docs/ko/design_principles.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# p5.js 디자인 원칙
-
-- **입문자 친화적인** p5.js API는 코딩 입문자에게 친화적이며, 최신 HTML5/canvas/DOM API로 인터랙티브하고 시각적인 웹 콘텐츠를 만드는 데 낮은 장벽을 제공하는 것을 목적으로 하고 있습니다.
-
-- **교육적인** p5.js는 지원하고 있는 예제들과 API에 대한 완벽한 레퍼런스를 비롯해 명확하고 매력적인 순서로 핵심 크리에이티브 코딩 원칙을 소개하는 튜토리얼과 샘플 클래스 커리큘럼을 제공하고 교육적인 용도로서 API와 커리큘럼에 초점을 맞추고 있습니다.
-
-- **자바스크립트와 커뮤니티** p5.js는 적절한 자바스크립트 디자인 패턴과 사용법을 모델링하고 필요할 경우 추상화하여 입문자가 웹 개발에 좀 더 접근하기 쉽도록 하는 것을 목표로 합니다. p5.js는 오픈소스 라이브러리로서, 창작, 문서화 및 배포에 더 광범위한 자바스크립트 커뮤니티를 포함합니다.
-
-- **프로세싱과 커뮤니티** p5.js는 프로세싱 언어와 커뮤니티에 직접적인 연관이 있으며, 프로세싱에서 자바스크립트로의 전환을 쉽고 명확하게 하는 것을 목표로 합니다. p5.js를 위해 프로세싱 API와 커뮤니티를 지원하는 것을 우선으로 하고 있으며, 웹에서 크리에티브 코딩의 새로운 가능성을 포함하고 확장하며, 해당 API를 입문자에게 노출하는 프로세싱 스타일의 접근 방식을 취하고 있습니다.
diff --git a/contributor_docs/ko/discussions.md b/contributor_docs/ko/discussions.md
deleted file mode 100644
index 67839fa74c..0000000000
--- a/contributor_docs/ko/discussions.md
+++ /dev/null
@@ -1,3 +0,0 @@
-p5 개발 방법에 대해 논의에 참여하는 것은 기여 할 수 있는 좋은 방법입니다. 여러가지 방법이 있지만, 한 가지 좋은 시작점은 기존의 Github의['discussion' 라벨을 가진 이슈](https://github.com/processing/p5.js/labels/discussion)를 확인하고 여러분의 의견을 추가하는 것입니다.
-
-이 하위 섹션의 문서는 이러한 논의를 바탕으로 개발되었습니다. 이곳에서 라이브러리의 현재와 미래 디자인에 대해 아이디어를 수집합니다.
diff --git a/contributor_docs/ko/organization.md b/contributor_docs/ko/organization.md
deleted file mode 100644
index 5de43411b8..0000000000
--- a/contributor_docs/ko/organization.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# 체계적인 기여
-저장소를 체계적으로 유지하면 어떤 토론과 작업이 가장 중요한지 항상 명확히 확인할 수 있습니다. 이를 통해 관리자에서 새로운 기여자까지 모든 사람이 혼란스럽지 않게 저장소를 탐색할 수 있습니다. 이것을 돕기 위해, 우리는 이슈를 정리하고, 작업하고, 풀 리퀘스트하는 방법에 대한 가이드라인이 있습니다.
-
-조직을 돕는 것은 기여하는 좋은 방법이 될 수 있습니다. 만약 버그 리포트에 예제 코드 같은 정보가 누락되었다면 편히 누락된 정보를 요청하십시오. 담당자가 할당된 이슈에 60일 동안 아무 활동이 없다면 그 이슈에 코멘트를 남겨 담당자가 이슈를 계속 처리할 의사가 있는지 확인할 수 있습니다. 태스크를 정리하고 관리하는 일을 도울 때는 언제나 친절하고 항상 커뮤니티 가이드라인을 염두에 두십시오.
-
-
-
-# 조직 가이드라인
-
-## 이슈
-- **모든 버그 리포트는 샘플 코드를 포함해야 합니다**
- - 이슈 본문에 코드를 포함하거나 [온라인 에디터](editor.p5js.org)에서 보기 적합한 코드 예시 링크여도 됩니다.
-- **모든 이슈에는 최소 2개의 라벨이 있어야 합니다**
-- 이렇게 하면 이슈를 훨씬 쉽게 탐색할 수 있습니다.
- - 이 영역(webgl, core, image 등)의 라벨을 추가해 보십시오.
-- **이슈는 희망자에게 먼저 할당됩니다**
- - 버그가 재현되거나 커뮤니티에서 기능 요청/개선에 합의한 경우 그 이슈는 담당자를 할당할 수 있습니다. 이때 "제가 처리할게요!"라고 요청한 첫 번째 컨트리뷰터에게 이슈가 할당될 것입니다.
- - 버그를 재현할 수 없거나 기능 요청/개선 합의가 명확하지 않은 경우라면 이슈를 할당해 달라고 요청하지 마십시오.
-
-## 풀 리퀘스트
-- **모든 풀 리퀘스트는 이슈와 관련있어야 합니다**
- - 버그를 수정하거나 기능을 추가하고 싶다면 먼저 이슈를 등록해서 커뮤니티가 그 점을 논의할 수 있게 합니다.
- - 만약 관련된 이슈가 없는 풀 리퀘스트가 있다면 댓글을 달아서 컨트리뷰터에게 풀 리퀘스트를 열도록 요청하십시오.
-
-
-
-# 의사결정 가이드라인
-
-p5는 의사결정 프로세스가 가능한 투명하고 수평적이기를 희망합니다. 이를 위해 p5는 비공식적 합의추구 모델을 사용하여 의사결정을 합니다. 이것은 우리가 어떤 또는 모든 결정에 대해 커뮤니티의 합의에 도달하는 것을 선호한다는 의미입니다. 만약 이것이 실패하면 그 다음은 투표를 진행합니다.
-
-**스튜어드**는 제안을 거부할 수 있습니다. 이런 상황은 어떤 제안이 미션/커뮤니티 가이드라인과 맞지 않을 때 일어날 수 있습니다. 또는 제안이 그 당시 프로젝트에서 처리할 수 없는 중요한 유지보수나 구현을 제시하는 경우에도 그렇습니다.
-
-변경을 제안하려면 이슈를 여십시오. 비교적 큰 변경이거나 설계 구조를 고려해야 할 정도의 중대한 사안이라면 이슈에 'discussion' 라벨을 붙입니다. 관심 있는 커뮤니티 멤버는 자신의 생각을 알릴 수 있습니다. 상당한 기간이 지난 후(긴급한 경우가 아니면 30일), 관리자는 그 이슈가 관심을 끌고 있는지, 최선의 방식에 대한 합의에 도달했는지를 알아볼 것입니다. 이 시점에서 관리자는 투표를 요청하거나, 이슈를 닫거나, 또는 풀 리퀘스트할 이슈를 열 것입니다. 토론이 끝나기 전에 제출된 풀 리퀘스트는 무시됩니다.
-
-> 향후에는 위의 조직화와 의사결정 프로세스를 자동화하는 것이 좋을 것입니다.
-
-> 위의 항목 중 어느 것이든 봇이나 깃헙 액션으로 자동화하는 방법에 대한 아이디어가 있다면 이를 제안하는 이슈를 자유롭게 여십시오!
-
-
-
-# 스튜어드
-
-스튜어드는 프로젝트의 어떤 부분에 특별히 관련되거나, 익숙하거나, 대응하는 기여자입니다. 그들의 역할은 p5.js 작업을 하는 다른 사람들에게 전후사정을 설명하거나 지침을 제공하는 것입니다. 만약 특정 부분에 기여하는 방법이 궁금하다면 이슈나 풀 리퀘스트에 실린 스튜어드를 태그하면 됩니다. 또한 그들은 커뮤니티의 의견을 고려하여 기능 요청을 검토하고 그 부분의 전반적인 작업 방향을 안내할 수도 있습니다.
-
-관심있는 사람은 누구나 스튜어드로 자원봉사할 수 있습니다! 전문 지식에 대한 구체적인 요구사항은 없습니다. 적극적으로 배우고 참여하는 데 관심이 있으면 됩니다. 이 프로젝트에서 하나 이상의 부분을 잘 안다면 이슈를 열어서 스튜어드로 자원하십시오!
-
-스튜어드가 되면 [README 문서 스튜어드 섹션](https://github.com/processing/p5.js#stewards)에 이름이 올라가며, 삭제 요청이 있기 전까지 남아 있을 것입니다. 장기간 스튜어드의 활동이 없으면 우리는 활동 지속 여부를 물을 수도 있습니다. 잠시 쉬었다 다시 활동해도 됩니다!
diff --git a/contributor_docs/ko/preparing_a_pull_request.md b/contributor_docs/ko/preparing_a_pull_request.md
deleted file mode 100644
index 059191b5a7..0000000000
--- a/contributor_docs/ko/preparing_a_pull_request.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# 풀 리퀘스트 준비하기
-
-풀 리퀘스트는 코드가 최신 일 때 더 쉽습니다! git rebase를 사용하면 다른 기여자의 변경 사항을 통합하고 코드를 업데이트할 수 있습니다. 방법은 다음과 같습니다.
-
-## 저장하고 업데이트하기
-
-### 작업한 내용 모두 저장해주세요!
- git status
- git add -u
- git commit
-
-### 변경사항을 확인해주세요
-upstream p5.js 저장소를 트래킹하고 있는지 확인해주세요.
-
- $ git remote show upstream
-
-에러를 보게 되면, 메인 p5.js 저장소를 "upstream" 원격 저장소로 트래킹해야 합니다. 이 작업은 한 번만 하면 됩니다! 하지만, 두 번 실행해도 아무 문제 없습니다.
-
- $ git remote add upstream https://github.com/processing/p5.js
-
-그런 다음 git에서 최신 변경 사항을 확인해 봅니다.
-
- $ git fetch upstream
-
-### 만일의 경우를 대비해, 변경사항을 새 브랜치로 복사하세요.
- $ git branch your-branch-name-backup
-
-### main 브랜치로부터의 변경사항을 *적용한 후* 여러분이 작업한 변경 사항을 추가하세요
- $ git rebase upstream/main
-
-### 충돌 해결하기
-충돌이 있을 수 있습니다!
-lib/p5.js와 lib/p5.min.js라면 쉽게 고칠 수 있습니다. grunt로 프로젝트를 재빌드합니다.
-
- grunt
- git add -u
- git rebase --continue
-
-다른 파일과 충돌이 있고, 어떻게 해결해야 하는지 모른다면... 도움을 요청해 주세요!
-
-### 마침내
- $ git push origin
-
-기술적으로 세부사항에 대해 궁금한 점이 있을 경우, 여기 리베이싱에 대한 좋은 레퍼런스가 있습니다. https://www.atlassian.com/git/tutorials/merging-vs-rebasing
-
-## 풀리퀘스트 생성하기
-
-여기 [github에서 풀 리퀘스트를 생성하는 것에 대한 안내서](https://help.github.com/articles/creating-a-pull-request/)가 있습니다. 원하는 이름으로 브랜치명을 지정할 수 있습니다. p5.js의 "main" 브랜치를 대상으로 풀 리퀘스트를 요청합니다.
-
-풀 리퀘스트를 제출하면, 다른 분들이 가능할 때 즉시 검토되고, 머지 될 것입니다. 변경사항은 p5.js 라이브러리의 다음 릴리와 함께 나갈 것입니다.
diff --git a/contributor_docs/ko/webgl_contribution_guide.md b/contributor_docs/ko/webgl_contribution_guide.md
index 72849734c7..842cc25eff 100644
--- a/contributor_docs/ko/webgl_contribution_guide.md
+++ b/contributor_docs/ko/webgl_contribution_guide.md
@@ -145,7 +145,7 @@ function draw() {
if (avgFrameRates.length > numSamples) {
frameRateSum -= avgFrameRates.shift();
}
-
+
frameRateP.html(round(frameRateSum) + ' avg fps');
}
```
diff --git a/contributor_docs/organization.md b/contributor_docs/organization.md
deleted file mode 100644
index 3558923861..0000000000
--- a/contributor_docs/organization.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Organizing Contributions
-Keeping the repository organized ensures that it is always clear which discussions and tasks are the most important. This helps everyone from maintainers to new contributors navigate the repository without getting overwhelmed. To help with this, we have a set of guidelines for how to organize issues, work, and pull requests.
-
-Helping with organization can be a great way to contribute. If a bug report is missing information such as example code, feel free to chime in and ask for the missing info. If an issue with an assignee has seen no activity for 60 days, it can be helpful to comment on the issue to check in with the assignee to see if they still want to work on the issue. Whenever you are helping with organizational tasks, make sure to be kind and always keep the community guidelines in mind.
-
-# Guidelines for Organization
-
-## Issues
-- **All issues should use the relevant issue template**
-- **All bug reports should include sample code**
- - This can be in the form of code posted in the body of the issue, or it can be a link to an online example of the code preferably in [the online editor](https://editor.p5js.org)
-- **All issues should have at least 2 labels**
- - This makes it much easier to navigate the issues.
- - Depending on issue template used, labels for area will be automatically set in many cases. You can add additional labels as required.
-- **Issue assignment is first-come, first-serve**
- - If a bug has been reproduced, or a feature request/enhancement has been agreed upon by the community, it becomes available for assignment. When this happens the first contributor to request assignment by saying something like "I'd like to work on this issue!" will be assigned.
- - Do not request to be assigned to an issue if it is unclear whether the bug is reproducible or the feature request/enhancement has been agreed upon.
-
-## Pull Requests
-- **All pull requests should be associated with an issue**
- - If you want to fix a bug or add a feature, start by opening an issue so the community can discuss it.
- - If a pull request is opened without an associated issue, comment and ask the contributor to open an issue.
-
-
-
-# Guidelines for Decision-Making
-p5 aspires to make its decision-making process as transparent and horizontal as possible. To do this, p5 uses an informal consensus-seeking model for decision-making. This means that we prefer to reach community consensus on any and all decisions. If this fails, then a vote will take place instead.
-
-**Stewards** have the ability to veto proposals. This can happen when a proposal doesn't align with the mission/community guidelines, or when a proposal presents a significant maintenance or implementation challenge that the project is not able to tackle at that time.
-
-To propose a change, open an issue. If it is a large change or a change that necessitates significant design consideration, add a 'discussion' label to the issue. Interested community members will chime in with their thoughts. After a significant period has passed (30 days unless urgent), maintainers will try to discern whether there is significant interest and whether consensus has been reached about the best approach. At this point, maintainers will either request a vote, close the issue, or open up the issue for pull requests. Pull requests submitted before a discussion has concluded will be ignored.
-
-> In the future it would be great to automate the above organization and decision-making processes.
-
-> If you have an idea for how to automate any of the above with a bot or github action feel free to open an issue with your proposal!
-
-
-
-# Stewards
-
-Stewards are contributors that are particularly involved, familiar, or responsive to certain areas of the project. Their role is to help provide context and guidance to others working on p5.js. If you have a question about contributing to a particular area, you can tag the listed steward in an issue or pull request. They may also weigh in on feature requests and guide the overall direction of their area, with the input of the community.
-
-Anyone interested can volunteer to be a steward! There are no specific requirements for expertise, just an interest in actively learning and participating. If you’re familiar with one or more parts of this project, open an issue to volunteer as a steward!
-
-Once added, a steward's username will remain in the [stewards section of the readme](https://github.com/processing/p5.js#stewards) until they request to be removed. If a steward is unresponsive for an extended period of time, we may ping them to ask about their status. And you can always take a break as a steward and come back!
diff --git a/contributor_docs/repo_structure.md b/contributor_docs/repo_structure.md
deleted file mode 100644
index 27ce5dff92..0000000000
--- a/contributor_docs/repo_structure.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Where our code lives
-
-The overarching p5.js project includes some repositories other than this one:
-
-- **[p5.js](https://github.com/processing/p5.js)**: This repository contains the source code for the p5.js library. The [user-facing p5.js reference manual](https://p5js.org/reference/) is also generated from the [JSDoc](https://jsdoc.app/) comments included in this source code. It is maintained by [Qianqian Ye](https://github.com/qianqianye) and a group of [stewards](https://github.com/processing/p5.js#stewards).
-- **[p5.js-website](https://github.com/processing/p5.js-website)**: This repository contains most of the code for the [p5.js website](http://p5js.org), with the exception of the reference manual. It is maintained by [Qianqian Ye](https://github.com/qianqianye), [Kenneth Lim](https://github.com/limzykenneth), and a group of [stewards](https://github.com/processing/p5.js-website#stewards).
-- **[p5.js-sound](https://github.com/processing/p5.js-sound)**: This repository contains the p5.sound.js library. It is maintained by [Jason Sigal](https://github.com/therewasaguy).
-- **[p5.js-web-editor](https://github.com/processing/p5.js-web-editor)**: This repository contains the source code for the [p5.js web editor](https://editor.p5js.org). It is maintained by [Cassie Tarakajian](https://github.com/catarak).
-- Other add-on libraries not listed above usually have their own repository and maintainers and are not maintained by the p5.js project directly.
-
-
-## Repository File Structure
-
-There are a lot of files here! Here's a brief overview. It can be confusing, but you don't need to understand every file in the repository to get started. We recommend beginning in one area (for example, fixing some inline documentation), and working your way outwards to exploring more. Luisa Pereira's [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation) also gives a video tour of the tools and files used in the p5.js workflow.
-
-- 📁`contributor_docs/` contains documents that explain practices and principles for contributors
-- 📁`docs/` does not actually contain docs! Rather, it contains the code used to *generate* the [online reference manual](https://p5js.org/reference/).
-- 📁`lib/` contains an empty example and the p5.sound add-on, which is periodically updated via pull request from the [p5.js-sound repository](https://github.com/processing/p5.js-sound). This is also where the built p5.js library gets placed after being compiled to a single file using [Grunt](https://gruntjs.com/). It does not need to be checked into the GitHub repository when you make a pull request.
-- 📁`src/` contains all the source code for the library, which is topically organized into separated modules. This is what you'll work on if you are changing p5.js. Most folders have their own readme.md files inside to help you find your way around.
-- 📁`tasks/` contains scripts which perform automated tasks related to the build, deployment, and release of new versions of p5.js.
-- 📁`tests/` contains unit tests which ensure the library continues to function correctly as changes are made.
-- 📁`utils/` might contain additional files useful for the repository, but generally you can ignore this directory.
-
-
-## Miscellaneous
-- There are other files in the 📁[`contributor_docs/`](https://github.com/processing/p5.js/tree/main/contributor_docs) folder that you might explore. They pertain to contributing to specific areas of this project, both technical and non-technical.
-- [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation) is a video tour of the tools and files used in the p5.js development workflow.
-- [This video from The Coding Train](https://youtu.be/Rr3vLyP1Ods) :train::rainbow: gives an overview of getting started with technical contribution to p5.js.
-- The p5.js [Docker image](https://github.com/toolness/p5.js-docker) can be mounted in [Docker](https://www.docker.com/) and used to develop p5.js without requiring manual installation of requirements like [Node](https://nodejs.org/) or otherwise affecting the host operating system in any way, aside from the installation of Docker.
-- The build process for the p5.js library generates a [JSON data file](https://p5js.org/reference/data.json) which contains the public API of p5.js and can be used in automated tooling, such as for autocompleting p5.js methods in an editor. This file is hosted on the p5.js website, but it is not included as part of the repository.
diff --git a/contributor_docs/sidebar.md b/contributor_docs/sidebar.md
index 2405eadc56..f33fe44db0 100644
--- a/contributor_docs/sidebar.md
+++ b/contributor_docs/sidebar.md
@@ -4,7 +4,7 @@
- [__CONTRIBUTOR GUIDELINES__](contributor_guidelines.md)
- [__STEWARD GUIDELINES__](steward_guidelines.md)
- __CONTRIBUTING DOCS__
- - [Contributing Documentation](contributing_documentation.md)
+ - [Contributing to the p5.js Reference](contributing_to_the_p5.js_reference.md)
- __CONTRIBUTING CODE__
- [Contributing to the p5.js Reference](contributing_to_the_p5.js_reference.md)
- [Creating Libraries](creating_libraries.md)
@@ -12,10 +12,6 @@
- [Unit Testing](unit_testing.md)
- [Friendly-Error System](friendly_error_system.md)
- __RELATED INFO__
- - [Repository Structure](repo_structure.md)
- - [Issue Labels](issue_labels.md)
- [WebGL Architecture](webgl_mode_architecture.md)
- - [Supported Browsers](supported_browsers.md)
- [Web Accessibility](web_accessibility.md)
- - [Custom Builds](custom_p5_build.md)
- [Release Process](release_process.md)
diff --git a/contributor_docs/steward_guidelines.md b/contributor_docs/steward_guidelines.md
index 77145ece82..bf645aa26f 100644
--- a/contributor_docs/steward_guidelines.md
+++ b/contributor_docs/steward_guidelines.md
@@ -43,7 +43,7 @@ Bug report issues should use the "Found a bug" issue template. The following wor
- Otherwise, leave a comment about where the bug report should be filed (with a direct link provided) and close the issue.
- The first step in reviewing a bug report is to see if enough information is provided for a bug replication, and if so, attempt to replicate the bug as described.
2. If the bug can be replicated:
- - Some discussion may be required to determine the best way to fix a particular bug. Sometimes, it may be straightforward; sometimes, it may be tricky. Please refer to [p5.js' design principles](design_principles.md) when making this decision on a case-by-case basis.
+ - Some discussion may be required to determine the best way to fix a particular bug. Sometimes, it may be straightforward; sometimes, it may be tricky. Please refer to [p5.js' design principles](./contributor_guidelines.md#software-design-principles) when making this decision on a case-by-case basis.
- If the issue author indicated in the issue they are willing to contribute a fix:
- Approve the issue for fixing by the issue author by leaving a comment and assigning them to the issue. Use the cog button on the right side next to "Assignee".
- If the issue author does not wish to contribute a fix:
@@ -77,7 +77,7 @@ Feature request issues should use the "New Feature Request" issue template. The
- Is the feature likely to cause a breaking change?
- Will it conflict with existing p5.js functions and variables?
- Will it conflict with typical sketches already written for p5.js?
- - Features that are likely to cause conflicts such as the ones above are considered breaking changes. Without a [major version release](https://docs.npmjs.com/about-semantic-versioning), we should not make breaking changes to p5.js.
+ - Features that are likely to cause conflicts such as the ones above are considered breaking changes. Without a [major version release](https://docs.npmjs.com/about-semantic-versioning), we should not make breaking changes to p5.js.
- Can the proposed new feature be achieved using existing functionalities already in p5.js, relatively simple native JavaScript code, or existing easy-to-use libraries?
- For example, instead of providing a p5.js function to join an array of strings such as `join(["Hello", "world!"])`, the native JavaScript `["Hello", "world!"].join()` should be preferred instead.
3. If the access requirement and other considerations have been fulfilled, at least two stewards or maintainers must approve the new feature request before work should begin toward a PR. The PR review process for new features is documented below.
@@ -95,7 +95,7 @@ Feature enhancement issues should use the "Existing Feature Enhancement" issue t
### Discussion
-This type of issue has a minimal template ("Discussion") and should be used to gather feedback around a topic in general before coalescing it into something more specific, like a feature request. These sorts of discussion issues can be closed when the conversation finishes and the resulting more specific issues have been created:
+This type of issue has a minimal template ("Discussion") and should be used to gather feedback around a topic in general before coalescing it into something more specific, like a feature request. These sorts of discussion issues can be closed when the conversation finishes and the resulting more specific issues have been created:
- If an issue is opened as a discussion but should be, for example, a bug report, the correct label should be applied and the "discussion" label removed. Additional info about the bug should also be requested from the author if not already included.
- If an issue is opened as a discussion but isn't relevant to source code contribution or otherwise relevant to the GitHub repositories/contribution process/contribution community, they should be redirected to the forum or Discord and the issue closed.
@@ -117,7 +117,7 @@ Almost all code contributions to the p5.js repositories happen through pull requ
### Simple fix
-Simple fixes, such as a small typo fix, can be merged directly by anyone with merge access. Check on the PR "Files Changed" tab to ensure that the automated CI test passes.
+Simple fixes, such as a small typo fix, can be merged directly by anyone with merge access. Check on the PR "Files Changed" tab to ensure that the automated CI test passes.
@@ -202,11 +202,11 @@ Next in `lint:samples` is `eslint-samples:source`, which is a custom written tas
```js
grunt.registerTask('test', [
- 'build',
- 'connect:server',
- 'mochaChrome',
- 'mochaTest',
- 'nyc:report'
+ 'build',
+ 'connect:server',
+ 'mochaChrome',
+ 'mochaTest',
+ 'nyc:report'
]);
```
@@ -214,14 +214,14 @@ First let's look at the `build` task under `test`.
```js
grunt.registerTask('build', [
- 'browserify',
- 'browserify:min',
- 'uglify',
- 'browserify:test'
+ 'browserify',
+ 'browserify:min',
+ 'uglify',
+ 'browserify:test'
]);
```
-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).
@@ -302,7 +302,7 @@ Please see [release\_process.md](release_process.md).
## Tips & tricks
-Sometimes, the number of issues and PR that require review can get a bit overwhelming. While we try to put in place processes that make things easier, there are some tips and tricks that you can utilize to help with reviewing issues and PRs.
+Sometimes, the number of issues and PR that require review can get a bit overwhelming. While we try to put in place processes that make things easier, there are some tips and tricks that you can utilize to help with reviewing issues and PRs.
### Reply templates
diff --git a/contributor_docs/unit_testing.md b/contributor_docs/unit_testing.md
index 8ef4fae596..d45bfe4117 100644
--- a/contributor_docs/unit_testing.md
+++ b/contributor_docs/unit_testing.md
@@ -48,17 +48,17 @@ In the example below, `suite()` and `test()` are both built-in functions provide
```js
suite('p5.prototype.keyIsPressed', function() {
- test('keyIsPressed is a boolean', function() {
- //write test here
- });
+ test('keyIsPressed is a boolean', function() {
+ //write test here
+ });
- test('keyIsPressed is true on key press', function() {
- //write test here
- });
+ test('keyIsPressed is true on key press', function() {
+ //write test here
+ });
- test('keyIsPressed is false when no keys are pressed', function() {
- //write test here
- });
+ test('keyIsPressed is false when no keys are pressed', function() {
+ //write test here
+ });
});
```
@@ -68,12 +68,12 @@ We have structured our tests above but we haven't written the tests yet. We will
let myp5;
setup(function(done) {
- new p5(function(p) {
- p.setup = function() {
- myp5 = p;
- done();
- };
- });
+ new p5(function(p) {
+ p.setup = function() {
+ myp5 = p;
+ done();
+ };
+ });
});
```
@@ -83,8 +83,8 @@ Remember that, as previously mentioned, Mocha is a test runner but by itself doe
```js
test('keyIsPressed is a boolean', function() {
- //Asserts that value is a boolean.
- assert.isBoolean(myp5.keyIsPressed);
+ //Asserts that value is a boolean.
+ assert.isBoolean(myp5.keyIsPressed);
});
```
@@ -101,23 +101,23 @@ If you have added a new source code file in the `src` folder and would like to a
```js
suite('module_name', function() {
- let myp5;
- let myID = 'myCanvasID';
-
- setup(function(done) {
- new p5(function(p) {
- p.setup = function() {
- let cnv = p.createCanvas(100, 100);
- cnv.id(myID);
- myp5 = p;
- done();
- };
- });
- });
-
- teardown(function() {
- myp5.remove();
- });
+ let myp5;
+ let myID = 'myCanvasID';
+
+ setup(function(done) {
+ new p5(function(p) {
+ p.setup = function() {
+ let cnv = p.createCanvas(100, 100);
+ cnv.id(myID);
+ myp5 = p;
+ done();
+ };
+ });
+ });
+
+ teardown(function() {
+ myp5.remove();
+ });
});
```
@@ -126,9 +126,9 @@ After adding a test file for a module to `test/unit`, you'll also need to add th
```js
// test/unit/spec.js
var spec = {
- // ...
- typography: ['attributes', 'loadFont', 'p5.Font', 'yourModule'],
- // ...
+ // ...
+ typography: ['attributes', 'loadFont', 'p5.Font', 'yourModule'],
+ // ...
};
```
@@ -136,31 +136,31 @@ To add actual tests, which are grouped into what is called a “suite” (repres
```js
suite('module_name', function() {
- let myp5;
- let myID = 'myCanvasID';
-
- setup(function(done) {
- new p5(function(p) {
- p.setup = function() {
- let cnv = p.createCanvas(100, 100);
- cnv.id(myID);
- myp5 = p;
- done();
- };
- });
- });
-
- teardown(function() {
+ let myp5;
+ let myID = 'myCanvasID';
+
+ setup(function(done) {
+ new p5(function(p) {
+ p.setup = function() {
+ let cnv = p.createCanvas(100, 100);
+ cnv.id(myID);
+ myp5 = p;
+ done();
+ };
+ });
+ });
+
+ teardown(function() {
myp5.remove();
- });
+ });
- suite('p5.prototype.yourFunction', function() {
- test('should [test something]', function() {
- // Your test code and Chai assertions
- });
- });
+ suite('p5.prototype.yourFunction', function() {
+ test('should [test something]', function() {
+ // Your test code and Chai assertions
+ });
+ });
- // More test suites as needed
+ // More test suites as needed
});
```
diff --git a/contributor_docs/web_accessibility.md b/contributor_docs/web_accessibility.md
index 729cefc00d..61c7a56dae 100644
--- a/contributor_docs/web_accessibility.md
+++ b/contributor_docs/web_accessibility.md
@@ -1,6 +1,6 @@
# p5.js Web Accessibility
-This document describes the structure of p5.js’ web accessibility features for contributors.
+This document describes the structure of p5.js’ web accessibility features for contributors.
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.
@@ -25,16 +25,16 @@ We’ll look at how the library-generated outputs work first. The following code
```js
function setup() {
- createCanvas(400, 400);
+ createCanvas(400, 400);
}
function draw() {
- background("#ccccff");
- textOutput();
- fill("orange");
- ellipse(100, 100, 50);
- fill("fuchsia");
- rect(300, 300, 50, 50);
+ background("#ccccff");
+ textOutput();
+ fill("orange");
+ ellipse(100, 100, 50);
+ fill("fuchsia");
+ rect(300, 300, 50, 50);
}
```
@@ -44,53 +44,53 @@ function draw() {
> Your output is a, 400 by 400 pixels, lavender blue canvas containing the following 2 shapes:
-This description is followed by a list of shapes where the color, position, and area of each shape are described:
+This description is followed by a list of shapes where the color, position, and area of each shape are described:
> orange circle at top left covering 1% of the canvas.\
> fuchsia square, at bottom right, covering 2% of the canvas.
-Each element can be selected to get more details. A table of elements is also provided. In this table, each element’s shape, color, location, coordinates, and area are described:
+Each element can be selected to get more details. A table of elements is also provided. In this table, each element’s shape, color, location, coordinates, and area are described:
> orange circle location=top left area=1%\
-> fuchsia square location = bottom right area = 2%
+> fuchsia square location = bottom right area = 2%
This generates the following HTML:
```html
```
@@ -98,7 +98,7 @@ Each element can be selected to get more details. A table of elements is also pr
`gridOutput()` lays out the content of the canvas in the form of a grid using an HTML table element. Each shape’s location in the grid is based on its spatial location on the canvas. A brief description of the canvas is available before the table output. This description includes the color of the background, size of the canvas, number of objects, and object types:
-> lavender blue canvas, 400 by 400 pixels, contains 2 shapes: 1 circle 1 square
+> lavender blue canvas, 400 by 400 pixels, contains 2 shapes: 1 circle 1 square
Each shape’s description is placed in a cell of the table depending on its location on the canvas. Each description includes the color and type of shape:
@@ -117,36 +117,36 @@ The generated HTML is as follows:
```html
```
@@ -169,7 +169,7 @@ Although `textOutput()` and `gridOutput()` are located in [src/accessibility/out
- `textOutput()`
- `gridOutput()`
-Both methods activate the accessible output by setting `this._accessibleOutputs.text` or `this._accessibleOutputs.grid `to `true` and calling `this._createOutput('textOutput', 'Fallback')` or `this._createOutput('gridOutput', 'Fallback')` respectively.
+Both methods activate the accessible output by setting `this._accessibleOutputs.text` or `this._accessibleOutputs.grid `to `true` and calling `this._createOutput('textOutput', 'Fallback')` or `this._createOutput('gridOutput', 'Fallback')` respectively.
If `LABEL` is passed as a parameter to the method, it also activates the visible text output label by setting `this._accessibleOutputs.textLabel` as `true` and calls `this._createOutput('textOutput', 'Label')` or `this._createOutput('gridOutput', 'Label')`.
@@ -251,15 +251,15 @@ With example code:
```js
function setup() {
- background('pink');
+ background('pink');
- fill('red');
- noStroke();
- circle(67, 67, 20);
- circle(83, 67, 20);
- triangle(91, 73, 75, 95, 59, 73);
+ fill('red');
+ noStroke();
+ circle(67, 67, 20);
+ circle(83, 67, 20);
+ triangle(91, 73, 75, 95, 59, 73);
- describe('A pink square with a red heart in the bottom-right corner.', LABEL);
+ describe('A pink square with a red heart in the bottom-right corner.', LABEL);
}
```
@@ -270,7 +270,7 @@ The page will output:
### describeElement()
-The `describeElement()` function creates a screen reader-accessible description for groups of shapes that create meaning together. For example, a custom-drawn “heart” shape made out of multiple lines of code. The first parameter should be a string with the name of the element, for example, “Heart”. The second parameter should be a string with the description of the element, for example, “A red heart in the bottom-right corner.” The third parameter is optional. If a user passes `LABEL` as a third parameter, an additional `` element is inserted next to the `