Jump to: Board index » General » Fusion

rounded edge rectangle with border?

Learn about 3D compositing, animation, broadcast design and VFX workflows.
  • Author
  • Message
Offline

tolbertpitman

  • Posts: 9
  • Joined: Wed Jun 20, 2018 10:33 pm
  • Location: Bedford, TX
  • Real Name: TOLBERT PITMAN

rounded edge rectangle with border?

PostMon Jul 02, 2018 5:21 pm

Hello all: I'm new to Fusion I've searched through the forums and YouTubes and can't find out to make a rectangle with a border. I'm trying to re-create a project I made in AE for a lower 3rd using a red rectangle with a white border.

I've made a red rectangle in fusion, but how do I add a border to it?

Thanks in advance!

Tolbert
Offline

Sander de Regt

  • Posts: 3500
  • Joined: Thu Nov 13, 2014 10:09 pm

Re: rounded edge rectangle with border?

PostMon Jul 02, 2018 7:33 pm

There are so many ways to this. You can put the red rectangle you have right now into a BC tool with the brightness all the way up to 1 with a rectangle mask with 'solid' unchecked and a width set to the width you want. Or you could duplicate the BG tool you used to create the red rectangle and set it to white and then use the same mask in the same way as my first example.
Those are just 2 ways to get you started.
Sander de Regt

ShadowMaker SdR
The Netherlands
Offline

tolbertpitman

  • Posts: 9
  • Joined: Wed Jun 20, 2018 10:33 pm
  • Location: Bedford, TX
  • Real Name: TOLBERT PITMAN

Re: rounded edge rectangle with border?

PostMon Jul 02, 2018 8:02 pm

I've attached a png of the file I'm trying to recreate in Fusion. I get the red rectangle pretty close and I've made a white one (a copy of the red one) now when I scale it things get weird.

COMMONS_LWR3RD_TEMPLATE REFERENCE.png
COMMONS_LWR3RD_TEMPLATE REFERENCE.png (24.33 KiB) Viewed 7082 times
Offline

robert_capper

  • Posts: 9
  • Joined: Tue Oct 11, 2016 12:42 pm

Re: rounded edge rectangle with border?

PostMon Jul 02, 2018 9:23 pm

Please find one potential way to do it here.
Code: Select all
{
   Tools = ordered() {
      Red_BG = Background {
         NameSet = true,
         Inputs = {
            GlobalOut = Input { Value = 100, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 0.517647087574005, },
            TopLeftGreen = Input { Value = 0.0392156876623631, },
            TopLeftBlue = Input { Value = 0.0784313753247261, },
         },
         ViewInfo = OperatorInfo { Pos = { 440, 115.5 } },
      },
      Rectangle1 = RectangleMask {
         Inputs = {
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Center = Input { Value = { 0.5, 0.162305379263974 }, },
            Width = Input { Value = 0.786167400599962, },
            Height = Input { Value = 0.157665463579174, },
            CornerRadius = Input { Value = 0.278, },
         },
         ViewInfo = OperatorInfo { Pos = { 550, 115.5 } },
      },
      Black_BG = Background {
         NameSet = true,
         Inputs = {
            GlobalOut = Input { Value = 100, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
         },
         ViewInfo = OperatorInfo { Pos = { 440, 181.5 } },
      },
      Merge1 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Black_BG",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Red_BG",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
            EffectMask = Input {
               SourceOp = "Rectangle1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 550, 181.5 } },
      },
      Instance_Rectangle1 = RectangleMask {
         SourceOp = "Rectangle1",
         Inputs = {
            BorderWidth = Input { Value = 0.00269, },
            Solid = Input { Value = 0, },
            StartEndRenderScripts = Input { },
            EffectMask = Input { }
         },
         ViewInfo = OperatorInfo { Pos = { 715, 115.5 } },
      },
      Merge3 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Merge1",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "White_BG",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
            EffectMask = Input {
               SourceOp = "Instance_Rectangle1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 825, 181.5 } },
      },
      White_BG = Background {
         CtrlWZoom = false,
         NameSet = true,
         Inputs = {
            GlobalOut = Input { Value = 100, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 1, },
            TopLeftGreen = Input { Value = 1, },
            TopLeftBlue = Input { Value = 1, },
         },
         ViewInfo = OperatorInfo { Pos = { 825, 115.5 } },
      }
   }
}
Offline
User avatar

Bryan Ray

  • Posts: 2478
  • Joined: Mon Nov 28, 2016 5:32 am
  • Location: Los Angeles, CA, USA

Re: rounded edge rectangle with border?

PostTue Jul 03, 2018 4:34 am

A variation on Robert's method, with a little easier control over additional elements Merged into the lower third:

Code: Select all
{
   Tools = ordered() {
      Red_BG = Background {
         NameSet = true,
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 0.517647087574005, },
            TopLeftGreen = Input { Value = 0.0392156876623631, },
            TopLeftBlue = Input { Value = 0.0784313753247261, },
            Gradient = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
            EffectMask = Input {
               SourceOp = "Rectangle1_1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 770, 82.5 } },
      },
      Rectangle1_1 = RectangleMask {
         Inputs = {
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Width = Input { Value = 0.786167400599962, },
            Height = Input { Value = 0.157665463579174, },
            CornerRadius = Input { Value = 0.278, },
         },
         ViewInfo = OperatorInfo { Pos = { 770, 49.5 } },
      },
      Text1 = TextPlus {
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            Font = Input { Value = "Open Sans", },
            StyledText = Input { Value = "text", },
            Style = Input { Value = "Regular", },
            ManualFontKerningPlacement = Input {
               Value = StyledText {
                  Array = {
                  },
                  Value = ""
               },
            },
            ShadingGradient1 = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
         },
         ViewInfo = OperatorInfo { Pos = { 770, 148.5 } },
      },
      White_BG = Background {
         NameSet = true,
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 1, },
            TopLeftGreen = Input { Value = 1, },
            TopLeftBlue = Input { Value = 1, },
            Gradient = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
            EffectMask = Input {
               SourceOp = "Instance_Rectangle1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 880, 82.5 } },
      },
      Merge2 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "White_BG",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Red_BG",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 880, 115.5 } },
      },
      Transform1 = Transform {
         CtrlWZoom = false,
         Inputs = {
            Center = Input { Value = { 0.5, 0.161111111111111 }, },
            Input = Input {
               SourceOp = "Merge3",
               Source = "Output",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 880, 214.5 } },
      },
      Merge3 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Merge2",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Text1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 880, 148.5 } },
      },
      Instance_Rectangle1 = RectangleMask {
         SourceOp = "Rectangle1_1",
         Inputs = {
            BorderWidth = Input { Value = 0.00335717021276596, },
            Solid = Input { Value = 0, },
            StartEndRenderScripts = Input { },
            EffectMask = Input { }
         },
         ViewInfo = OperatorInfo { Pos = { 880, 49.5 } },
      },
      Black_BG = Background {
         NameSet = true,
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            Gradient = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
         },
         ViewInfo = OperatorInfo { Pos = { 770, 247.5 } },
      },
      Merge1 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Black_BG",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Transform1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 880, 247.5 } },
      }
   }
}


The key point in Robert's approach is the instanced Rectangle with a deinstanced Border Width control. To make an instance of a tool, copy it, then paste with Ctrl+Shift+V (Cmd+Shift+V on MacOS). Then deinstance a control by right-clicking on it and choosing 'Deinstance.' Most of the controls on the two Rectangles will remain linked—you can change the corner radius or size, and both will update at the same time. But the Border Thickness is independent.
Bryan Ray
http://www.bryanray.name
http://www.sidefx.com
Offline

tolbertpitman

  • Posts: 9
  • Joined: Wed Jun 20, 2018 10:33 pm
  • Location: Bedford, TX
  • Real Name: TOLBERT PITMAN

Re: rounded edge rectangle with border?

PostTue Jul 03, 2018 9:57 pm

I appreciate all of the replies but these two with the code I have no idea what to do with them.
Offline
User avatar

Bryan Ray

  • Posts: 2478
  • Joined: Mon Nov 28, 2016 5:32 am
  • Location: Los Angeles, CA, USA

Re: rounded edge rectangle with border?

PostWed Jul 04, 2018 5:00 am

Copy the code, then paste into your Flow view. The nodes will appear.
Bryan Ray
http://www.bryanray.name
http://www.sidefx.com
Offline

tolbertpitman

  • Posts: 9
  • Joined: Wed Jun 20, 2018 10:33 pm
  • Location: Bedford, TX
  • Real Name: TOLBERT PITMAN

Re: rounded edge rectangle with border?

PostFri Jul 06, 2018 9:04 pm

Thanks again, but I'm not finding "flow view" in Fusion, Resolve help manual, or on Google yet.
Offline

tolbertpitman

  • Posts: 9
  • Joined: Wed Jun 20, 2018 10:33 pm
  • Location: Bedford, TX
  • Real Name: TOLBERT PITMAN

Re: rounded edge rectangle with border?

PostFri Jul 06, 2018 9:53 pm

Okay after watching a short YouTube intro to Fusion inside Resolve 15, I saw a tool called "flow"! So, I copied the code and made a blank background clip and pasted and holy smokes! It's there!

Thanks so much and have a great weekend!

Tolbert
Offline

tolbertpitman

  • Posts: 9
  • Joined: Wed Jun 20, 2018 10:33 pm
  • Location: Bedford, TX
  • Real Name: TOLBERT PITMAN

Re: rounded edge rectangle with border?

PostFri Jul 13, 2018 5:39 pm

Here's an update on my simple (not so simple) rectangle in Fusion...

I got the code into Fusion and it worked and I was able to adjust the border width.

Another snag (for me at least) was mixing the font styles with the text tool in Fusion. I'm using Helvetica Neue medium and light. The text tool in Fusion only lets me use one style of text - arrggghh! It's always something.

The text effect in Resolve lets me use multiple styles in one text effect so I'm going that route for now.

Have a great weekend!
Tolbert
Offline
User avatar

Sergey Mirontsev

  • Posts: 256
  • Joined: Sun Mar 12, 2017 9:18 am
  • Location: Moscow, Russia

Re: rounded edge rectangle with border?

PostSat Jul 14, 2018 6:25 am

tolbertpitman, it's Character Level Styling (mixing the font styles)

Blackmagic Design Certified Master Trainer

Blackmagic Pocket Cinema Camera (Samyang 12mm Cine, 35mm Cine)
DaVinci Resolve Studio 17.4.4.0007
Speed Editor 1.4.1
Windows 10 Pro 21H1, i7-7700, 32Gb RAM, SSD, GeForce GTX 1080 Ti 11Gb (471.68 Studio)

Return to Fusion

Who is online

Users browsing this forum: No registered users and 35 guests