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