From 0451f1886fcfeb08bfe4a76880549e500753ee9c Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Mon, 17 Mar 2025 05:21:20 +0530
Subject: [PATCH 01/13] fixing-load-bytes
---
src/io/files.js | 25 ++++++++++++++++++-------
1 file changed, 18 insertions(+), 7 deletions(-)
diff --git a/src/io/files.js b/src/io/files.js
index 1eb7e26008..6659a7e63e 100644
--- a/src/io/files.js
+++ b/src/io/files.js
@@ -754,19 +754,30 @@ function files(p5, fn){
* @returns {Promise<Uint8Array>} a Uint8Array containing the loaded buffer
*
* @example
- * <div class='norender'><code>
+ *
+ * <div>
+ * <code>
* let data;
*
* async function setup() {
- * data = await loadBytes('assets/mammals.xml');
+ * createCanvas(100, 100); // Create a canvas
+ * data = await loadBytes('assets/mammals.xml'); // Load the bytes from the XML file
*
- * for (let i = 0; i < 5; i++) {
- * console.log(data.bytes[i].toString(16));
- * }
- * describe('no image displayed');
+ * background(255); // Set a white background
+ * fill(0); // Set text color to black
+ *
+ * // Display the first 5 byte values on the canvas in hexadecimal format
+ * for (let i = 0; i < 5; i++) {
+ * let byteHex = data[i].toString(16);
+ * text(byteHex, 10, 18 * (i + 1)); // Adjust spacing as needed
* }
- * </code></div>
+ *
+ * describe('no image displayed, displays first 5 bytes of mammals.xml in hexadecimal format');
+ * }
+ * </code>
+ * </div>
*/
+
fn.loadBytes = async function (path, successCallback, errorCallback) {
try{
let { data } = await request(path, 'arrayBuffer');
From 7b47f0ae4223fc2550614df0ff20297260307c38 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Mon, 17 Mar 2025 05:40:15 +0530
Subject: [PATCH 02/13] updating strokeShader
---
src/webgl/material.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/webgl/material.js b/src/webgl/material.js
index 718a85740e..ac4bcda080 100644
--- a/src/webgl/material.js
+++ b/src/webgl/material.js
@@ -1006,7 +1006,7 @@ function material(p5, fn){
* `;
*
* function setup() {
- * createCanvas(100, 100, WEBGL);
+ * createCanvas(200, 200, WEBGL);
* animatedStrokeShader = createShader(vertSrc, fragSrc);
* strokeShader(animatedStrokeShader);
* strokeWeight(4);
From a70bf9b55a35ad7ae529fac9284ee58ba9f1d629 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Mon, 17 Mar 2025 05:45:02 +0530
Subject: [PATCH 03/13] Updating imageShader
---
src/webgl/material.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/webgl/material.js b/src/webgl/material.js
index ac4bcda080..4031852efe 100644
--- a/src/webgl/material.js
+++ b/src/webgl/material.js
@@ -1106,7 +1106,7 @@ function material(p5, fn){
* async function setup() {
* img = await loadImage('assets/outdoor_image.jpg');
*
- * createCanvas(100, 100, WEBGL);
+ * createCanvas(200, 200, WEBGL);
* noStroke();
*
* imgShader = createShader(`
@@ -1171,7 +1171,7 @@ function material(p5, fn){
* async function setup() {
* img = await loadImage('assets/outdoor_image.jpg');
*
- * createCanvas(100, 100, WEBGL);
+ * createCanvas(200, 200, WEBGL);
* noStroke();
*
* imgShader = createShader(`
From feba419eaf12480e97bcfee624c43b48248b01ca Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Mon, 17 Mar 2025 06:15:32 +0530
Subject: [PATCH 04/13] updating shader()
---
src/webgl/material.js | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/webgl/material.js b/src/webgl/material.js
index 4031852efe..9207708a8e 100644
--- a/src/webgl/material.js
+++ b/src/webgl/material.js
@@ -748,8 +748,8 @@ function material(p5, fn){
* <p>
*
* If you want to apply shaders to strokes or images, use the following methods:
- * - **[strokeShader()](#/p5/strokeShader)**: Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
- * - **[imageShader()](#/p5/imageShader)**: Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
+ * - <a href="#/p5/strokeShader">strokeShader()</a> : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
+ * - <a href="#/p5/imageShader">imageShader()</a> : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
*
* </p>
* </div>
@@ -794,7 +794,7 @@ function material(p5, fn){
* `;
*
* function setup() {
- * createCanvas(100, 100, WEBGL);
+ * createCanvas(200, 200, WEBGL);
* fillShader = createShader(vertSrc, fragSrc);
* noStroke();
* describe('A rotating torus with simulated directional lighting.');
@@ -844,7 +844,7 @@ function material(p5, fn){
* `;
*
* function setup() {
- * createCanvas(100, 100, WEBGL);
+ * createCanvas(200, 200, WEBGL);
* fillShader = createShader(vertSrc, fragSrc);
* shader(fillShader);
* noStroke();
@@ -869,7 +869,7 @@ function material(p5, fn){
* let myShader;
*
* function setup() {
- * createCanvas(100, 100, WEBGL);
+ * createCanvas(200, 200, WEBGL);
*
* myShader = baseMaterialShader().modify({
* declarations: 'uniform float time;',
From 2f1c4cd16bb6756d323187eccbddf4177093f286 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Tue, 18 Mar 2025 03:41:08 +0530
Subject: [PATCH 05/13] updating strokeMode()
---
src/webgl/3d_primitives.js | 27 +++++++++++++++++----------
1 file changed, 17 insertions(+), 10 deletions(-)
diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js
index ba332833ea..4a1b9e35f0 100644
--- a/src/webgl/3d_primitives.js
+++ b/src/webgl/3d_primitives.js
@@ -35,8 +35,7 @@ function primitives3D(p5, fn){
* <code>
* function setup() {
* createCanvas(300, 300, WEBGL);
- *
- * describe('A sphere with red stroke and a red, wavy line on a gray background.');
+ * describe('A sphere with red stroke and a red, wavy line on a gray background. The wavy line have caps, joins and colors.');
* }
*
* function draw() {
@@ -47,13 +46,16 @@ function primitives3D(p5, fn){
* translate(0, -50, 0);
* sphere(50);
* pop();
+ * orbitControl();
*
* noFill();
* strokeWeight(15);
- * beginShape();
- * vertex(-150, 100);
* stroke('red');
- * bezierVertex(-50, -100, 30, 300, 130, 50);
+ * beginShape();
+ * bezierOrder(2); // Sets the order of the Bezier curve.
+ * bezierVertex(80, 80);
+ * bezierVertex(50, -40);
+ * bezierVertex(-80, 80);
* endShape();
* }
* </code>
@@ -63,25 +65,30 @@ function primitives3D(p5, fn){
* <code>
* function setup() {
* createCanvas(300, 300, WEBGL);
- *
* describe('A sphere with red stroke and a wavy line without full curve decorations without caps and color on a gray background.');
* }
*
* function draw() {
* background(128);
- * strokeMode(SIMPLE); // Enables simple rendering without caps, joins, and stroke color.
+ * strokeMode(SIMPLE); // Simplifies stroke rendering for better performance.
+ *
+ * // Draw sphere
* push();
* strokeWeight(1);
* translate(0, -50, 0);
* sphere(50);
* pop();
+ * orbitControl();
*
+ * // Draw modified wavy red line
* noFill();
* strokeWeight(15);
- * beginShape();
- * vertex(-150, 100);
* stroke('red');
- * bezierVertex(-50, -100, 30, 300, 130, 50);
+ * beginShape();
+ * bezierOrder(2); // Sets the order of the Bezier curve.
+ * bezierVertex(80, 80);
+ * bezierVertex(50, -40);
+ * bezierVertex(-80, 80);
* endShape();
* }
* </code>
From 33f73ebf85aa5f944e72b63a566df934cd620107 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Tue, 18 Mar 2025 04:57:23 +0530
Subject: [PATCH 06/13] fixing image()
---
src/image/loading_displaying.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js
index 66fbd1931a..2af12ee408 100644
--- a/src/image/loading_displaying.js
+++ b/src/image/loading_displaying.js
@@ -995,7 +995,7 @@ function loadingDisplaying(p5, fn){
*
* async function setup() {
* // Load the image.
- * img = await loadImage('assets/laDefense50.jpg');
+ * img = await loadImage('assets/laDefense50.png');
*
* createCanvas(100, 100);
*
From 9c9a3aa45020118d6bfd12cdf8aa8e30cae19eed Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Wed, 19 Mar 2025 08:02:41 +0530
Subject: [PATCH 07/13] fixing loadTable
---
src/io/files.js | 42 ++++++++++++++++++------------------------
1 file changed, 18 insertions(+), 24 deletions(-)
diff --git a/src/io/files.js b/src/io/files.js
index 6659a7e63e..d409d2e1dd 100644
--- a/src/io/files.js
+++ b/src/io/files.js
@@ -486,33 +486,27 @@ function files(p5, fn){
* @example
* <div class='norender'>
* <code>
- * // Given the following CSV file called "mammals.csv"
- * // located in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
- *
- * //count the columns
- * print(table.getRowCount() + ' total rows in table');
- * print(table.getColumnCount() + ' total columns in table');
- *
- * print(table.getColumn('name'));
- * //["Goat", "Leopard", "Zebra"]
- *
- * //cycle through the table
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++) {
- * print(table.getString(r, c));
- * }
- * describe(`randomly generated text from a file,
- * for example "i smell like butter"`);
+ * // Create a 200x200 canvas
+ * createCanvas(200, 200);
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Get the second row (index 1)
+ * let row = table.getRow(1);
+ *
+ * // Set text properties
+ * fill(0); // Set text color to black
+ * textSize(16); // Adjust text size as needed
+ *
+ * // Display each column value in the row on the canvas.
+ * // Using an offset for y-position so each value appears on a new line.
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * text(row.getString(c), 10, 30 + c * 20);
+ * }
* }
* </code>
* </div>
From 2c7a6a2c2ee4d88520a594d1b6a8cef53d4ce8c6 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Wed, 19 Mar 2025 08:07:24 +0530
Subject: [PATCH 08/13] fixing multiple function from p5.Table
---
src/io/p5.Table.js | 112 +++++++++++++++++++++++++++------------------
1 file changed, 68 insertions(+), 44 deletions(-)
diff --git a/src/io/p5.Table.js b/src/io/p5.Table.js
index 17ffb1c4c3..a32604a714 100644
--- a/src/io/p5.Table.js
+++ b/src/io/p5.Table.js
@@ -51,20 +51,31 @@ class Table {
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 300x300 canvas
+ * createCanvas(300, 300);
*
- * //add a row
+ * // Load the CSV file from the assets folder with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Add a new row for "Wolf"
* let newRow = table.addRow();
* newRow.setString('id', table.getRowCount() - 1);
* newRow.setString('species', 'Canis Lupus');
- * newRow.setString('name', 'Wolf');
- *
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
+ * newRow.setString('name', 'Wolf');
+ *
+ * // Set text properties
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display the table data on the canvas
+ * // Each cell is positioned based on its row and column
+ * for (let r = 0; r < table.getRowCount(); r++) {
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * let x = c * 50 + 10; // Horizontal spacing for each column
+ * let y = r * 30 + 20; // Vertical spacing for each row
+ * text(table.getString(r, c), x * c, y);
+ * }
+ * }
*
* describe('no image displayed');
* }
@@ -500,7 +511,7 @@ class Table {
const ret = [];
if (typeof value === 'string') {
for (let i = 0; i < this.rows.length; i++) {
- ret.push(this.rows[i].obj[value]);
+ ret.push(this.rows[i].obj[this.columns.indexOf(value)]);
}
} else {
for (let j = 0; j < this.rows.length; j++) {
@@ -530,13 +541,23 @@ class Table {
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas
+ * createCanvas(200, 200);
*
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Clear all rows from the table
* table.clearRows();
- * print(table.getRowCount() + ' total rows in table');
- * print(table.getColumnCount() + ' total columns in table');
+ *
+ * // Set text properties
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display the number of rows and columns on the canvas
+ * text(table.getRowCount() + ' total rows in table', 10, 30);
+ * text(table.getColumnCount() + ' total columns in table', 10, 60);
+ *
* describe('no image displayed');
* }
* </code>
@@ -559,30 +580,35 @@ class Table {
* @example
* <div class="norender">
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 300x300 canvas
+ * createCanvas(300, 300);
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
+ * // Add a new column 'carnivore' and set its values
* table.addColumn('carnivore');
* table.set(0, 'carnivore', 'no');
* table.set(1, 'carnivore', 'yes');
* table.set(2, 'carnivore', 'no');
*
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
+ * // Set text properties for drawing on the canvas
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display the table data on the canvas in a grid format
+ * // Here we calculate positions based on row and column indices.
+ * for (let r = 0; r < table.getRowCount(); r++) {
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * // Calculate x and y positions for each cell.
+ * let x = c * 50 + 10; // Horizontal offset for each column
+ * let y = r * 30 + 20; // Vertical offset for each row
+ * text(table.getString(r, c), x * c, y);
+ * }
+ * }
*
* describe('no image displayed');
* }
@@ -1267,24 +1293,22 @@ function table(p5, fn){
* @example
* <div class="norender">
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas
+ * createCanvas(200, 200);
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Set text properties for drawing on the canvas
+ * fill(0); // Set text color to black
+ * textSize(12); // Adjust text size as needed
*
- * //print the column names
+ * // Display the column names on the canvas
* for (let c = 0; c < table.getColumnCount(); c++) {
- * print('column ' + c + ' is named ' + table.columns[c]);
+ * text('column ' + c + ' is named ' + table.columns[c], 10, 30 + c * 20);
* }
* }
* </code>
From 9cda2c4c5a89b22176b5056a70f47e0d5f583521 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Thu, 20 Mar 2025 04:52:27 +0530
Subject: [PATCH 09/13] fixing whole p5.Table for docs
---
src/io/p5.Table.js | 539 ++++++++++++++++++++++++++-------------------
1 file changed, 309 insertions(+), 230 deletions(-)
diff --git a/src/io/p5.Table.js b/src/io/p5.Table.js
index a32604a714..c67cc3fa52 100644
--- a/src/io/p5.Table.js
+++ b/src/io/p5.Table.js
@@ -38,7 +38,7 @@ class Table {
* @return {p5.TableRow} the row that was added
*
* @example
- * <div class="norender">
+ * <div>
* <code>
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
@@ -102,31 +102,37 @@ class Table {
* @param {Integer} id ID number of the row to remove
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas and set a white background
+ * createCanvas(200, 200);
+ * background(255);
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
- * //remove the first row
+ * // Remove the first row from the table
* table.removeRow(0);
*
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
+ * // Set text properties for drawing on the canvas
+ * fill(0); // Set text color to black
+ * textSize(12); // Adjust text size as needed
*
+ * // Display the table values on the canvas:
+ * // Each row's cell values are joined into a single string and drawn on a new line.
+ * let y = 20; // Starting vertical position
+ * for (let r = 0; r < table.getRowCount(); r++) {
+ * let rowText = "";
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * rowText += table.getString(r, c) + " ";
+ * }
+ * text(rowText, 18, y * 3);
+ * y += 20;
+ * }
+ *
* describe('no image displayed');
* }
* </code>
@@ -148,28 +154,28 @@ class Table {
* @return {p5.TableRow} <a href="#/p5.TableRow">p5.TableRow</a> object
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas
+ * createCanvas(200, 200);
+ * background(255); // Set background to white
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('mammals.csv', ',', 'header');
*
+ * // Get the row at index 1 (second row)
* let row = table.getRow(1);
- * //print it column by column
- * //note: a row is an object, not an array
+ *
+ * // Set text properties for drawing on the canvas
+ * fill(0); // Set text color to black
+ * textSize(12); // Set the text size
+ *
+ * // Loop over each column in the row and display its value on the canvas
* for (let c = 0; c < table.getColumnCount(); c++) {
- * print(row.getString(c));
+ * text(row.getString(c), 10, 20 + c * 50 + 20);
* }
*
* describe('no image displayed');
@@ -188,34 +194,41 @@ class Table {
* @return {p5.TableRow[]} Array of <a href="#/p5.TableRow">p5.TableRow</a>s
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas and set a white background
+ * createCanvas(200, 200);
+ * background(255);
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('mammals.csv', ',', 'header');
*
* let rows = table.getRows();
*
- * //warning: rows is an array of objects
+ * // Warning: rows is an array of objects.
+ * // Set the 'name' of each row to 'Unicorn'
* for (let r = 0; r < rows.length; r++) {
* rows[r].set('name', 'Unicorn');
* }
*
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
+ * // Set text properties
+ * fill(0); // Set text color to black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display the modified table values on the canvas
+ * // We'll join each row's values with a space and display each row on a new line.
+ * let y = 20; // Starting y position
+ * for (let r = 0; r < table.getRowCount(); r++) {
+ * let rowText = "";
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * rowText += table.getString(r, c) + " ";
+ * }
+ * text(rowText, 10, y * 2);
+ * y += 20; // Move to next line
+ * }
*
* describe('no image displayed');
* }
@@ -240,27 +253,29 @@ class Table {
* @return {p5.TableRow}
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 100x100 canvas
+ * createCanvas(100, 100);
+ * background(255); // Set background to white
*
- * //find the animal named zebra
+ * // Load the CSV file with a header row
+ * table = await loadTable('mammals.csv', ',', 'header');
+ *
+ * // Find the row with the animal named "Zebra"
* let row = table.findRow('Zebra', 'name');
- * //find the corresponding species
- * print(row.getString('species'));
+ *
+ * // Get the species from the found row
+ * let species = row.getString('species');
+ *
+ * // Set text properties and display the species on the canvas
+ * fill(0); // Set text color to black
+ * textSize(12); // Adjust text size as needed
+ * text(species, 10, 30);
+ *
* describe('no image displayed');
* }
* </code>
@@ -300,32 +315,34 @@ class Table {
* @return {p5.TableRow[]} An Array of TableRow objects
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas
+ * createCanvas(200, 200);
+ * background(255); // Set background to white
*
- * //add another goat
+ * // Load the CSV file with a header row
+ * table = await loadTable('mammals.csv', ',', 'header');
+ *
+ * // Add another goat entry
* let newRow = table.addRow();
* newRow.setString('id', table.getRowCount() - 1);
* newRow.setString('species', 'Scape Goat');
* newRow.setString('name', 'Goat');
*
- * //find the rows containing animals named Goat
+ * // Find rows where the name is "Goat"
* let rows = table.findRows('Goat', 'name');
- * print(rows.length + ' Goats found');
+ *
+ * // Set text properties
+ * fill(0); // Set text color to black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display the result on the canvas
+ * text(rows.length + ' Goats found', 10, 30);
+ *
* describe('no image displayed');
* }
* </code>
@@ -364,27 +381,30 @@ class Table {
* @return {p5.TableRow} TableRow object
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas
+ * createCanvas(200, 200);
+ * background(255); // Set background to white
*
- * //Search using specified regex on a given column, return TableRow object
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Search using the specified regex on column index 1 (species)
* let mammal = table.matchRow(new RegExp('ant'), 1);
- * print(mammal.getString(1));
- * //Output "Panthera pardus"
+ * let species = mammal.getString(1); // "Panthera pardus"
+ *
+ * // Set text properties for drawing on the canvas
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display the species on the canvas
+ * text(species, 10, 30);
+ *
+ * describe('no image displayed');
* }
* </code>
* </div>
@@ -423,20 +443,25 @@ class Table {
* let table;
*
* function setup() {
- * table = new p5.Table();
+ * // Create a 200x200 canvas and set a white background
+ * createCanvas(200, 200);
+ * background(255);
*
+ * // Create a new p5.Table and add columns
+ * table = new p5.Table();
* table.addColumn('name');
* table.addColumn('type');
*
- * let newRow = table.addRow();
+ * // Add rows to the table
+ * let newRow = table.addRow();
* newRow.setString('name', 'Lion');
- * newRow.setString('type', 'Mammal');
+ * newRow.setString('type', 'Mammal');
*
* newRow = table.addRow();
* newRow.setString('name', 'Snake');
* newRow.setString('type', 'Reptile');
*
- * newRow = table.addRow();
+ * newRow = table.addRow();
* newRow.setString('name', 'Mosquito');
* newRow.setString('type', 'Insect');
*
@@ -444,14 +469,21 @@ class Table {
* newRow.setString('name', 'Lizard');
* newRow.setString('type', 'Reptile');
*
+ * // Search for rows where the "type" starts with "R"
* let rows = table.matchRows('R.*', 'type');
+ *
+ * // Set text properties for drawing on the canvas
+ * fill(0); // Text color: black
+ * textSize(12); // Text size
+ *
+ * // Display each matching row on the canvas
+ * let y = 20;
* for (let i = 0; i < rows.length; i++) {
- * print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
+ * let output = rows[i].getString('name') + ': ' + rows[i].getString('type');
+ * text(output, 10, y);
+ * y += 20;
* }
* }
- * // Sketch prints:
- * // Snake: Reptile
- * // Lizard: Reptile
* </code>
* </div>
*/
@@ -511,8 +543,8 @@ class Table {
const ret = [];
if (typeof value === 'string') {
for (let i = 0; i < this.rows.length; i++) {
- ret.push(this.rows[i].obj[this.columns.indexOf(value)]);
- }
+ ret.push(this.rows[i].obj[this.columns.indexOf(value)]);
+ }
} else {
for (let j = 0; j < this.rows.length; j++) {
ret.push(this.rows[j].arr[value]);
@@ -528,7 +560,7 @@ class Table {
* @deprecated p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)
*
* @example
- * <div class="norender">
+ * <div>
* <code>
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
@@ -578,7 +610,7 @@ class Table {
* @param {String} [title] title of the given column
*
* @example
- * <div class="norender">
+ * <div>
* <code>
* let table;
*
@@ -606,7 +638,7 @@ class Table {
* // Calculate x and y positions for each cell.
* let x = c * 50 + 10; // Horizontal offset for each column
* let y = r * 30 + 20; // Vertical offset for each row
- * text(table.getString(r, c), x * c, y);
+ * text(table.getString(r, c), x + c*25, y);
* }
* }
*
@@ -835,25 +867,31 @@ class Table {
* @param {String|Integer} column columnName (string) or ID (number)
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 100x100 canvas
+ * createCanvas(100, 100);
+ * background(255); // Set background to white
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Remove the "id" column
+ * table.removeColumn('id');
+ *
+ * // Get the remaining column count
+ * let colCount = table.getColumnCount();
+ *
+ * // Set text properties
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display the column count on the canvas
+ * text(colCount, 40, 50);
*
- * table.removeColumn('id');
- * print(table.getColumnCount());
* describe('no image displayed');
* }
* </code>
@@ -896,30 +934,37 @@ class Table {
* @param {String|Number} value value to assign
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas and set a white background
+ * createCanvas(200, 200);
+ * background(255);
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('mammals.csv', ',', 'header');
*
+ * // Update the first row: change species to "Canis Lupus" and name to "Wolf"
* table.set(0, 'species', 'Canis Lupus');
* table.set(0, 'name', 'Wolf');
*
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
+ * // Set text properties for drawing on the canvas
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display the table values on the canvas:
+ * // Each row's values are concatenated into a single string and displayed on a new line.
+ * let y = 20; // Starting vertical position
+ * for (let r = 0; r < table.getRowCount(); r++) {
+ * let rowText = "";
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * rowText += table.getString(r, c) + " ";
+ * }
+ * text(rowText, 10, y * 2.5);
+ * y += 20;
+ * }
*
* describe('no image displayed');
* }
@@ -944,25 +989,27 @@ class Table {
* @example
* <div class="norender">
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 100x100 canvas and set a white background
+ * createCanvas(100, 100);
+ * background(255);
*
+ * // Load the CSV file with a header row
+ * table = await loadTable('mammals.csv', ',', 'header');
+ *
+ * // Set the value in row 1, column "id" to the number 1
* table.setNum(1, 'id', 1);
*
- * print(table.getColumn(0));
- * //["0", 1, "2"]
+ * // Get the first column as an array and join its values into a string for display.
+ * let col0 = table.getColumn(0); // Expected output: ["0", 1, "2"]
+ * let output = col0.join(", ");
+ *
+ * // Set text properties and display the output on the canvas
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ * text(output, 30, 50);
*
* describe('no image displayed');
* }
@@ -984,32 +1031,44 @@ class Table {
* or title (String)
* @param {String} value value to assign
* @example
- * <div class="norender"><code>
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
+ * <div>
+ * <code>
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas and set a white background
+ * createCanvas(200, 200);
+ * background(255);
+ *
+ * // Load the CSV file from the assets folder with a header row
+ * table = await loadTable('mammals.csv', ',', 'header');
*
- * //add a row
+ * // Add a new row with the new animal data
* let newRow = table.addRow();
* newRow.setString('id', table.getRowCount() - 1);
* newRow.setString('species', 'Canis Lupus');
* newRow.setString('name', 'Wolf');
*
- * print(table.getArray());
+ * // Convert the table to a 2D array
+ * let tableArray = table.getArray();
+ *
+ * // Set text properties
+ * fill(0); // Set text color to black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display each row of the table on the canvas
+ * let y = 20; // Starting y position
+ * for (let i = 0; i < tableArray.length; i++) {
+ * // Join the values of each row with a comma separator
+ * let rowText = tableArray[i].join(', ');
+ * text(rowText, 15, y * 2);
+ * y += 20; // Increment y position for the next row
+ * }
*
* describe('no image displayed');
* }
- * </code></div>
+ * </code>
+ * </div>
*/
setString (row, column, value) {
this.rows[row].setString(column, value);
@@ -1027,27 +1086,30 @@ class Table {
* @return {String|Number}
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 100x100 canvas
+ * createCanvas(100, 100);
+ * background(255); // Set background to white
+ *
+ * // Load the CSV file from the assets folder with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Set text properties for drawing on the canvas
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Get the values from the table
+ * let value1 = table.get(0, 1); // Using column index (1) => "Capra hircus"
+ * let value2 = table.get(0, 'species'); // Using column name => "Capra hircus"
+ *
+ * // Display the values on the canvas
+ * text(value1, 10, 30);
+ * text(value2, 10, 60);
*
- * print(table.get(0, 1));
- * //Capra hircus
- * print(table.get(0, 'species'));
- * //Capra hircus
* describe('no image displayed');
* }
* </code>
@@ -1069,25 +1131,26 @@ class Table {
* @return {Number}
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 100x100 canvas
+ * createCanvas(100, 100);
+ * background(255); // Set background to white
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('mammals.csv', ',', 'header');
+ *
+ * // Compute the result: id at row 1, column 0 plus 100 (i.e. 1 + 100 = 101)
+ * let result = table.getNum(1, 0) + 100;
+ *
+ * // Set text properties and display the result on the canvas
+ * fill(0); // Set text color to black
+ * textSize(12); // Adjust text size as needed
+ * text(result, 10, 30); // Display the result at position (10, 30)
*
- * print(table.getNum(1, 0) + 100);
- * //id 1 + 100 = 101
* describe('no image displayed');
* }
* </code>
@@ -1109,32 +1172,43 @@ class Table {
* @return {String}
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas
+ * createCanvas(200, 200);
+ * background(255); // Set background to white
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('mammals.csv', ',', 'header');
+ *
+ * // Set text properties
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display each table cell value on the canvas one below the other.
+ * // We use a variable 'y' to increment the vertical position.
+ * let y = 20;
+ * text(table.getString(0, 0), 10, y); // 0
+ * y += 20;
+ * text(table.getString(0, 1), 10, y); // Capra hircus
+ * y += 20;
+ * text(table.getString(0, 2), 10, y); // Goat
+ * y += 20;
+ * text(table.getString(1, 0), 10, y); // 1
+ * y += 20;
+ * text(table.getString(1, 1), 10, y); // Panthera pardus
+ * y += 20;
+ * text(table.getString(1, 2), 10, y); // Leopard
+ * y += 20;
+ * text(table.getString(2, 0), 10, y); // 2
+ * y += 20;
+ * text(table.getString(2, 1), 10, y); // Equus zebra
+ * y += 20;
+ * text(table.getString(2, 2), 10, y); // Zebra
*
- * print(table.getString(0, 0)); // 0
- * print(table.getString(0, 1)); // Capra hircus
- * print(table.getString(0, 2)); // Goat
- * print(table.getString(1, 0)); // 1
- * print(table.getString(1, 1)); // Panthera pardus
- * print(table.getString(1, 2)); // Leopard
- * print(table.getString(2, 0)); // 2
- * print(table.getString(2, 1)); // Equus zebra
- * print(table.getString(2, 2)); // Zebra
* describe('no image displayed');
* }
* </code>
@@ -1211,27 +1285,32 @@ class Table {
* @return {Array}
*
* @example
- * <div class="norender">
+ * <div>
* <code>
- * // Given the CSV file "mammals.csv"
- * // in the project's "assets" folder
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leoperd
- * // 2,Equus zebra,Zebra
- *
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas and set a white background
+ * createCanvas(200, 200);
+ * background(255);
*
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Get the CSV data as a 2D array
* let tableArray = table.getArray();
+ *
+ * // Set text properties
+ * fill(0); // Set text color to black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display each row of the CSV on the canvas
+ * // Each row is displayed on a separate line
* for (let i = 0; i < tableArray.length; i++) {
- * print(tableArray[i]);
+ * let rowText = tableArray[i].join(", ");
+ * text(rowText, 10, 20 + i * 50 + 30);
* }
+ *
* describe('no image displayed');
* }
* </code>
@@ -1291,7 +1370,7 @@ function table(p5, fn){
* @for p5.Table
* @name columns
* @example
- * <div class="norender">
+ * <div >
* <code>
* let table;
*
From a3778bfc8311defe2fd2f2fe958317aedfa2e985 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Thu, 20 Mar 2025 04:55:10 +0530
Subject: [PATCH 10/13] some minor fixes
---
src/io/p5.Table.js | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/src/io/p5.Table.js b/src/io/p5.Table.js
index c67cc3fa52..bf4bbfaaf5 100644
--- a/src/io/p5.Table.js
+++ b/src/io/p5.Table.js
@@ -164,7 +164,7 @@ class Table {
* background(255); // Set background to white
*
* // Load the CSV file with a header row
- * table = await loadTable('mammals.csv', ',', 'header');
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* // Get the row at index 1 (second row)
* let row = table.getRow(1);
@@ -204,7 +204,7 @@ class Table {
* background(255);
*
* // Load the CSV file with a header row
- * table = await loadTable('mammals.csv', ',', 'header');
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* let rows = table.getRows();
*
@@ -263,7 +263,7 @@ class Table {
* background(255); // Set background to white
*
* // Load the CSV file with a header row
- * table = await loadTable('mammals.csv', ',', 'header');
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* // Find the row with the animal named "Zebra"
* let row = table.findRow('Zebra', 'name');
@@ -325,7 +325,7 @@ class Table {
* background(255); // Set background to white
*
* // Load the CSV file with a header row
- * table = await loadTable('mammals.csv', ',', 'header');
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* // Add another goat entry
* let newRow = table.addRow();
@@ -944,7 +944,7 @@ class Table {
* background(255);
*
* // Load the CSV file with a header row
- * table = await loadTable('mammals.csv', ',', 'header');
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* // Update the first row: change species to "Canis Lupus" and name to "Wolf"
* table.set(0, 'species', 'Canis Lupus');
@@ -997,7 +997,7 @@ class Table {
* background(255);
*
* // Load the CSV file with a header row
- * table = await loadTable('mammals.csv', ',', 'header');
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* // Set the value in row 1, column "id" to the number 1
* table.setNum(1, 'id', 1);
@@ -1041,7 +1041,7 @@ class Table {
* background(255);
*
* // Load the CSV file from the assets folder with a header row
- * table = await loadTable('mammals.csv', ',', 'header');
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* // Add a new row with the new animal data
* let newRow = table.addRow();
@@ -1141,7 +1141,7 @@ class Table {
* background(255); // Set background to white
*
* // Load the CSV file with a header row
- * table = await loadTable('mammals.csv', ',', 'header');
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* // Compute the result: id at row 1, column 0 plus 100 (i.e. 1 + 100 = 101)
* let result = table.getNum(1, 0) + 100;
@@ -1182,7 +1182,7 @@ class Table {
* background(255); // Set background to white
*
* // Load the CSV file with a header row
- * table = await loadTable('mammals.csv', ',', 'header');
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* // Set text properties
* fill(0); // Text color: black
From 490fe4bea8b07fc582a895d77e80d3f2c39bda9d Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Thu, 20 Mar 2025 06:54:15 +0530
Subject: [PATCH 11/13] fixes
---
src/io/p5.Table.js | 24 +++++++++---------------
1 file changed, 9 insertions(+), 15 deletions(-)
diff --git a/src/io/p5.Table.js b/src/io/p5.Table.js
index bf4bbfaaf5..9b9c7f7cce 100644
--- a/src/io/p5.Table.js
+++ b/src/io/p5.Table.js
@@ -615,30 +615,24 @@ class Table {
* let table;
*
* async function setup() {
- * // Create a 300x300 canvas
* createCanvas(300, 300);
+ * table = await loadTable('/assets/mammals.csv', ',', 'header');
*
- * // Load the CSV file with a header row
- * table = await loadTable('assets/mammals.csv', ',', 'header');
- *
- * // Add a new column 'carnivore' and set its values
* table.addColumn('carnivore');
* table.set(0, 'carnivore', 'no');
* table.set(1, 'carnivore', 'yes');
* table.set(2, 'carnivore', 'no');
*
- * // Set text properties for drawing on the canvas
- * fill(0); // Text color: black
- * textSize(12); // Adjust text size as needed
+ * fill(0); // Set text color to black
+ * textSize(11); // Adjust text size as needed
*
- * // Display the table data on the canvas in a grid format
- * // Here we calculate positions based on row and column indices.
* for (let r = 0; r < table.getRowCount(); r++) {
* for (let c = 0; c < table.getColumnCount(); c++) {
- * // Calculate x and y positions for each cell.
- * let x = c * 50 + 10; // Horizontal offset for each column
- * let y = r * 30 + 20; // Vertical offset for each row
- * text(table.getString(r, c), x + c*25, y);
+ * // Keep column spacing consistent (e.g. 80 pixels apart).
+ * let x = c * 80 + 10;
+ * let y = r * 30 + 20;
+ * // Use x directly, rather than multiplying by c again
+ * text(table.getString(r, c), x, y);
* }
* }
*
@@ -987,7 +981,7 @@ class Table {
* @param {Number} value value to assign
*
* @example
- * <div class="norender">
+ * <div>
* <code>
* let table;
*
From 1273f7b8c32827497c97492e00a45c53a9ea9887 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Thu, 20 Mar 2025 07:05:01 +0530
Subject: [PATCH 12/13] some minor fixes
---
src/io/p5.Table.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/io/p5.Table.js b/src/io/p5.Table.js
index 9b9c7f7cce..580c283357 100644
--- a/src/io/p5.Table.js
+++ b/src/io/p5.Table.js
@@ -438,7 +438,7 @@ class Table {
* title (string)
* @return {p5.TableRow[]} An Array of TableRow objects
* @example
- * <div class="norender">
+ * <div>
* <code>
* let table;
*
From 170c72b1a7785dbd3519f77ab3b03e8ce208276d Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Thu, 20 Mar 2025 07:57:40 +0530
Subject: [PATCH 13/13] fixing functions on p5.TableRow.js
---
src/io/p5.TableRow.js | 219 ++++++++++++++++++++++++++----------------
1 file changed, 134 insertions(+), 85 deletions(-)
diff --git a/src/io/p5.TableRow.js b/src/io/p5.TableRow.js
index ffdf0be4b8..8550baedbd 100644
--- a/src/io/p5.TableRow.js
+++ b/src/io/p5.TableRow.js
@@ -23,32 +23,43 @@ class TableRow {
* @param {String|Number} value The value to be stored
*
* @example
- * <div class="norender"><code>
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
+ * <div>
+ * <code>
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas and set a white background
+ * createCanvas(200, 200);
+ * background(255);
*
- * let rows = table.getRows();
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Set every row's "name" to "Unicorn"
+ * let rows = table.getRows();
* for (let r = 0; r < rows.length; r++) {
* rows[r].set('name', 'Unicorn');
* }
*
- * //print the results
- * print(table.getArray());
+ * // Convert the table to an array
+ * let tableArray = table.getArray();
+ *
+ * // Set text properties
+ * fill(0); // Set text color to black
+ * textSize(12); // Set text size
+ *
+ * // Display each row of the table on the canvas
+ * let y = 20; // Starting y position
+ * for (let i = 0; i < tableArray.length; i++) {
+ * let rowText = tableArray[i].join(', ');
+ * text(rowText, 10, y * 2.5);
+ * y += 20; // Increment y position for the next row
+ * }
*
* describe('no image displayed');
* }
- * </code></div>
+ * </code>
+ * </div>
*/
set(column, value) {
// if typeof column is string, use .obj
@@ -82,31 +93,44 @@ class TableRow {
* @param {Number|String} value The value to be stored
* as a Float
* @example
- * <div class="norender"><code>
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
+ * <div>
+ * <code>
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x200 canvas and set a white background
+ * createCanvas(200, 200);
+ * background(255);
*
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Update each row's "id" to (row index + 10)
* let rows = table.getRows();
* for (let r = 0; r < rows.length; r++) {
* rows[r].setNum('id', r + 10);
* }
*
- * print(table.getArray());
+ * // Convert the table to a 2D array for display
+ * let tableArray = table.getArray();
+ *
+ * // Set text properties
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display each row of the table on the canvas
+ * let y = 20; // Starting y position
+ * for (let i = 0; i < tableArray.length; i++) {
+ * // Join each row's values with a comma separator
+ * let rowText = tableArray[i].join(', ');
+ * text(rowText, 10, y * 2.5);
+ * y += 20; // Increment y for the next row
+ * }
*
* describe('no image displayed');
* }
- * </code></div>
+ * </code>
+ * </div>
*/
setNum(column, value) {
const floatVal = parseFloat(value);
@@ -123,32 +147,43 @@ class TableRow {
* @param {String|Number|Boolean|Object} value The value to be stored
* as a String
* @example
- * <div class="norender"><code>
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
+ * <div>
+ * <code>
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 300x200 canvas and set a white background
+ * createCanvas(300, 200);
+ * background(255);
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
+ * // Update each row's "name" field
* let rows = table.getRows();
* for (let r = 0; r < rows.length; r++) {
* let name = rows[r].getString('name');
* rows[r].setString('name', 'A ' + name + ' named George');
* }
*
- * print(table.getArray());
+ * // Convert the table to a 2D array for display
+ * let tableArray = table.getArray();
*
- * describe('no image displayed');
+ * // Set text properties
+ * fill(0); // Text color: black
+ * textSize(12); // Adjust text size as needed
+ *
+ * // Display each row of the table on the canvas
+ * let y = 20; // Starting y position
+ * for (let i = 0; i < tableArray.length; i++) {
+ * let rowText = tableArray[i].join(', ');
+ * text(rowText, 10, y * 2.5);
+ * y += 20; // Increment y for the next row
+ * }
+ *
+ * // describe('no image displayed');
* }
- * </code></div>
+ * </code>
*/
setString(column, value) {
const stringVal = value.toString();
@@ -165,32 +200,37 @@ class TableRow {
* @return {String|Number}
*
* @example
- * <div class="norender"><code>
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
+ * <div>
+ * <code>
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x100 canvas and set a white background
+ * createCanvas(200, 100);
+ * background(255);
*
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
+ *
+ * // Extract the names from each row and store them in an array
* let names = [];
* let rows = table.getRows();
* for (let r = 0; r < rows.length; r++) {
* names.push(rows[r].get('name'));
* }
*
- * print(names);
+ * // Set text properties and display the names on the canvas
+ * fill(0); // Set text color to black
+ * textSize(12); // Set text size
+ *
+ * // Join names into a single string separated by commas
+ * let namesText = names.join(', ');
+ * text(namesText, 35, 50);
*
* describe('no image displayed');
* }
- * </code></div>
+ * </code>
+ * </div>
*/
get(column) {
if (typeof column === 'string') {
@@ -210,33 +250,39 @@ class TableRow {
* ID (number)
* @return {Number} Float Floating point number
* @example
- * <div class="norender"><code>
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
+ * <div>
+ * <code>
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x100 canvas and set a white background
+ * createCanvas(200, 100);
+ * background(255);
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* let rows = table.getRows();
* let minId = Infinity;
* let maxId = -Infinity;
+ *
* for (let r = 0; r < rows.length; r++) {
* let id = rows[r].getNum('id');
* minId = min(minId, id);
- * maxId = min(maxId, id);
- * }
- * print('minimum id = ' + minId + ', maximum id = ' + maxId);
+ * maxId = max(maxId, id);
+ * }
+ *
+ * let result = 'minimum id = ' + minId + ', maximum id = ' + maxId;
+ *
+ * // Set text properties and display the result on the canvas
+ * fill(0); // Set text color to black
+ * textSize(12); // Set text size
+ * text(result, 10, 50);
+ *
* describe('no image displayed');
* }
- * </code></div>
+ * </code>
+ * </div>
*/
getNum(column) {
let ret;
@@ -263,35 +309,38 @@ class TableRow {
* ID (number)
* @return {String} String
* @example
- * <div class="norender"><code>
- * // Given the CSV file "mammals.csv" in the project's "assets" folder:
- * //
- * // id,species,name
- * // 0,Capra hircus,Goat
- * // 1,Panthera pardus,Leopard
- * // 2,Equus zebra,Zebra
- *
+ * <div>
+ * <code>
* let table;
*
* async function setup() {
- * // The table is comma separated value "csv"
- * // and has a header specifying the columns labels.
- * table = await loadTable('assets/mammals.csv', 'csv', 'header');
+ * // Create a 200x100 canvas and set a white background
+ * createCanvas(200, 100);
+ * background(255);
+ *
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
* let rows = table.getRows();
* let longest = '';
* for (let r = 0; r < rows.length; r++) {
- * let species = rows[r].getString('species');
- * if (longest.length < species.length) {
+ * let species = rows[r].getString('species');
+ * if (longest.length < species.length) {
* longest = species;
* }
* }
*
- * print('longest: ' + longest);
+ * let result = 'longest: ' + longest;
+ *
+ * // Set text properties and display the result on the canvas
+ * fill(0); // Set text color to black
+ * textSize(12); // Set text size
+ * text(result, 30, 50);
*
* describe('no image displayed');
* }
- * </code></div>
+ * </code>
+ * </div>
*/
getString(column) {
if (typeof column === 'string') {