Hey guys,

Has been a while since the last post, but just wanted to thank you guys again for the help. It all worked out great and the project is live (can I post this here?): https://www.instagram.com/p/Bsx6AhVhlNf/ Thought you guys might enjoy this!

I get what you are saying. I also don't know what the kerning should be, but now it just jumps to a really wide setting the moment 2 letters next to each other have different weights. Also if it's just a difference of 1 (so no black and light).
It's not changing over time, it's just 'normal' or 'wide', nothing in between. I only get this in Drawbot for now, can't replicate it in Sketch or Illustrator.

Anyway, happy I got a workaround now

Thanks Frederik.

The weird thing is that I can't replicate this issue it in Sketch for example. If I type 2 letters in that font, and select one and change the weight, the kerning does not jump. In Illustrator the kerning also seemed off, unless you use optical kerning.

Also, we spoke to the type foundry who made the font, and they said their programmer made the same kind of animation using CSS and JS, and they didn't have this issue. But I didn't get the change to verify this.

Anyway, the cheat with adding a small number seems to do the trick. I wrote a little function, which checks the text beforehand and applies custom minus kerning to know pairs. The designers who are going to work with this code can easily use this same function to overwrite values they don't like. Works for now.

Also, we have a plugin for After Effect that does the same kind of animation, and also doesn't do the kerning jump (could be using optical kerning). But the plugin has some other flaws, and is not user friendly, hence we built our own code to create the typographic animations we need

Thanks again for your time and thinking with me

So I 'fixed' it for now by always adding a small number to every letters weight, to they are never the same. This gives me the 'wrong' kerning for the kerning pairs, but then I change the kerning by hand for those letter combinations. Not a nice solution, but workable for now.

Still would like to have a better way of doing this.

Here the Y and O both have weight 335

Here the Y has 335, the O has 336.

Hope I can explain this correctly:

I'm drawing letters next to each other, and they all get their own fontVariatons(wght). But the MOMENT two letters next to each other have different weights, the kerning jumps. This only happens for kerning pairs like YO and TA, not for other letters. I get a perfect animation if I change the O for an X for example.

I want to make a kind of animation where the letters get bolder in a wave form. I get this to work, but the first time two letters next to each other are different, the kerning jumps. It stays like this until the moment the two letters are the same again in weight.

I tested a couple of variable fonts and it happens in all of them, although in some it's a lot less noticeable.

I use append to add a letter to a formattedString and draw it in a bezierPath, or a textBox. Same results. I also tried setting the tracking to 0.

Any suggestions would be MUCH appreciated! Really stuck on this one...

Looking at your code, it should be doable by maybe changing the fill for every letter, right? That makes every letter an independant textBox.

I only use it virtually in the beginning to get the position, I don't actually draw the letters then anyway, so the fill won't influence the end result. Will try to do this, thanks again!

Hey @frederik, always happy when you reply because you seem to be right all the time haha.

It sounds like textBoxCharacterBounds is about what I was looking for, but I want to do the following:

I have a word or sentence and put it in a font, align it center and now I want to have the actual x, y position of every letter on the screen. From your code it looks like it should be possible with textBoxCharacterBounds, but I want it separately for every letter.

Because later on I use these positions to check PNG's I load every frame to determine what the weight of every letter should be. That last part is working, but now I put the location of every letter by hand. But I of course want to automatically get the position of every letter in a string because it will be variabel. Does that makes sense?

I'm adding letters to a FormattedString one by one (with append), but I want to save the position of each letter when I do that. Is something like this possible, and how would I go about it?

It doesn't even have to be a FormattedString per se. I could also just type the text beforehand (because it is always centered), and then get the position of each letter.

Thanks in advance!

Thanks @gferreira, I somehow completely missed that when going through the documentation. That's exactly what I need haha. I only have to go through through a single line of pixels, so hopefully the speed won't matter that much.

Hello all,

Something I do a lot of times in Processing is load an image or video and read the pixel values at specific coordinates to use as values for an animation. It this something that can be done in Drawbot?

It can probably be done in Python with the image library, but I have no further experience with coding in Python.

In short I want to control the weight of a letter on a specific location based on a separate black and white images input (black is 0, white is 100%). Any ideas?