The Perception Guide to FUI: Making Radial FUI Elements with Spline Wrap

Photo of Perception

Instructor Perception

Share this video
  • Duration: 18:33
  • Views: 4450
  • Made with Release: 18
  • Works with Release: 18 and greater

John LePore (Chief Creative at Perception) covers several different ways to quickly and easily make radial forms utilizing the Spline Wrap deformer.

Learn how easily you can create radial FUI graphics by taking advantage of Cinema 4D's powerful MoGraph toolset and SplineWrap deformer. Simple primitives, a few Random Effectors, a lot of SplineWraps and a few Cloners come together in mintues to create a fictional user interface that ready for the big screen.

Less...

Transcript

Hi. My name is John LePore. I'm the Chief Creative Director at Perception, and today I'm going to be talking about making radial futuristic user interface elements using the Spline Wrap tool. It's not uncommon to see these radial themes in futuristic user interfaces, in movies, television shows, and video games. I think there's a lot of reasons that this graphic theme is so common. I love pulling inspiration for these radial concepts from all over, not just other futuristic user interfaces. But looking at things like data visualizations, instrumentation in cars, or even high-end, luxury wristwatches, I love just seeing all these layers of tick marks and information, and data, arranged and nested together so tightly in such a precise manner. This approach allows us to play around and come up with a bunch of different graphic elements that may all have their own intended purpose. But give them all a continuity of form by nesting them together in these circular and radial layouts. So let's jump in and start playing around with a radial layout of our own. The first of several radial elements we'll create will be some streaks, some almost comet-like trails. So I'm going to take a plane and reduce it down into a long, wide rectangle. We're going to put the Spline Wrap directly underneath this. Nothing is happening yet, because we haven't assigned a spline to it. But I'll place a Circular Spline in my scene, set it to the XZ-axis, and then when we drop that into the Spline Wrap, you'll see our plane is now wrapped all the way around that spline. Now, there's an important control here. We can choose the mode of the Spline Wrap to be either Fit Spline or Keep Length. When we switch it from Fit Spline to Keep Length, you can see it no longer fills the entire length of the spline. I'm going to adjust some of the segments on this plane, and we can play with those width segments to make sure we're not getting too much fastening. Then, let's drag a material on here. I'm going to do all my materials in the Luminance channel, because I want them to be bright and vivid, a little electric red here. So that's looking pretty good. But I'd like to add a little directionality to this. So I'm going to put a Gradient in the Alpha channel. Now, this looks like a trail or a comet, or a streak of some kind. So I think that's working nicely. In order to suggest that these streaks are representing some form of measurement or data, I'd like multiples of them. So I'm going to use the Cloner object. Immediately, you'll see the Spline Wrap isn't affecting our multiple clones. So we're going to have to adjust the hierarchy of where the Spline Wrap is nested, putting it alongside the Cloner within a Null object. Now, you'll see I can easily adjust my clones. We're giving them a little distance from each other in the Z-axis, and we can start playing with a count of them to see how many feels right. This is looking pretty good. Now, we can get into the Random Effector to mix them up and make each clone feel like it's its own unique measurement of data of some kind. We'll play around with the different parameters, ultimately adjusting them in the X-axis under their position. This is starting to look pretty cool. I want to shorten their tail a little bit. So I'm just going to adjust the gradient on the Alpha channel, and this is looking pretty good. Now, I'd like to make this a little more filled out. We just have them covering almost 90 degrees of this radius. So I'm going to duplicate the geometry within the Cloner, and then offset it, effectively duplicating each clone within that Cloner that is being wrapped around the spline. Now, we've got something that looks much more full and taking up our entire spline. So now, I think we're ready to get into our next element, which will be a bar graph-like element. So we'll start with a cube. Let's get it down into a single column shape, getting our scale just the way we want it. Let's just get some of our streaks and comet trails out of the way. We'll pack them up in a Null, and we can pull them back out later if we want. So that cube we just made, of course, we're going to clone this out. Let's clone it out along the X-axis, and we'll make a whole bunch of these clones. We'll fine-tune the number of clones and their actual scale and distance from each other, once we get them wrapped around the spline. So of course, we'll need another instance of Spline Wrap, and that means we're going to need another spline. So I'm just going to put the Spline Wrap alongside our Cloner, and then let's make another Null object just to package away our splines. We'll duplicate our previous spline, adjust the radius, and now let's reference that within our new Spline Wrap we just made. Now, we can see our cubes iterating around the spline. This is now a good time to start playing with how many of them we want. Is the scale, is the density of them feeling right? It's looking good. We of course want to get into that Random Effector. So we can play around with adding some variation to these and making them look a little more like data. But I'd like to do it just in the Z-axis. That starts to get interesting. But maybe we could try it in scale, and there we go. Now, we're looking like we've got different values in each one of these. However, it's looking a little too much like a wave form. The Cloner is referencing the center point of the cube, and I'd like it to actually reference more of the bottom of each cube. So we put that cube into a Null within our Cloner, and we adjust its position within that Null. Then, effectively by the Cloner referencing the center point of the Null, we can create a nice, solid baseline, and now we've got something looking more like a bar graph. We'll duplicate our red material, get rid of the Alpha channel, and put that on there. Now, we've got a nice, red, radial bar graph looking interesting. Let's spice it up a little bit by duplicating the cube that we're using. I'm actually going to nest this cube under itself, so that we can control it independently of the main cube. We'll shrink it down much smaller and play with its position, and you'll see we get this nice, little extra sort of blip of data as part of the graph. We can put a different material on it. So we can switch its color out, and we get a nice electric blue-purple, and we can play around with the position of this guy. Now, as this relates to the rest of the graph, we can make something that's not just a typical bar graph with a top and bottom, but something with an inset measurement, like a candle graph. I thought this was really fun to play with. I'm just going to go in and make some really small scale changes to our blue pieces, so that we don't have any intersection issues. Now, I think we can push this to the next level, by duplicating this element and making a secondary inner array that lines up with this radial bar graph. So duplicating our Cloner got rid of the blue ones, and let's go in here and basically invert our scale of our cubes, so that they're pointing inwards. We can play a little bit with their scale, make them a bit smaller, and we'll just adjust to their positions, so that they line up nicely here. Now, we're getting this secondary array that just adds a little more complexity and a little more detail to this element overall. So I'm pretty happy with how this has turned out. We'll just label this guy, and we can move on to our next element. So this is looking pretty good, but what I'd like to do is create an element that gives this a little bit of depth. So we'll take a plane, and I'm going to want to put a pixel texture on this and have it wrap around, almost like a cuff around the perimeter of our layout. So let's get a Spline Wrap going on. We'll make the Spline Wrap a direct child of the plane this time. We'll duplicate a spline and assign that to our Spline Wrap, by dropping it right in here. Now, we're going to go on to the plane and we can adjust its height to get the sort of thickness that we'd like. We should probably also adjust the segments and dial them in or out, and this might actually be something that we can tinker with a little more later on with this piece. So to make this a little more dimensional, I'm going to go into the Rotation area and we're going to adjust the banking by about 90 degrees. Now, we've got something that's sort of a cuff surrounding this entire layout. We can adjust the radius of the spline to get it to fall right where we'd like to. Now, I think we're ready to start tinkering with the texture that we can apply to this guy. So I'm going to duplicate one of our existing textures and apply it, and here I want to get into one of my favorite texturing tools, which is under surfaces and it's the Tile Shader. You go into the Tile Shader, and this is a really powerful shader. There's a lot of different options that you can tinker with here. So if I bump up the grout width, you'll see we're now getting just tiny, little dots as opposed to tiles. But they're stretched out a little bit, so let's bring that U Scale down. I could probably also adjust the Global Scale, as well. There we go. Now, we're getting sort of pixel dot array. Let's get some colors that tie in with everything else, a little red, a little electric blue, maybe start bringing a little purple into the mix. Now, we've got something that's looking pretty cool. It's a little strong. I want to actually take our Tile texture and copy it directly into the Alpha channel, so we can knock this back quite a bit. Now, it's a little bit disappeared altogether. So let's brighten up some of our values in the tiles here. It's starting to come back for us, so I think this is working pretty. I dig where this is going, but I think we could still tinker with this a little more. Let's use the Poly Effects Effector. Put that under the plane, but after the Spline Wrap. This is going to allow us to put a Random Effector on here and kind of break up our pixel grid a little bit. I just want to have it randomized in the Y-axis. It gives it a nice little bit of broken up variation in our pixel dots. Yeah. That's working pretty nicely. Now, we can also go in here and tinker with our segments to make our breakup a little more detailed, or a little more fine. I think that's looking pretty good. I'm going to tinker with the amount of randomized position, and then we can go and play with the falloff. If I set this to a Box falloff, make that box nice and big, and then move it upwards, we can actually set it up so that the breakup of our pixel dots is only happening at the upper portion of our cuff that's wrapping around everything. So here, down at the bottom, it's a little more aligned. But up top, it's breaking up quite a bit and this is starting to look pretty cool. I'm pretty happy with the way these elements are coming together here. So the next thing we're going to do is create some additional details to help fill out our composition. Typically, I argue against just arbitrary elements sprinkled for no reason other than texture or composition. But right now, we're just working on getting the feel of an FUI. So let's have some fun and drop some little pieces in here. Let's grab the Text tool, and we can add some traditional FUI-esque type little message saying, "Access denied." We'll go in and let's set that in DIN, and we don't really need any extrusion to this. So I'm going to turn the depth all the way down, and bring the scale on it down quite a bit. Of course, let's drop this into a Spline Wrap, or drop a Spline Wrap underneath the Text object. We'll duplicate a spline again, and associate that with our Spline Wrap. Now, here, this is where you'll see, we really need to use that Keep Length setting on the Spline Wrap. We're also going to want to go into the Rotation and adjust the banking, so that our type faces upwards. I think we can even go in and play with our radius on our spline. Now, we've got some type that is centered in our element. But rather than just having a message in there, there's actually some other ways that we can use the Type tool to add a little detail to our layout. So throw a little color in there, and let's go in. I've actually prepared a text document with a bunch of dashes and dots, and underscores, and em dashes, and we're just going to paste this text into Cinema here. You'll immediately see, we go from having a message to having something that just looks more like these greeble-y sort of details. Greebles are what we call details that add a sense of scale or texture to an overall layout. Let's play with our radius on this guy, and then we can even go in here and sort of select, and copy-paste a couple more iterations of that element, until it starts overlapping on itself. Yeah. Look at that. We've got it pretty easy to generate and create a bunch of extra little precise-looking details that factor nicely into our radial array. So there's one more greeble-like element that I'd like to add to this. But rather than it just being a bunch of arbitrary dots and lines. I'd like to base it off of a real user interface element. Too lazy to make my own, so I'm just going to take a screenshot of this portion of the C4D interface. We're going to use that as a texture that will apply to a plane. So we'll place our plane in the scene. We'll strap a new material onto it. We'll go into the Luminance channel. We're going to load our image. There's our screenshot that I'd just taken using CMD+SHIFT+4 on a Mac. Looking at the resolution of the image, I'm using that resolution as reference for the scale of my plane. I'm going to play with the number of segments in here. Of course, we're going to Spline Wrap that. I'm just going to go ahead and duplicate an existing Spline Wrap. We can tinker with the banking. But you know what? I think I actually like it where it was, standing up. It's nice having another three-dimensional element in the mix here. We'll give it its own spline. Resize it to fit right where we want it. I'm going to scale down the plane itself within the Spline Wrap. We can even go in here and create a couple iterations of this by cloning it out. Now that I'm cloning it, I have to adjust our hierarchy and where the Spline Wrap sits. So I'm putting it under a Null, alongside the Cloner that has our plane inside of it. I can tinker with the right number of clones and distribution of them, however we like, get the right count in there. What do we want? Do we want them in the Y-axis? How about just in the X-axis? That feels pretty good, maybe just a little bit off in the Y-axis for some variation. There we go. So let's go into the material and let's add a Layer Shader, and this will allow us to go in and above the texture that we had applied, do a Hue/Sat. Go into Colorize. I'm just going to crank the saturation on this to Tinted Red, so that it feels in line with everything else we've created here, an there we go. I've got one last ingredient in our FUI layout to give a little extra detail. So from here, there's a lot of different things that you can play with to take these ideas to the next level. You can play with different rendering techniques using GI or Shallow Depth of Field, or what not right within Cinema. Or play with compositing them in Photoshop and After Effects to get some interesting results. The most important thing, however, is to make sure that these elements are somehow showcasing some useful, purposeful information and data that's relevant to the story or the concept that you're conveying. So don't ever hesitate to tinker with different patterns, different layouts, other pieces of information that can be composed in these radial forms, and have some fun while you're doing it.
Resume Auto-Scroll?