Clipping Canvas Edges on Rectangles/Shapes

Simple question: Is there a way to create a shape that is not bound by the edges of the background node?

Here's the example of the issue:
https://imgur.com/a/JxvCc3U

The rectangle I've created cuts out the shape from the yellow background, creating a shape. However, when I move the center coordinates of the rectangle so that the edge extends beyond the bounds of the yellow background, the shape does not extend any farther.

I know why it does this, the background doesn't extend any farther. However, I'm trying to figure out how to create a shape that is not constrained by the edges of any frame.

There's a way to fake this, kinda. If I simply don't attach any background to the rectangle, than it extends past any transform node edge and displays as a white rectangle on the final screen. See the 3rd image in the Imgur link above. Unfortunately, I can't figure out how to colorize this white rectangle, and I suspect it's because I'm trying to work with the wrong data type (the rectangle is a mask, I'm trying to treat it like an image without properly converting it, but I don't know how to convert it without running into the background edge issue mentioned above).


I ran into this issue when creating an intro animation with a few shapes and I was animating the width of a rectangle to extend while simultaneously moving the center of said rectangle using a transform node further down the node tree (I was moving a few elements at the same time). The shape obviously clipped when it hit the edge.
If fusion simply isn't intended for such animation, I understand, but I'm hoping there's a solution in 1 of 2 ways:

1. Find a way around the bounds of the background node
2. Find a way to colorize the white rectangles without running into the same edge boundary issue

Any insight would be appreciated, I had some fun just messing around trying to solve this on my own and I definitely gained a better insight into Fusion by fiddling with this problem, but I figured it was time to ask for help.

Thanks!

Rectangle -> Background's -> Transform, then Merge the Transform over another Background set to black with zero alpha. This second Background will establish your canvas.

Leave the Rectangle's own Center control alone, and use the Transform's Center to position the shape. As long as you don't introduce a tool that clips the Domain of Definition (DoD), you'll be able to retrieve the full shape downstream.

Code: Select all

{
   Tools = ordered() {
      Rectangle1 = RectangleMask {
         Inputs = {
            Filter = Input { Value = FuID { "Fast Gaussian" }, },
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Height = Input { Value = 0.039, },
         },
         ViewInfo = OperatorInfo { Pos = { 275, 49.5 } },
      },
      Background1 = Background {
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftGreen = Input { Value = 0.449, },
            EffectMask = Input {
               SourceOp = "Rectangle1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 385, 49.5 } },
      },
      Merge1 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Background2",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Transform1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 495, 82.5 } },
      },
      Transform1 = Transform {
         Inputs = {
            Center = Input { Value = { 0.875, 0.5 }, },
            Input = Input {
               SourceOp = "Background1",
               Source = "Output",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 495, 49.5 } },
      },
      Background2 = Background {
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftAlpha = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 385, 82.5 } },
      },
      Transform2 = Transform {
         CtrlWZoom = false,
         Inputs = {
            Center = Input { Value = { 0.131696428571429, 0.5 }, },
            Input = Input {
               SourceOp = "Merge1",
               Source = "Output",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 605, 82.5 } },
      }
   }
}


Thanks Bryan, that's a good idea and might alleviate some headache in the future.

However, in a situation where the width of the rectangle exceeds the first transform node, wouldn't that still run into issues? If I was just attempting center transforms, than yes, the solution works, but with width and height, the shapes could still clip.

I suppose the solution to this is just to plan ahead accordingly and figure out the largest width needed and scale everything beforehand, but the reason I got into this issue is because I had already animated the shapes meticulously before realizing I needed to shift the shapes around and ran into this clipping issue. In that situation, adjusting the size/scale of the rectangles would have meant re-doing all the initial work, which is what I ended up doing.

Why can't you just use the Transform node after the Backgrounds to change the size of the shapes. In the images below, I first sized the rectangles to be the full width of the screen and kept the Transform at 1. I then reduced the size of the 3rd Transform node which shrunk the 2 shapes. I then was able to use the Transform nodes after the shapes to change them to fit the width of the screen again.

Xunile, that's a good idea as well, but it just misses the heart of the problem I'm trying to solve.

With 2 transform nodes, I am able to resize things outside the transform node boundaries. However, if I were to change the width of the rectangle node, that would extend beyond the background node and cause the shape to appear clipped.

The situation I'm trying to figure out is how to gain true freedom with resizing shapes so I can animate a shape of any width or height and move groups of shapes around without worrying about going beyond the bounds of the background nodes.

EDIT: I suppose a partial workaround to this whole issue is to make sure you're applying the mask to the background node at the latest step possible. This allows you to change the height and width, and move the rectangles outside the confinements of the transform nodes as much as you want, and then at the very end slap a background node onto the chain to give everything color. The issue with this is that it really will only work for 1 color, and for flat shapes that can intersect and blend together. If you wanted to show depth with some overlapping drop shadows, you'd run into issues here.

In my example above, I change the width of the rectangles with the first Transform nodes and they didn't clip. I used the 3rd transform and reduces its size, I could still change the width of the 2 Rectangles to the full width of the comp frame. After you initially set up the Rectangle masks general shape, you don't need to modify them again for a size change. Make them the full width of the original Transform dimensions then you can resize them all you want no matter what you do later down the pipeline.

In the screenshots below, I created an Ellipse and a Rectangle, sized them to the width of the screen. I then used the Transform node after their Merge to shrink them down considerably. I then resized them up to their original sizes using their individual Transform nodes. There is no clipping. I resize shapes all the time without issues with clipping. If you avoid trying to resize the original Rectangle mask and use Transform nodes for the resizing, I don't think you will have clipping issues. I don't understand why you have a need to change the width of the original masks when you can do it with a Transform node, maybe I am just not understanding your workflow.

Hmm, you make a good point with that, and I'll admit this does work well with rectangles. In fact, you don't even need a rectangle mask, just connect a background into a transform node, use XSize and YSize in the transform node controls, and then manipulate them until you get the aspect ratio desired.

You're entirely correct that in this case, there's no need to adjust the original rectangle mask. However, I was originally after a more flexible solution. This particular use case will work perfectly for rectangular shapes, but if I had used the polygon shape to create a star-shaped mask and then attempted to animate that outside of the bounds of the background node, I'd be sunk. Granted, careful planning would ensure I wouldn't ever animate outside the bounds of the background node, but if there was a way I didn't have to meticulously pre-plan the min/max bounds of every shape in my animations, I'd be curious to explore it.

Really this question is about how to get around the limitations of needing to create shapes from cut out background nodes. I'd like truly free shapes that are not constrained in any way, where I can move and adjust their shape/size on any control without the concerns of background edges clipping the shapes.

Still, this partial solution will work beautifully for what I'm doing currently, and this is such a simple solution! Thank you!

It should work for any shape, but I am glad you have it working on your current project. You might also try using the new Shape nodes in 17, even though if you try to extend the shape outside the parameters of the original Shape Render node, you would still see clipping.

Haha I actually was just trying out the new shape nodes to see if they would perform any differently! Alas, as you mentioned, once shapes extend outside of their original render, they become clipped.

I should clarify (in case someone else stumbles across this issue), the partial solution isn't the perfectly flexible solution I was hunting for. Although you're technically correct that it will work for star shapes, it will only work for resizing the star, not for animating the points of the star.

Consider the example of animating a speech bubble. You have the bubble with text, and a spike that points towards a character speaking. If I wanted to use a transform node to move that speech bubble to the other side of the screen, I'd want to keep the point anchored to the character speaking. That would mean animating just that spike to extend really far out, but if I didn't originally plan for the speech bubble to have a spike pointing out so much, then that spike would exceed the limits of the boundary and I'd be sunk.

For simple transformations of resizing or stretching shapes in x and y directions, the partial solution is perfect. For animating the fundamental design of shapes, you can't do that with another transform node.

One tip (for anyone else with this issue) is that if you're just working with solid uniform color shapes, don't attach each unique mask to individual background nodes. Instead, use merge nodes to work with all the unique masks, and then apply those to one background node. This method does kinda solve the original question I had, since all the masks are boundary-independent, but you're constrained to one color because everything feeds into a single background node. However, I thought I'd throw this out in case anyone stumbles across this later.

So...if anyone else wants to take a crack at this issue, I'm still really curious if there's another way around it!

Perhaps if you were to present your actual use case, you'd get better feedback. You started with how to move rectangles around without worrying about clipping. Then you introduced scaling, and now you've got radically deforming shapes. If you'd started with the last, I'd have led with "Make your canvas (Background) really big to start with then crop it down," which would have saved us all a lot of time.

Bryan, I did start with my actual use case, which was rather simple. However, as people brought up other suggestions that would technically work but didn't quite answer the question, I needed different examples to explain why the suggestions - while helpful and insightful - were not the answers I was looking for. Although all the suggestions would have worked for my simple use case, I was actually after a deeper and more flexible answer.
I didn't lead with that desire because I honestly thought that I was missing something big and someone would point me towards a fix that removed the issue of masks extending beyond their backgrounds. I'm still rather new to all of this so it never occured to me this might be a limitation in the way background nodes interact with masks.

Even your suggestion of "make your canvas really big" doesn't actually solve the problem, it just puts a rather effective band-aid on it. I was looking for something that truly made the issue of background nodes irrelevant. I spend quite a while trying to see if there was a way of extending the background node edges to infinity, but that was a dead end. I also dug through the manual for a while, but there wasn't anything helpful in there about background node edges, or working with shape transformations.

Either way, I see your point about this being a rather poor thread. I just didn't know what I was missing and did my best to explain it, but I can see how that was an error. I'm sorry I wasted your time, and I'm sorry if I wasted anyone else's. Like I said, I'm still rather new to this, and didn't realize this wasn't the place for these types of questions. I'll try other places, maybe the subreddits, for simple stuff like this, and hold off on posting here until I'm a bit better with the program.

It should work for any shape, but I am glad you have it working on your current project. You might also try using the new Shape nodes in 17, even though if you try to extend the shape outside the parameters of the original Shape Render node, you would still see clipping.

To anyone seeing this thread later looking for answers, there is a solution that xunile suggested and I thought wouldn't work but I was wrong!! The new shape nodes in v17 do solve this problem since they have independent transform controls that are not bound by a canvas size. When xunile originally suggested this, I thought they were talking about a different tool I had already tried, my mistake.

As xunile said, once you render the shapes, it becomes edge bound once more, but since there's no limit to how many shapes you can play with before rendering, this solution works beautifully. I'll have to mess around with the new Shape nodes to see what other features/limitations they have, but I'm very glad to see this working.

Either way, I see your point about this being a rather poor thread. I just didn't know what I was missing and did my best to explain it, but I can see how that was an error. I'm sorry I wasted your time, and I'm sorry if I wasted anyone else's. Like I said, I'm still rather new to this, and didn't realize this wasn't the place for these types of questions. I'll try other places, maybe the subreddits, for simple stuff like this, and hold off on posting here until I'm a bit better with the program.

No, that's on me. Sorry I got a little pissy. I was irritable over something completely unrelated, and I guess it spilled out here. I apologize.

No worries Bryan