How I animate stuff on Desmos Graphing Calculator
TLDRThe video script discusses the process of animating a character in Desmos, a mathematical graphing tool. It begins with obtaining the source material, such as a YouTube video, using tools like youtube-dl and ffmpeg to convert it into a series of PNG images. The script then delves into the complexities of creating vector art in Desmos, contrasting the time-consuming manual approach with a more efficient method using Bezier curves. The Bezier curve formula is introduced as a way to generalize curves, which can be inputted into Desmos for automated graphing. The script also addresses the challenge of converting raster images into vector format, using tools like potrace and OpenCV for edge detection and contour tracing. The final step involves creating a script to render each frame and update the graph, highlighting the trade-offs between resolution and the number of lines to be drawn. The video concludes by emphasizing the practicality of the tools and algorithms used in the animation process, offering insights into how real videos and animations are processed in software development.
Takeaways
- 🎬 The process of animating in Desmos involves obtaining source material, like a YouTube video, and converting it into frames using tools like youtube-dl and ffmpeg.
- 🎨 Desmos vector art can be time-consuming to create manually, but the script discusses a faster, automated approach using Bezier curves.
- 📐 Bezier curves are represented by four points and can be used to generalize any type of curve with a single equation, which is useful for software developers.
- 🖼️ PNG and JPEG are raster image formats that use a matrix of pixels, while SVG uses vector data like Bezier curves, making it easier to work with in Desmos.
- 🔍 Potrace is a tool that can convert raster images into vector paths using Bezier curves, but it requires a strict black and white image input.
- 👁️ OpenCV's Canny edge detection is an alternative method that can handle images with multiple colors by creating detailed contours.
- 📈 Using Canny edge detection before Potrace allows for a more defined image from colored inputs, but it can result in double lines due to tracing over existing edges.
- 💻 A front-end script is needed to render each frame and update the graph, which can be time-consuming depending on the complexity of the image.
- ⏱️ The rendering time for animations in Desmos can vary significantly, with the example of a Bad Apple video taking one hour, and a shorter sequence taking two hours.
- 🚀 The tools and algorithms used in creating Desmos animations provide insights into how real videos and animations are processed in software development.
- 🌐 The limitations in rendering animations in Desmos are primarily due to the number of lines that need to be drawn, which is a constraint of the Desmos backend.
Q & A
What is the first step in animating a YouTube video in Desmos?
-The first step is to obtain the source material by downloading the YouTube video using a command line tool like youtube-dl.
How are the individual frames of a video obtained after downloading?
-The individual frames are obtained by parsing the downloaded video with a tool like ffmpeg, which leaves you with a directory of png files.
Why is creating vector art in Desmos time-consuming?
-Creating vector art in Desmos is time-consuming because it requires manual drawing and mathematical skill, which can take a significant amount of time and dedication.
What is the Bezier curve and how is it used in Desmos?
-A Bezier curve is represented by four points, with one being the starting point, one the ending point, and the other two determining the curvature. In Desmos, by plugging in the parameters of the Bezier curve formula, Desmos takes care of the rest of the drawing process.
How does one convert raster images like PNGs into a format usable by Desmos?
-One can convert raster images into a usable format by first converting them into SVGs, which use Bezier curves to represent images. Then, the data from SVGs can be put into Desmos.
What tool can be used to convert PNG data into Bezier curves?
-The tool called Potrace can be used to input PNG data as a bitmap and return a traced path of all the Bezier curves.
Why is it necessary to use a black and white image for Potrace?
-Potrace uses an edge detection algorithm that works with strictly two colors, black and white. This is because it traces the edges between two colors only, which is not applicable to grayscale or images with multiple colors.
How can one deal with images that have shading and multiple colors for animation in Desmos?
-To deal with images that have shading and multiple colors, one can use the OpenCV library's Canny edge detection to get more detailed contours of the image which can then be represented as white lines on a black background.
What is the reason for using both Potrace and OpenCV for edge detection?
-OpenCV provides a more detailed edge detection suitable for colored images, but the lines it provides are linear straight lines. Potrace is then used to convert these into Bezier curves, which are more suitable for rendering in Desmos.
What is the process for rendering each frame of the animation in Desmos?
-A front-end script is created to render each frame and update the graph at each frame. The script then runs through the entire sequence to complete the animation.
How long did it take to render the Bad Apple video and the shorter sequence at the beginning of the video?
-The Bad Apple video took about one hour to render, while the shorter sequence at the beginning of the video took two hours.
What is the main factor that limits the rendering speed in Desmos?
-The main factor that limits the rendering speed is the number of lines that have to be drawn, as the rendering process is dependent on the Desmos backend, which is not hosted locally.
What insight does the process of creating animations in Desmos provide into real software?
-The process provides insight into the way real videos and animations are processed in real software, highlighting the use of tools and algorithms in the animation and video processing industry.
Outlines
🎨 Animating with Desmos: From Video to Vector Art
This paragraph introduces the process of animating using Desmos, a mathematical tool. It starts with obtaining source material, such as a YouTube video, using tools like youtube-dl and ffmpeg to parse it into frames. The challenge is then converting these raster images into vector art that Desmos can handle. The speaker mentions a detailed manual approach versus a faster, automated method using Bezier curves. Bezier curves are explained as a way to generalize any type of curve with a single equation, which can then be inputted into Desmos for rendering. The limitations of manual drawing are contrasted with the speed and automation benefits of the proposed method.
📐 Converting Raster to Vector: The Role of Potrace and OpenCV
The second paragraph delves into the technicalities of converting raster images (like PNGs) to vector images suitable for Desmos. It discusses the use of the Potrace tool to convert bitmap images into Bezier curves. However, Potrace requires a strict black and white image, leading to the use of the OpenCV library's Canny edge detection to handle images with multiple colors. This method allows for a detailed representation of the image's contours, which can then be traced by Potrace. The paragraph also touches on the challenges of rendering a large number of lines in Desmos and the time it takes to render animations, providing a real-world example of the process's complexity and the insights it offers into video and animation processing.
Mindmap
Keywords
💡Desmos
💡youtube-dl
💡ffmpeg
💡PNG files
💡Bezier curve
💡Vector art
💡potrace
💡LaTeX
💡OpenCV
💡Raster image
💡Edge detection
💡Canny edge detection
Highlights
The video discusses the process of animating in Desmos using source material like YouTube videos.
Downloading YouTube videos and parsing them into frames using tools like youtube-dl and ffmpeg.
Desmos vector art can be time-consuming, exemplified by a week-long project of creating Zhongli.
The presenter's Desmos representation of Zhongli was created in just 10 minutes, emphasizing speed and automation.
Bezier curves are introduced as the mathematical foundation for representing curves in animations.
The video explains how to obtain parameters for the Bezier curve formula for use in Desmos.
PNGs and JPEGs use raster images, while SVGs use Bezier curves, which are beneficial for the animation process.
Using potrace to convert PNG data into a traced path of Bezier curves.
The necessity for the input image to be strictly black and white for potrace's edge detection algorithm.
The use of OpenCV's Canny edge detection for more detailed lines from colored images.
Combining edge detection with potrace to create a more defined image from colored inputs.
Creating a front-end script to render each frame and update the graph for animation.
The Bad Apple video took about one hour to render, while a shorter sequence took two hours.
The rendering time is largely dependent on the number of lines that need to be drawn in Desmos.
The tools and algorithms used in the animation process provide insight into how real videos and animations are processed in software.
The practical applications of Desmos animator and the broader impact on understanding video and animation processing.
Transcripts
5.0 / 5 (0 votes)
Thanks for rating: