Looking for help or examples working with CSV code or excel to create visual pattern
1 Like
Hello and welcome to the forum!
Great to have you here.
To load a csv (which you can export from Excel)
you can use: loadTable() \ Language (API) \ Processing 3+
Check out the reference for Table Table \ Language (API) \ Processing 3+
Now you have your data in suitable table in processing.
Now you can start working with it in a creative way.
It depends what those data are. For example when it’s the changing population of cities over time you can show the cities as circles with changing radius (reflecting the changing population).
To get more help, please describe the content of your csv and show its first 10 lines.
Warm regards,
Chrisir
1 Like
here is an example that reads data (String or csv doesn’t matter) but without Table
Table is actually better
see How to add values to array based on condition? (read two files) - #9 by Chrisir
Hi Chrisir
Thank you so much for your help and sorry for the late response
I’m really new to Processing and I am looking for some help
I’m an artist, textile, and fashion designer. Currently, a graduate student in Bezalel’s department of Industrial Design, in Jerusalem.
For my final project, I’ve been translating data, collected from our clothing choices, into textiles. The goal is to be able to visually translate the dominant fashion trends of 2020 by expressing colors, materials, and styles.
I’m still looking for the data and its form but would like to build the code in parallel
I am wondering if this project sounds interesting to you?
I would love to create my project with your assistance if you would like to join my journey. 
If so, I would be happy to tell you more about it and to send you my portfolio that you can view my previous works, my development, and my innovation abilities.
Looking forward to hearing from you
Adi
1 Like
I am sorry, I can answer your question or show you a loadTable example but I cannot dive into a project
But it sounds fascinating!!
thank you
I understand that
so, as I said, I want to create a pattern with data driving from fashion trends
as for today, I work with pictures and keyword
Do you know what can I use to organize all of my data into a table? is there something that already excited or I need to write new code for it?
the next level is to write a code or do a hack for an exciting one
do you know where I can find like this? that using tables to create visuals?
I saw the references you wrote me… A better way for me to understand them is to see examples
would love if you can send me a link to those
I hope it is not t much to ask… any answer will be ok
I really appreciate your time!
Thank you
Adi
1 Like
In general use Microsoft excel or a similar tool that
can export to csv. You can even use a text editor
Then you use ghe table and work with the data
For visual I have shown an example above
This depends on what your data is and what the Project is all about
Eg countries or cities and their growth over time or migration is easy to visualize
You can make a simple txt file with the the ending .csv
Fill it with data (example below), separate it with ,
don’t let the last line end with a Return, that would bring an empty line at the end imho
Example 1
File must be called : “ip.csv” (content see below)
here is a simple Sketch to show table data (Sketch from the forum)
/* This sketch randomly selects rows from a CSV file
these rows are then printed out to screen using
a 'typewriter' style effect.
I want the text to print out and then stay on screen for 5 seconds.
I then want the screen to stay blank for 5 seconds before starting again.
*/
final int state_typewriter = 0;
final int state_Show_Text = 1;
final int state_Blank_Screen = 2;
int state=state_typewriter; // state of the program
Table table; // table object
int timer; //creates a a timer variable
int counter = 0; //creates a counter variable and sets it to zero
String full; //a string to combine amount + name
void setup() {
size(1000, 1000); //size
// fullScreen(); //sets output to full screen
PFont font; //font
table = loadTable("ip.csv", "header");
smooth();
font = createFont("Arial", 48); //creates font
textFont(font, 120); //text font
textAlign(CENTER, CENTER); //aligns text to Center
selectRow(); //calls selectRow fucntion
timer=millis();
// typeWriter();
}
void draw() {
switch (state) { //this is the start of switch
case state_typewriter:
// this will be exectued if state = 0
// the typewriter
background (0); //background
typeWriter();
break; // break for case 0
case state_Show_Text:
// this will be exectued if state = 1
// the text stays on screen for 5 seconds.
if (millis()-timer > 5000) { //if 5 seconds has passed
timer=millis();
state=2; // move on
}
break; //break for case 1
case state_Blank_Screen :
// this will be exectued if state = 2
// the screen stays blank for a brief time OR 5 seconds before starting again.
background(0); //background
if (millis()-timer > 300) {
selectRow();
state=0;
}
break; //break for case 2
//
}//switch
}//func
// ---------------------------------------------------------------------
void typeWriter() {
text(full.substring(0, counter),
0, 40, width, height); //text to print
if (millis()-timer > 100) { //this is the typewriter effect
counter++; // go to next letter
timer=millis(); // reset timer
}
if (counter > full.length()) { //this if statement resets counter to 0 when text is finished
counter = 0; // reset
state=1;
}
}
void selectRow() {
TableRow row; //Table row object
String amount="", name=""; //two strings representing columns in csv
row = table.getRow((int)random(table.getRowCount())); //print a random row
amount = row.getString("amount"); //a string with amount
name = row.getString("name"); // prints name for row
full = amount + " " + name; //combines name and row into new String called full
// println (full); //just prints to serial monitor so I can test all is working
}
//
Here is the content of the csv
amount,species,name
0, Capra circus, Goat
1, Panthera Pardus, Leopard
2, Equus Zebra, zebra
Example 2
Here is another example showing circles (e.g. City Names and pos and radius is stored)
File must be called : “data.csv” (content see below)
// shows a Table
/*
example table - make a txt file in the sketch folder named
"data.csv" with this content:
x,y,diameter,name
112,122,22,Boy
212,222,32,Girl
312,322,12,Fred
*/
DataEntry[] dataList;
boolean hold=false;
DataEntry holdItem;
void setup() {
size(780, 660);
loadData();
}
void draw() {
background(255);
// message upper right corner
fill(0);
textAlign(LEFT);
text("Showing data from text file; use mouse to drag items", 14, 14);
// show words
drawWords();
// for dragging:
if (hold && holdItem!=null) {
holdItem.x += mouseX-pmouseX;
holdItem.y += mouseY-pmouseY;
fill(255, 0, 0);
text(holdItem.x+","+holdItem.y, width-100, 16);
}
}//func
// -------------------------------------------------------
void drawWords() {
for (DataEntry item : dataList) {
item.display();
}
}
void loadData() {
Table table;
// "header" indicates the file has header row. The size of the array
// is then determined by the number of rows in the table.
table = loadTable("data.csv", "header");
if (table==null) {
println ("couldn't find file. Program ends here. Read comments in the sketch.\n");
exit();
return;
}
dataList = new DataEntry[table.getRowCount()];
for (int i = 0; i<table.getRowCount(); i++) {
// Iterate over all the rows in a table.
TableRow row = table.getRow(i);
// Access the fields via their column name (or index).
float x = row.getFloat("x");
float y = row.getFloat("y");
float d = row.getFloat("diameter");
String n = row.getString("name");
// Make a DataEntry object out of the data from each row.
dataList[i] = new DataEntry(x, y, d, n);
}
}
// -----------------------------------------------------------
void mousePressed() {
// start dragging
hold=true;
for (DataEntry item : dataList)
if (item.over()) {
holdItem=item;
return;
}
}
void mouseReleased() {
// stop dragging
// reset
hold=false;
holdItem=null;
}
// ========================================================================
// This simple DataEntry class draws a circle to the window
// and displays a text label
class DataEntry {
float x, y;
float diameter;
String name;
// boolean over = false;
// Create the DataEntry (constructor)
DataEntry(
float tempX, float tempY,
float tempD,
String s) {
x = tempX;
y = tempY;
diameter = tempD;
name = s;
} // (constructor)
// Display the DataEntry
void display() {
stroke(0);
if (over())
stroke(255, 0, 0);
strokeWeight(2);
noFill();
ellipse(x, y, diameter, diameter);
fill(0);
textAlign(CENTER);
text(name, x, y+diameter/2+20);
textAlign(LEFT);
}
boolean over() {
return
dist(mouseX, mouseY, x, y) < diameter+3;
}
//
}//class
//
data content:
x,y,diameter,name
112,122,22,Boy
212,222,132,Girl
312,322,12,Fred
Example 3
This is the example I provided the Link to above
It uses 2 String arrays in the code, but you can rewrite it using 2 tables
// https://discourse.processing.org/t/how-to-add-values-to-array-based-on-condition-read-two-files/28340
ArrayList<City> cities = new ArrayList();
ArrayList<Migration> migrations = new ArrayList();
String[] countryData =
{
"country,population",
"countryA,100000",
"countryB,200000",
"countryC,300000"
};
String[] migData =
{
"country_origin,country_dest,mig1990,mig1995,mig2000,mig2005",
"countryA,countryB,100,100,100,100",
"countryA,countryC,200,200,200,200",
"countryB,countryA,300,300,300,300",
"countryB,countryC,400,400,400,400"
};
void setup() {
size(1660, 860);
background(111);
// read data
for (String stringOneLineCity : countryData) {
String[] sLineParts=split(stringOneLineCity, ",");
if (!sLineParts[1].equals("population")) {
City newCity = new City (sLineParts[0], sLineParts[1]);
cities.add(newCity);
}//if
}//for
// read data
for (String stringOneLineMigration : migData) {
String[] sLineParts=split(stringOneLineMigration, ",");
int from = getCity(sLineParts[0]);
int to = getCity(sLineParts[1]);
if ( ! (from == -1 || to == -1) ) {
Migration newMigration = new Migration (from, to,
sLineParts[2], sLineParts[3],
sLineParts[4], sLineParts[5] );
migrations.add(newMigration);
}//if
}//for
}//func
void draw() {
background(111);
// display 1
for (City c : cities) {
c.display();
}
// display 2
for (Migration m : migrations) {
m.display();
}
}//func
int getCity(String c_) {
// returns the index of a city in the ArrayList cities
// based on the name of the city
int i=0;
for (City c : cities) {
if (c.name.equals(c_))
return i;
i++;
}
println("getCity failed with "
+c_);
return -1;
}
// ==================================================================================
class City {
float posx=random(100, width-100),
posy=random(100, height-100);
String name="";
int pop=0;
color col=color(random(255), random(255), random(255) );
//constr
City(String name_, String pop_) {
name=name_;
pop=int(pop_);
}//constr
void display() {
//
strokeWeight(1);
fill(col);
ellipse(posx, posy,
pop/1000, pop/1000);
}//
//
}//class
// ==================================================================================
class Migration {
int indexFromCity;
int indexToCity;
String[] migData;
//constr
Migration(int from, int to,
String... vals) {
//
indexFromCity=from;
indexToCity=to;
migData = vals;
}//constr
void display() {
City city1 = cities.get(indexFromCity);
City city2 = cities.get(indexToCity);
stroke(0);
strokeWeight(map(int(migData[0]),
0, 400, 1, 15) );
line(city1.posx, city1.posy,
city2.posx, city2.posy);
//reset
strokeWeight(1);
}
//
}//class
//
I am not sure I understand this.
Do you have data like with trends what kind of cloths were sold in january, february, march,
eg. january black shoes 100, january white shirts 399… and so on?
Sorry, I am not familiar with fashion trends and the implications.
Resources
Did you check out The 30 Best Data Visualizations of 2023 [Examples]
and Visualization (graphics) - Wikipedia
Chrisir
Thank you
Do you know if there is any automat way to put the data in the table??
I tried the second example you sent and it worked well thank you for the simple explanation
I think that now I can play with that and try to sketch something else
Do you think you will be able to help me change the visual in the sample you sent me?
Attach some hak I did before just for you to see…
Thank you so much
Adi
(Attachment xlsreader_europe_hak1.zip is missing)
Hello @ADIYAIR,
Tutorial:
https://processing.org/tutorials/data/
References:
Table / Reference / Processing.org
Also look at all the related references at the bottom of the page.
Coding Train:
# 13.5: Tabular Data - Processing Tutorial
:)
It depends on : in which format do you have the data now? A text file?
here you can generate a table from scratch and fill it (example: Game “Settlers of Catan”)
// class with tools
Tools tools = new Tools();
// the table
Table tResources;
void setup() {
size(1600, 660);
background(tools.WHITE);
// setting up table (column names / headlines)
tResources = tools.newTable("Item", "brick", "wood", "sheep", "wheat", "ore", "points");
// adding data (must match headlines)
tResources = tools.tableAddData ( tResources, "Street", "1x", "1x", "", "", "", "0" );
tResources = tools.tableAddData ( tResources, "Settlement", "1x", "1x", "1x", "1x", "", "1" );
tResources = tools.tableAddData ( tResources, "City nununu nun unnunun nun un", "", "", "", "2x", "3x", "2");
tResources = tools.tableAddData ( tResources, "Development Card - very interesting mn,m,m,mn, eewewrrew ooppopopoi pooopopoo ölööölöllökölk ,m.m..,.,m,m..,m", "", "", "1x", "1x", "1x", "?" );
// ------------------------------
}
void draw() {
background(0);
tools.showTable(tResources,
22, 22);
fill(tools.WHITE);
text("use mouse over to show full text",
22, height/2-110);
}
//===============================================================================
// Tools collection
class Tools {
// class not like a car class Car for an object but a collection of tools.
final color RED = color(255, 0, 0);
final color GREEN = color(0, 255, 0);
final color BLUE = color(0, 0, 255);
final color WHITE = color(255);
final color BLACK = color(0);
final color GRAY = color(255/2);
boolean cursorSignShowFlag=false;
// ----------------------------------------------------------------
void showTable(Table tableBtn,
int x, int y) {
int factorX=78; // column width
// rect
stroke(WHITE);
noFill();
rect( x, y,
tableBtn.getColumnCount()*78-6, (tableBtn.getRowCount()+1) * 22 + 10 );
// headline
showTableHeadline(tableBtn, x+6, y+19, factorX);
// horizontal line
stroke(WHITE);
line( x+2, y+5+19,
6+x+(tableBtn.getColumnCount())*factorX-13, y+5+19);
// grid
// loop over rows (y)
for (int i=0; i<tableBtn.getRowCount(); i++) {
// current data row
TableRow row = tableBtn.getRow(i);
// loop over columns in that row (i2 is for x)
for (int i2=0; i2<tableBtn.getColumnCount(); i2++) {
fill(WHITE);
text(row.getString(i2),
i2*factorX+x+6, 25+ i * 22 +y+8,
factorX-8, 15);
if (mouseInside(i2*factorX+x+6, 25+ i * 22 +y+8,
factorX-8, 15)) {
text (row.getString(i2),
20, height-22);
}//if
// vertical line
line( i2*factorX+x, +y,
i2*factorX+x, tableBtn.getRowCount() * 22 + y + 31);
}//for
}//for
}// method
boolean mouseInside( float x_, float y_,
float w_, float h_) {
return mouseX>x_ &&
mouseX<x_+w_ &&
mouseY>y_ &&
mouseY<y_+h_;
}
void showTableHeadline(Table tableBtn,
int x, int y,
int factorX) {
// headline for table
TableRow row0 = tableBtn.getRow(0);
for (int i=0; i<tableBtn.getColumnCount(); i++) {
// headline
fill(GREEN);
text(row0.getColumnTitle(i),
i*factorX+x, y-2);
}
}//method
// ---
// make table
Table newTable (String... listColumnNames) {
Table newT = new Table();
// make columns
for (String s1 : listColumnNames) {
newT.addColumn(s1);
}
return newT;
}//method
Table tableAddData( Table table1, String... data1 ) {
// add rows with data
TableRow newRow = table1.addRow();
// add rows with data
int i=0;
for (String s1 : data1) {
newRow.setString(newRow.getColumnTitle(i), s1);
i++;
}
return table1;
}//method
// ---
void printlnTable(Table tableBtn) {
// rect
stroke(WHITE);
noFill();
println("------------------------------------");
// headline
printlnTableHeadline(tableBtn);
// grid
// loop over rows (y)
for (int i=0; i<tableBtn.getRowCount(); i++) {
// current data row
TableRow row = tableBtn.getRow(i);
// loop over columns in that row (i2 is for x)
String s1="";
for (int i2=0; i2<tableBtn.getColumnCount(); i2++) {
s1+=" "+row.getString(i2);
//
}//for
println(s1);
}//for
println("===========================================");
//
} // method
void printlnTableHeadline(Table tableBtn ) {
// headline for table
TableRow row0 = tableBtn.getRow(0);
for (int i=0; i<tableBtn.getColumnCount(); i++) {
// headline
print(" "+row0.getColumnTitle(i));
}
println("");
}//method
// ------------------------------------------------------------------
String cursorSign() {
// blinking cursor sign | for Input Box
if (frameCount % 13 == 0)
cursorSignShowFlag= ! cursorSignShowFlag;
if (cursorSignShowFlag)
return"|";
else return"";
}//method
//
}//class
//
For now, it is pictures and text/ keywords
I tried to copy past the code you sent and it didn’t work.
The first raw : tool had a problem
Anything I had to do before?
it works here
Tools is the class at the end - did you copy it?
ah, it’s not p5.js but processing java flavour
Hi
How are you
so I found someone that help me with the code
but I would love to ask one more question
I’m working on weaving software cold FiberWorks which I use to create a weaving pattern and the making instructions
I wanna ask if you know if there is any way I can make the opposite move and insert an image from which to receive the operating instructions?
It’s not about processing but maybe you got the answer on other programs I can use
Thank you
1 Like
fantastic artist who translates images into cloth
see 1: Sonja Weber
see 2: Sonja Weber
maybe write her an e.mail
Intersting
Thank you!
Hi
How are you
maybe you can help me to figure this out
We are looking for a way to create a tool that I can automatically open any image on my computer and by clicking the mouse will export to the table (CSV) the color we clicked on RGB.
Thank you so much
do you mean just the 3 numbers for the color of the pixel you clicked ?
color col1 = get (mouseX,mouseY);
println(red(col1), green(col1), blue(col1));