Drawing CIRCLES in 10 Different Ways with JavaScript
Vložit
- čas přidán 4. 01. 2024
- Let's test the limits of the HTML Canvas and use JavaScript to draw circles in 10 different ways! And, fun story, @Goukiesm pointed out a way that is faster than the usual way of doing it. Watch the whole video to find out :-)
Things I mention in the video
My Videos on Circles: • Videos about Circles
Pythagorean Theorem: • Pythagorean Theorem: P...
2D Vectors Tutorial: • Learn 2D Vectors with ...
Draw the Portal Game: • Doctor Strange portal ...
My Kamehameha: • JavaScript Kamehameha
Self-driving Car Course: • Self-driving Car :: Ph...
Machine Learning Course: • Machine Learning Course
![Detecting Colored Markers with JavaScript [Understanding AI - Lesson 13 / 15]](http://i.ytimg.com/vi/jy-Mxbt0zww/mqdefault.jpg)
i tried to draw a lot of stars for my game, and method 9 (lineCap = rad * 2 method) was WAY faster than the arc method, thanks!
Yeah, surprising, isn't it :-)
I began my programming career over 50 years ago with APL. While seeking to learn AI, I came across this video. My first programming project was to determine a fourth circle that is tangent to three other tangent circles. Since many math geeks use APL, one associate told me that I could solve for x, y and r using a system of three quadratic equations using one of APL's matrix functions. APL has many multi-dimensional, primitive operators that would be well suited to AI data processing. You seem to passionate about AI, Math and geometry, so perhaps you could write a JavaScript function to determine and draw a circle tangent to three other circles. BTW, I later learned that this geometry problem is known as the Problem of Apollonius: en.wikipedia.org/wiki/Problem_of_Apollonius.
Thank you for your comment :-)
Adding the idea to my list. Will fit well after I teach 'trilateration'... it's on my list as well, but I already have videos planned for the rest of the year, so, these will have to come after that at some point :-\
Happy New Year!
Thanks! Same to you :-)
Instead of emulating shader (11) - you can use a real one with canvas 3d.
Also I know another crippy way of drawing a circle: create an Image, use base64 encoded svg circle as src, then draw that image with drawImage on our 2d canvas.
True, could have used webgl for the shader.
And your way of drawing the circle sounds legit :-)
happy new year Radu! very interesting and ilustrative video. thank you very much
You're welcome :-)
Feliz Ano Novo, Mestre Radu!
Thanks! Same to you :-)
This method 11 is pretty crazy ... 😂😂👍
Glad you liked it :-)
Gran video muy interesante! thanks Radu.
You're welcome :-)
O exemplo 11 foi genial. Parabéns!
Thanks, but it's a very basic thing for those who work with shaders .
##todays, i see your content you are the best ,you content is higher value, thanks
Thanks for watching :-)
Hi Radu, from this code, how could I improve it to create a pie chart?
For a pie chart I would use the arc method (or maybe the ellipse if I want it to have a bit of a 3D look). You would have to play with the start and end angle of the arc and also do a lineTo the center after making each slice.
Hope this helps!
today i subcribe this channel
Thank you!
🎉🎉🎉🎉Happy new year! An nou fericit!!
Thanks :-) Happy new year! La multi ani!
24:58
For c = rad * 0.959494,
For d = rad * 0.551915
Wow! Cool. How did you come up with those? :-)
@@Radu for d it was quite easy as there is a cubic Bezier approximation constant formula [(4/3) * (Math.sqrt(2) - 1)],
d = rad * [(4/3) * (Math.sqrt(2) - 1)]
But for c I couldn't figure it out, so I started hit & trail. I actually multiplied the formula by pi/2.
c = rad * [(4/3) * (Math.sqrt(2) - 1) * ( 1.1* Math.PI / 2)]
I got the value 1.1 by equating (4/3) * (Math.sqrt(2) - 1) * ( x* Math.PI/2) = 0.95 (Used in the video!)
That actually worked I was shocked!! lol :D
@@aditya2005_found I think they are correct :-) good job!
@@RaduThanks 😊😊
I find your videos very impressive but I don't know anything about JavaScript yet, can you help me choose a source to learn JavaScript?
I don't really know what to recommend... I learned it just by doing various projects and looking up what I don't know or asking questions when stuck.
@@Radu Thank you, I will do it your way and will follow your course because it is very interesting ,especially machine learning
Netninja
@@offgridvince thanks
@phamcongtoan1399 you're welcome. I learned a lot from his content. Even bought the course on udemy. Worth every penny I go back to it from time to time. Much success to you.
i like i subscribe.
Cool. Thanks :-)
💖💖💖💖
:-)
Happy new year....🎄
Happy new year :-)
Why is it so quiet?
Unfortunately it's because of the microphone in the room I was filming. It was set as high as possible, but that's the best it could pick up :-\
Also, unfortunately, I recorded about 10 videos in this way and I tried to increase the volume a bit + denoise the result, but this is the best I could, so... things will be a bit quiet for a while (hope you can manage).
Luckily, I noticed the problem and Phase 3 of the self-driving car course (starting in February) has good audio, but these other 'silent' videos will come at some point :-\
radu is best, radu is best , radu is best
:-)
I asked GPT because I am lazy and it gave me
ctx.setLineDash([5, 5]);
ctx.arc(0, 0, rad, 0, 2 * Math.PI);
ctx.setLineDash([]);
What is this answer for? Did I ask something in the video? I forgot :-D
@@Radu another method to draw circle
@@pizdaxyuwell, that is basically method 1 from my video, but the circle will be a dashed line instead of continuous.