Skip to content

Commit f3685c1

Browse files
lmccartlmccart
authored
Merge pull request #644 from sm7515/AddLoadSaveTable
Add Load Saved Table Example
2 parents 5049530 + 5fe71c5 commit f3685c1

File tree

4 files changed

+335
-0
lines changed

4 files changed

+335
-0
lines changed

‎src/data/examples/assets/bubbles.csv

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
x,y,diameter,name
2+
160,103,43.19838,Happy
3+
372,137,52.42526,Sad
4+
273,235,61.14072,Joyous
5+
121,179,44.758068,Melancholy

‎src/data/examples/en/22_Advanced_Data/01_Load_Saved_Table.js

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*
2+
* @name Load Saved Table
3+
* @description Create a Bubble class, instantiate multiple bubbles using data from
4+
* a csv file, and display results on the screen.
5+
* Because the web browsers differ in where they save files, we do not make use of
6+
*
7+
* Based on Daniel Shiffman's <a href="https://processing.org/examples/loadsavetable.html">LoadSaveTable Example</a> for Processing.
8+
*/
9+
10+
// Bubble class
11+
class Bubble {
12+
constructor(x, y, diameter, name) {
13+
this.x = x;
14+
this.y = y;
15+
this.diameter = diameter;
16+
this.radius = diameter / 2;
17+
this.name = name;
18+
19+
this.over = false;
20+
}
21+
22+
// Check if mouse is over the bubble
23+
rollover(px, py) {
24+
let d = dist(px, py, this.x, this.y);
25+
this.over = d < this.radius;
26+
}
27+
28+
// Display the Bubble
29+
display() {
30+
stroke(0);
31+
strokeWeight(0.8);
32+
noFill();
33+
ellipse(this.x, this.y, this.diameter, this.diameter);
34+
if (this.over) {
35+
fill(0);
36+
textAlign(CENTER);
37+
text(this.name, this.x, this.y + this.radius + 20);
38+
}
39+
}
40+
}
41+
42+
let table; // Global object to hold results from the loadTable call
43+
let bubbles = []; // Global array to hold all bubble objects
44+
45+
// Put any asynchronous data loading in preload to complete before "setup" is run
46+
function preload() {
47+
table = loadTable("assets/bubbles.csv", "header");
48+
}
49+
50+
// Convert saved Bubble data into Bubble Objects
51+
function loadData() {
52+
const bubbleData = table.getRows();
53+
// The size of the array of Bubble objects is determined by the total number of rows in the CSV
54+
const length = table.getRowCount();
55+
56+
for (let i = 0; i < length; i++) {
57+
// Get position, diameter, name,
58+
const x = bubbleData[i].getNum("x");
59+
const y = bubbleData[i].getNum("y");
60+
const diameter = bubbleData[i].getNum("diameter");
61+
const name = bubbleData[i].getString("name");
62+
63+
// Put object in array
64+
bubbles.push(new Bubble(x, y, diameter, name));
65+
}
66+
}
67+
68+
// Create a new Bubble each time the mouse is clicked.
69+
function mousePressed() {
70+
// Create a new row
71+
let row = table.addRow();
72+
73+
let name = "New Bubble";
74+
let diameter = random(40, 80);
75+
76+
// Set the values of that row
77+
row.setNum("x", mouseX);
78+
row.setNum("y", mouseY);
79+
row.setNum("diameter", diameter);
80+
row.setString("name", name);
81+
82+
bubbles.push(new Bubble(mouseX, mouseY, diameter, name));
83+
84+
// If the table has more than 10 rows
85+
if (table.getRowCount() > 10) {
86+
// Delete the oldest row
87+
table.removeRow(0);
88+
bubbles.shift();
89+
}
90+
}
91+
92+
function setup() {
93+
createCanvas(640, 360);
94+
loadData();
95+
}
96+
97+
function draw() {
98+
background(255);
99+
100+
// Display all bubbles
101+
for (let i = 0; i < bubbles.length; i++) {
102+
bubbles[i].display();
103+
bubbles[i].rollover(mouseX, mouseY);
104+
}
105+
106+
// Label directions at bottom
107+
textAlign(LEFT);
108+
fill(0);
109+
text("Click to add bubbles.", 10, height - 10);
110+
}

‎src/data/examples/es/22_Advanced_Data/01_Load_Saved_Table.js

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*
2+
* @name Load Saved Table
3+
* @description Create a Bubble class, instantiate multiple bubbles using data from
4+
* a csv file, and display results on the screen.
5+
* Because the web browsers differ in where they save files, we do not make use of
6+
*
7+
* Based on Daniel Shiffman's <a href="https://processing.org/examples/loadsavetable.html">LoadSaveTable Example</a> for Processing.
8+
*/
9+
10+
// Bubble class
11+
class Bubble {
12+
constructor(x, y, diameter, name) {
13+
this.x = x;
14+
this.y = y;
15+
this.diameter = diameter;
16+
this.radius = diameter / 2;
17+
this.name = name;
18+
19+
this.over = false;
20+
}
21+
22+
// Check if mouse is over the bubble
23+
rollover(px, py) {
24+
let d = dist(px, py, this.x, this.y);
25+
this.over = d < this.radius;
26+
}
27+
28+
// Display the Bubble
29+
display() {
30+
stroke(0);
31+
strokeWeight(0.8);
32+
noFill();
33+
ellipse(this.x, this.y, this.diameter, this.diameter);
34+
if (this.over) {
35+
fill(0);
36+
textAlign(CENTER);
37+
text(this.name, this.x, this.y + this.radius + 20);
38+
}
39+
}
40+
}
41+
42+
let table; // Global object to hold results from the loadTable call
43+
let bubbles = []; // Global array to hold all bubble objects
44+
45+
// Put any asynchronous data loading in preload to complete before "setup" is run
46+
function preload() {
47+
table = loadTable("assets/bubbles.csv", "header");
48+
}
49+
50+
// Convert saved Bubble data into Bubble Objects
51+
function loadData() {
52+
const bubbleData = table.getRows();
53+
// The size of the array of Bubble objects is determined by the total number of rows in the CSV
54+
const length = table.getRowCount();
55+
56+
for (let i = 0; i < length; i++) {
57+
// Get position, diameter, name,
58+
const x = bubbleData[i].getNum("x");
59+
const y = bubbleData[i].getNum("y");
60+
const diameter = bubbleData[i].getNum("diameter");
61+
const name = bubbleData[i].getString("name");
62+
63+
// Put object in array
64+
bubbles.push(new Bubble(x, y, diameter, name));
65+
}
66+
}
67+
68+
// Create a new Bubble each time the mouse is clicked.
69+
function mousePressed() {
70+
// Create a new row
71+
let row = table.addRow();
72+
73+
let name = "New Bubble";
74+
let diameter = random(40, 80);
75+
76+
// Set the values of that row
77+
row.setNum("x", mouseX);
78+
row.setNum("y", mouseY);
79+
row.setNum("diameter", diameter);
80+
row.setString("name", name);
81+
82+
bubbles.push(new Bubble(mouseX, mouseY, diameter, name));
83+
84+
// If the table has more than 10 rows
85+
if (table.getRowCount() > 10) {
86+
// Delete the oldest row
87+
table.removeRow(0);
88+
bubbles.shift();
89+
}
90+
}
91+
92+
function setup() {
93+
createCanvas(640, 360);
94+
loadData();
95+
}
96+
97+
function draw() {
98+
background(255);
99+
100+
// Display all bubbles
101+
for (let i = 0; i < bubbles.length; i++) {
102+
bubbles[i].display();
103+
bubbles[i].rollover(mouseX, mouseY);
104+
}
105+
106+
// Label directions at bottom
107+
textAlign(LEFT);
108+
fill(0);
109+
text("Click to add bubbles.", 10, height - 10);
110+
}

‎src/data/examples/zh-Hans/22_Advanced_Data/01_Load_Saved_Table.js

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*
2+
* @name Load Saved Table
3+
* @description Create a Bubble class, instantiate multiple bubbles using data from
4+
* a csv file, and display results on the screen.
5+
* Because the web browsers differ in where they save files, we do not make use of
6+
*
7+
* Based on Daniel Shiffman's <a href="https://processing.org/examples/loadsavetable.html">LoadSaveTable Example</a> for Processing.
8+
*/
9+
10+
// Bubble class
11+
class Bubble {
12+
constructor(x, y, diameter, name) {
13+
this.x = x;
14+
this.y = y;
15+
this.diameter = diameter;
16+
this.radius = diameter / 2;
17+
this.name = name;
18+
19+
this.over = false;
20+
}
21+
22+
// Check if mouse is over the bubble
23+
rollover(px, py) {
24+
let d = dist(px, py, this.x, this.y);
25+
this.over = d < this.radius;
26+
}
27+
28+
// Display the Bubble
29+
display() {
30+
stroke(0);
31+
strokeWeight(0.8);
32+
noFill();
33+
ellipse(this.x, this.y, this.diameter, this.diameter);
34+
if (this.over) {
35+
fill(0);
36+
textAlign(CENTER);
37+
text(this.name, this.x, this.y + this.radius + 20);
38+
}
39+
}
40+
}
41+
42+
let table; // Global object to hold results from the loadTable call
43+
let bubbles = []; // Global array to hold all bubble objects
44+
45+
// Put any asynchronous data loading in preload to complete before "setup" is run
46+
function preload() {
47+
table = loadTable("assets/bubbles.csv", "header");
48+
}
49+
50+
// Convert saved Bubble data into Bubble Objects
51+
function loadData() {
52+
const bubbleData = table.getRows();
53+
// The size of the array of Bubble objects is determined by the total number of rows in the CSV
54+
const length = table.getRowCount();
55+
56+
for (let i = 0; i < length; i++) {
57+
// Get position, diameter, name,
58+
const x = bubbleData[i].getNum("x");
59+
const y = bubbleData[i].getNum("y");
60+
const diameter = bubbleData[i].getNum("diameter");
61+
const name = bubbleData[i].getString("name");
62+
63+
// Put object in array
64+
bubbles.push(new Bubble(x, y, diameter, name));
65+
}
66+
}
67+
68+
// Create a new Bubble each time the mouse is clicked.
69+
function mousePressed() {
70+
// Create a new row
71+
let row = table.addRow();
72+
73+
let name = "New Bubble";
74+
let diameter = random(40, 80);
75+
76+
// Set the values of that row
77+
row.setNum("x", mouseX);
78+
row.setNum("y", mouseY);
79+
row.setNum("diameter", diameter);
80+
row.setString("name", name);
81+
82+
bubbles.push(new Bubble(mouseX, mouseY, diameter, name));
83+
84+
// If the table has more than 10 rows
85+
if (table.getRowCount() > 10) {
86+
// Delete the oldest row
87+
table.removeRow(0);
88+
bubbles.shift();
89+
}
90+
}
91+
92+
function setup() {
93+
createCanvas(640, 360);
94+
loadData();
95+
}
96+
97+
function draw() {
98+
background(255);
99+
100+
// Display all bubbles
101+
for (let i = 0; i < bubbles.length; i++) {
102+
bubbles[i].display();
103+
bubbles[i].rollover(mouseX, mouseY);
104+
}
105+
106+
// Label directions at bottom
107+
textAlign(LEFT);
108+
fill(0);
109+
text("Click to add bubbles.", 10, height - 10);
110+
}

0 commit comments

Comments
 (0)