I made my own animation library

[@dougmercer]

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DougMercer . You’ll also get 20% off an annual premium subscription.

[@artificiyal]

you should definitely open source this, maybe manim could implement some of its features

[@wido1085]

Reminds me of Tsoding creating Panim. Except his is a lot more low level and very focused on just the sort of animations he wants to do.

[@dougmercer]

Oh neat, I'll have to check that out. "I need something to do this" is a great incentive to make something, hah

[@XeZrunner]

@@dougmercer More people should attempt creating their own tooling! It's probably the easiest way to familiarize yourself with realistic development scenarios.

[@dougmercer]

@@XeZrunner absolutely! such a great (and fulfilling) way to learn a ton of stuff fast

[@ericjmorey]

I don't understand the reasoning of "it's not ready to be open sourced", but I'm excited to see it when you change your mind.

[@alphago9397]

If it's an improvement to what 3b1b uses; I'll almost definitely find some use case for it in the future likely with some kind of personal project.. can't wait for the release! Thanks, and good luck!

[@dougmercer]

I think it'll be better for some things (animating code) and worse for others. As much as Manim frustrates me it's still a great library. Thanks =]

[@knuddelig5304]

Please open source it, it’s exactly what I was looking for!

[@cemrehancavdar]

I like the fact of more videos coming!

[@dougmercer]

Me too! This makes code animation so much easier...

[@mhmarcush]

Please continue with videos like these! I doubt that I’ll ever have a personal use case for creating animations in code but I really enjoy learning about how it’s made and the thought processes behind it.

[@alexanderzikal7244]

Myself I don't need this kind of software..., but learning from the code You have done all this things will be exiting! Actually I refresh my C-knowledge, learn Zig and Rust...

[@dougmercer]

I really want to learn Zig too. The code will be available on GitHub sometime later this year or early next year-- kind of far away, but hope it's helpful for learning!

[@iChrisBirch]

More videos for sure! I would definitely like more about the development and your thought process for how you get from one version of the code to a more advanced or elegant implementation. Thanks!

[@dougmercer]

Will do! Thanks for letting me know =]

[@tonas3843]

I really love these kind of tools, so happy to see more being created. This really reminds me of Aarthficial's MotionCanvas typescript library

[@ThinkWithGames]

This library looks awesome! I would definitely use it (maybe for pre rendering some cutscenes for games or for making videos)

[@summussum7540]

Looking forward to seeing more on this! It’s an awesome feeling building a toll and having it fit your needs like a glove. Great work!

[@vaisakhkm783]

You should take a look at singals architecture for reactivity it's really simple to impliment, yet makes code a joy to work with... almost a major JS frameworks are finally settling on it

[@dougmercer]

I have started to look into it! I got pretty far along coding up my own implementation, but then realized that the `param` library from the holoviz team implemented reactive values/functions (annoyingly, though, their library isn't type hinted, so it makes it annoying to work with)

[@michaeldamolsen]

I am trying to do something similar with C++ for astronomy animations, but I am really struggling with exactly the aspects you cover here. You have given me some additional things to consider, thank you very much! On a side note, this video is very well structured and presented; a real pleasure to watch. I've subscribed for more :)

[@dougmercer]

That sounds awesome. good luck on the project! Let me know if you eventually open source it-- would love to check it out. There's definitely a lot that can go wrong with animation 😂. I'm in the middle of refactoring a core part of my library. Unit tests are a must, and do your best to clearly define any assumptions (e.g., I apply transformations in the order that their applied, not the order of the starting frame).

[@fizzlefritz9782]

Awesome project; there's definitely a void for this kind of tool that needs to be filled. I did not know Manim even had coding support in it, thank you. It might be fun for you to look into some of Bisqwit's content, specifically relating to "That Editor." He wrote an editor that would just type his code out in a way that looked pleasing to him and then screen records it typing. This might be a very viable approach today considering you could do this as a plugin for existing editors that didn't exist back in the day- especially in editors that already have JS/CSS available to them since this gives you animation for free.

[@dougmercer]

I'll have to look into his videos/that repo a bit more. Looks interesting! It's funny to me how many code KZbinrs end up making their own animation libraries

[@mohammadazad8350]

​@@dougmercer The last part is so true!

[@bebeno1]

That's great! I'd love to see more videos about this project!

[@mohammadazad8350]

Doug Mercer: Makes a 4 brown joke Also Doug Mercer: wears a brown shirt

[@dougmercer]

🤣

[@StefaanHimpe]

I like the approach to implementing constraints using operator overloading. Fun project.

[@alexfinkelshtein8066]

I'll be happy to use it!

[@makkura9497]

As someone who just recently got into making video content and trying to animate and emphasize different things, this looks great! I found even basic transition animations are a pain. Older more traditional style video editors have their own conventions that can make it hard to manage key frames and newer applications where key frames are a little more intuitive for me are often subscription or freemium with cluttered ui’s. I’ve been wishing I could interact with content and animate more programmatically. It’s really awesome to see how programmers in the video creation space are tackling these problems. Pixegami also has a video on how he creates videos under the hood as well that’s quite enlightening.

[@dougmercer]

I'll have to check out pixegami!

[@makkura9497]

@@dougmercer the particular video where he goes over his process is titled “Using Python and AI to Automate My Video Editing Process”. He details out how he writes his episodes in markdown and has written tools to help make bumper / transition images, code blocks with the osx buttons similar to yours, etc. Code isn’t yet available as he wants to polish it up some similarly to where you are at. I’ll be keeping an eye out ;) My initial video is under @DarkModeCode and I’m just starting to see the pinpoints in things like recording live code vs still images, translations, etc Encountering videos like this and pixegami’s gives me some insight into how others are approaching it.

[@dougmercer]

@@makkura9497 I just watched it-- very interesting. It inspired me to potentially right a Python script to group takes together for each line of my script... that would make editing a lot faster! I generally prefer having a programmatically generated animation or compositing my animation in my editor, rather than screen recording code. A lot of little things can go wrong when screen recording, or if you ever need to change a bit of text or reformat something, screen recording can cause a lot of re-work. In one my earlier videos, I had to manually cut out a bunch of weird black frames that popped up in vscode whenever it was making multiple characters into a ligature cause of the font I was using. It was so painful 😣

[@morgengabe1]

So far it reminds me of the processing libraries with extra tools for text (which is great). I look forward to this being open sourced, i'd like to read it!

[@karmandev]

You could look into singals. The concept recently sparked in many frontend JavaScript frameworks. There are quite some similarities with what you describe in your video. The concept might inspire you.

[@dougmercer]

Thanks for the idea! I probably will consider this in a future refactor. It might simplify the implementation a bit and make it more flexible 🤔

[@ismailcreatvt]

This is amazing. Do open source this soon!

[@dougmercer]

Working on it! But got side tracked on a crazy refactor that makes the library even more useful

[@OranCollins]

cant wait to see the open source!

[@markfischer6850]

I would definitely take a look at something like this if it was available. As a part time CS instructor for web and cloud topics, finding animation and visualization tools for code topics is challenging. Good luck!

[@dougmercer]

Sounds good! I'm working on documentation, unit tests, and CI/CD. When it's available I'll announce it on the channel. In mean time, maybe check out Motion Canvas? A few people have commented about it, and it does seem quite nice

[@achichorro]

I would definitely use this!

[@danielgilleland8611]

Yes, I'm very interested in your process for this. Subscribing as a result.

[@j.i.-cruz]

So interested. Would totally use it. Would totally want to contribute. Cant wait to see it open sourced!

[@AronNemeth95]

This looks really promising. I tried manim and I love what it can do, but fully agree with your points against it. Especially having to re-render every time I change something to see it. I would love to see something like this made as a plugin for a editor like DaVinci or even Blender's video editor. (So you wouldn't have to develope your own GUI.)

[@dougmercer]

I tried to understand Davinci Resolve's plugin system, but I couldn't make heads or tails of it 😞. The docs are bad, and they don't support the reaktor community (I'm stuck on Resolve 18.1 because they broke compatibility with a plugin I use in 18.5, and refuse to even acknowledge the problem) I agree though... It'd be awesome to integrate into Resolve

[@dougmercer]

At this point, my plan is to keep enhancing my own UI. I think it's possible I could eventually add features for creating the animation/adjusting parameters with the UI (or at the very least, support a live preview that monitors for changes to the source file-- that's easy but not implemented yet)

[@AronNemeth95]

@@dougmercer I see, I have never looked into making davinci plugins. Looking forward what you can achieve with this 🙂

[@MaxG628]

What you call a variable is what’s known in functional reactive programming as a signal. That might be a better term. FRP is a rabbit hole, you might learn something, but you don’t want to have too much of a theoretical background required to use the library.

[@dougmercer]

Hmmm, you're right-- I'll have to think a bit more about the name 🤔

[@luquest1848]

Hey, awesome video - I'm interested in the architectural concepts - basically more what you presented today :-) Would love to hear more about how you overcome problems, your design considerations, and the dogfood tools you make - awesome stuff, thanks!

[@dougmercer]

Awesome! I'll try to make some more videos going into that!

[@ericmoras3448]

Great video! I am also creating a personal python project to address my specific needs when the alternatives are kinda slow. I am sort of a noobie python developer, so it is really interesting to see how you code this!

[@dougmercer]

Solving your own problems is a ton of fun. Good luck on your project!

[@MrWorshipMe]

Very cool. I'm excited to see what's next.

[@AliUlasHayr-db7rq]

Didn't understand much but still enjoyed it very much. The video shows how to approach problems thumbs up!

[@dougmercer]

Yeah, this video definitely got a bit down in the weeds, but I'm going to try to make future videos more focused on a specific topic and easier to understand. Thanks for watching!

[@lmkawakami]

eagerly awaiting the release of your Python package

[@dougmercer]

Thanks! I'll announce it on the channel when I do

[@ThomasHaberkorn]

exactly the type of content I like to watch

[@dougmercer]

glad to hear =]

[@NabekenProG87]

Love your glasses. I always wanted to get ones like that

[@dougmercer]

Thanks! They are Morel glasses from their 1880 line (I don't remember the exact model). I wish they still sold them, cause they have held up well!

[@matthewvgrogan]

What a tease!! Looking forward to seeing more and giving it a try. How fast is render as compared to manim?

[@dougmercer]

Hah, sorry! I didn't want to YOLO the code out into the world the first time I used it (I was still fixing bugs/adding features during post production) As for speed, I haven't really bench marked it too much yet. Its fast for simple scenes, and the ability to easily jump ahead in the preview window makes it "fast" even for complex scenes, because you can skip generating in-between frames and jump right to the thing you care about. Some of the section screen animations were slow to render, but I was animating 1000s of things at once. Similar, a code object with a thousand lines of code can become slower than I'd like. I've made a few theoretically ugly and practically quite nice optimizations to cache some computations. More stuff is probably cachable, but I don't want to make the code more difficult to debug while it's still so early in development. I'll try to keep moving on this so I can release it sooner than later!

[@matthewvgrogan]

​@@dougmercerthat's great. I love manim but the cycle time is just too long. I'm definitely in the market for an alternative. Good luck and let me know if I can help in any way.

[@dougmercer]

Will do!

[@TheWebgecko]

I’m definitely interested!!!!!

[@GustavoPinho89]

All of the above. Keep them coming

[@dougmercer]

Will do!

[@mattcauth]

Would love to see more and would love to see the open source project whenever it's ready. I've used Manim and it's fantastic in its own way but I eventually fell back to Resolve/Fusion for most animation because Manim got in my way for reasons that you lay out better than I could. I keep coming back to animations in code, but everything I've found so far doesn't quite get me there. Really nice work, and I'm looking forward to seeing more! Sub'd.

[@dougmercer]

Oh wow, it's good to hear from someone who shares that same experience (and frustrations =]) I think the best workflow will be hybrid-- use this library for animating code and a few other things where it's most convenient, and composite over top in fusion whatever else. Thanks for your comment!

[@Nakameguro97]

Use linear algebra. Just apply transforms encoded via matrices. The code will be much smaller and simpler.

[@dougmercer]

That is what's happening under the hood already.

[@Nakameguro97]

@@dougmercer Then the code looks way too verbose for what it's doing, maybe due to too much OOP boilerplate.

[@remiheneault8208]

I know nothing about animations in Python apart from Pygame physics simulations, but I like to think I know Python very well. I really support the idea of writing your own package to solve your own problem. I very often do that, thinking it will help people. But in the end, designing a library API, one that will be used by many, is another job of its own. For example: you mentionned using "lambda" or small functions to link between one parameter and another. That doesn't sound crazy to me. It's zen and Pythonic, it sounds perfectly reasonable. Creating a new method in the package _just for that_ adds complexity, for a use case that could be debatable. Again, I'm not criticizing any feature here, I don't know much about animation libraries. My point is: it's hard to keep a package maintable if we create a method for every use case. Yet it is *very* hard to trust that every user will find a nice way to make it work for them. I guess the only bit of experience I'd like to share is: we all _looove_ to make a shiny new class with cool generic methods and perfect docstrings, sometimes - in my opionion - to the detriment of readability, clarity and scope of the package.

[@dougmercer]

Oh yeah, you're absolutely right-- there's a high risk of this spinning out of control and becoming unmaintainable. Worst case, it'll only be good for making my videos faster (and I'll still consider that a success) Thanks for the thoughtful comment =]

[@AlecMaly]

Looks like a cool project, thanks for sharing what you learned and some of the more interesting technical takeaways. Cheers!

[@pw5687]

Very cool! Good luck with the project.

[@dougmercer]

Thanks!

[@r-i-ch]

Very interested to see about the dev process for it. Especially for presentational [2D] code as animation there are a number of libs out there already so I’m wondering if you tried any others?

[@dougmercer]

For code animation, I've tried Manim and reveal.js. I also took a look at another JavaScript library that I forget the name of. I've also played around with Py5 and P5. They are honestly very nice. It's possible I'll regret basing my library off Cairo instead of Processing

[@bilalinci4981]

Motion canvas is best

[@dougmercer]

I do think I need to play around with it more.

[@WillowOne]

Love Motion Canvas

[@Qwerasd]

Genuine question: Why make a new library and not just submit these things as improvements to manim?

[@dougmercer]

Good question! Originally, I tried to subclass the code object. However, I kept running into bugs... it was really hard to retrofit the capabilities I wanted. Also, Manim's VGroups would occasionally produce weird visual bugs when doing complex animations, and some code objects would bug out when tokenizing code (in hindsight, this issue might have been my own fault of not using a raw string... r"like this", instead of "like this"). It's definitely not impossible, but it is telling that it was easier for me to make my entire own library than it was to extend Manim

[@Qwerasd]

@@dougmercer That's fair! Thanks for the reply.

[@RodrigoCoinCurvo]

Please, open source it! I've worked with Manim Community, and it's great, but I've had some of the same problems you mentioned, including losing my mind trying to animate code in it, plus the slow process of finding and previewing things.

[@dougmercer]

Will do! =] (And it's always nice to hear from people who had similar experiences with the Code object... Not many people use it/can relate to the resulting struggles)

[@balorprice]

Wow, love this!

[@dougmercer]

Thanks =]

[@VioletJewel1729]

btw the lofree flow feels so much nicer than the nuphy

[@dougmercer]

Ah interesting-- it does seem nice. I recently went off the keyboard deep end and got a ZSA Voyager. I really like it (but miss wireless operation =[)

[@theophiled]

for those interested to animate with code, there is also manim and remotion

[@guowanglin4537]

impressive

[@dougmercer]

Thanks =]

[@fidhalkotta]

Love this!

[@dougmercer]

=] thanks!

[@ruroruro]

14:11 instead of raising a TypeError, you should return NotImplemented

[@dougmercer]

Doh, yeah -- that's the preferred way of doing it. Not sure what I was thinking (this feature was added in a bit of a rush)

[@zackrebyrzyck8341]

please release this!

[@dougmercer]

I definitely will! Just need to make it usable for people other than me first =P

[@zackrebyrzyck8341]

@@dougmercer word! Just subscribed so i dont miss it!

[@theoneandonly1833]

You either live long enough to use an animation library or to code your own.

[@dougmercer]

So true. The dev to KZbinr pipeline takes no prisoners

[@theoneandonly1833]

@@dougmercer im not kidding you are the fourth dev yt’er Ive seen do this

[@dougmercer]

@theoneandonly1833 I know! I wish more of them would have open sourced their libraries so I wouldn't have had to make my own! I think it was @coderized whose videos I saw and thought, yeah... I guess I'm doing this, huh

[@mmilerngruppe]

12:35 funny highlighting, I must look twice to recognize how they mimic the manual hand style

[@dougmercer]

That's an accidental feature, hah. Under the hood, I'm tracking the bounding box of each character. I then draw a line through the centroid of every character I want to highlight. Because the characters have slightly different heights for the centroids, it creates a squigly line that kind of looks hand drawn I can make a straight highlight by selecting only the first and last characters That said, I did add the ability to add noise when drawing shapes to give a hand drawn effect (you can see it in the videos thumbnail...). I'm really excited about that cause I think hand drawn looks cool, but I added the feature after recording the video

[@mmilerngruppe]

​@@dougmercer yeah, I paused the video and took a good look at what was going on. If the line were a bit bigger/thicker as the vertical bbox I would really consider it hand-drawn

[@dougmercer]

@@mmilerngruppe I wish Cairo made it possible to interpolate line width between two points easily (akin to "pressure" of a stroke). That's a problem for another day, hah!

[@mmilerngruppe]

@@dougmercer well, Instead of one line, the problem can be solved with two lines, one on top of the other. or as a bunch of various bezier curves (from one character to another step) that form a svg shape you can fill.

[@dougmercer]

Yeah, I do think it's possible.

[@midnightfuture]

TIL that [some in] the Python community call[s] "__" "dunder"! Like, I get it-double underscore-but I'd never heard it despite 22 years of casual Python programing. Anyway, you should open source your library, and you shouldn't wait to clean it up first. That's what sub-1.0 semvers are for!

[@dougmercer]

Hah, yeah, I remember when I first heard dunder-- I was like, huh? 😂 I think before that I heard them referred to as "magic methods". Not sure which is better ¯\_(ツ)_/¯

[@robpruzan7292]

Really great video

[@dougmercer]

Thanks!

[@NostraDavid2]

Very cool! Does that mean the next video is going to be delivered sooner? :P

[@dougmercer]

Definitely! Hahaha

[@cvabds]

I bet you can't port it to TempleOS

[@dougmercer]

Native integration with God words and God doodle would bring this library to the next level 🤔

[@cvabds]

@@dougmercer forget about the bible stuff, just develop on it, fork it call it heresy OS

[@specy_]

Instead of manim, have you ever seen "motion canvas"?

[@simonwillover4175]

8:00 who in the world reads code like this? This just makes me want to close my eyes.

[@caballerosalas]

where is the library?

[@dougmercer]

It's not available yet-- I need to add more documentation/testing and set up GitHub actions for it

[@unLinuxeroMas]

what about motion canvas

[@dougmercer]

That library looks awesome. JavaScript has a few really powerful animation libraries P5.js is also very cool I'd consider trying them more in the future if I eventually get frustrated with trying to extend/maintain this library

[@vaisakhkm783]

​​@@dougmercer you might be intrested in animotion too Wrt p5js, processing is also solid option (i started learning coding outside of school is with p5.js and processing, after cpp from school) manim (3b1b), motion canvas, animotion(joy of code), remotion (with react) There are a lot of libs to do this...

[@dougmercer]

@@vaisakhkm783 processing based animation libraries are definitely interesting. I've played with them a bit, and am not ruling out eventually replacing Cairo with Py5 as the actual underlying library that draws stuff

[@dougmercer]

Manim doesn't work well for me. Animotion is interesting but I believe he screen records his final animations rather than actually rendering directly to video (which I don't want to do)

[@vaisakhkm783]

@@dougmercer i felt manim really hard to work with, as he was not a programmer by profession... and made it as a personal lib But best way to do anything is doing it by ourself :) maybe slow and hard, but in the long run, worth the effort

[@uis246]

Programming is just applied mathematics. So another version manim.

[@shakkar23]

The complexity of manim left a horrible taste in my mouth. Even the examples are hard to read as someone who never worked with it before. I hope this project goes smoothly, a simple to use, easy to understand animation library is direly in need in my opinion.

[@dougmercer]

Manim definitely has a steep learning curve. I can't promise I'll achieve "simple" for everything that Manim is able to do, but my goal is to at least make it simple for animating code.

[@Bakobiibizo]

i can help you document it

[@dougmercer]

I appreciate it! Could def use the help as it gets closer to being ready. Right now I'm debating a refactor of how I handle variables, so stand by for a bit!

[@fantasmashy]

i got til the end of the video... i don't even know what "animation" means here

[@Skeleman]

you are very attractive and have a nice looking keyboard

[@dougmercer]

Aw thanks. Keyboard is Nuphy air75v2. In my next video, I'll show a keyboard I just got that's even cooler looking (ZSA Voyager)

[@duytdl]

You didn't mention what other existing and well-established libraries and stuff you've tried and why they didn't suit your needs or their shortcomings. Screams over engineering to me.

[@dougmercer]

I've tried a few others. Reveal.js for one-- the automatic animations just don't look good ¯\_(ツ)_/¯ Many libraries will do general animations better than whatever I make, but surprisingly no library out there really animates code transformation well enough (in my opinion). That said I'd be happy to be proven wrong. Did you have a library in mind?

[@ianliu88]

Man, your beeping sounds are WAY too loud. It hurts my ears when using headphones

[@dougmercer]

My bad...

[@ego-lay_atman-bay]

I think your headphones are just too loud, since I'm using earbuds, and I have my volume at my usual below 50%, and he sounds just as loud as other youtube videos (probably even a bit quieter).

[@qwoolrat]

this guy has never heard of regexp 😞😞

[@dougmercer]

What makes you think that? The part about indexing into the code object in Manim? My point was, I shouldn't need to look back at the source code to index into the SVG glyphs stored in the Manim code object. I tried to write a Manim extension to do it, and the bookkeeping was a nightmare

[@TheSaintsVEVO]

your nose is getting redder as the video goes on, whats up with that

[@dougmercer]

Mmm, I messed around with color correction to make the video look nicer. I don't know what I'm doing, and probably exaggerated minor color differences. ¯\_(ツ)_/¯

[@mbarrio]

No source? Bad... Sad... Nothing burger

[@dougmercer]

Sorry, it's coming eventually. I can't spend a year on one video. I plan to make a few more videos about the dev process (testing, documentation, interesting problem solving) and then open source it

[@Yoku5]

You have a bug at 14:35: `__rsub__` should return the negation of `__sub__`

[@dougmercer]

Oh dang, you're right. Thanks! One of the many things I haven't had the chance to write unit tests for 😬 edit: my rtruediv was wrong too 🤦🏻 . welp, unit tests for those are written now ¯\_(ツ)_/¯