Hello! I am new to p5js and I would like to make a creative project using it but I do not know how… I created a MySQL database and I would like its content to be displayed in ‘bubbles’ using the bubbles p5js library. This is a similar approach I found: https://pete-rai.github.io/p5js-bubbles/sample-bubbles.html?movies . My database is about music so I would like to make the bubbles move to a song’s beat when clicked. I did something similar writing the code like this:
let beat, analyzer;
function preload() {
beat = loadSound(‘beat.mp3’);
}
function setup() {
let myCanvas = createCanvas(600, 400);
myCanvas.parent(‘myContainer’);
analyzer = new p5.Amplitude();
analyzer.setInput(beat);
}
function mousePressed() {
if (beat.isPlaying()) {
beat.stop();
} else {
beat.loop();
}
}
But I wouldn’t know how to link it to more items. Ideally, the sizes of the bubbles would be automatically attributed by a row in the database. (e.g. the popularity number of one song is 89/100). I, also, wrote some code which gets my database displayed but it is far from good:
PHP:
$db_hostname = ‘localhost’;
$db_database = ’ '; //‘Your database name’
$db_username = ’ '; //‘your username’;
$db_password = ’ '; //‘Your password’;
$db_server = mysqli_connect($db_hostname, $db_username, $db_password);
if (!$db_server){
die("Unable to connect to MySQL: " . mysqli_connect_error());
$db_status = “not connected”;
}
$output = '';
$values = '';
$outlets = '';
mysqli_select_db($db_server, $db_database);
$query = "SELECT * FROM Top30PlayedOnSpotify"; //Filter query with WHERE clause!
$result = mysqli_query($db_server, $query);
if (!$result) die("Database access failed: " . mysqli_error($db_server));
while($row = mysqli_fetch_array($result)){
$output .= "The song " . $row['Track.Name'] .
" by " . $row['Artist.Name'] .
" (" . $row['Genre'] .
") has " . $row['Beats.Per.Minute'] .
" beats per minute and its popularity is " . $row['Popularity'] . " out of 100. ";
// Create text strings holding the values - these will be our JavaScript arrays
$outlets .= "'" . $row['Track.Name'] . "',";
$values .= "'" . str_replace(",", "", $row['Artist.Name']) . "',"; // remove commas in values
}
?>
HTML:
<h1>Top 30 songs played on Spotify</h1>
<p>
Database <?php echo $db_database; ?> is...
<strong><?php echo $db_status; ?></strong>
</p>
<!-- New bit of HTML to provide a canvas on which to draw our graph -->
<canvas id="myChart" width="400" height="400"></canvas>
<div><?php echo $output; ?></div>
If someone can guide me and has tips and ideas for making this project work I would appreciate! Thank you!
