labs.gupon.jp

Bezier #02 Intersection

As a designer dealing with vector graphics everyday, I've been always looking for a way
to use intersection points as a basic element for any purposes. (I guess it's a quite straight idea)
But surprisingly, I could barely find any way to treat them nicely inside existing apps.
Especially, in terms of motion.

So to begin with, I started learning little math to calculate each points.
(Started with Line x Line, then Curve x Line, and finally Curve x Curve ...)

For pair of cubic bezier curves, which is the most complex case,
I wrote another note explaining each steps with figures: Bezier Clipping (sorry Japanese only)

Split + Margin Scaling

Once you get specific intersection position(uv) on lines, you can split at the point with desired margin.
And of course, they can be animated through time.
Neither of them are simulations, but just animating the distance of margins from each birth time.

Endpoints modification

Adding shapes to ends are simply fun.
And to make it more interesting, I created some attributes for each intersection point (like color, curliness, ...)
and shared with both lines' endpoints, to drive the shape at the ends.

Arrow ends adds some directivity or meaning to each stroke.
They points and directs to nothing, but still looks like some kind of explanation...

3D Line Culling

(WIP)

© 2021 gupon