How I animate stuff on Desmos Graphing Calculator

Junferno
28 Apr 202107:48

TLDRThis video tutorial guides viewers on animating content using Desmos Graphing Calculator. It begins with obtaining source material, such as downloading a YouTube video and parsing it into frames. The video then delves into the process of converting raster images to vector art using tools like potrace and OpenCV for edge detection. The tutorial emphasizes the use of Bezier curves for smooth animations and the challenges of handling color and detail in animations. It concludes with a discussion on the practicality of Desmos animation and the insights it provides into video processing algorithms.

Takeaways

  • 😀 The video discusses animating content on Desmos Graphing Calculator, a tool typically used for mathematical graphing.
  • 🎥 To animate a YouTube video on Desmos, one must first download it and then convert it into individual frames using tools like youtube-dl and ffmpeg.
  • 🖼️ Desmos uses vector art, which can be time-consuming to create manually, but there are shortcuts to speed up the process.
  • 📊 The Bezier curve is introduced as a method to generalize any type of curve with a single equation, which is crucial for automating the animation process.
  • 💻 For software developers, understanding the math behind Bezier curves is less important than knowing how to input parameters to let Desmos handle the graphing.
  • 🖥️ File formats like PNG and JPEG use raster images represented as matrices of pixels, while SVG uses vector images represented by Bezier curves, which is beneficial for conversion to Desmos-compatible formats.
  • 🔍 Tools like potrace can convert bitmap images into traced paths of Bezier curves, which can then be used in Desmos after being expressed in LaTeX for graphing.
  • 🖌️ The edge detection algorithm used by potrace requires strict black and white images, necessitating the use of additional tools for more complex, colored images.
  • 🌐 OpenCV library's Canny edge detection can be used to process colored images and extract contours that can then be traced by potrace for a more detailed animation.
  • 📱 A front-end script is needed to render each frame and update the graph, which can be time-consuming depending on the complexity and number of lines to be drawn.
  • 🕒 The rendering time for animations on Desmos can be significant, with the example of a Bad Apple video taking about one hour, highlighting the limitations of the platform for real-time animation.

Q & A

  • What is the first step in animating something on Desmos according to the video?

    -The first step is to obtain the source material, which could involve downloading a YouTube video using a command line tool like youtube-dl and then parsing it into individual frames with ffmpeg.

  • Why is it challenging to create vector art in Desmos?

    -Creating vector art in Desmos is challenging because it takes a significant amount of time and mathematical skill. The video gives an example of someone taking a week to draw Zhongli in Desmos, which contrasts with the presenter's quicker method.

  • What is the role of the Bezier curve in animating on Desmos?

    -The Bezier curve is used to generalize any type of curve with a single equation in Desmos. It is represented by four points, with the first and last points being the start and end, and the other two determining the curvature.

  • How does the video suggest converting raster images into a format suitable for Desmos?

    -The video suggests converting raster images (like PNGs) into vector images (like SVGs) using a tool called potrace, which traces the image data into a path of Bezier curves.

  • What is the limitation of the potrace tool when it comes to color?

    -Potrace has a limitation in that the input image must be strictly black and white, as it traces edges between two colors only, which is not suitable for images with shading or multiple colors.

  • How does the video propose to handle images with multiple colors for animation on Desmos?

    -The video proposes using the OpenCV library's Canny edge detection to create contours of the image, which can then be represented on a separate image as white lines on a black background, suitable for potrace.

  • Why is it necessary to run edge detection twice on the image according to the video?

    -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 helps to avoid low resolution or excessive lines in the final animation.

  • What is the rate-limiting factor when rendering animations on Desmos as mentioned in the video?

    -The greatest rate-limiting factor when rendering animations on Desmos is the number of lines that have to be drawn, as the backend processing is not locally hosted and cannot be controlled.

  • How long did it take to render the 'Bad Apple' video example in the video?

    -The 'Bad Apple' video example took about one hour to render on Desmos.

  • What insight does the process of animating on Desmos provide, according to the video?

    -The process of animating on Desmos provides insight into the way real videos and animations are processed in real software, highlighting the tools and algorithms used in video and animation processing.

Outlines

00:00

🎨 Animating with Desmos and Bezier Curves

The paragraph discusses the process of animating images in Desmos, a graphing calculator, using Bezier curves. It starts by mentioning the need to obtain source material, such as downloading a YouTube video and parsing it into frames using tools like youtube-dl and ffmpeg. The frames are then converted into a directory of PNG files. The speaker contrasts the time-consuming manual creation of vector art in Desmos with a faster, automated approach. The Bezier curve is introduced as a way to generalize any type of curve with a single equation, represented by four points that determine the start, end, and curvature. The paragraph emphasizes the importance of understanding file formats like PNG and SVG, with the latter using Bezier curves, which aligns well with the goal of automation. Tools like potrace are mentioned for converting raster images to vector paths, but the need for a black and white input is highlighted. The paragraph concludes by discussing the use of external libraries, such as OpenCV, for more sophisticated edge detection to handle colored images.

05:06

🖥️ Rendering Animations in Desmos

This paragraph delves into the practical aspects of rendering animations in Desmos, highlighting the challenges of converting colored images into a format suitable for Desmos's vector-based rendering. It explains the use of OpenCV's Canny edge detection to create detailed contours from colored images, which are then represented as white lines on a black background. The necessity of using potrace to convert these lines into a format that Desmos can use is discussed, noting that this process can double the lines due to the tracing of already detected edges. The paragraph also touches on the performance considerations of rendering animations, mentioning the time it took to render specific sequences and the factors that limit rendering speed, such as the number of lines that need to be drawn. The speaker reflects on the educational value of the process, providing insights into how real videos and animations are processed in software development, and humorously acknowledges the potential for such a project to be seen as impractical but informative.

Mindmap

Keywords

💡Desmos Graphing Calculator

Desmos Graphing Calculator is an online graphing tool that allows users to plot mathematical functions and create animations. In the context of the video, it is used as a platform to animate images by translating them into mathematical expressions and curves. The video discusses how to utilize Desmos for animating complex images, such as characters from videos, by breaking them down into mathematical representations.

💡Animate

To animate in this context means to create the illusion of motion in a sequence of images. The video explains the process of animating images on Desmos by converting them into a series of mathematical equations that Desmos can render frame by frame, creating an animated effect.

💡Bezier Curve

A Bezier curve is a mathematical representation of a curve that is defined by a set of control points. In the video, the Bezier curve is used as a method to generalize the shape of any curve with a single equation, which is crucial for automating the animation process on Desmos. The script mentions using the Bezier curve formula to define the path of the animation.

💡Raster Image

A raster image, also known as a bitmap, is an image that is represented by a matrix of pixels, each with a specific color value. The video script contrasts raster images with vector images, explaining that raster images like PNGs and JPEGs are not ideal for the animation process on Desmos due to their pixel-based nature.

💡Vector Image

A vector image is an image represented by mathematical equations that define lines, curves, and shapes. Unlike raster images, vector images can be scaled without losing quality. The video discusses converting raster images to vector images using tools like potrace, which is essential for animating on Desmos.

💡potrace

potrace is a tool mentioned in the video that converts bitmap images into vector paths using Bezier curves. It is used to trace the edges of black and white images, creating a path that can be represented in Desmos for animation. The video highlights the importance of potrace in the process of animating images on Desmos.

💡OpenCV

OpenCV (Open Source Computer Vision Library) is a library used for computer vision tasks. In the video, it is mentioned as a solution for dealing with images that have multiple colors by using its Canny edge detection algorithm to extract contours that can be traced by potrace for animation on Desmos.

💡Canny Edge Detection

Canny Edge Detection is an algorithm used in image processing to detect a wide range of edges in images. The video script explains that it is used with the OpenCV library to create more detailed contours from colored images, which can then be traced by potrace for use in Desmos animations.

💡LaTeX Expression

LaTeX is a document preparation system and markup language used for producing high-quality typeset documents. In the context of the video, LaTeX expressions are used to write mathematical equations that Desmos can interpret and render as graphs, which is how the animated images are represented on the platform.

💡Edge Detection

Edge detection is a technique in image processing that aims to identify and highlight the boundaries between different regions in an image. The video discusses using edge detection algorithms, such as those provided by OpenCV, to convert colored images into black and white images suitable for tracing with potrace.

Highlights

Animating on Desmos Graphing Calculator involves obtaining source material, such as downloading a YouTube video with youtube-dl.

Desmos vector art can be time-consuming, but automation can speed up the process.

Bezier curves are used to generalize any type of curve with a single equation in Desmos.

Bezier curves are represented by four points: a starting point, an ending point, and two points determining the curvature.

Desmos can handle the rendering of bezier curves once the parameters are inputted.

Raster image formats like PNG and JPEG represent data as a matrix of pixels, while vector formats like SVG use bezier curves.

Potrace can convert PNG data into traced paths of bezier curves.

Potrace requires strictly black and white images for edge detection, not grayscale.

OpenCV library's Canny edge detection can be used to handle images with multiple colors.

Canny edge detection provides more detailed contours that can be represented on a separate image.

Using both Potrace and Canny edge detection allows for a more defined image when taking a colored image as input.

A front-end script is needed to render each frame and update the graph for animation.

The rendering time for animations on Desmos can be significant due to the number of lines that have to be drawn.

The tools and algorithms used in the Desmos animation process provide insights into how real videos and animations are processed in software.

The video demonstrates the practical applications of computer science in creating animations on Desmos.

Casual Browsing

How to use Desmos graphing calculator on Digital SAT

2024-09-12 04:29:00

How to use Desmos Graphing Calculator Tool _updated

2024-09-12 02:33:00

What Graphing Calculator Should I Get? Back to School Graphing Calculator Guide 2022

2024-09-12 01:55:00

How To Use Desmos | Introduction to Desmos Calculator

2024-09-12 03:14:00

Numworks Graphing Calculator Review and Unboxing

2024-09-12 02:22:00

5 Best Calculators for Algebra [Review] - Scientific Calculator for Math/Graphing Calculator [2023]

2024-09-11 05:03:00