I was waiting to see 3 screens of code... but Radu did not want my wish come true! Soo instead he makes it a function! :) I did not expected that! Great work as usual Radu!
What is the benefit of using rotation/translation of the canvas, compared to parading an angle to the function and use cos/sin? Less complex code? But what about the drawing speed in case you need to draw thousands?
:-) good question. I've done some experiments in the past, and yes, using trigonometric functions is faster than rotating the canvas for each item. But they are expensive operations as well, so they should be used sparingly. Maybe cache the values if they tend to repeat, or something like that. Anyway, yes, here I use rotation because the code is short and we don't need to worry about efficiency so much (not animating or drawing a very complex scene) But in this case, we do one rotation, and then draw one 'branch', consisting of 3 different lines... It could be that this is faster than using trigonometry to get the point coordinates for each of those lines... But I don't know... my intuition says it could be faster, or that at some point it will become faster, when increasing the complexity of a single branch (adding more lines) But I don't know internally how all the canvas things work... and I don't really want to know :-D I have seen there is variation on different browsers (some things take longer than others on one browser and it's vice-versa on another). My approach with these things is to try several approaches and test. But I usually only do that when the application really needs it (complex scenes with animation that shouldn't lag).
I love how you used the translation and rotation to replicate each snowflake branch!
:-)
i thought that it would be the toughest but you break it very easily . awesome
It looks complex, but the symmetry makes it easier to generate :-)
Before the branching loop: ctx.lineCap = "round"; gives it a bit more natural appearance. (I think).
Good idea! Stay tuned on the 17th :-) the 'round' snowflake might just make an appearance!
Love these vids! I follow them almost daily!
Awesome! Thank you! :-)
I was waiting to see 3 screens of code... but Radu did not want my wish come true! Soo instead he makes it a function! :) I did not expected that! Great work as usual Radu!
Yeah, ironically the item coming out today looks simpler, but the code is 3 times larger :-D
@Radu 😄
What is the benefit of using rotation/translation of the canvas, compared to parading an angle to the function and use cos/sin? Less complex code? But what about the drawing speed in case you need to draw thousands?
:-) good question. I've done some experiments in the past, and yes, using trigonometric functions is faster than rotating the canvas for each item. But they are expensive operations as well, so they should be used sparingly. Maybe cache the values if they tend to repeat, or something like that.
Anyway, yes, here I use rotation because the code is short and we don't need to worry about efficiency so much (not animating or drawing a very complex scene)
But in this case, we do one rotation, and then draw one 'branch', consisting of 3 different lines... It could be that this is faster than using trigonometry to get the point coordinates for each of those lines... But I don't know... my intuition says it could be faster, or that at some point it will become faster, when increasing the complexity of a single branch (adding more lines)
But I don't know internally how all the canvas things work... and I don't really want to know :-D I have seen there is variation on different browsers (some things take longer than others on one browser and it's vice-versa on another).
My approach with these things is to try several approaches and test. But I usually only do that when the application really needs it (complex scenes with animation that shouldn't lag).
really nice! nice idea to play some kind of memory game. If you take 2 of the same cards, you win. is really nice as a Christmas memory :-)
Hey, that's a great idea :-)
Maybe I'll code the memory game next Christmas... using these images or those submitted by other people!
@@Radu success
I didn't get how you rotate the branches inside the loop. It is always rotate for the same value, isn't?
The rotate method is cumulative ;-)