Sorry to put on pinned comment but will help help if any one facing the issue of lines drawn in different areas while scrolling The issue you're facing is that the mouse position is calculated based on the absolute page coordinates (pageX, pageY) relative to the banner element. However, when scrolling, the element’s position changes relative to the viewport, which causes a mismatch between the actual mouse position and the calculated coordinates. x: event.pageX - banner!.getBoundingClientRect().left, y: event.pageY - banner!.getBoundingClientRect().top, change the above to x: event.clientX - banner!.getBoundingClientRect().left, y: event.clientY - banner!.getBoundingClientRect().top, Will be fixed happy coding
This type of exercise requires everyone to have a basic understanding of spatial geometry, how to calculate coordinates and the distance between two points on the OXY coordinate plane.
This is really cool. Is there any way to use multiple canvas and only add and clear lines from one so you don't have to redraw the dots? Ah but the lines would go on top of the circle then, this way is clever too.
i like it but i want this effect without the mouse move because in mobile no cursor hover event, i wonder how to create this effect to play randomly independantly on the screen.
if (banner) { banner.addEventListener("mousemove", (event: any) => { ctx!.clearRect(0, 0, canvas.width, canvas.height); drawDots(); let mouse = { x: event.pageX, y: event.pageY, // x: event.pageX - banner.getBoundingClientRect().left, // y: event.pageY - banner.getBoundingClientRect().top, }; this will solve the issue i mentioned above. just change x and y value.
The issue you're facing is that the mouse position is calculated based on the absolute page coordinates (pageX, pageY) relative to the banner element. However, when scrolling, the element’s position changes relative to the viewport, which causes a mismatch between the actual mouse position and the calculated coordinates. x: event.pageX - banner!.getBoundingClientRect().left, y: event.pageY - banner!.getBoundingClientRect().top, change the above to x: event.clientX - banner!.getBoundingClientRect().left, y: event.clientY - banner!.getBoundingClientRect().top, Will be fixed happy coding
Hi can you help, in my website that i am building when I scroll down there is some issue and the lines drawn do not match the position of the cursor what should I do
The issue you're facing is that the mouse position is calculated based on the absolute page coordinates (pageX, pageY) relative to the banner element. However, when scrolling, the element’s position changes relative to the viewport, which causes a mismatch between the actual mouse position and the calculated coordinates. x: event.pageX - banner!.getBoundingClientRect().left, y: event.pageY - banner!.getBoundingClientRect().top, change the above to x: event.clientX - banner!.getBoundingClientRect().left, y: event.clientY - banner!.getBoundingClientRect().top, Will be fixed happy coding
@@lundeveloper that reply didn't make sense. Maybe my comment was badly explained. The random colorpicker only retrieve colors from the array, but you set the random limit hard coded with an int, rather than retrieve the count from the array length
Hi, if u read my first question/ th-cam.com/video/NJ1inoC1L1k/w-d-xo.htmlsi=bvnm7OFRrcWvHBsp Here r my second question, i had a circle element in the center of the page, another little circles comes from the the outside of the page to that circle direction within arbitrary position and speed, my question is i need the outside circle to be blown by the shapes that came out from the middle circle by collision, before they collide with the center one, my weak part to do this is the math behind calculating the position and speed, if it is stressful don't worry about the speed of circles,... Think my question like a radar system, the enemy helicopter and missile attack, got it, thank u again!
Please subscribe to the channel to continuously update videos and interesting topics about programming and web design
Sorry to put on pinned comment but will help help if any one facing the issue of lines drawn in different areas while scrolling
The issue you're facing is that the mouse position is calculated based on the absolute page coordinates (pageX, pageY) relative to the banner element. However, when scrolling, the element’s position changes relative to the viewport, which causes a mismatch between the actual mouse position and the calculated coordinates.
x: event.pageX - banner!.getBoundingClientRect().left,
y: event.pageY - banner!.getBoundingClientRect().top,
change the above to
x: event.clientX - banner!.getBoundingClientRect().left,
y: event.clientY - banner!.getBoundingClientRect().top,
Will be fixed happy coding
You just got yourself a loyal and consistent engager. Subscribed!!
this is the coolest design for which I completely understood the code!!! Amazing !!! continue to do videos like this
Thank you so much 😍😍
Wow... this is the improved English version of one of your oldest videos.
Thanks for this training!
❤️❤️❤️😍😍
100th Comments actually i remember i subscribed you because of this video and this video is helps me now
loved it
Amazing and well-explained content!
I like the mr beast voice its funny lmao thanks for the info :)
This type of exercise requires everyone to have a basic understanding of spatial geometry, how to calculate coordinates and the distance between two points on the OXY coordinate plane.
Just wow! You motivated me to practice canvas 😅
New subscriber. THANK YOU! ❤
Thank you so much 😍😍😍
Mr Beast? 😳
This is really cool. Is there any way to use multiple canvas and only add and clear lines from one so you don't have to redraw the dots? Ah but the lines would go on top of the circle then, this way is clever too.
please Make react js and tailwind animation tutorial because are explain good and best
hats off
Which ai did you use for the voice? good vid btw
i don't speech good EN,but you are very clear & concise to explaining js🤙
Tha k you bro ❤️❤️
Awesome brother.❤❤❤❤
Thank you 😍😍
never though co-ordinate geometry would be so helpful 😓.. NIce tutorial btw
i like it but i want this effect without the mouse move because in mobile no cursor hover event, i wonder how to create this effect to play randomly independantly on the screen.
Thanks ❤
😍
I like your video very much. (New subscriber btw)
Thank you so much ☺️
That's interesting 😊
Thank you 😍😍
great video
wait how do you even come up with them maths forumales bro
ur a genius
The video is very good, I learned a lot. In addition, brother, what is your gradient theme? Can you recommend it and like it?
Bro which vs code extension you are using pls tell us 😢
Amazing work...
Kindly use this work in Figma.
of course bro is amazing content!
Thank you bro 😍
Awesome bro🔥
Thank you so much bro
Cool.. ! I love you. Eh I mean not you but this effect.
hahaha Thank you
Thanks Jimmy
😍😍
Bro can you upload a video about your vs code extension?
Good Work Bro.
Can you give me the website that take from it background images
It ain't fair man, you're forcing people to subscribe you....?
subscribed
Wow! You are a great teacher.
Thank you so much
position of cursor pointer and points where dots meet are different if we scroll.
if (banner) {
banner.addEventListener("mousemove", (event: any) => {
ctx!.clearRect(0, 0, canvas.width, canvas.height);
drawDots();
let mouse = {
x: event.pageX,
y: event.pageY,
// x: event.pageX - banner.getBoundingClientRect().left,
// y: event.pageY - banner.getBoundingClientRect().top,
}; this will solve the issue i mentioned above. just change x and y value.
The issue you're facing is that the mouse position is calculated based on the absolute page coordinates (pageX, pageY) relative to the banner element. However, when scrolling, the element’s position changes relative to the viewport, which causes a mismatch between the actual mouse position and the calculated coordinates.
x: event.pageX - banner!.getBoundingClientRect().left,
y: event.pageY - banner!.getBoundingClientRect().top,
change the above to
x: event.clientX - banner!.getBoundingClientRect().left,
y: event.clientY - banner!.getBoundingClientRect().top,
Will be fixed happy coding
cool dude, where did you get the background image?
Hi, the background of the project in the video is created from code, not from images
@@lundeveloper cool, i'll try to figure it out. Thanks man.
Can you make this responsive please
hay quá
which is that vs theme its cool?
You will find information about it in the video description
@@lundeveloper wow you're awesome thank you so much !
Hi can you help, in my website that i am building when I scroll down there is some issue and the lines drawn do not match the position of the cursor what should I do
The issue you're facing is that the mouse position is calculated based on the absolute page coordinates (pageX, pageY) relative to the banner element. However, when scrolling, the element’s position changes relative to the viewport, which causes a mismatch between the actual mouse position and the calculated coordinates.
x: event.pageX - banner!.getBoundingClientRect().left,
y: event.pageY - banner!.getBoundingClientRect().top,
change the above to
x: event.clientX - banner!.getBoundingClientRect().left,
y: event.clientY - banner!.getBoundingClientRect().top,
Will be fixed happy coding
what this name theme?
bruh y u using mrbeast voice
F. I can’t even take this seriously after reading this comment. Will need to put in my watch later until I can handle being taught code by Mr. Beast.
lmao 🤣
can we make the dots moving randomly ?
Of course, Thank you for your comments
Just add a setInterval and call ctx.clear and drawDots inside it
bro please make portfolio website for developer like this please
Of course it is 🤟
@@lundeveloper waiting for this video
#issue. The circle shape is destroyed when the browser window is resized.
Yap bro 😢
How to fix it
Dots overlap content and button
Don't worry, the pointer-event: none CSS property in the video has solved all the problems
every time calling the darwDots() why its not drawing new dots? It keeps old dots but why @@lundeveloper
ad có thể làm clip về d3js để vẽ network map k??
Network map bạn dùng `graphcentral/graph` cho dễ và performant nhé.
@@emptycodes khả năng custom của nó ổn không bạn
Please tell me the extension name. 🥺
Hi, I use a lot of extensions, which one do you want to mention?
Could you tell me what is the name of this gradient theme you use?
Please read the video description, I have provided all the information there ❤️
Is that Mr.Beast
how much did you spend in css in your whole life?
Kinda weird that you didn't set the random color pick to the length of color array.
That in design is really not good, because not every color will suit your design
@@lundeveloper that reply didn't make sense. Maybe my comment was badly explained. The random colorpicker only retrieve colors from the array, but you set the random limit hard coded with an int, rather than retrieve the count from the array length
But it's not responsive, when you change the screen size after loading the website, things Starts to get crazy 🤨
wtf is this ai mr beast voice?
Nghe lạ quá
Hi, if u read my first question/ th-cam.com/video/NJ1inoC1L1k/w-d-xo.htmlsi=bvnm7OFRrcWvHBsp
Here r my second question, i had a circle element in the center of the page, another little circles comes from the the outside of the page to that circle direction within arbitrary position and speed, my question is i need the outside circle to be blown by the shapes that came out from the middle circle by collision, before they collide with the center one, my weak part to do this is the math behind calculating the position and speed, if it is stressful don't worry about the speed of circles,...
Think my question like a radar system, the enemy helicopter and missile attack, got it, thank u again!
That AI voice is so grating
is this Mr Beast ? 😂😂😂