Creating a JavaScript Music Visualizer (with p5.js and React)
Vložit
- čas přidán 8. 09. 2024
- I spent two days designing and creating a JavaScript Music Visualizer that reacts to my friends' song. I used p5.js and built it in Gatsby (React). The code is open-sourced at the github repo linked below.
Visualizer Link:www.maxemitche...
GitHub Repo: github.com/max...
Songs Used:
Ben Mark - Untitled
EVA - The End: • EVA - The End [Synthwa...
Great material for a new p5.js starter!
Let me know how it goes!
this is dope man, you need more recognition!!
Thank you :))
Dude you might be my new favorite channel haha keep it up seriously I’m sure there’s a big audience for this waiting to find ya
You might be my first real fan! Thank you so much though, I'll be posting more this summer and hopefully the audience follows :)
very cool, great job here, love glass animals too
Thanks! Glass Animals was definitely my artist of the year
looks awesome!
i just saw that on your website, dude that is fucking sick! great video man
Thank you!!! Love the support :)
hey its the villain from far cry 5
So rad!
STRFKR is great music to listen to while coding!
The best!
nice dude, cheers
I'm using this in next js and getting window is not defined error
Hey i dont know if u will read this but umm how did u get p5 to render in react? is there a way to import the project onto react components? please reply?
Cool stuff! How about doing it in 3D? Maybe with Three JS
Thanks! And that’s a great idea, maybe that’ll be the next video :)
working on a project and im finding this very difficult to implement just a visualizer any help?
Sorry it’s been a while, but I’ll need more info than that to be able to help at all
Dude your video was super helpful. I would really like your opinion on this: How can we put a text in our background displaying the current amplitude and frequency?
Thanks in advance keep up the good job
Thanks! Not sure the best way to do it, but the quick and easy way would be to add a div with an ID, style it with some normal css to get it where you want, and use either getElementById or the querySelector to modify its innerHtml.
Enjoyed watching the process of this. Looking good, I was wondering if you have any advice on getting state from p5.js into React components?
Hmmm, I assume you mean accessing the React State from within a p5.js sketch, which I haven't needed to do yet. This stackoverflow answer looks like a good solution though: stackoverflow.com/questions/54868777/how-to-use-react-with-p5-js
hey would you recommend using straight p5 or some kind of wrapper like i've seen like react-p5-wrapper
I used straight p5 because I also needed to use p5 sound, and I couldn’t find any documentation on that with the wrapper, but I think the wrapper is another good option. It would certainly help keep the code a little cleaner
Gotcha okay thank you. Seems to be a React component library for everythin haha
How did you fix the framerate issue with react?
Hey! What framerate issue are you running into?
@@MaxMitchell I'm trying to run some simple p5js code on a react webapp. But it's running at 1-5 fps. I created a custom wrapper but still the same issue. I tried the way you're handling it in your project but still I'm facing the same issue.
@@abhimanyunaruka378 hmmm are you using a really old laptop? P5.js shouldn’t be that resource intensive though especially if it’s something simple. I didn’t have that issue though so I can’t really help you :(
@@MaxMitchell no. If I'm running p5js in vanilla js then it's working fine but with reactjs it's not working properly. I'm not sure how you're getting a decent framerate. Reactjs lifecycle is messing with p5's lifecycle
@@abhimanyunaruka378 dang, without seeing the code and actually debugging it I have no idea, the only lag issues i ran into was before I added the componentWillUnmount part to remove p5, but it wasn’t lagging on the first page load