(Ep2) Mandala Maker in JavaScript (functional style)
Вставка
- Опубліковано 5 гру 2018
- Let's build a mandala maker in JavaScript and HTML canvas, using concepts from functional programming 😊😋
⭐️ Support the channel on Patreon:
/ christopherokhravi
Links mentioned in this video:
- ramdajs.com/docs/#juxt
- math.stackexchange.com/questi...
- mandalamaker.online/
watching the beginning of this video, one thing I can't help but feel (as someone who isn't very familiar with these functional concepts) is that there's an implicit tradeoff between how simple/general these functions and how readable the code is.
Hey Christopher, I would love to read that huge comment you showed at the beginning but for some reason I do not see it in the comments section of Episode 1. Was it a private comment? Are you able to point me to it? Thanks!
What about using polar coordinates? It makes it a lot easier to calculate the points given the number of "slices" to divide the plane into. If you express each point as the angle theta from the positive x axis and the distance r from the origin you can derive the 8 points by adding 90 degrees to the starting theta each time. And you can also calculate "mirroring" by applying the same process using (90-theta) as the starting angle.
Then you can easily convert to cartesian coordinates like this:
x=r*cos(theta)
y=r*sin(theta)
Hope it helps.
On a possibly unrelated note, I can recommend watching Coding Math, video series on trigonometry and its practical applications to game physics by Keith Peters. It is an interesting subject on its own but most importantly starting around episodes 5 and 6 it explains how vector rotation works and I believe it can be used to create an arbitrary number of points arranged around an elliptical orbit that could possibly replace your list of transformations with something more general. I can't be entirely sure it'll work without actually implementing it but you seem to like to explore different approaches, therefore, some food for thoughts. Nice video, keep them coming. Cheers.
Excellent food for thought! I will definitely check it out! Thanks a bunch!
Great video watched the whole thing, starting to think your cats name is "The cat". At the end of the video you consider redrawing the canvas each time but then think there is another approach that is better performance. Unfortunately, the canvas for animation has to be redrawn each time does not "remember" where it drew things. So a separate state is needed. Using window.requestAnimationFrame() is also best option for creating a smooth render. And finally this article by Peter Jang: A Functional Canvas Approach With Redux would be insightful medium.com/@peterxjang/a-functional-canvas-approach-with-redux-ce59a369241b Great stuff Chris and glad and I found your channel