Try more form-fitting inner bounding box

[bjlange]

@deanmalmgren suggested: what if we drew a bounding box around the x-height and the ascenders/descenders of the wordmark, instead of just a dumb rectangle? Could make for logos that interact with the wordmark better. ¯_(ツ)_/¯

[deanmalmgren]

@bo-peng had a good idea to maybe use a "bubble letter" concept. That is, expand the paths of the letters like a bubbly font.

[bjlange]

Good idea. This would be easier than drawing boxes manually. Maybe we can do this by putting a super thick stroke weight on it?

[deanmalmgren]

Just did a little experiment and it doesn't look like creating a thick stroke will work:

var red_line = Path.Line(
    new Point(100, 100),
    new Point(300, 100)
)
red_line.strokeColor = 'red';
red_line.strokeWidth = 50;

var blue_line = Path.Line(
    new Point(100, 95),
    new Point(300, 95)
)
blue_line.strokeColor = 'blue';

// prints an empty list '[]' even though blue line clearly interesects the red region
console.log(red_line.getIntersections(blue_line));

[deanmalmgren]

scaling the path looks like it might work though...

[deanmalmgren]

Indeed!

var red_path = Path.Rectangle(
    new Point(100, 99),
    new Point(300, 101)
)
red_path.fillColor = 'red';
red_path.scale(2);

var blue_path = Path.Line(
    new Point(100, 0),
    new Point(200, 98)
)
blue_path.strokeColor = 'blue';

// this correctly has intersections when the path is scaled up and misses when it doesn't!
console.log(red_path.getIntersections(blue_path));

[deanmalmgren]

...the downside is that we'll need to break down the logo letter-by-letter to get this to work properly. Here's a quick attempt that creates a copy of the text and scales it by 1.1 to illustrate how this works for our particular case.

[bjlange]

Working on this. You can get the individual letter paths by getting text.children[0].children, but their positions and bounds are wonky... they don't correspond to where you actually see the letters on the canvas.

[bjlange]

Making some progress. I was able to loop letter by letter but simply scaling the letters disproportionately scales some parts (like the stems) more than others, rather than the more stroke-like effect we're seeking:

Still a viable option should we need a path-based approach, e.g. for detecting intersections or performing boolean operations.

Looking through the documentation, though, I noticed the "hitTest" function can detect whether a point is inside a stroke or not. So I'm thinking using a heavy stroke and hitTest along with a random approach to choosing points may be a better way to go.

There's also the blunter approach of scaling up the bounding box of every individual letter and taking the union of those. This might work as well.

I haven't pushed any of this yet; it's kind of a mess at the moment. I'm putting together a function that can take any arbitrary path as "inner bounds" for the text, so that we can try the different approaches and see how they compare.

[deanmalmgren]

Nice; thanks for looking into this and sharing some screenshots! Both the hitTest method and letter-wise bounding box method seem really promising.

How computationally intensive is the hitTest thing? I gather its probably pretty darn fast, yah?

[bjlange]

I would expect so. It's intended to be used for video games and such. A
hacky way to check "line intersections" with the no-no yellow zone could be
to loop over a bunch of points along the line and hittest all of them...

On Thu, Oct 30, 2014 at 2:37 AM, Dean Malmgren [email protected]
wrote:

Nice; thanks for looking into this and sharing some screenshots! Both the
hitTest method and letter-wise bounding box method seem really promising.

How computationally intensive is the hitTest thing? I gather its probably
pretty darn fast, yah?

—
Reply to this email directly or view it on GitHub
#7 (comment)
.

brian lange | +1.513.254.6751
data scientist | datascope analytics