- * // 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);
+ * }
* }
*
*
+ *
+ *
+ *
* 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
* }
- *
+ *
+ * describe('no image displayed, displays first 5 bytes of mammals.xml in hexadecimal format');
+ * }
+ *
+ *
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
@@ -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');
* }
@@ -91,31 +102,37 @@ class Table {
* @param {Integer} id ID number of the row to remove
*
* @example
- *
+ *
*
- * // 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);
*
- * //remove the first row
- * table.removeRow(0);
+ * // Load the CSV file with a header row
+ * table = await loadTable('assets/mammals.csv', ',', 'header');
*
- * //print the results
- * for (let r = 0; r < table.getRowCount(); r++)
- * for (let c = 0; c < table.getColumnCount(); c++)
- * print(table.getString(r, c));
+ * // Remove the first row from the table
+ * table.removeRow(0);
*
+ * // 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');
* }
*
@@ -137,28 +154,28 @@ class Table {
* @return {p5.TableRow} p5.TableRow object
*
* @example
- *
+ *
*
- * // 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('assets/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');
@@ -177,34 +194,41 @@ class Table {
* @return {p5.TableRow[]} Array of p5.TableRows
*
* @example
- *
+ *
*
- * // 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');
*
* 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');
* }
@@ -229,27 +253,29 @@ class Table {
* @return {p5.TableRow}
*
* @example
- *
+ *
*
- * // 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');
*
- * //find the animal named zebra
+ * // 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');
* }
*
@@ -289,32 +315,34 @@ class Table {
* @return {p5.TableRow[]} An Array of TableRow objects
*
* @example
- *
+ *
*
- * // 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('assets/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');
* }
*
@@ -353,27 +381,30 @@ class Table {
* @return {p5.TableRow} TableRow object
*
* @example
- *
+ *
*
- * // 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('assets/mammals.csv', ',', 'header');
*
- * //Search using specified regex on a given column, return TableRow object
+ * // 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');
* }
*
*
@@ -407,25 +438,30 @@ class Table {
* title (string)
* @return {p5.TableRow[]} An Array of TableRow objects
* @example
- *
+ *
*
* 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');
*
@@ -433,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
*
*
*/
@@ -500,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]);
@@ -517,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
- *
+ *
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
@@ -530,13 +573,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');
* }
*
@@ -557,32 +610,31 @@ class Table {
* @param {String} [title] title of the given column
*
* @example
- *
+ *
*
- * // 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');
+ * createCanvas(300, 300);
+ * table = await loadTable('/assets/mammals.csv', ',', 'header');
*
* 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));
+ * fill(0); // Set text color to black
+ * textSize(11); // Adjust text size as needed
+ *
+ * for (let r = 0; r < table.getRowCount(); r++) {
+ * for (let c = 0; c < table.getColumnCount(); c++) {
+ * // 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);
+ * }
+ * }
*
* describe('no image displayed');
* }
@@ -809,25 +861,31 @@ class Table {
* @param {String|Integer} column columnName (string) or ID (number)
*
* @example
- *
+ *
*
- * // 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');
* }
*
@@ -870,30 +928,37 @@ class Table {
* @param {String|Number} value value to assign
*
* @example
- *
+ *
*
- * // 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');
*
+ * // 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');
* }
@@ -916,27 +981,29 @@ class Table {
* @param {Number} value value to assign
*
* @example
- *
+ *
*
- * // 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('assets/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');
* }
@@ -958,32 +1025,44 @@ class Table {
* or title (String)
* @param {String} value value to assign
* @example
- *
- * // 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);
*
- * //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 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');
* }
- *
+ *
+ *
*/
setString (row, column, value) {
this.rows[row].setString(column, value);
@@ -1001,27 +1080,30 @@ class Table {
* @return {String|Number}
*
* @example
- *
+ *
*
- * // 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');
* }
*
@@ -1043,25 +1125,26 @@ class Table {
* @return {Number}
*
* @example
- *
+ *
*
- * // 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');
+ *
+ * // 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');
* }
*
@@ -1083,32 +1166,43 @@ class Table {
* @return {String}
*
* @example
- *
+ *
*
- * // 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('assets/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');
* }
*
@@ -1185,27 +1279,32 @@ class Table {
* @return {Array}
*
* @example
- *
+ *
*
- * // 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');
* }
*
@@ -1265,26 +1364,24 @@ function table(p5, fn){
* @for p5.Table
* @name columns
* @example
- *
+ *
*
- * // 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);
* }
* }
*
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
- *
- * // 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);
*
- * 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');
* }
- *
+ *
+ *
*/
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
- *
- * // 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');
+ *
+ * // 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');
* }
- *
+ *
+ *
*/
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
- *
- * // 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 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');
* }
- *
+ *
*/
setString(column, value) {
const stringVal = value.toString();
@@ -165,32 +200,37 @@ class TableRow {
* @return {String|Number}
*
* @example
- *
- * // 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 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');
* }
- *
+ *
+ *
*/
get(column) {
if (typeof column === 'string') {
@@ -210,33 +250,39 @@ class TableRow {
* ID (number)
* @return {Number} Float Floating point number
* @example
- *
- * // 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 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');
* }
- *
+ *
+ *
*/
getNum(column) {
let ret;
@@ -263,35 +309,38 @@ class TableRow {
* ID (number)
* @return {String} String
* @example
- *
- * // 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 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');
* }
- *
+ *
+ *
*/
getString(column) {
if (typeof column === 'string') {
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){
*
* 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();
* }
*
@@ -63,25 +65,30 @@ function primitives3D(p5, fn){
*
* 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();
* }
*
diff --git a/src/webgl/material.js b/src/webgl/material.js
index 718a85740e..9207708a8e 100644
--- a/src/webgl/material.js
+++ b/src/webgl/material.js
@@ -748,8 +748,8 @@ function material(p5, fn){
*
*
* 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.
+ * - strokeShader() : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
+ * - imageShader() : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
*
*
*
@@ -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;',
@@ -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);
@@ -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(`