Load Saved JSON
Create a Bubble class, instantiate multiple bubbles using data from
a JSON file, and display results on the screen.
Because web browsers differ in where they save files, we do not make use of
saveJSON(), unlike the Processing example.
Based on Daniel Shiffman's LoadSaveJSON 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
// 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 data = {}; // Global object to hold results from the loadJSON 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() {
data = loadJSON('assets/bubbles.json');
}
// Convert saved Bubble data into Bubble Objects
function loadData() {
let bubbleData = data['bubbles'];
for (let i = 0; i < bubbleData.length; i++) {
// Get each object in the array
let bubble = bubbleData[i];
// Get a position object
let position = bubble['position'];
// Get x,y from position
let x = position['x'];
let y = position['y'];
// Get diameter and label
let diameter = bubble['diameter'];
let label = bubble['label'];
// Put object in array
bubbles.push(new Bubble(x, y, diameter, label));
}
}
// Create a new Bubble each time the mouse is clicked.
function mousePressed() {
// Add diameter and label to bubble
let diameter = random(40, 80);
let label = 'New Label';
// Append the new JSON bubble object to the array
bubbles.push(new Bubble(mouseX, mouseY, diameter, label));
// Prune Bubble Count if there are too many
if (bubbles.length > 10) {
bubbles.shift(); // remove first item from array
}
}
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
