opentype.js rendering for `dsi-logo-maker`

runemadsen commented 2 years ago

This PR updates all design functions in dsi-logo-maker in the following way:

They now use opentype.js for loading a eot version of F Grotesk and render text to <path /> elements or canvas. This makes the output print-ready without the need for outlining fonts.
They now all have string inputs with options for choosing the thin or regular version of F Grotesk

netlify[bot] commented 2 years ago

Deploy Preview for dsi-logo-maker ready!

Name	Link
Latest commit	d0205f2b797c92fa1003c936fa7680e89162441b
Latest deploy log	https://app.netlify.com/sites/dsi-logo-maker/deploys/63231c188b37750008f1306d
Deploy Preview	https://deploy-preview-145--dsi-logo-maker.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

runemadsen commented 2 years ago

Thanks for the feedback @lnolte and @fdoflorenzano! I just pushed a fix so the logoAnimatedSVG function works with the font selector too. It's running a little choppy tho, and I can't really figure out why. I think we generally need to re-think the way we animate with React and provide some built-in hooks that people can use. I'll be happy to think about this for a bit, but for now I was just trying to fix the choppy logo and couldn't really understand how the props to the Unit component work together for the animation state. @fdoflorenzano do you mind taking a look? I'd also be happy to jump on a call :)

fdoflorenzano commented 2 years ago

I think we generally need to re-think the way we animate with React and provide some built-in hooks that people can use. I'll be happy to think about this for a bit, but for now I was just trying to fix the choppy logo and couldn't really understand how the props to the Unit component work together for the animation state. @fdoflorenzano do you mind taking a look? I'd also be happy to jump on a call :)

Hey! I checked it out, and I also had a hard time with it haha This was a while ago, and I think I was just struggling with trying to convert the current time elapsed for the video into the current offset that the logo should have based the the amount of complete turns and the total objective duration of the video.

I also went with this time based animation just out of not really knowing much about video creation and time duration made sense in my mind. Since the current setup checks for time passing during rendering, since some renders make take different amounts of time between them, maybe that makes it choppy?

I now realize that something more based on frames would probably make more sense. @lnolte did some work on that and a hook based on frame count in #125

But yeah, I'm down to re write these examples and revisit animation. This maybe can give #125 a push.

runemadsen commented 2 years ago

Nice! I'm all for this!

runemadsen commented 2 years ago

Another thing I was thinking in relation to fps was adding a small timeline scrubber for animations. It's a little hard since we don't know the duration of the animation, but perhaps it could be a small timeline with the ability to set the time you want to jump to. It would be a big help when working with animations.

runemadsen commented 2 years ago

Let's solve the FPS problem when we merge the new drawLoop functionality. Getting this into main :)

designsystemsinternational / mechanic