# P5.js music and drawing

**URL:** https://discourse.processing.org/t/p5-js-music-and-drawing/12950
**Category:** Libraries
**Tags:** homework
**Created:** [July 24, 2019, 9:12am UTC](https://discourse.processing.org/t/p5-js-music-and-drawing/12950 "2019-07-24T09:12:13Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![amstaff](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@amstaff](https://discourse.processing.org/u/amstaff)
#### Post date: [July 24, 2019, 9:12am UTC](https://discourse.processing.org/t/p5-js-music-and-drawing/12950/1 "2019-07-24T09:12:13Z")

</div>

Is it possible to play music with p5 and the program will draw a picture depending on the beat?  
Are there any examples how the whole thing should look like?

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [July 24, 2019, 9:18am UTC](https://discourse.processing.org/t/p5-js-music-and-drawing/12950/2 "2019-07-24T09:18:04Z")

</div>

for a start, did you play?  
[https://editor.p5js.org](https://editor.p5js.org)  
/ File / Examples /  
like:  
[Sound : FFT Spectrum](https://editor.p5js.org/p5/sketches/GAueXN3f3D)

---

<div class="post-metadata">

### Author: ![amstaff](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@amstaff](https://discourse.processing.org/u/amstaff)
#### Post date: [July 27, 2019, 3:28pm UTC](https://discourse.processing.org/t/p5-js-music-and-drawing/12950/3 "2019-07-27T15:28:06Z")

</div>

and how i can ad music files so that the sound plays and the p5 drwas a random picture too it  
And how can i add this too my side sry im a nebwie and need this for my school

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [July 28, 2019, 12:10am UTC](https://discourse.processing.org/t/p5-js-music-and-drawing/12950/4 "2019-07-28T00:10:47Z")

</div>

i show you the way to some p5.js examples already.  
to play a sound file and draw some circles see like  
[/ Examples / Sound : Amplitude Analysis](https://editor.p5js.org/p5/sketches/eMObmgJgnp)

with some small changes for random painting

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/XIdgcXKnr)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

might be a easy start.  
did you check other p5.js learning sources already?

[![](https://img.youtube.com/vi/Pn1g1wjxl_0/hqdefault.jpg "17.1: Loading and Playing - p5.js Sound Tutorial") ](https://www.youtube.com/watch?v=Pn1g1wjxl_0)