Hello p5js community!
I’m trying to use p5js to build a network map and was wondering whether it is possible to build something like this?
What I’ve in mind is using an object instance to represent each ball. And store the object instances into an array to display them.
I’ve coded something out here:
let storeParticles = []; //Array to store particle instances
let particleSize = 70;
// Stores all the companies' data as an array of arrays.
let companies = [
["Brand A", "Consumer", "Country A", "#D40A24"],
["Brand B", "Consumer", "Country B", "#00509B"],
["Brand C", "Consumer", "Country C", "#452976"],
["Brand D", "Health", "Country C", "#0268AA"],
["Brand E", "Technology", "City C", "#FFE17E"],
];
class Particle {
constructor(name, genre, hq, color, pos) {
this.pos = pos;
this.speedX = random(-1, 2);
this.speedY = random(-1, 2);
this.name = name;
this.genre = genre;
this.hq = hq;
this.color = color;
}
//Move the particles
move() {
if (this.pos.x >= 0 || this.pos.x < width) {
this.pos.x += this.speedX;
this.pos.y += this.speedY;
}
}
//Show the particles
display() {
noStroke();
fill(this.color);
ellipse(this.pos.x, this.pos.y, particleSize, particleSize);
}
// What happens when balls hit edge
reachEdge() {
if (this.pos.x > width || this.pos.x < 0) {
this.speedX = this.speedX * -1; // reverses direction
}
if (this.pos.y > height || this.pos.y < 0) {
this.speedY = this.speedY * -1; // reverses direction
}
}
// Show company data when mouse is over ball
hover(px, py) {
let distance = dist(px, py, this.pos.x, this.pos.y); // calculates the distance between the mouse position and ball position
if (distance < particleSize) {
//i.e. mouse position is inside ball
fill(255);
push();
textSize(32);
text(this.name, this.pos.x, this.pos.y);
pop();
text("Genre: " + this.genre, this.pos.x, this.pos.y + 20);
text("HQ: " + this.hq, this.pos.x, this.pos.y + 40);
console.log(this.name);
}
}
}
function setup() {
createCanvas(400, 400);
print(companies);
colorMode(HSB);
// For loop to create particle instances and store it in another array
for (i = 0; i < companies.length; i++) {
storeParticles.push(
new Particle(
companies[i][0], //accessing company data from companies array
companies[i][1],
companies[i][2],
companies[i][3],
createVector(random(width), random(height)) //starts at a random position
)
);
}
print(storeParticles);
}
function draw() {
background(0);
//loop through the storeParticles array and call all methods in class
for (c = 0; c < storeParticles.length; c++) {
storeParticles[c].display();
storeParticles[c].move();
storeParticles[c].reachEdge();
}
mouseMoved();
}
//I'm using a mouseMoved() method here because there isn't a mouseOver() method that allows me to only call a function when mouse hovers over the circle. When mouse is moved, the system checks whether the distance between the mouse position and the centre of every circle via the hover method in the Particle class. If the distance is less than the particle size, that means the the mouse is actually within a circle, triggering the display of the text.
function mouseMoved() {
for (c = 0; c < storeParticles.length; c++) {
storeParticles[c].hover(mouseX, mouseY);
}
}
What I am having trouble now is figuring out whether is there a way to spread the bubbles out in a pretty fashion like in the picture. For mine, the bubbles are very random and floats around. Could anyone point me to some library I can use? Or any another solutions I could work around to achieve this? If its not possible in p5js, I’m also open to other possibilities too (I can code in Python & Javascript) 
Thank you!
