How I made Math: Final Boss
TLDRThe creator of 'How I made Math: Final Boss' shares an in-depth journey of crafting a complex Desmos graphing calculator design. Over 50 hours were spent using parametric and polygon functions, custom colors, and innovative techniques like 3D perspective in 2D space. The video details the creation process, from background elements to intricate details like the wings and math runes, showcasing the power of mathematical expressions in art.
Takeaways
- 😲 The creator spent over 50 hours using math expressions to design a complex Desmos graph, showcasing the potential of math in artistic creation.
- ✏️ The graph utilized two main types of functions: parametric functions for curved designs and polygons for jagged edges, each with unique advantages.
- 🎨 Custom colors were introduced by using variables set to HSV or RGB functions, expanding beyond Desmos' default color palette.
- 🛠️ Several tools were developed to expedite the creation process, including animation variables, geometric shapes, transformations, and 3D perspective in 2D space.
- 🌌 For the background, a gradient effect was achieved by layering polygons with different opacities and sizes.
- 🏔️ The mountains were crafted using a line of points with random elevations, and the tops were blurred to mimic a natural landscape.
- 🌠 Stars and planets were created with random points and specific lighting effects using implicit functions for a realistic appearance.
- 🌀 The black hole featured multiple concentric circles with gradient effects to give depth, and the flower petals used rose curves based on polar functions.
- 👁️ The eye design incorporated a star shape and quadratic functions, with additional details like a black circle glow and a compressed circle for the pupil.
- 🔮 The math runes were the most extensive part, created with Bezier curves and filled with a bright white gradient for a shining effect.
- 🌈 The wings, the most complicated part, were made with integral symbols traced by Bezier curves and positioned with a complex system of rotations and scaling.
- 💻 To optimize performance, parametric curves were converted to polygons, and a slider was introduced to control the level of detail for a balance between image quality and speed.
- 🖼️ Images were used to replace moving parts of the graph for improved performance, with a mechanism to toggle between expressions and images for different viewing options.
Q & A
What was the primary tool used to create the 'Final Boss of Math'?
-The primary tool used was the Desmos graphing calculator.
How long did it take to create the 'Final Boss of Math'?
-It took over 50 hours of work to create.
What are the two main types of functions used in the creation?
-The two main types of functions used were parametrics and polygons.
Why are polygons more resource-efficient than parametrics in Desmos?
-Polygons are more resource-efficient because they require fewer calculations, making the graph run faster.
How were custom colors created in the Desmos graph?
-Custom colors were created by setting a new variable equal to an HSV or RGB function.
What is a parametric function and how does it relate to the design in the graph?
-A parametric function is a function that describes a point by giving its coordinates as expressions involving a parameter. In the graph, it is used to draw the trail that a point takes as the parameter changes, which is useful for creating curved designs.
How were the 3D perspective effects achieved in the 2D space?
-The 3D perspective effects were achieved by scaling a point in 2D based on its distance from a 'camera', with higher 'z' values making the point appear smaller.
What is a list in the context of Desmos and how does it help in creating complex graphs?
-A list in Desmos is a collection of elements that can be numbers, points, polygons, or colors. It allows for the graphing of hundreds or thousands of lines with a single equation, which simplifies the creation of complex graphs.
How were the jagged edges of the mountains created?
-The jagged edges of the mountains were created by using a line of points with the random function to raise each point a random amount.
What technique was used to create the glow effect around the stars and planets?
-The glow effect was created by duplicating points and making them bigger, and for the planets, by using a gradient strat along with outer glow made with outlines.
How were the complex shapes like the black hole and the eye created?
-The black hole was made using sets of circles with gradient effects, and the eye was created using a combination of star shapes and quadratic functions for the eye shape and pupil.
What is a Bezier curve and how was it used in the creation of the 'Final Boss of Math'?
-A Bezier curve is a curve defined by points that determine its trajectory. In the creation, Bezier curves were used to trace over complex symbols and shapes, such as the math runes and the wings.
How were the wings, one of the most complicated parts, created?
-The wings were created by tracing out integral symbols with Bezier curves, creating a basic skeleton for the wing shape, positioning the integral symbols, and animating them to flap.
What optimization techniques were used to improve the performance of the graph?
-To improve performance, parametric functions were turned into polygons, and moving parts of the graph were replaced with images. Additionally, a slider was introduced to control the level of detail and a method to cause errors for certain slider values was used to toggle between expressions and images.
Outlines
📈 Introduction to Math Art Creation
The creator began their journey on December 15th, 2023, using the Desmos graphing calculator to craft a piece of math art that was entirely composed of mathematical expressions. This project, which took over 50 hours and leveraged three years of experience with Desmos, utilized two main types of functions: parametric and polygonal. Parametrics involve variable adjustments to coordinates to trace the path of a point, ideal for curved designs, while polygons, created with points and connected by Desmos, are better for sharp edges and are more resource-efficient. The creator also expanded the color palette beyond Desmos' default by using custom HSV or RGB functions. To streamline the creation process, they developed various tools such as animation variables, geometric shapes, transformations, and even a 3D perspective function for 2D space.
🎨 Crafting the Math Art Piece
The artist started with a solid purple background and a horizontally stretched square polygon to cover the screen. By using lists, which can contain various elements and graph multiple lines with a single expression, they created a gradient effect and added mountains with jagged edges using the random function. Stars were scattered with randomized sizes, and planets were created using implicit functions to simulate lighting effects. The piece also included a crescent moon and a complex unit circle background, which was achieved by exploiting Desmos' inability to graph undefined points, thus creating disconnected lines with a single expression.
🌌 Advanced Techniques and Optimization
The creator used rose curves for flower petals and a lemniscate for an infinity sign, while vines were crafted from combined sine waves. For the eye, they utilized a star shape and quadratic functions. The math runes were the most extensive part, requiring a separate folder for points and the use of Bezier curves for tracing. The arms were modeled after the creator's own, with a unique touch of six-fingered hands. The wings, the most intricate part, involved tracing integral symbols with Bezier curves and animating them for a flapping effect. To optimize the graph's performance, parametric curves were converted to polygons, and a slider was introduced to control the number of points used, balancing image quality and performance. Finally, moving parts were replaced with images to further enhance the graph's speed.
🔧 Final Touches and Conclusion
The final details included floating rocks created with 3D point mapping and an orange lens flare. The foreground cliffs were manually crafted with lighting effects. The creator's signature was added using Bezier curves, opting for a cursive font to simplify the design. To further optimize, a slider was implemented to toggle between detailed expressions and image-based rendering, allowing for a smoother viewing experience on less powerful devices. The creator expressed gratitude for the support received and hinted at future videos that would delve deeper into the expressions and techniques used in their Desmos graphing projects.
Mindmap
Keywords
💡Desmos Graphing Calculator
💡Parametrics
💡Polygons
💡Custom Colors
💡Lists
💡3D Perspective in 2D Space
💡Bezier Curves
💡Rose Curves
💡Lemniscate
💡Optimization
💡Error-based Visibility Control
Highlights
Creation of a complex mathematical artwork using Desmos graphing calculator.
Entire artwork composed of math expressions, showcasing a 'being of math, made with math' concept.
Utilization of over 50 hours of work and 3 years of experience with Desmos graphs.
Key components of the graph include parametric and polygon functions.
Polygons are created using points and Desmos' built-in polygon function.
Parametric functions are used for curved designs by varying a variable in the coordinates.
Polygons are more resource-efficient than parametrics, enhancing the graph's performance.
Introduction of custom colors in Desmos through HSV or RGB functions.
Development of various mathematical tools for faster creation, including animation variables and 3D perspective functions.
Use of lists in expressions to graph hundreds or thousands of lines efficiently.
Creation of a gradient background using opacity and color blending techniques.
Design of mountains using random function to create jagged edges.
Innovative use of implicit functions to create realistic lighting effects on planets.
Employment of Bezier curves for intricate designs, such as the math runes.
Optimization techniques to improve graph performance, including converting parametrics to polygons and using image imports.
Implementation of a slider to control the level of detail in the graph for performance and visual quality.
Inclusion of an image mode setting that replaces graph parts with images for faster rendering.
Use of error-triggering mechanism to toggle between expressions and images for performance optimization.