# P5js and database

**URL:** <https://discourse.processing.org/t/p5js-and-database/26088>\
**Category:** Libraries\
**Created:** [December 9, 2020, 11:51am UTC](https://discourse.processing.org/t/p5js-and-database/26088 "2020-12-09T11:51:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ari01](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@ari01](https://discourse.processing.org/u/ari01)\
**Post date:** [December 9, 2020, 11:51am UTC](https://discourse.processing.org/t/p5js-and-database/26088/1 "2020-12-09T11:51:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 9, 2020, 10:17pm UTC](https://discourse.processing.org/t/p5js-and-database/26088/2 "2020-12-09T22:17:36Z")

</div>

Hi,

Welcome to the forum! 😉

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 :

> <https://stackoverflow.com/questions/857670/how-to-connect-to-sql-server-database-from-javascript-in-the-browser>

The solution is to use [Node.js](https://nodejs.org) 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 :

> <https://stackoverflow.com/questions/46811721/importing-and-exporting-data-from-mysql-database-to-a-p5-js-project>

How to do it in p5.js :

> **[processing/p5.js](https://github.com/processing/p5.js/wiki/Loading-external-files:-AJAX,-XML,-JSON)**
>
> Loading-external-files:-AJAX,-XML,-JSON

---

<div class="post-metadata">

**Author:** ![ari01](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@ari01](https://discourse.processing.org/u/ari01)\
**Post date:** [December 11, 2020, 3:24pm UTC](https://discourse.processing.org/t/p5js-and-database/26088/3 "2020-12-11T15:24:00Z")

</div>

Thank you for your help!