I Coded a Video Editor (and it kind of sucks)
HTML-код
- Опубликовано: 30 июн 2024
- I was using Manim to create animations for my latest video when I ran into a bug. This bug was very small, but caused a visual artifact that was driving me crazy. I reached out and was informed that this was a known bug, and unfortunately there is no fix. I said to myself, "Fine I'll live with it", but I couldn't. So I set out to code a video editor over my weekend, and here I am 8 months later with my shiny video editor that was an absolute pain to use to make this video. Hopefully you enjoy my overview of the process.
Source Code: github.com/ambrosiogabe/MathA...
Font Rasterization: • The Math Behind Font R...
Aarthificial Video: • Animating with Code - ...
Drawing 3D Lines: mattdesl.svbtle.com/drawing-l...
Drawing Bezier Curves: ciechanow.ski/drawing-bezier-...
Order Independent Transparency: casual-effects.blogspot.com/2...
The O-Library: github.com/kkos/oniguruma
Join the Discord: / discord
Follow me on Twitch: / gameswthgabe
--- Bookmarks ---
0:00 Intro
0:46 Write-In Animation
3:09 Coding a Timeline
3:41 Morphing Animations
5:33 Audio Waveform Previews
7:15 Adding 3D Support
8:27 LaTeX
10:02 Viewports and Gizmos
10:57 Optimizing Stuff
14:12 SVGs
15:45 Scripting
16:13 Code Highlighting
--- Music ---
All the songs are from RUclips Studio Audio Library unless noted otherwise:
"The Curious Kitten", by Aaron Kenny
"The Plan's Working", by Cooper Cannell
"Quincas Moreira", by Siestita
"Looping Ascent", by Joel Cummins
"Tiptoes", by Myuu
"Sprightly Pursuite", by Cooper Cannell
"Amazing Plan", by Kevin MacLeod
"Dreams Become Real", by Kevin MacLeod
---------------------------------------------------------------------
Website: ambrosiogabe.github.io/
Github: github.com/ambrosiogabe
Here are some books I recommend if you want to learn about game engine development more thoroughly. I do not profit off any of these sales, these are just some books that have helped me out :)
My Recommended Game Engine Books:
Game Engine Architecture: www.gameenginebook.com/
Game Physics Cookbook (Read this before the next physics book): www.amazon.com/Game-Physics-C...
Game Physics (Ian Millington): www.amazon.com/Game-Physics-E...
Game Programming Patterns (Free): gameprogrammingpatterns.com/
My Recommended Beginning Game Programming Books:
JavaScript Game Design: www.apress.com/gp/book/978143...
My Recommended Java Books:
Data Structures/Algorithms: www.amazon.com/Data-Structure...
LWJGL (Free, but I haven't read this thoroughly): lwjglgamedev.gitbooks.io/3d-g...
![Roddy Ricch - 911 [Official Music Video]](http://i.ytimg.com/vi/5N3lAfydeWs/mqdefault.jpg)
"I could code this in a weekend" is how it always starts
We are programmers. We don't do things because they're easy, we do things because we thought they were easy!
@@void6670 yeah...I guess you can add them to your portfolio at best. They still add value to some extent.
Yea and then a weekend ends up turning into 3 years of working on a project with really messy and unmanageable code
@@Kenionatus Also because we think it's cool
😂😂😂😂😂
Ah, the old tale. Developer uses a program. Developer finds a bug. Developer thinks "how hard could it be to recreate this program to fix the bug?".
Gazillion years later. Developer: "WHAT HAVE I DONE?" 😂
Joking aside, this is a very cool project. I am sure you've learned a lot from it.
@MacGuenther Totally agree with you. No matter how hard it might be, I learn a lot by actually embarking on a project and getting it done.
@MacGuenther It is all for learning at the end of the day. Now you know how to approach something like that the next time.
Glad it worked out at the end.
@MacGuenther I know that feeling. Onceof the best you could ever have as a developer. 😁
@MacGuenther 🤣
thx god for FOSS you can fix the bug by modding instead of building everything from scratch
Subscribed. In 2015 I also found a minor bug in a game engine that I was using for fun. Today, 8 years, a major degree and a senior role in the game industry later, I'm almost finishing my own game engine as well. That's why I believe you're the real mvp for also picking this path!
whats the engine called?
@@bloxxel64colonthree the channel name is uniday studio so maybe something close to that
@@bloxxel64colonthree I looked it up, and it looks like it's called Cave Engine.
@@bloxxel64colonthree Cave Engine. I do have another RUclips channel in English where I show it a bit as well, since this one here is in portuguese.
@@UnidayStudio Yeaaah sure:
"Almost finishing"
*8 years later again*
"I only need to add few minor details and I'm done!"
The Programmers' Credo: we do these things not because they are easy, but because we thought they were going to be easy.
Nice Credo 🙂
No, they do it because they don't have clear goals and they're kids who think the world revolves around their ideas. They can't focus and prioritize things.
Awesome stuff ! Not to worry the first 8 months of a 2 day project are always the best.
Just one suggestion I'd like to add,
The default dark color theme of Imgui is not very appealing so before the final release I'd love to see some custom themes! Maybe color scheme following (monokai, Dracula etc)
Great suggestion! I've applied some slight style changes, but theming is something I've been wanting to add as well. I added a Github issue so I remember to implement it :)
ah yes... the classics
even me who kinda know how to code suffer from this curses
Ah yes, the theme. He could do that in a weekend, I guess.
It's Darcula, not Dracula
@@grevel1376 Both exist, but I believe Dracula is far more popular
Your content is so underrated! Please keep doing what you've been doing, I love it.
this project is actually amazing, was wanting to do something along the lines of this for a while. amazing video!
Really cool stuff! I'm planning on making a big fold toolkit for editing and whatnot for myself and this helped me know some stuff to look out for
wow this is a great project, monumental effort on your part
As someone who has spent weeks trying to write Textmate Grammar files (approximately 5% of the video's content), I can only imagine the pain this was to produce. Well done. I'm currently on week 2 (of nearly full days of work) of my latest "this should only take an afternoon" project.
this is probably one of the coolest things I've seen the past months weeks. well done, dude. it looks great !
That was a nice insight into the complexity of the programs we take for granted. Great video overall!
This is especially cool for me to see as I have been pondering on these exact ideas myself.
Wow, this is really impressive. I love the way that you adapted a bunch of existing things into your program to add functionality and performance. I mainly loved the way you used VSCode themes there. This is awesome.
This was amazing. So stoked I came across your channel!
Wow, that editor genuinely looks brilliant. I can't wait for a stable release and might try compiling it for myself! Loved the video as well!
Subscribed! This is much more than a weekend project! Hope to see it progress.
I might actually unironically use this program for editing my videos- I'll have to try it out but thank you thank you for making this!
As someone who has also struggled with manim... I hope that this project lands a stable release soon! Thanks for your hard work!
I admire your motivation and drive to tackle those projects. I'm still telling myself everyday to open up a pull request for this one typo in a lib I'm forced to use. So yeah. No drive here.
Very cool!! I respect your dedication.
You have inspired me to go back to my own project and finish the heck out of it lol
I've been searching for a way to animate syntax-highlighted code for forever. This (and everything around it) looks awesome!
Great video! Was very interesting to see the journey and the problems you encountered and how you overcame them.
There is one thing I couldn't help thinking to myself when watching the syntax highlighting part.
There is a library called "tree-sitter" that is essentially a cross-language parser and syntax highlighter, used by github and editors like vim and neovim to provide syntax highlighting.
I feel like this library could have made that part of the journey less painful, but was interesting to see what you did nonetheless!
Keep it up!
Damn i can't wait for a stable release, this looks amazing!
Great work! I'm curious to see what features you've planed next.
About your bugs: if you can make them into a reliable filter, they become a cool a feature.
oh, btw, treesitter is a great library for parsing "arbitrary" languages.
maybe also the AST info could be useful for animating code?
For highlighting you don't want to parse, just lex. And the language and theme definitions already exist.
@@SimonBuchanNz that depends on your project's goals.
if you prefer accuracy, you use a full parser. if you prefer "speed", you can use the regex craziness (though it's unclear whether the speed difference matters at all, you'd have to profile that).
vscode now has semantic highlighting, where the lsp can provide extra information.
neovim generally just uses treesitter (afaik).
@@leddoo not sure what you mean by accuracy here, but syntactic highlighting doesn't need a parse tree, just a list of tokens, which means you just need a lexer, not a full parser in the traditional model. Lexer generators like FLEX pretty much are just a list of regexes, possibly with a bit of context for which to try. (along with parser generators like YACC they are not popular anymore in actual compilers because it's just not that hard to write a lexer manually - for a single language)
Using a full parser can be useful for many other reasons, of course. It can be much better performance than interpreting a dynamic language definition, it can more easily provide semantic highlighting (eg this id is a use of a type, or a parameter, etc) and you can potentially reuse the parse for other purposes like formatting, go to definition, semantic search, etc.
@@SimonBuchanNz here's an example:
in the JSX `a = < Foo />`, the `
@@leddoo that's the "context" bit I mentioned. JS already has this problem with division / regex and close brace / string templates, and the standard resolves this by having a few different targets for the lexical grammar that are appropriate for different positions in the syntactic grammar. You can handle this in a language definition by saying that you can only have a division or less than operator after things that can end an expression, like identifiers, postfix operators, or close parens/braces.
wasn't expecting another video this year, what a surprise
Wow, this is amazing. Well done! I'm very impressed. thank you for this video!
Wow, this is amazing. I am pretty much a computer myself. Like, I love tech stuff, but I have no idea how to code anything past a message box in vbs and making a python script that prints a sentence, so that is really really impressive. I hope I can learn how to do this stuff one day.
this is so unbelievably cool! i think this was well worth the 8month you spent on this! (most people, including me, just procrastinate and have nothing to show).
that weird text bug in the end can be turned into a feature and its quite cool actually!
This is truly incredible..what you've created.
That is a great job! And I like your story.
Olive is a quite good open source video editor - and this was also programmed by someone who wanted to learn C++
Oh thats cool i want to do something similar by making an animation software but idk where to start.
@@danieleccleston7928 Animation software is so much more work compared to an editor. You could contribute to Blender and start with smaller papercuts and progress to features
I also quite like kdenlive, from my experience more feature packed but a bit less stable
Why would you even do a video editor? Why? This isn't useful to your family or anyone around you. It's used by few specialists who will never buy your program. What do you want? Prove that you can do something? Nobody cares beyond a very small circle of crazy open-source ideologists.
Thank you for sharing! Fantastic stuff. Keep up the great work.
ITS FINALLY HERE!!! THE MOMENT WEVE ALL WAITED FOR LADIES AND GENTS
Great work. Beautiful lines.
Very cool. You are a very underrated channel that deserves more attention.
Amazing. The only question I have is, did you really think it will take a weekend (2 days) to make the whole thing? If so, you should become a manager.
Mad respect!
And I'm sorry... I'm so sorry for what you had to go through, mate!
But hey, that's a great piece on a resume :))
And also, you have your very own tool to do stuff with :D
I'm editing my videos in Blender so... yeah.................
I always love a your work. Its cool you creaeted an animation editor.
the way he says GUI as "gooey" kills me
Graphical User Interface
This actually looks like a good animation program. It's cool how you can transform the shapes to a different shape.
Ok, but, how does "Hello World!" have 9 characters? It either has 10, if we only count the letters, or it has 12, if we count special characters, like the space and the exclamation mark.
Thankfully I found this comment. I knew I couldn't have been the only one who thought about this.
@@ShadowaOsu i searched too before writing that myself, cause even from just looking, there's no way that at half an "o" we're in the middle of the phrase
also if we count the null-character of the null terminated String it's 13 characters
@@trauma._ certainly, I too couldn't come up with any idea how that phrase would contain 9 characters
Maybe he missed one "L" 😆
maybe excluding repeats. "Hello World!" is 12 (with specials) and "Helo Wrd!" is 9 (removed 2 L,1 O)
keep in mind i have no clue why that would benefit anything, it just happens to work
Bro this is amazing!
This looks great! I feel like it'd be great to use alongside Resolve.
This was bloody awesome!!!
Thanks!
Great video and nice project as well. There's another open source project called Olive Video Editor which is nice but needs more savvy developers such as yourself and you can combine such feature into it, it would be tremendous.
Look forward to see you release this editor
Great video and great project!
This is fantastic, you're a genius, man!
That's one fun yak you got here. Keep shaving that thing!
You videos are eye candy!
interesting... I really like how you deep dive into solving the problems instead of using a ready made framework, when I clicked the video I thought it you would be using a ready made framework and customize it (a weekend project) ....
YOU WORKED REALLY HARD ON THIS! No wonder your channel had a huge hiatus for 2 entire thirds of a year!
I would love to see you completely switch to *only* this, and then tell the story of problems you run into and how you fixed them yourself rather than having to find workarounds or give up.
That looks amazing
Congrats!
This is so sick!!
I really enjoyed this video. Pls more, you earned another subscriber :)
Loved this video!
absolutely insane project !!!
The way he says GUI made me laugh so hard 💀
agree
As a programmer, I've barely ever heard "gee yew eye" , it's always "gooey" .
That's what programmers have called it for decades. That's how it's pronounced.
i mean really it is a better way of saying GUI apart from the fact it sounds kinda funny
Been there, done that. I can't wait for your next 8 month weekend video 😂
I will never forgive you for calling a gui a gui
All my teachers call it "gooey".
Man you breezed right over the timeline, i also tried to write a video editor in C# using WPF but i lost inspiration once i couldn't quite figure out how to implement a timeline. Wasn't sure how to properly deal with resizing UI elements to the right and left, same with moving them too, and dragging from row to row
From the little I've used WPF I think you would need to make a custom element for the whole row to make it work well. Fortunately, the API isn't too terrible for that, but it's a decent amount of work regardless!
looks pretty cool, gl on it in the future, but everything in the video seems to be squished slightly making almost everything look taller (noticeable on cubes and circles)
I didn't expect to hear luau, but its cool to see it being used outside of roblox :)
This is really cool!
The funny thing is you could've totally solved your original problem by screenshotting the axes without the cube, screenshotting the axes with the cube, and fading the two images together in any editor. It seems like a cool project though, the more things like this that exist the better
he needs this to be done in a animation, the whole video is about fixing this issue in a animation software, not just a single frame, he wanted this fixed for every frame since the start of the drawing of the axes until the image was complete, without line snapping
That exact thing can be achieved with a fade between two images
@@HEHEHEIAMASUPAHSTARSAGA so you need 2 separate images to fade together and generate one final image, okay. doing that after the animation is complete would fix the base problem, but it seems like his goal was to fix the issue in runtime in the preview window of the software he was using to make the animation, dynamically. Would he just render 2 images and fade them together in every draw call for the preview window? Seems a little heavy on the gpu
I'm just talking about how GWG could have solved the problem if his main goal was just making the video. These kinds of software hangups happen all the time and it's a good skill to be able to solve them quickly and pragmatically. I don't want to assume what GWG's goals were though
@@HEHEHEIAMASUPAHSTARSAGA fair enough
Love the dedication and the end result looks awesome!
Someone else using his alpha release editor: "Hmm, there's a bug... imma just roll my own" XD
Top work! Would love to see more!
I've had the headaches already, but it's good for us new to the coding world to know that there are much bigger headaches, massive ones, to look forward to in the future 👀
Incredible video !
that was an amazing video !!
This is literally awesome
"We do it not because it is easy, but because we thought it would be easy."
It’s so fun that these rabbit holes are deep. I’ve gone down many of these in the past but usually have cut the project.
About the latex thing. I imagine the world would benefit immensely if someone were to construct a modern library rewrite of that algorithm.
Imagine how many people must have done all the work you’ve done to get latex support in their app.
Welcome back!
This is amazing.
“… Which I will refer to as the ‘O’ Library.” And I knew exactly which one you were talking about.
Someone else said it was probably "Oniguruma," which makes sense lol
drinking game idea: take a shot every time gabe says "bezier"
I like living
I as Graphic/ Motion Designer i would love to play around with this sometime :)
This is radical, keep it up
I tried reading the manim morphing code, but couldn't understand how they (Grant) did it. So thanks for explaining it for me :)
Also, this video contains a load of very useful info for any graphic program. I'm saving it as a reference.
Google has a graphics library, Skia that is useful for rendering 2D stuff, but it would be difficult to integrate with all the manim functionality.
About parsing with regex - if this turns out to be too slow, you may want to look into Tokenizers and Parsers. Admittedly, that's a hole new can of worms, but for syntax highlighting, just a Tokenizer and some minimal brute-force parsing may be enough. You could probably do this in one weekend.
Skia is incredibly slow in my experience
I bet you learned a lot. That's the big accomplishment here. Far more valuable :)
You Both Inspires and scares me , But i like your stubbornness, it motivates me a lot
Wow, insane !
*"I could code this in a weekend"* In and out, 20 minute adventure.
ah i think you did a realy good job lerning the math and since behind all these stuff putting it together its daunting sometimes if realy codeing it from scratch and 8 months is depending on the hours a day... most my personal projects its all about the process... But is that technical even a Video Editor can you import any video and edit them or is it more some Video Creation/ Visual Animation tool... maybe for next weekend some addition to make handle realy big data streams cutting merging modifing converting... cant be that hard right :p as said great job
Loved watching your problem solving. Awesome video and great demonstration of the original hacker ethic! Oh, this program is broken for my use case? Let me rewrite it! Shame the code is under a non-free license, though.
Oh ! You'r back !
For syntax highlighting you could use tree-sitter. It has a ton existing parsers for pretty much any language you can think of. This is also what nvim, amongst others, uses to add syntax highlighting (and other features). Best part of it all? It's easy to embed and very fast.
Great work! I'm noticing one issue with your text renderer compared to Manim that really sticks out to me - Your renderer fades out the outlines after they are about 90% complete, while the Manim renderer keeps them there until they are filled. Also it seems like the lines go a little bit outside of the fill, which I assume just takes some complex math to fix.
1:00 This "death note"-esque music helps me learn better.
I would love to use this
I also did that on javascript as a lyric video editor ,it took me 2 years 😀
Reminds me of when I developed my own game engine. It was a fun experience, but I also gave up after a while.
You could use LSP (language server protocol?) to do accurate syntax highlighting. Clang supports it!
Like damn, this is a MASSIVE undertaking. You're crazy, amazing, and crazy amazing!
I'm sure I'll learn a LOT just by going through the git history lol. The ideation, the process and whatnot!
LSP is way overkill, and requires a different piece of software per language (clangd for c++, rust-analyzer for rust, etc.) They're meant for things like intellisense, refactoring, showing errors inline, etc, which wouldn't really be that useful for a video editor. To play devil's advocate, it would allow for semantic highlighting, but I still think it's not that useful for a video editor.
It's really impressive