labs.gupon.jp

Bezier #02 Intersection

As a designer dealing with vector graphics everyday, I've been looking for a way
to use intersection points as a base element for many purposes.
But I could barely find any way to treat them nicely inside existing apps I use. (Especially, in terms of motion)

So to begin with, I first looked into little math to calculate intersection 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 some figures: Bezier Clipping (sorry Japanese only)

And after all, SideFX made an excellent solution... Intersection Analysis SOP
Though it can't be used directly for bezier curves, results are stable and works great in many complex cases.
Early tests in below are results of my own analyzer, but I rely more on this new SOP recently.

Split + Margin Scaling

Once you get intersection position(uv) on lines, you can split them at the point with some desired margin.
By animating the margin bigger, intersection looks like a hole spreading out.
Neither of the motion above aren't simulations, but just animating the distance of margins from each birth time.

Endpoint Modification

Adding shapes to ends are simply fun.
To make them look more interesting, I gave some attributes per intersection point (like color, curliness, etc)
and shared with both lines' endpoints which were cut by, to drive the shape at the ends along time.

To achieve "propagation" feel like the right one, the difficult part was to match the intersection point between frames,
since each time they are calculated from fresh curves frame by frame. But this way, I can not only keep curves from resampling,
but also animate them simply while not having to struggle with limitations that come with simulation.
Solvers are only used to match the points.

I particularly liked arrow shapes at the end. Even though each line points and directs to nothing,
they look like some kind of explanation. Can't help following the visual guidance added randomly.

3D Line Culling

It was an idea from the beginning, but was a long path make it everything work right.

  1. Create 3D geometries normally and extract lines (unroll ends)
  2. Convert coordinate to screen space but keep the 3D position. (toNDC(), Rest SOP)
  3. Calculate intersections in 2D, and also calculate depth(Z) at the point by interpolating values around. (primuv())
  4. Only cut the lines behind, by comparing depth of two points at intersection.
  5. (add end shapes at the edge)

The main purpose was to make this work, to imitate human's behavior which is to
avoid front line when you draw the line comes behind. Quite an easy move for human, but not for computer I guess.

© 2021 gupon