Adding missing examples to the documentation.

src/core/p5.Graphics.js

@@ -205,6 +205,48 @@ p5.Graphics = class extends p5.Element {
    *
    * @method createFramebuffer
    * @return {p5.Framebuffer}
+   * @example
+   *
+   * <div>
+   * <code>
+   * 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);
+   *   }
+   * }
+   * </code>
+   * </div>
    */
   createFramebuffer(options) {
     return new p5.Framebuffer(this, options);

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
+   * <div>
+   * <code>
+   * 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);
+   * }
+   * </code>
+   * </div>
+   *
+   * @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
+   * <div>
+   * <code>
+   * 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();
+   * }
+   * </code>
+   * </div>
+   *
+   * @alt
+   * Purple canvas playing a sound on setup, disconnects on mouseClick.
    */
   disconnect() {
     if (this.audioSourceNode) {

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
+ * <div>
+ * <code>
+ * 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);
+ * }
+ * </code>
+ * </div>
+ * @alt
+ * Text on canvas, on key press appears clearer.
  */
   pixelDensity(density) {
     if (typeof density !== 'undefined') {

src/webgl/3d_primitives.js

@@ -93,6 +93,40 @@ p5.prototype.beginGeometry = function() {
  * draws shapes.
  *
  * @method endGeometry
+ * @example
+ * <div>
+ * <code>
+ *
+ * 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();
+ * }
+ *</code>
+ *</div>
+ *
+ * @alt
+ * A pink star with alternating short and long rays.
+ *
  * @returns {p5.Geometry} The model that was built.
  */
 p5.prototype.endGeometry = function() {

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
+   * <div>
+   * <code>
+   * 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);
+   * }
+   * </code>
+   * </div>
+   *
+   * @alt
+   * A red and a blue ellipse on a canvas.
    */
   pixelDensity(density) {
     if (density) {
@@ -923,6 +949,37 @@ class Framebuffer {
    * texture.
    *
    * @method end
+   * @example
+   *
+   * <div>
+   * <code>
+   *
+   * 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);
+   * }
+   * </code>
+   * </div>
+   *
+   * @alt
+   * Rotating red torus displayed in different sizes on a dark gray background."
+   *
    */
   end() {
     const gl = this.gl;