[Music]
now that you've been fooled by the cartoon woman into watching this
let's talk about computer science so you want to animate something in Desmos or so have many of you
expressed for some reason how would you go about doing that well the first thing you
want to do is to obtain the source material if you want to animate a YouTube video you would
want to first download said YouTube video with a command line tool like youtube-dl
and then proceed to parse it into its individual frames with ffmpeg and what you're left with is a
directory of png files the question then becomes where do we go from here Desmos vector art isn't
something that is uncommon it just takes a long time to do one of the more impressive
ones I could find is this one where someone made Zhongli in Desmos and it took them about a week
in contrast here's my Desmos representation of Zhongli and here's my Desmos representation
of my Desmos representation of Zhongli and it took me 10 minutes now of course the dedication
and mathematical skill required to draw Zhongli manually does have its merits and also get more
control in the cleanliness of the image however for our case what we want is speed and automation
rather than cleanliness and so we have to figure out a way to generalise any type of curve with
a single equation if you've seen the previous video you already know that this equation is the
bezier curve a bezier curve is represented by four points one being the starting point and one being
the ending point and then the other two determine the curvature as we are software developers
we don't really have to go too much into the math but just understand that you can think of
the two points as the line going from the starting point is going towards the first curvature point
and then when it's going towards the ending point it's coming from the second curvature point
using this bezier curve formula all we have to do is plug in our parameters
and Desmos will take care of the rest so how do we get these parameters well to understand
this we have to understand file formats pngs as well as other file formats such as jpegs and gifs
use a raster image to represent the data and what this means is
that it represents the image as a matrix of pixels each pixel representing some colour
on the other hand svgs and other vector image formats use bezier curves to represent their
images which is very convenient for us because all we have to do is convert our pngs into svgs
and rather writing them to a file take the data and put it into Desmos we can use a tool called
potrace or potrace or whatever it's called to put in our png data as a bitmap and it will return us
a traced path of all the bezier curves once we have our four points we just put them into
our equation and write it as a LaTeX expression which is what Desmos API uses to draw the graphs
however another issue arises because of the edge detection algorithm used by potrace
the image that is inputted must be strictly one of two colours such as black and white note that this
is not grayscale this is strictly black or white pixels this is because potrace traces the edges
in between two colours and two colours only now if you were trying to trace something that was mostly
just black and white like Bad Apple you can just say convert all the gray pixels to white and then
it should be no problem however we want to be able to animate anything in Desmos and unfortunately
for us Sengoku Nadeko does not live in a universe that is severely monochromatically colourblind
and so we have to deal with things like shading and colours and so the question arises how do we
represent something that has multiple colours as just two colours without losing any detail
the solution lies in a secret strategy known by all programmers called get an external library
to do it for you in this case we're going to use the OpenCV library's canny edge detection
what this does is it uses a more sophisticated edge detection algorithm to get us contours of
the image which are more detailed lines that we can get from an image even if it has colour these
contours can then be represented on a separate image as white lines on a black background the
reason why we still have to use potrace and we're not just going to use these lines directly
on Desmos is because these lines are represented as linear straight lines and so as I said before
with linear approximations you're either going to have low resolution
or a lot of lines to render so once we get our image in which the edges are all white and
everything else is black we can then put that into potrace and what we're doing is running
and edge detection on the edges that have been detected by another edge detection
this allows us to give us a much more defined image when we're taking a coloured image as our
input but it also has the added effect of making all the lines double lines since it is tracing
something that has already been traced from there all you have to do is create some front-end script
to render each frame and update the graph at each frame and then just wait for it to run all the way
through now some astute viewers have pointed out that they could look at the clock in my videos
to determine the exact amount of time in real time that it took to render to which I say stop however
in all seriousness yes the Bad Apple video took about one hour to render whereas the much shorter
sequence you saw at the beginning of this video took two hours this is because the greatest rate
limiter is going to be the number of lines that have to be drawn because what's going on in the
Desmos backend is not what we are hosting locally so we can't do much to control that as a final
note I think it's nice to point out that even though the Desmos animator on its own may not
seem to be very practical in its uses the tools and algorithms used in the process of making it
give us good insight in the way that real videos and animations are processed in real software
oh wait I'm sorry almost started talking about programming that benefits society
anyways
[Music]