Creating and Populating a Table From Scratch

p5.js Coding Questions
1

Hello everyone. Completely new to P5JS. I am trying to create a table and populate it with data already collected by the same code.The table will have three columns: name, position_x, and position_y.
The code below didn’t get me any errors. However, I am not sure if it is correct.
let name;
let position_x;
let position_y;
let myTable = new p5.Table([name,let position_x,let position_y]);

So, if coding below is correct, how do I tell P5js to start reading my previously storaed data and place it on my myTable one row at the time?
Sorry if I am not clear enough.

Thanks

1 Like
2

hi, tables with p5.js see

when you go to the shown Methods you also get examples.

generally, you should

  • create your table first and store your data into it
  • and optionally save it to your local computer
  • later also can upload a CSV file to the server and reuse that

but if you have data already as ?array?
you might copy them to rows…

2 Likes
3

I’ve made a sketch that stores and reads an array of CSV row strings from the browser’s local storage using storeItem() & getItem() respectively; then converts that array to p5.TableRow objects; and finally use p5.Table::addRow() to populate a p5.Table container: :card_index_dividers:

  1. http://p5js.org/reference/#/p5/getItem
  2. http://p5js.org/reference/#/p5.Table/addRow

Each mouse click adds a new p5.TableRow to the p5.Table container, updating the browser’s local storage as well. :computer_mouse:

Middle-click it in order to clear the p5.Table & browser’s local storage: :broom:

  1. http://p5js.org/reference/#/p5.Table/clearRows
  2. http://p5js.org/reference/#/p5/removeItem

This sketch can be checked running online at the link below: :link:


/**
 * Populate Table from Local Storage (v1.0.2)
 * GoToLoop (2019-Jul-11)
 *
 * Discourse.Processing.org/t/creating-and-populating-a-table-from-scratch/12658/3
 * Bl.ocks.org/GoSubRoutine/dabbc9371441720a07bd5de513a6b890
 */

'use strict';

const A_ASCII = 'A'.charCodeAt(),
      Z_ASCII = 'Z'.charCodeAt(),
      HASH = '#', COMMA = ',',
      STORAGE_NAME = 'MyCSVTableRows',
      SAVE_NAME = 'MyTable.csv',
      ALL_COLORS = 0x1000;

let table;

function setup() {
  createCanvas(200, 200).mousePressed(addRandomRow);
  noLoop();

  (table = new p5.Table).columns = ['name', 'x', 'y'];
  const storage = getItem(STORAGE_NAME);
  storage && populateTableFromStorage(table, storage);

  console.log(table);
}

function draw() {
  background(HASH + hex(~~random(ALL_COLORS), 3));
}

function addRandomRow() {
  if (mouseButton === CENTER)  return emptyTableAndItsStorage(table);

  const tr = table.addRow();
  tr.set(0, String.fromCharCode(random(A_ASCII, Z_ASCII + 1)));
  tr.set(1, ~~random(width));
  tr.set(2, ~~random(height));

  console.log(tr);
  storeItem(STORAGE_NAME, prepareTableRowsForStorage(table));
  redraw();
}

function emptyTableAndItsStorage(t) {
  t.clearRows();
  removeItem(STORAGE_NAME);
  return t;
}

function populateTableFromStorage(t, arr) {
  for (const s of arr)  t.addRow(new p5.TableRow(s));
  return t;
}

function prepareTableRowsForStorage({ rows }) {
  return rows.map(tableRowsToStorageConvertor);
}

function tableRowsToStorageConvertor({ arr }) {
  return arr.join();
}
1 Like
4

Thanks very much for your quick and extense response. I will get to your code and adjust it to the one I have. I really appreciate the time you took helping me. Once again Thanks

5

Hello and thanks for your input. I am new to P5JS and I will go over your code to understand it and to incorporate it to mine. Thanks for sharing what you know.Cheers.

6

Yes, the data is already provided by the code, which reads “some predefined” pixels from an image in the form of [name, posx,posy]. What I m looking for is to store those specific pixels to a CSV file. I noticed your code requires the mouse to add rows and the keyboard to save the file when “s” is pressed. Is there anyway to feed the table with those specific pixels without the user’s input?

Thanks very much,

7

yes,

  • loop over your data ?array?
  • make and use inthere a new
    function add_row_from_data(){}
8

Parts With your first code I was able to “manually” feed the table. Where should I placed the function?

. I placed it at the end of the code and it gave me an error. I had to redo the entire code because I didn’t save it. The browser crashed probably due to the long CSV file. Not sure . Thanks

9

amh, not get the CSV file thing,
if you have that data as a CSV file already the whole question makes no sense.
you not say how you get that data into what kind of array
you not link to your working/testing online project

the place of the function inside the sketch.js file does not matter
( as long it is not inside a other function…)
but the valid question is from where you call it?
as you not want any user interaction,
you must call it directly after the

without make your project available it is very difficult to help,
and i did write for you a set of functions regarding table already to give you a start…
now you just have to feed other data?

10

Sorry I was out of my base, but I’m back. I commented out line 67 because I don’t know where exactly to place it. https://editor.p5js.org/hbtousa/sketches/sn1QLACNg
I will rephrase the question, or the problem, I have and the reason why I didn’t mention the CSV part first. Since the code provides the data, I thought building a table off it was a basic task. With a table fully loaded I wouldn’t see a problem saving the data as CSV file it to my local PC.but, as of right now still digging to get it done. Sorry for all the inconvenience.

11

sorry, can not run it here ( very low end hardware )

yes, loading a empty table with header replaces the
create_table.

and use that

my_table = loadTable('empty.csv', 'csv', 'header');
//.. and later
saveTable(my_table, 'with_data.csv');

is a very good idea

but in line 67 i not see any disabled code.

good luck

12

Thanks very much. I got it working. The code creates a new table, add rows, and saves a table as CSV file type. One thing I noticed on my code when saving the data

function mousePressed() {
save_my_table();
}

works better than the function below.

function keyPressed() { if ( key == 's' ) save_my_table(); }
Thanks