I skipped through the video as i dont have time now, but definitely interesting, informative and cool! Will definitely check it out in depth! Thanks for the video
Hello，I want to fully implement most of the functions from Python's turtle module using p5.js, including showing the drawing trace. Now there’s a problem: after defining the turtle class, if I execute multiple predefined turtle methods in the draw() function, for example, executing turtle.forward(100) twice in the draw() function, they will be executed simultaneously. How can I make them execute in sequence, one after the other, so that it achieves the same effect as drawing with Python's turtle library?
Is there anyway you could make this into an actual program which could visualise audio by inserting a youtube link or something like that, it would be very appreciated as I'm working on this as a school project and need some help
It just means that you cannot directly start the audio from your code. It has to be started by the user gesture, like a click on a button or the canvas
Can I made this animation with a file mp4 instead of mp3? I uploaded I video with some filters but would be interesting adding this sound visualizer and seeing that the animation works contemporary with the music from the video.
The particles is created in the center of the canvas and the origin has previously been translated to the center instead of the top left corner. So (0, 0) is the center of the canvas. In order to check if a particle has hit the left edge, we need to check if its x position is smaller than -width/2. Hope that makes sense
How can I fix these errors Uncaught (in promise) ReferenceError: loadSound is not defined at preload (assignment2.js:9) at p5._start (p5.js:62905) at new p5 (p5.js:63261) at _globalInit (p5.js:62189) Uncaught TypeError: Cannot read properties of undefined (reading 'isPlaying') at mouseClicked (assignment2.js:38) at p5._main.default._onclick (p5.js:78581)
hi, thanks for the video. I'm having issues with the update method for the Particle class. nothing syntactically wrong but no particle display. I'm doing this for a react project but the update method doesn't seem to work in my case. only on the p5 editor
If you use "play" after you have used "pause", the song should resume from the point it was paused. If it doesn't, it might have something to do with the sound library. It might solve the problem, if you use the most recent sound library. I think there was a bug in one of the older versions. I don't think the most recent version is available on their webside, but you can get it on their GitHub page. Hope it helps :)
@@ColorfulCoding Thank you for quick response. Can I ask one more thing, it is not related to this actually ? I am using p5.js to display live input from microphone. Is there any way to freeze the display ?
@@ColorfulCoding i have the same problem, but everything is just like in the video. when i delete the 'function preload() {...' my black canvas is back but with it the whole canvas is gone and there is a message in the top left corner, saying that it is 'loading...' (forever)
Hi! i have to stupid questions... is the live preview integrated in your visual studio( somehow cant do that) and on chrome in the console i cannot execute fft.waveform() VM97:1 Uncaught TypeError: Cannot read properties of undefined (reading 'waveform') at :1:5
i had the same issue and couldn't find the issue to save my life but i ended up randomly messing with the var under the beginShape and by changing the i+= 5 back down to a smaller number like 0.1 it closes the circle !
Awesome content man. I was wondering if p5.js can we used in ReactJs project? Not sure , i have a reactjs project and i need to draw some visuals. Please let me know if it can be done
Hey man, I keep getting this error "Cannot read property 'length' of undefined at RingBuffer.push (f9bb4b58-d2fe-49e9-9dd4-8cb68d6ca98f:75) and at AudioWorkletProcessor.process (f9bb4b58-d2fe-49e9-9dd4-8cb68d6ca98f:170)" It seems it's the sounds library but I can't find a fix... I really want this to work... I tried it without using FFT but just amp and this was just fine. Can you help me?
Hey, I think it is just a bug in the sound library. I used to get the same error message, but it didn't affect the code or sound in any way, though. However, I got rid of the error message by downloading the newest version of the p5js sound library. I'm not sure this is available on their website, but it is on GitHub. Hope that helps.
@@ColorfulCoding Hey do you maybe have a link to the version you used? because I tried that earlier but without success... I also get two warnings "p5.sound.min.js:2 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page" and "DevTools failed to load SourceMap: Could not load content for 127.0.0.1:5500/libraries/p5.sound.min.js.map: HTTP error: status code 404," maybe this is whats causing the malfunction?
Most browsers don't allow audio to start automatically, so you need to create a function that will start the audio - e.g. when you click on the canvas.
Hello. Great tutorial. Do you have any suggestions to modify this code to make it more alike to this one here? th-cam.com/video/luXtNn64rWY/w-d-xo.html I don't think this one uses waveform and instead has different parts of the wave reacting to different elements such as the bass and the treble. Would love some suggestions.
I believe what is happening here is that the audio is separate into 4 parts, like using the Moises app. Then use this tutorial but instead of a mirror, you section this into 4 parts, all using a different instrument of the song like bass, drums, vocals and others.
![สาวเมืองเพชร - ธีเดช ทองอภิชาติ [Official MV]](http://i.ytimg.com/vi/kEt7F9PvO3I/mqdefault.jpg)
Your video might just save my college midterm and I am forever grateful to you for this.
uol ???
I am in the same struggle myself bro hahaha I will add this to my midterm.
@@erickgarcia1616 yea UoL, I did that, I'm only missing one of the Coursera extensions and the report
The best tutorial so far, please keep producing them 👍
Thank you for this awesome video! How did you capture/export the visualizer and turn it into a video?
This is so good! Very inspiring and so happy I learned javascript!
I skipped through the video as i dont have time now, but definitely interesting, informative and cool!
Will definitely check it out in depth! Thanks for the video
That was awesome and works great! Definitely checking your patreon. Thank you!
The awesome tutorial i have found❤❤
This is amazing. I'm so happy to find this video👍
Been looking for these things, you saved me a lot of time :), to put my things in better way.
You're mad talented. Just subbed
Mind Blown.... 😮❤‼
This looks amazing! Will try it out with some adjustements :) Thanks for the video
This is awesome!! your explanation is very clear! thanks!
Great tutorial!
Fantastic video tutorial, you help me so more for a job thanks you very much
Wow 👏😮, I like it, so far so good, it's really fun.+👍
Thank you very much!
very good explanation for what I needed thx a lot 😁
I followed your tutorial and came last in the class.
Thank you so much, you are amazing.
Very helpful. Thank you!
The particles doesn't show up and I am not sure why...
Your waveform is beautifully smoother than mine. I'm using the web editor ad mp3 file. Any suggestions?
Thank you so much for your dedication!
where did you get this music?
very good video. thank you
Hello，I want to fully implement most of the functions from Python's turtle module using p5.js, including showing the drawing trace. Now there’s a problem: after defining the turtle class, if I execute multiple predefined turtle methods in the draw() function, for example, executing turtle.forward(100) twice in the draw() function, they will be executed simultaneously. How can I make them execute in sequence, one after the other, so that it achieves the same effect as drawing with Python's turtle library?
is it possible for us to load 2 songs simultaneously and give them different waves to see them reacting differently?
good on you brother
Is there anyway you could make this into an actual program which could visualise audio by inserting a youtube link or something like that, it would be very appreciated as I'm working on this as a school project and need some help
My music file won't play at all. The audio is on the right folder, what might be the issue? Even clicking doesn't work.
Thank you very much 😉
a have a problem, The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
It just means that you cannot directly start the audio from your code. It has to be started by the user gesture, like a click on a button or the canvas
hi can i know why my particles just kept generating even the song was played
What's a substitute for the class function? I get a parsing error: keyword 'class' is reserved
Could this be done with p5.audioIn() and graph the audio from the users microphone in real time?
Definitely! I think thecodingtrain has made a video doing that
@@ColorfulCoding What a fast reply! Thanks a lot.
Can I made this animation with a file mp4 instead of mp3? I uploaded I video with some filters but would be interesting adding this sound visualizer and seeing that the animation works contemporary with the music from the video.
you're awesome :D
AWESOME
12:40 Can someone explain to me why it is -width/2 and -height/2? Why isn't it 0? I tried and it didn't work.
The particles is created in the center of the canvas and the origin has previously been translated to the center instead of the top left corner. So (0, 0) is the center of the canvas. In order to check if a particle has hit the left edge, we need to check if its x position is smaller than -width/2. Hope that makes sense
@@ColorfulCoding Yes it does. Thank you😄
Hi man! thanks for this video, how can i find you on patreon
thanks man
bro, how you record the screen? Please help me! I want recorde my arts to share
i'm getting the error cannot access Particle before initialization
How can I fix these errors
Uncaught (in promise) ReferenceError: loadSound is not defined
at preload (assignment2.js:9)
at p5._start (p5.js:62905)
at new p5 (p5.js:63261)
at _globalInit (p5.js:62189)
Uncaught TypeError: Cannot read properties of undefined (reading 'isPlaying')
at mouseClicked (assignment2.js:38)
at p5._main.default._onclick (p5.js:78581)
How can this be archived in React.js?
hi, thanks for the video. I'm having issues with the update method for the Particle class. nothing syntactically wrong but no particle display. I'm doing this for a react project but the update method doesn't seem to work in my case. only on the p5 editor
i figured out the problem my this.vel was suppose to be p5.Vector.random2D().mult(0).
Great video! One question: why does the flickering of particles stop if you loop backwards?
@@bysho thanks for your detailed answer:)
After pausing the song, I want to resume from the point it was paused at and not from the beginning. How to handle this ?
If you use "play" after you have used "pause", the song should resume from the point it was paused. If it doesn't, it might have something to do with the sound library. It might solve the problem, if you use the most recent sound library. I think there was a bug in one of the older versions. I don't think the most recent version is available on their webside, but you can get it on their GitHub page. Hope it helps :)
@@ColorfulCoding Thank you for quick response. Can I ask one more thing, it is not related to this actually ? I am using p5.js to display live input from microphone. Is there any way to freeze the display ?
You can use the noLoop() function to freeze the canvas. To resume you can call loop().
@@ColorfulCoding Thank you for your suggestion. It worked.
Is it possible to achieve this same thing using python?
Is this doable in Flutter?
hi, Can we get the same effect with the mic stream audio data using P5.js?
Yes, you can create a audio stream from the mic like this:
p5js.org/examples/sound-frequency-spectrum.html
I've been trying to make this, however, when I use the preload function, my whole page gets stuck on Loading.... what should I do?
You are most likely running into some kind of error during the preload function. Have you made any changes to it or is it like the one in the video?
@@ColorfulCoding i have the same problem, but everything is just like in the video. when i delete the
'function preload() {...'
my black canvas is back but with it the whole canvas is gone and there is a message in the top left corner, saying that it is 'loading...' (forever)
May I ask which editor you use to write your p5.js code?
I use Visual Studio Code :)
Hi! i have to stupid questions... is the live preview integrated in your visual studio( somehow cant do that)
and on chrome in the console i cannot execute fft.waveform() VM97:1 Uncaught TypeError: Cannot read properties of undefined (reading 'waveform')
at :1:5
Solved It!
@@andrewperkinson8941 how
what is this song, please share a link with me, Thanks
Hi, my circle is not meeting at the bottom, there is space in between for some reason, can you please address this ?
i had the same issue and couldn't find the issue to save my life but i ended up randomly messing with the var under the beginShape and by changing the i+= 5 back down to a smaller number like 0.1 it closes the circle !
what word to search in petreon
how to export to mp4
Awesome content man. I was wondering if p5.js can we used in ReactJs project? Not sure , i have a reactjs project and i need to draw some visuals. Please let me know if it can be done
It can be used in reactjs, go for it.
probably difficult, consider using an
Hey man, I keep getting this error "Cannot read property 'length' of undefined
at RingBuffer.push (f9bb4b58-d2fe-49e9-9dd4-8cb68d6ca98f:75)
and
at AudioWorkletProcessor.process (f9bb4b58-d2fe-49e9-9dd4-8cb68d6ca98f:170)" It seems it's the sounds library but I can't find a fix...
I really want this to work... I tried it without using FFT but just amp and this was just fine. Can you help me?
Hey, I think it is just a bug in the sound library. I used to get the same error message, but it didn't affect the code or sound in any way, though. However, I got rid of the error message by downloading the newest version of the p5js sound library. I'm not sure this is available on their website, but it is on GitHub. Hope that helps.
@@ColorfulCoding Hey do you maybe have a link to the version you used? because I tried that earlier but without success... I also get two warnings
"p5.sound.min.js:2 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page"
and
"DevTools failed to load SourceMap: Could not load content for 127.0.0.1:5500/libraries/p5.sound.min.js.map: HTTP error: status code 404,"
maybe this is whats causing the malfunction?
Hey Thanks, I got it to work!! still have the error though
Most browsers don't allow audio to start automatically, so you need to create a function that will start the audio - e.g. when you click on the canvas.
How do I make the spikes sharper? Anyways a brilliant tutorial ❤️. Keep it up
You could decrease the number of points in the waveform. That would add some more space between each point and make the spikes sharper :)
this is LIT
Do you teach? I would like to learn from you.
what software are you using??
It is just code. But I'm working in Visual Studio Code if that is what you mean :)
Thanks, i use Eclipse, but i have visual studio too ☺️
why you dont doing free site for that can you doing it we all need it too much pls
i want this music
Great content, but i think you should use your own voice or really human voice..
Hello. Great tutorial. Do you have any suggestions to modify this code to make it more alike to this one here? th-cam.com/video/luXtNn64rWY/w-d-xo.html
I don't think this one uses waveform and instead has different parts of the wave reacting to different elements such as the bass and the treble. Would love some suggestions.
I believe what is happening here is that the audio is separate into 4 parts, like using the Moises app. Then use this tutorial but instead of a mirror, you section this into 4 parts, all using a different instrument of the song like bass, drums, vocals and others.
So why does my page just say loading.. forever?