Connecting Linear Wipe Completion to a Null Object
About a month ago Joe at Workbench tweeted about a linear wipe effect that was connected to an object. That felt right up my alley, and I figured I could make it happen.
I spent a day re-learning the necessary geometry and trigonometry in order to complete the issue, but ran into an issue with my logic. I had assumed that the effect went from screen-edge to screen-edge, but in actuality, if linear wipe always moves through the center, it actually stops at a point offscreen defined by the intersection of a perpendicular line from the center line through each of the adjacent corners. I gave up.
After coming back from a vacation, I decided to tackle it again and this time from scratch. I knocked out the whole effect in a few hours despite days of trying to get the math to work a month previously. Another hour over the next few days for bug fixes and it’s complete! Below is a rough outline of how the effect works.
The key is to realize there are essentially two “modes” in which to work in. One where the linear wipe angle intersects the top/bottom edges of the screen, and one where the angle intersects the left/right sides. Additionally, if you consider that 185° is essentially the same as 5°, only repeated, you can use the modulus function to make your range of work significantly smaller. By limiting what you need to deal with it makes the solution easier to make.
An important fact to remember is that the linear wipe effect can be an illusion. It might look like a diagonal moving across the screen in only the X or Y directions, but it’s actually functioning as if a movement path is always going through the center of the screen. By defining that line via the angle which runs through the center and defining a perpendicular line which runs through the null’s position, you can solve for the intersection of both lines and the keystone kernel of information for this effect.
Be doing geometric and trigonometric math, you can find the exact positions where the wipe “begins” and “ends.” Interpolating the intersection point relative to the end positions to find the correct completion percentage from there is simple algebra.
Below are two links where you can download a preset and AE project so you too can play with the linear wipe controller. The .aep also includes a breakdown from an earlier iteration with each step as it’s own layer as well as all of the visual feedback elements I created to ensure I didn’t make a mistake. The final effect has all of those elements abstracted as the expression (which I’ve tried to make pretty legible if you want to dive into it.)
Simply link the preset angle to the linear wipe angle, and then link the completion percentage to the slider. It just works!
I’d love to see what you make with this! Tag me on instagram or twitter @jctecklenburg.
Update Oct 6, 2018: I’ve updated the preset and project file to respect parenting.