Final devlog, release, and my thoughts

release!

Spent sometime fiddling with my friend’s Macbook (I hate it) to make a release. Also had some problems with linux’s default theme and that was eventually fixed. Windows was the easiest. Now you can access the first full release on Windows, Mac, and Linux from here (or from the demo page). I also added a README file.

Final thoughts

This devlog is the last one, released just with 4 hours remaining till the end of the event. It might also be the last one for me in Hackclub. I’m glad I managed to do a lot alone with a project I’m pationate about. I wanted to continue this project because I thought it was something unique to have a free, open-source motion graphics engine. That was until recently canva bought Cavalry and made it completely free, and a new free software doing the same thing called Autograph was released. So, at least in the near future, I’m not going to update this project. Open for any feedback!

Exporting to MP4

• Now I can create MP4 videos. This was done using ffmpeg and honestly I got some help from AI because it was too complicated.

New features

• Animation of all other attributes
• Exporting to MP4 using ffmpeg. You have to first download it and add to it your environment variables path. One way is to use the command winget install ffmpeg
• Added a new cute little icon to the program

Bug fixes

• Guess what! Crashes :D

There is still a problem because all keyframes are drawn over each other in the timeline and I cannot differentiate what is what. I think I will move now to releasing the program as it is because it is too much coding and screen time for one day. Sadly the project won’t reach what I hoped it would reach. At least for the time being.

Finally!! Animation

Finally, I could do linear animation in x position :’). (Note: The attached video is not smooth because I set frame rate in code to 24 currently, but it should work with any other values).
From now on, it is just applying to the other attributes. I’m really happy that it did not take as much time as I thought it would. But unfortunately, I think there is not enough time to add different types of interpolation.

Bug fixes

• Crashes (as usual)
• Deleting layers now works
• Did some optimization

Continuing with my silly mistakes, I just learned that *ptr ++ increments the pointer first, then accesses the new value. That is because ++ has higher priority :D

I worked on animation. Now the keyframes are drawn in timeline. and they are connected with the attribute panel. It is still a bit laggy and needs a lot of optimization, and still does not affect the path itself

A silly mistake I made took me 1h 50min to fix. It was because I accessed a pointer while creating UI before it was assigned. It made the program not launch at the first place. I thought the problem had to do with Qt or a corrupted file.

Whatever, Now highlighting layers work properly and when renaming a path, its name is updated in layers. I can also put emojis :)

I always asked myself: why do big companies mess up old features when adding new ones. I found out why :/

I spent 3 hours fixing crashes that I don’t know how they made it through. Also, I made the layers of the timeline stack correctly

A Quick update!

I (finally) started working on animation. I think I overestimated the time left. Currently I started drawing layers in timeline. On the way, I added a name property.

I’m struggling with linking the name attribute with the name of the timeline layer. I also tried to export the project. I can do it fine for Windows, but I’m having problems with Linux, and still did not try Mac. I’m using a friend’s computer to do so which is not ideal. If someone has any idea how to export Qt projects to Linux and Mac I would really appreciate it!

Till then, Enjoy this release for windows!

Node tool is back!

Now node tool works with rotation and scaling.

New attributes

Miter, round and bevel joints now work

Bug fixes:

• Crash when trying to change the mode of some nodes
• A very annoying lag caused by loading the attribute panel for the first time
• Clicked nodes are now drawn in blue as before
• Selection border does not count for extra border when choosing miter joint with high stroke width

Attribute panel!

I now implemented an attribute panel on the side bar. It currently includes

• x & y position
• x & y scale
• rotation
• x & y pivot point
• enabling and disabling fill and stroke
• choosing colors using a color pop-up window (thanks to this library)
• Alpha spin boxes
• RGB spin boxes
• stroke width spin box

I started working on other attributes like joint types but didn’t finish yet. Other attributes will include opacity, gradients, patterns, line dash types, line cap types, etc. I want to move to animating ASAP because the event will end soon and I still didn’t ship :\

I impleneted a small diamond buttom to add a keyframe. The button only clicks and changes from a hollow diamond with white outline to a green diamond, but still no keyframe functionality. I made a list of all features I want before the end of the event and I think I messed up :P

[done] stroke & colour properties
[ ] FIX: canvas dimensions
[ ] linear animating
[ ] viewport controls
[ ] importing SVGs
[ ] exporting to a file
[ ] exporting to an mp4
[ ] Ctrl + C, V, Z, Y
[ ] keyframe interpolation and graph editor
[ ] Text object
[ ] Text object properties
[ ] Image object
[ ] Image object properties
[ ] importing other formats
[ ] complex SVG shapes
[ ] path manipulation

I think I have to do only the first 8 for now and do the rest after the end of the event.

Every time I say “this is the last time I work on this feature” is never the last time. It took me too long to rewrite the drawing logic and fix scaling bugs to lay the ground for animating. I will try to work on attribute panel next time, and then on animating, but I will eventually return to shape drawing because transformation no longer works with node edit tool. Bugs fixed include:

• any combination of scaling, rotation and transformation now works flawlessly (I hope)
• negative scaling
• scaling handles now follow mouse correctly

I also added a new icon to indicate pivot point, which I currently have no way of modifying until implementing the attribute panel or fixing the node edit tool. I learned some new git commands which I’m proud of, and I’m thinking of how could I implement a future-proof attribute panel (that will include objects other than paths in the future, so I have to make the attributes dynamic). Any suggestions will help :)

IDK what is with time tracking because the duplicate devlog was deleted and the time was added to this devlog. It has been a while :D. I took a break because I did not feel like coding. Here is a new devlog introducing bezier curves, scaling, and rotating.

You can drag while drawing a node using the bezier pen to make this node symmetric while adjusting the handle. Then you can release and continue drawing like normal. There should be another handle type called smooth that has the ability for the two handles to have different lengths. I still lack the ability to edit bezier handles (the control points) and still have to fix some problems with transformation. I want to get this done quickly so I could move on to actually animating and attributes.

Long since last time :)
Time tracking was broken and I couldn’t upload a devlog but it is fixed now (this is why you will see the previous 2 devlogs the same).
About the app. I added panning to the canvas using middle mouse click as it was broken before. Objects now could be moved and scaled using the new selection tool. You can also edit the individual nodes of an object using the node edit tool. You can select multiple nodes to move by holding shift to select, and releasing then moving them as you would normally do with one node.

It seems little but I spent multiple days debugging the same problems and it was a lot of screen time.

Behold the Bezier Pen that is not fully bezier yet!
I added the view port with the first functionality: drawing shapes using a pen. Currently it only makes straight line. Curves will be added in the future. You can snap to the first point to finish the shape and start another (not sure if I should start another or deactivate bezier). SVG functionality will be mainly inspired by the open-source software Inkscape.

I also said I need to move on from the timeline, but I couldn’t :)
Timeline controls now work. I also added the functionality to bound timeline to a specific part using two handles. Now there are left and right margins to the timeline to better show it. Also fixed some bugs :>.

Continued the work on the timeline. I made the time indicator moving, without code this time :). I can now drag the indicator and it snaps to the nearest frame. Also added a play button that moves the indicator at the specific frame rate of the program (that means I can later make the user change the intended frame rate). The timeline still needs implementation of layers, but it took me 3 days till now and I need to start working on the actual drawing and animation part. The next devlog will be about svg functionality.

I added a new class called Timeline. The timeline currently has only zoom functionality with a working time indicator. The indicator can move to any frame on the timeline, but only if I code it to do so :P. I wanted to make it draggable using mouse, but it turned out that there is no built-in click functionality in a custom QWidget; I have to implement one myself. The time of this devlog was mostly spent in debugging the layout :|. I’m very happy that I can make custom widgets this easy, compared to when I tried it in WxWidgets.

Spent a lot of time searching the internet for resources and watching tutorials more than I did coding. I’m happy that I learned new things, but still I struggled a lot to understand CMake and Qt. The problem with Qt is that all tutorials use the Qt Studio. It is a powerfull tool in fact, but I hate it. The software introduces a tool for designing a UI (the whole purpose of the Qt framework) graphically, but coming from a wxWidgets background, I want to code the UI, not doing it like a Figma project. It is possible to do what I want completely in a coding IDE (like VsCode), but I cannot find sufficient tutorials for it (any suggestions would be helpful). After some struggling, I got a window showing, and learned few things from the Qt website. It turned out to be very similar to wxWidgets; I jsut want to get used to the new naming system.

Why I moved from wxWidgets? It is very limited. It lacks transparency features; the UI has that ‘native’ look to your OS and a very basic, boring design. I was mostly motivated towards Qt when I knew about Audacity (a popular, free audio editing software) moving to Qt from WxWidgets. I then knew about other popular apps (like Davinci Resolve and Maya) are also built based on the Qt framework.

The aim of this project is to build a free, open-source desktop app that could be used to produce motion graphics videos, inspired by Adobe AfterEffects and Cavalry. The app will have the basic functionality at first, then I will add more complex ones based on my motion graphics background.