Skip to content

Update 2.0 documentation #809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 17, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
48,768 changes: 22,932 additions & 25,836 deletions public/reference/data.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/search-indices/en.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/search-indices/es.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/search-indices/hi.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/search-indices/ko.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/search-indices/zh-Hans.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/content/contributor-docs/en/creating_libraries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -306,4 +306,4 @@ p5.prototype.myMethod = function(){

**Examples are great, too!** They show people what your library can do. Because this is all JavaScript, people can see them running online before they download anything.[ ](http://jsfiddle.net/) You can create a collection of examples on the p5.js web editor to showcase how your library works.

**Submit your library!** Once your library is ready for distribution and you’d like it included on the [p5js.org/libraries](https://p5js.org/libraries/) page, please submit a pull request on the p5.js website GitHub repository following [this instruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!
**Submit your library!** Once your library is ready for distribution and you’d like it included on the [p5js.org/libraries](https://p5js.org/libraries/) page, please submit a pull request on the p5.js website GitHub repository following [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!
162 changes: 162 additions & 0 deletions src/content/contributor-docs/en/jsdoc.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
---
title: |
JSDoc Best Practices
description: >
Documentation on the website is built from the comments in the p5.js repo.
Here are a few things to keep in mind in order for the documentation to be
parsed correctly!
---


Documentation on the website is built from the comments in the p5.js repo. Here are a few things to keep in mind in order for the documentation to be parsed correctly!

## For everything

* At the top of a file, add a comment with the `@module` tag, and optionally also the `@submodule`. These reference the category and subcategory names that the contents of the file should appear under in the reference:

e.g. for just a category:

```js
/**
* @module Rendering
*/
```

e.g. for both:

```js
/**
* @module Data
* @submodule LocalStorage
*/
```

## For classes

* Create classes *outside* of the addon function, and assign them to `p5` *inside.* The class name should be the same always:

```js
class MyClass {
// ...
}

export default function myAddon(p5, fn) {
p5.MyClass = MyClass;
}
```

* Document class methods directly above the members in classes, *without* a `@method` tag:

```js
class MyClass {
/**
* Description goes here
*/
myMethod() {
return 4;
}
}
```

* Documentation for the class itself should go at the spot where the class is added to `p5` and not right next to the class definition. This needs to include the `@class` tag, including a `p5.` prefix on the class name. Also include the parameters for the constructor in this description, if they exist.

```js
class MyClass {
constructor(n) {
this.n = n;
}
}

export default function myAddon(p5, fn) {
/**
* Description of the class goes here!
*
* @class p5.MyClass
* @param {Number} n A number to pass in
*/
p5.MyClass = MyClass;
}
```

* Documentation for class properties should appear after the class is added to `p5`, not within the class itself. It needs to have the `@for` tag referencing its class, and the `@property` tag naming the property itself:

```js
class MyClass {
myProperty;
constructor() {
myProperty = 2;
}
}

export default function myAddon(p5, fn) {
/**
* Description of the class goes here!
*
* @class p5.MyClass
*/
p5.MyClass = MyClass;

/**
* Description of the property goes here!
*
* @property {Number} myProperty
* @for p5.MyClass
*/
}
```

## For global functions

* Add a comment with the `@method` tag listing its name:

```js
export default function myAddon(p5, fn) {
/**
* Description goes here!
*
* @method myFunction
*/
p5.myFunction = function() {
return 8;
};
}
```

* For dynamically generated methods, do the same as usual, but add `@for p5`.

```js
function myAddon(p5, fn) {
for (const key of ['nameA', 'nameB']) {
fn[key] = function() {
return `Hello from ${key}!`;
};
}

/**
* @method nameA
* @for p5
*/

/**
* @method nameB
* @for p5
*/
}
```

* Mark things that you don't want showing up as `@private`. This is done automatically for methods whose names start with `_`.

```js
class MyClass {
/**
* @private
*/
privateMethodA() {
// ...
}

_privateMethodB() {
// ...
}
}
```
48 changes: 4 additions & 44 deletions src/content/reference/en/p5.Amplitude/getLevel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,14 @@
title: getLevel
module: p5.sound
submodule: p5.sound
file: lib/addons/p5.sound.js
description: |
<p>Returns a single Amplitude reading at the moment it is called.
For continuous readings, run in the draw loop.</p>
line: 3209
file: src/Amplitude.js
description: Get the current amplitude value of a sound.
line: 63
isConstructor: false
itemtype: method
example:
- |-

<div><code>
function preload(){
sound = loadSound('/assets/beat.mp3');
}

function setup() {
let cnv = createCanvas(100, 100);
cnv.mouseClicked(toggleSound);
amplitude = new p5.Amplitude();
}

function draw() {
background(220, 150);
textAlign(CENTER);
text('tap to play', width/2, 20);

let level = amplitude.getLevel();
let size = map(level, 0, 1, 0, 200);
ellipse(width/2, height/2, size, size);
}

function toggleSound(){
if (sound.isPlaying()) {
sound.stop();
} else {
sound.play();
}
}
</code></div>
class: p5.Amplitude
params:
- name: channel
description: |
<p>Optionally return only channel 0 (left) or 1 (right)</p>
type: Number
optional: true
return:
description: Amplitude as a number between 0.0 and 1.0
description: Amplitude level (volume) of a sound.
type: Number
chainable: false
---
Expand Down
59 changes: 6 additions & 53 deletions src/content/reference/en/p5.Amplitude/setInput.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,16 @@
title: setInput
module: p5.sound
submodule: p5.sound
file: lib/addons/p5.sound.js
description: |
<p>Connects to the p5sound instance (main output) by default.
Optionally, you can pass in a specific source (i.e. a soundfile).</p>
line: 3117
file: src/Amplitude.js
description: Connect an audio source to the amplitude object.
line: 53
isConstructor: false
itemtype: method
example:
- |-

<div><code>
function preload(){
sound1 = loadSound('/assets/beat.mp3');
sound2 = loadSound('/assets/drum.mp3');
}
function setup(){
cnv = createCanvas(100, 100);
cnv.mouseClicked(toggleSound);

amplitude = new p5.Amplitude();
amplitude.setInput(sound2);
}

function draw() {
background(220);
text('tap to play', 20, 20);

let level = amplitude.getLevel();
let size = map(level, 0, 1, 0, 200);
ellipse(width/2, height/2, size, size);
}

function toggleSound(){
if (sound1.isPlaying() && sound2.isPlaying()) {
sound1.stop();
sound2.stop();
} else {
sound1.play();
sound2.play();
}
}
</code></div>
class: p5.Amplitude
params:
- name: snd
description: |
<p>set the sound source
(optional, defaults to
main output)</p>
type: SoundObject|undefined
optional: true
- name: smoothing
description: |
<p>a range between 0.0 and 1.0
to smooth amplitude readings</p>
type: Number|undefined
optional: true
- name: input
description: '- An object that has audio output.'
type: Object
chainable: false
---

Expand Down
15 changes: 7 additions & 8 deletions src/content/reference/en/p5.Amplitude/smooth.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,17 @@
title: smooth
module: p5.sound
submodule: p5.sound
file: lib/addons/p5.sound.js
description: |
<p>Smooth Amplitude analysis by averaging with the last analysis
frame. Off by default.</p>
line: 3293
file: src/Amplitude.js
description: Get the current amplitude value of a sound.
line: 73
isConstructor: false
itemtype: method
class: p5.Amplitude
params:
- name: set
description: |
<p>smoothing from 0.0 <= 1</p>
- name: Smooth
description: >-
Amplitude analysis by averaging with the last analysis frame. Off by
default.
type: Number
chainable: false
---
Expand Down
29 changes: 0 additions & 29 deletions src/content/reference/en/p5.Amplitude/toggleNormalize.mdx

This file was deleted.

17 changes: 5 additions & 12 deletions src/content/reference/en/p5.AudioIn/amp.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,16 @@
title: amp
module: p5.sound
submodule: p5.sound
file: lib/addons/p5.sound.js
description: |
<p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>
line: 6257
file: src/AudioIn.js
description: Set amplitude (volume) of a mic input between 0 and 1.0.
line: 81
isConstructor: false
itemtype: method
class: p5.AudioIn
params:
- name: vol
description: |
<p>between 0 and 1.0</p>
- name: amplitudeAmount
description: An amplitude value between 0 and 1.
type: Number
- name: time
description: |
<p>ramp time (optional)</p>
type: Number
optional: true
chainable: false
---

Expand Down
16 changes: 0 additions & 16 deletions src/content/reference/en/p5.AudioIn/amplitude.mdx

This file was deleted.

Loading