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();
+ * }
+ *
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ *
+ * 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
+ * ];
+ * }
+ * }
+ *
+ *
+ *
+ * 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);
+ * }
+ * }
+ *
+ *
+ * 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);
+ * }
+ * }
+ *
+ *
+ * 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();
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
+ * 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);
+ * }
+ *
+ *
*
* 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
*
*