Skip to content

Language Settings

Load Saved Table

Create a Bubble class, instantiate multiple bubbles using data from a csv file, and display results on the screen. Because the web browsers differ in where they save files, we do not make use of 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);
}
X

creative commons license