How I animate stuff on Desmos Graphing Calculator
TLDRThis video tutorial explores the process of animating images on Desmos Graphing Calculator. It starts with obtaining source material, such as downloading YouTube videos and converting them into frames. The video then delves into the use of Bezier curves for vector representation in Desmos, which is more efficient than manual drawing. It introduces tools like ffmpeg for parsing frames and potrace for converting images into vector paths. The tutorial also addresses the challenge of animating colored images by using OpenCV's Canny edge detection to create a binary image for potrace. Finally, it discusses the practicality and educational value of the process, offering insights into video and animation processing in software development.
Takeaways
- 🎥 To animate on Desmos, start by obtaining the source material, such as downloading a YouTube video and parsing it into frames.
- 🖼️ Desmos vector art is time-consuming to create manually, but automation can speed up the process significantly.
- 📈 The Bezier curve equation is essential for animating curves in Desmos, representing four points that define the curve's shape.
- 🖊️ Converting raster images (like PNGs) to vector formats (like SVGs) allows for easier manipulation and use in Desmos.
- 🔍 Tools like potrace can trace bitmap images to bezier curves, which are then usable in Desmos for animation.
- 🖌️ OpenCV's Canny edge detection is used to handle images with multiple colors by converting them into a binary format suitable for potrace.
- 🔄 Animating involves creating a script that updates the graph for each frame, which can be time-consuming due to the number of lines Desmos has to render.
- ⏱️ The rendering time in Desmos can be extensive, with the example 'Bad Apple' video taking an hour and another sequence taking two hours to render.
- 🛠️ The process of animating in Desmos, while not practical for all uses, provides insights into how real videos and animations are processed in software development.
Q & A
What is the first step to animate something on Desmos?
-The first step is to obtain the source material, such as downloading a YouTube video using a command line tool like youtube-dl.
How does one convert a YouTube video into frames for animation on Desmos?
-After downloading the video, one should use a tool like ffmpeg to parse it into individual frames, resulting in a directory of png files.
Why is vector art preferable for animation on Desmos compared to raster images?
-Vector art, like SVGs, uses bezier curves to represent images, which is more convenient for animation on Desmos since it can be directly translated into Desmos' graphing language.
What is a bezier curve and how is it used in Desmos animation?
-A bezier curve is represented by four points that define a curve's start, end, and curvature. It's used in Desmos animation by plugging in parameters into the bezier curve formula, which Desmos then uses to draw the curve.
How can one convert png images into a format suitable for Desmos animation?
-One can use a tool like potrace to convert png images into a format that uses bezier curves, which can then be represented in Desmos.
What is the limitation of the potrace tool when it comes to color?
-Potrace requires the input image to be strictly black and white, as it traces edges between two colors only.
How can one handle images with multiple colors for animation on Desmos?
-One can use the OpenCV library's canny edge detection to create contours of the image, which can then be represented as white lines on a black background, suitable for potrace.
Why is it necessary to run edge detection twice when animating colored images on Desmos?
-Running edge detection twice, first with OpenCV and then with potrace, allows for a more defined image when taking a colored image as input and avoids the issue of double lines.
What is the rate-limiting factor when rendering animations on Desmos?
-The greatest rate limiter in rendering animations on Desmos is the number of lines that have to be drawn, as the backend processing is not hosted locally and cannot be controlled.
What insights do the tools and algorithms used in Desmos animation provide about real video and animation processing?
-The tools and algorithms used in Desmos animation, such as bezier curves and edge detection, give insight into how real videos and animations are processed in software, highlighting the complexity and computation involved.
Outlines
🎨 Animating with Desmos and Bezier Curves
This paragraph introduces the process of animating in Desmos, starting with obtaining source material like downloading a YouTube video and parsing it into frames. The focus is on using Bezier curves to represent images, which are more suitable for vector graphics. The video discusses the trade-off between manual, detailed vector art and a faster, automated approach using tools like potrace to convert raster images to vector paths. The importance of edge detection and the use of the OpenCV library for more detailed tracing are highlighted.
📊 Processing Colored Images for Animation
The second paragraph delves into the challenges of animating colored images in Desmos, which requires converting them into a binary format suitable for edge detection. It explains the use of potrace for tracing edges and the need for a pre-processing step using OpenCV's Canny edge detection to handle colored images. The paragraph also touches on the practical limitations of rendering animations in Desmos, such as the time it takes to render and the number of lines that need to be drawn, concluding with a note on the educational value of the process despite its impracticality for large-scale animation.
Mindmap
Keywords
💡Desmos Graphing Calculator
💡Animate
💡Source Material
💡youtube-dl
💡ffmpeg
💡Bezier Curve
💡Raster Image
💡Vector Image
💡potrace
💡OpenCV
💡Edge Detection
Highlights
Animating on Desmos Graphing Calculator involves obtaining source material, such as downloading a YouTube video.
Desmos vector art can be created manually, but it is time-consuming.
Bezier curves are used to generalize any type of curve with a single equation in Desmos.
Desmos can automatically handle the animation using the Bezier curve formula.
PNG and JPEG use raster images, while SVG uses vector images like Bezier curves.
Converting PNGs to SVGs allows using vector data in Desmos.
Potrace is a tool that can convert bitmap images into traced paths of Bezier curves.
Potrace requires strict black and white images for edge detection.
OpenCV library's Canny edge detection can handle images with multiple colors.
Canny edge detection provides more detailed contours than simple black and white tracing.
Combining Canny edge detection with potrace allows for more defined images in Desmos.
A front-end script is needed to render each frame and update the graph.
The rendering time for animations in Desmos can be significant due to the number of lines to be drawn.
The tools and algorithms used in the Desmos animator provide insights into real video and animation processing.
The process of animating on Desmos, while not always practical, offers valuable learning opportunities.