From 671ccbfbdb40c6d0caeb7c9099072fd658670b21 Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Tue, 16 Jan 2024 14:24:59 +0530 Subject: [PATCH 01/13] endGeometry example added --- src/webgl/3d_primitives.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index f5bd16fd17..624726440d 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -93,6 +93,39 @@ p5.prototype.beginGeometry = function() { * draws shapes. * * @method endGeometry + *
+ * + * + * 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() { From 2acda5fdfde8603062f8bde80746e694f25b219c Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Tue, 16 Jan 2024 21:08:06 +0530 Subject: [PATCH 02/13] frameBuffer.end example added --- src/webgl/p5.Framebuffer.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/webgl/p5.Framebuffer.js b/src/webgl/p5.Framebuffer.js index 55585a5e17..79b9cad7d5 100644 --- a/src/webgl/p5.Framebuffer.js +++ b/src/webgl/p5.Framebuffer.js @@ -923,6 +923,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; From 446f039f0f5203f126bf4f9af0c0feb9f87570e3 Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Tue, 16 Jan 2024 21:10:18 +0530 Subject: [PATCH 03/13] computeFaces() example added. --- src/webgl/p5.Geometry.js | 59 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js index 18731dfcb5..280c2462db 100644 --- a/src/webgl/p5.Geometry.js +++ b/src/webgl/p5.Geometry.js @@ -290,6 +290,65 @@ p5.Geometry = class Geometry { * computes faces for geometry objects based on the vertices. * @method computeFaces * @chainable + * @example + *
+ * + * + * let customGeometry; + * + * 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(); + * } + * + * 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 + * ]; + * } + * } + * + * + *
+ * @alt + * A dynamically rotating 3D pyramid, crafted with triangular faces through custom geometry computations. + * */ computeFaces() { this.faces.length = 0; From 0df1999756289900016196a50d597c2fefd33f5a Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Wed, 17 Jan 2024 03:41:05 +0530 Subject: [PATCH 04/13] normalize() example added. --- src/webgl/p5.Geometry.js | 51 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js index 280c2462db..072b63467a 100644 --- a/src/webgl/p5.Geometry.js +++ b/src/webgl/p5.Geometry.js @@ -894,6 +894,57 @@ p5.Geometry = class Geometry { * Modifies all vertices to be centered within the range -100 to 100. * @method normalize * @chainable + * @example + * + *
+ * + * let myObject; + * + * function setup() { + * createCanvas(150, 150, WEBGL); + * myObject = new object(); + * } + * function draw() { + * background(220); + * rotateX(frameCount * 0.01); + * rotateY(frameCount * 0.01); + * myObject.display(); + * } + * + * 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); + * } + * } + * + *
+ * + * @alt + * A continuously rotating square around the X and Y axes. + * + * + * */ normalize() { if (this.vertices.length > 0) { From 5e4b0948f0469ed7e71eecdd2af67d7ecb3e0249 Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Fri, 19 Jan 2024 00:00:04 +0530 Subject: [PATCH 05/13] createFramebuffer example added. --- src/core/p5.Graphics.js | 42 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) 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); From 244a61ab0d07b580c516caaf2fc6359c8d507717 Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Fri, 19 Jan 2024 14:18:59 +0530 Subject: [PATCH 06/13] MediaElement disconnect example added. --- src/dom/dom.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/dom/dom.js b/src/dom/dom.js index b12a2750c8..a6437b16c0 100644 --- a/src/dom/dom.js +++ b/src/dom/dom.js @@ -4599,6 +4599,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) { From e10b406a09a6b4c9cd36278af9c83016849cb74e Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Fri, 19 Jan 2024 14:28:39 +0530 Subject: [PATCH 07/13] MediaElement connect example added. --- src/dom/dom.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/dom/dom.js b/src/dom/dom.js index a6437b16c0..02dd2f5d6a 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; From 86687741274e2e18ef25221aa83b74f38045ab07 Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Fri, 19 Jan 2024 14:30:17 +0530 Subject: [PATCH 08/13] Image.js pixelDensity example added. --- src/image/p5.Image.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) 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') { From b8b784b6f061187e308fef3fa3e4100a84ceeb22 Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Fri, 19 Jan 2024 23:23:06 +0530 Subject: [PATCH 09/13] frameBuffer.pixelDensity example added --- src/webgl/p5.Framebuffer.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/webgl/p5.Framebuffer.js b/src/webgl/p5.Framebuffer.js index 79b9cad7d5..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) { From 09ff1c18b00d65d25b50bf2120cdfda04850f595 Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Sat, 20 Jan 2024 00:28:38 +0530 Subject: [PATCH 10/13] fix linting error --- src/dom/dom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dom/dom.js b/src/dom/dom.js index 02dd2f5d6a..d33f82d128 100644 --- a/src/dom/dom.js +++ b/src/dom/dom.js @@ -4661,7 +4661,7 @@ class MediaElement extends p5.Element { * * * @alt - * Purple canvas playing a sound on setup, disconnects on mouseClick. + * Purple canvas playing a sound on setup, disconnects on mouseClick. */ disconnect() { if (this.audioSourceNode) { From f3e72da816b5143da29ae7a9861c2dc74bcc6093 Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Sat, 20 Jan 2024 00:29:48 +0530 Subject: [PATCH 11/13] fix linting errors --- src/webgl/p5.Geometry.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js index 072b63467a..a0884af32a 100644 --- a/src/webgl/p5.Geometry.js +++ b/src/webgl/p5.Geometry.js @@ -307,8 +307,8 @@ p5.Geometry = class Geometry { * rotateX(frameCount * 0.01); * rotateY(frameCount * 0.01); * - * fill(255); - * stroke(0); + * fill(255); + * stroke(0); * beginShape(TRIANGLES); * for (let face of customGeometry.faces) { * for (let vertexIndex of face) { @@ -326,7 +326,7 @@ p5.Geometry = class Geometry { * 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) + * createVector(size / 2, size / 2, -size / 2) * ]; * this.faces = []; * this.computeFaces(); @@ -941,10 +941,10 @@ p5.Geometry = class Geometry { * * * @alt - * A continuously rotating square around the X and Y axes. + * A continuously rotating square around the X and Y axes. * * - * + * */ normalize() { if (this.vertices.length > 0) { From 8f91ad7b031c7a7db64c4d65a3f870b2d9e5ce0c Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Sat, 20 Jan 2024 01:08:45 +0530 Subject: [PATCH 12/13] fix linting errors --- src/webgl/p5.Geometry.js | 87 +++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 45 deletions(-) diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js index a0884af32a..529602a979 100644 --- a/src/webgl/p5.Geometry.js +++ b/src/webgl/p5.Geometry.js @@ -295,7 +295,30 @@ p5.Geometry = class Geometry { * * * 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); @@ -314,41 +337,15 @@ p5.Geometry = class Geometry { * for (let vertexIndex of face) { * let vertexPosition = customGeometry.vertices[vertexIndex]; * vertex(vertexPosition.x, vertexPosition.y, vertexPosition.z); - * } - * } - * endShape(); - * } - * - * 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 - * ]; + * } * } + * endShape(); * } * * * * @alt * A dynamically rotating 3D pyramid, crafted with triangular faces through custom geometry computations. - * */ computeFaces() { this.faces.length = 0; @@ -900,27 +897,16 @@ p5.Geometry = class Geometry { * * let myObject; * - * function setup() { - * createCanvas(150, 150, WEBGL); - * myObject = new object(); - * } - * function draw() { - * background(220); - * rotateX(frameCount * 0.01); - * rotateY(frameCount * 0.01); - * myObject.display(); - * } - * * class object { * constructor() { * this.vertices = [ * createVector(-15, -15, 0), * createVector(15, -15, 0), * createVector(15, 15, 0), - * createVector(-15, 15, 0), + * createVector(-15, 15, 0) * ]; * - * this.normalize(); + * this.normalize(); * } * * normalize() { @@ -931,12 +917,24 @@ p5.Geometry = class Geometry { * * 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); - * } + * 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(); + * } * * * @@ -944,7 +942,6 @@ p5.Geometry = class Geometry { * A continuously rotating square around the X and Y axes. * * - * */ normalize() { if (this.vertices.length > 0) { From 30883f04071c1f2de7ce71a8ad6e0be4f7130f2b Mon Sep 17 00:00:00 2001 From: Deveshi Dwivedi <120312681+deveshidwivedi@users.noreply.github.com> Date: Sat, 20 Jan 2024 03:11:11 +0530 Subject: [PATCH 13/13] Update 3d_primitives.js --- src/webgl/3d_primitives.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 624726440d..d5a675abca 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -93,6 +93,7 @@ p5.prototype.beginGeometry = function() { * draws shapes. * * @method endGeometry + * @example *
* *