Daily animation sketch 019

This is very much still a WIP, but here's the start of "Arrays: Time Complexity"

The operations are push(0), push([2, 3, 4]), insert(1, 1), pop(), and remove(1)

Daily animation sketch 020

Continuing from yesterday, I added 🔉 AUDIO 🔉 and subtitles to the animation. I'm excited to start adding voiceovers to more of my videos :)

#MadeWithMotionCanvas

DAS 021

Hope y'all like fade-in animations for text!

#MadeWithMotionCanvas

Getting letter-by-letter animations in Motion Canvas was something I tried to do day 1, but had to hack around. It feels really good to revisit it and create a better interface for doing so.

I'll be iterating on it and cleaning it up over the week :)

DAS 022

I adapted the fade-in animations to run per-word!

#MadeInMotionCanvas

DAS 023

I took some inspiration from Stephan Zammit's "The Right Way To Animate Text" video (linked below) to extend my word-by-word animations of yesterday

#MadeInMotionCanvas

The Right Way to Animate Text | After Effects Text Animation Tutorial

YouTube

DAS 024

Today I recreated the Game Boy Advance startup screen! I got to code an interpolation function to only use 16 hue shifts instead of the full range for that classic GBA feel

#MadeWithMotionCanvas

For reference, here is a video of the original: https://www.youtube.com/watch?v=9XlO26FrH48
Original Gameboy Advance Intro Startup - Lossless Remastered

YouTube

DAS 025

This came late!! I was traveling this past weekend to NYC, so my animation got delayed

Enjoy the story :)

#MadeWithMotionCanvas

DAS 026

Transitions 1

#MadeWithMotionCanvas

DAS 027

Today I used the built-in Motion Canvas transitions API to transition between multiple scenes, something I haven't yet had a reason to do

I had to use `ctx.clip()` to create the second transition, and will need to continue experimenting with how to overlay elements during transitions

#MadeWithMotionCanvas

DAS 028

More transitions! I'm not in love with the Motion Canvas `useTransition()` API, so I think I might write some sort of wrapper function to make it a bit more ergonomic

#MadeWithMotionCanvas

DAS 029

Tried my hand at a hexagon animation. I feel it's missing something small - any critique would be appreciated :)

#MadeWithMotionCanvas

DAS 030

I wanted today's animation to emulate playing a game. I finally found out how to make parameterized scenes, so I was able to further reuse code today :)

DAS 031

Listing & highlighting files

#MadeWithMotionCanvas

DAS 032

Sorting files

#MadeWithMotionCanvas

DAS 033

Checking if JS files are ready to be converted to TS

#MadeWithMotionCanvas

DAS 034

Channeled my inner @3blue1brown.com today

#MadeWithMotionCanvas

DAS 035

Was busy with friends yesterday, but here's the final animation for this week, featuring some fireworks!

#MadeWithMotionCanvas

DAS 036

Made a card dealing animation with fellow Recurser Gage Krause today :)

#MadeWithMotionCanvas

DAS 037

Playing around with the camera in Motion Canvas

#MadeWithMotionCanvas

DAS 038

Decided to incorporate a shader into today's animation. The possibilities opened up in shader programming by Motion Canvas has me super interested, gonna continue to explore this tomorrow!

#MadeWithMotionCanvas

DAS 039

Another day of powering shaders with Motion Canvas. I interpolated between four SDFs (signed-distance functions) and adjusted the rotation + size using signals. They were all pumped to the shader as uniforms. Feels magical!

#MadeWithMotionCanvas

DAS 040

I cannot explain how fun it is to play with shaders & SDFs within Motion Canvas. It's almost like having a GUI to adjust the timeline, but it's with code instead of UI elements

I'm loving this :)

#MadeWithMotionCanvas

DAS 041

I was inspired by some marketing text on the side of a building this morning, and decided to try to recreate it in Motion Canvas. Shaders came in handy to draw the holes.

#MadeWithMotionCanvas

Here's the original, for reference :)

DAS 042

Another text effect! Just one loop takes a couple minutes to render (I used ffmpeg to triple it)

#MadeWithMotionCanvas