P5js and database

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);

analyzer = new p5.Amplitude(); 


function mousePressed() {
if (beat.isPlaying()) {
} else {

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:

$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


    <h1>Top 30 songs played on Spotify</h1>
     Database <?php echo $db_database; ?> is...
     <strong><?php echo $db_status; ?></strong>

<!-- 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!


Welcome to the forum! :wink:

Be sure to format your code properly by using the </> button in the message editor.

You are actually misleading about how to use a database with JavaScript. It’s because JS (in the case of p5.js) is a frontend, client side programming language running in the browser whereas PHP is a backend server side programming language that runs on a server.

You can actually query MYSQL data from within JavaScript but it’s opening a lot of security breaches :

The solution is to use Node.js or other service to create server side API and databases that are secure and closely adapted to JavaScript through JSON, XML :

This thread explains it clearly :

How to do it in p5.js :

Thank you for your help!

1 Like