diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js
index 9fa18e6090..81de1235a6 100644
--- a/src/core/p5.Graphics.js
+++ b/src/core/p5.Graphics.js
@@ -205,6 +205,48 @@ p5.Graphics = class extends p5.Element {
*
* @method createFramebuffer
* @return {p5.Framebuffer}
+ * @example
+ *
+ *
+ *
+ * let framebuffer;
+ * let hue = 0;
+ * let trail = [];
+ * //hover mouse to see effect.
+ *
+ * function setup() {
+ * createCanvas(150, 150, WEBGL);
+ * colorMode(HSB, 360, 100, 100, 100);
+ * framebuffer = createFramebuffer({
+ * format: p5.prototype.UNSIGNED_BYTE,
+ * width: 150,
+ * height: 150,
+ * density: 1
+ * });
+ * frameRate(60);
+ * }
+ *
+ * function draw() {
+ * framebuffer.begin();
+ * blendMode(ADD);
+ * background(0, 0, 0, 5);
+ * noStroke();
+ *
+ * for (let i = trail.length - 1; i >= 0; i--) {
+ * let alpha = map(i, 0, trail.length - 1, 10, 0);
+ * fill(hue, 80, 80, alpha);
+ * ellipse(trail[i].x, trail[i].y, 25, 25);
+ * }
+ * framebuffer.end();
+ * image(framebuffer, -width / 2, -height / 2, width, height);
+ * hue = (hue + 1) % 360;
+ * trail.push(createVector(mouseX - width / 2, mouseY - height / 2));
+ * if (trail.length > 20) {
+ * trail.splice(0, 1);
+ * }
+ * }
+ *
+ *
*/
createFramebuffer(options) {
return new p5.Framebuffer(this, options);
diff --git a/src/dom/dom.js b/src/dom/dom.js
index b12a2750c8..d33f82d128 100644
--- a/src/dom/dom.js
+++ b/src/dom/dom.js
@@ -4555,6 +4555,39 @@ class MediaElement extends p5.Element {
* @method connect
* @param {AudioNode|Object} audioNode AudioNode from the Web Audio API,
* or an object from the p5.sound library
+ * @example
+ *
+ *
+ * let myAudio;
+ * let reverb;
+ *
+ * function preload() {
+ * myAudio = loadSound('assets/beat.mp3');
+ * }
+ * function setup() {
+ * createCanvas(150, 150);
+ * textAlign(CENTER);
+ *
+ * // Create a reverb effect
+ * reverb = new p5.Reverb();
+ *
+ * // Connect the audio element to the reverb effect
+ * myAudio.connect(reverb);
+ *
+ * // Connect the reverb effect to the main output
+ * reverb.connect();
+ *
+ * myAudio.play();
+ * }
+ *
+ * function draw() {
+ * background(111, 143, 175);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Reverb-enhanced audio beat displayed on a blue canvas.
*/
connect(obj) {
let audioContext, mainOutput;
@@ -4599,6 +4632,36 @@ class MediaElement extends p5.Element {
* audio effects, for example.
*
* @method disconnect
+ * @example
+ *
+ *
+ * let sound;
+ * function preload() {
+ * sound = loadSound('assets/beat.mp3');
+ * }
+ * function setup() {
+ * createCanvas(150, 150);
+ * playSound();
+ * }
+ *
+ * function draw() {
+ * background(159, 43, 104);
+ * }
+ * function mouseClicked() {
+ * // Disconnect the sound on mouse click
+ * disconnectSound();
+ * }
+ * function playSound() {
+ * sound.play();
+ * }
+ * function disconnectSound() {
+ * sound.disconnect();
+ * }
+ *
+ *
+ *
+ * @alt
+ * Purple canvas playing a sound on setup, disconnects on mouseClick.
*/
disconnect() {
if (this.audioSourceNode) {
diff --git a/src/image/p5.Image.js b/src/image/p5.Image.js
index ed14116070..b2d81ecaad 100644
--- a/src/image/p5.Image.js
+++ b/src/image/p5.Image.js
@@ -236,6 +236,49 @@ p5.Image = class {
* @param {Number} [density] A scaling factor for the number of pixels per
* side
* @returns {Number} The current density if called without arguments, or the instance for chaining if setting density.
+ * @example
+ *
+ *
+ * let defaultDensity = 1;
+ * let highDensity = 4;
+ * let currentDensity = defaultDensity;
+ *
+ * function setup() {
+ * createCanvas(150, 150);
+ * pixelDensity(defaultDensity);
+ * draw();
+ * }
+ *
+ * function keyPressed() {
+ * // Toggle between default and high pixel densities on key press
+ * if (currentDensity === defaultDensity) {
+ * pixelDensity(highDensity);
+ * currentDensity = highDensity;
+ * }
+ * else {
+ * pixelDensity(defaultDensity);
+ * currentDensity = defaultDensity;
+ * }
+ * draw();
+ * }
+ *
+ * function draw() {
+ * background(230);
+ * stroke(0);
+ * strokeWeight(2);
+ * fill(0);
+ * textSize(32);
+ * textAlign(CENTER, CENTER);
+ * text('Hi.', width / 2, height / 2);
+ * fill(0);
+ * textSize(16);
+ * textAlign(RIGHT, BOTTOM);
+ * text(`Pixel Density: ${currentDensity}`, width - 10, height - 10);
+ * }
+ *
+ *
+ * @alt
+ * Text on canvas, on key press appears clearer.
*/
pixelDensity(density) {
if (typeof density !== 'undefined') {
diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js
index f5bd16fd17..d5a675abca 100644
--- a/src/webgl/3d_primitives.js
+++ b/src/webgl/3d_primitives.js
@@ -93,6 +93,40 @@ p5.prototype.beginGeometry = function() {
* draws shapes.
*
* @method endGeometry
+ * @example
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(150, 150);
+ * myStar();
+ * }
+ *
+ * function myStar() {
+ * beginShape();
+ *
+ * for (let i = 0; i < 10; i++) {
+ * let angle = TWO_PI * i / 10;
+ * let radius = i % 2 === 0 ? 35 : 17.5;
+ * let x = 75 + cos(angle) * radius;
+ * let y = 75 + sin(angle) * radius;
+ * vertex(x, y);
+ * }
+ * endShape(CLOSE);
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * noStroke();
+ * fill(222, 49, 99);
+ * myStar();
+ * }
+ *
+ *
+ *
+ * @alt
+ * A pink star with alternating short and long rays.
+ *
* @returns {p5.Geometry} The model that was built.
*/
p5.prototype.endGeometry = function() {
diff --git a/src/webgl/p5.Framebuffer.js b/src/webgl/p5.Framebuffer.js
index 55585a5e17..a53a10ca00 100644
--- a/src/webgl/p5.Framebuffer.js
+++ b/src/webgl/p5.Framebuffer.js
@@ -243,6 +243,32 @@ class Framebuffer {
* @method pixelDensity
* @param {Number} [density] A scaling factor for the number of pixels per
* side of the framebuffer
+ * @example
+ *
+ *
+ * let pg;
+ *
+ * function setup() {
+ * createCanvas(150, 150);
+ * pixelDensity(4);
+ * pg = createGraphics(75, 75);
+ * pg.pixelDensity(1);
+ * }
+ *
+ * function draw() {
+ * background(220);
+ * fill(255, 0, 0);
+ * ellipse(25, 25, 40, 40);
+ * pg.background(255);
+ * pg.fill(0, 0, 255);
+ * pg.ellipse(50, 50, 40, 40);
+ * image(pg, 75, 75);
+ * }
+ *
+ *
+ *
+ * @alt
+ * A red and a blue ellipse on a canvas.
*/
pixelDensity(density) {
if (density) {
@@ -923,6 +949,37 @@ class Framebuffer {
* texture.
*
* @method end
+ * @example
+ *
+ *
+ *
+ *
+ * let framebuffer;
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * framebuffer = createFramebuffer();
+ * noStroke();
+ * }
+ * function draw() {
+ * framebuffer.begin();
+ * background(255);
+ * translate(0, 5 * sin(frameCount * 0.01), 0);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * fill(255, 0, 0);
+ * torus(30);
+ * framebuffer.end();
+ *
+ * background(100);
+ * image(framebuffer, -50, -50, 25, 25);
+ * image(framebuffer, 0, 0, 35, 35);
+ * }
+ *
+ *
+ *
+ * @alt
+ * Rotating red torus displayed in different sizes on a dark gray background."
+ *
*/
end() {
const gl = this.gl;
diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js
index 18731dfcb5..529602a979 100644
--- a/src/webgl/p5.Geometry.js
+++ b/src/webgl/p5.Geometry.js
@@ -290,6 +290,62 @@ p5.Geometry = class Geometry {
* computes faces for geometry objects based on the vertices.
* @method computeFaces
* @chainable
+ * @example
+ *
+ *
+ *
+ * let customGeometry;
+ * class CustomGeometry {
+ * constructor(size) {
+ * this.vertices = [
+ * createVector(0, -size / 2, 0),
+ * createVector(size / 2, size / 2, size / 2),
+ * createVector(-size / 2, size / 2, size / 2),
+ * createVector(-size / 2, size / 2, -size / 2),
+ * createVector(size / 2, size / 2, -size / 2)
+ * ];
+ * this.faces = [];
+ * this.computeFaces();
+ * }
+ *
+ * computeFaces() {
+ * this.faces = [
+ * [0, 1, 2], // Bottom face
+ * [0, 2, 3], // Left face
+ * [0, 3, 4], // Front face
+ * [0, 4, 1], // Right face
+ * [1, 4, 3], // Back face
+ * [1, 3, 2] // Base face
+ * ];
+ * }
+ * }
+ * function setup() {
+ * createCanvas(150, 150, WEBGL);
+ * customGeometry = new CustomGeometry(50);
+ * customGeometry.computeFaces();
+ * }
+ *
+ * function draw() {
+ * background(150);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ *
+ * fill(255);
+ * stroke(0);
+ * beginShape(TRIANGLES);
+ * for (let face of customGeometry.faces) {
+ * for (let vertexIndex of face) {
+ * let vertexPosition = customGeometry.vertices[vertexIndex];
+ * vertex(vertexPosition.x, vertexPosition.y, vertexPosition.z);
+ * }
+ * }
+ * endShape();
+ * }
+ *
+ *
+ *
+ * @alt
+ * A dynamically rotating 3D pyramid, crafted with triangular faces through custom geometry computations.
*/
computeFaces() {
this.faces.length = 0;
@@ -835,6 +891,57 @@ p5.Geometry = class Geometry {
* Modifies all vertices to be centered within the range -100 to 100.
* @method normalize
* @chainable
+ * @example
+ *
+ *
+ *
+ * let myObject;
+ *
+ * class object {
+ * constructor() {
+ * this.vertices = [
+ * createVector(-15, -15, 0),
+ * createVector(15, -15, 0),
+ * createVector(15, 15, 0),
+ * createVector(-15, 15, 0)
+ * ];
+ *
+ * this.normalize();
+ * }
+ *
+ * normalize() {
+ * for (let v of this.vertices) {
+ * v.normalize();
+ * }
+ * }
+ *
+ * display() {
+ * beginShape();
+ * for (let i = 0; i < this.vertices.length; i++) {
+ * vertex(this.vertices[i].x * 50, this.vertices[i].y * 50,
+ * this.vertices[i].z * 50);
+ * }
+ * endShape(CLOSE);
+ * }
+ * }
+ *
+ * function setup() {
+ * createCanvas(150, 150, WEBGL);
+ * myObject = new object();
+ * }
+ * function draw() {
+ * background(220);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * myObject.display();
+ * }
+ *
+ *
+ *
+ * @alt
+ * A continuously rotating square around the X and Y axes.
+ *
+ *
*/
normalize() {
if (this.vertices.length > 0) {