Technical Slop

Circle Grads

Working with solid colours with Displace is pretty easy. Gradients are a bit trickier to understand. You get the full effect, and then it kind of fades.

So, I'll be continueing with the same basic format as Solid, but with a minor difference in the D-Map. This doesn't focus on gradients specifically, but it does give a taste. Right now, this seems like the natural progression from Solid.

Pull, not push. I mantain.

So let's get started before I get over emotional.

Note: Normally I wouldn't bother with exact percentages at this stage and just focus on positive or negate percentages. The exact values are really important right now, so just keep valence (+/-) in mind if you don't want to worry about the math right now. I'll save why 39% for later. Just think in positive/negative for now.

This is the graphic that we will be running Displace on. Not only a circle in the middle, but circles strategically placed around it.

Simple enough.

This is our D-Map. Gray background with a circular White gradient tossed in. A Grayscale D-Map.

Again, simple.

Let's try it with a positive horizontal percentage and see what happens.

You see that? The exact values used were horizontal 39% and vertical 0%.

So... what exactly happened?

Glad you asked. Well, most basic examples like this would say that the black circle in the middle got pushed off to the left, but that's wrong.

Well, let's start with the green circle. The green circle got pulled to the center. Why? Because White grabs from the right with a positive value. So the green circle got pulled to the center where the White in the D-Map is.

So the black circle did get pushed to the left... right?

No. Look at the D-Map again. To the left of the middle of the D-Map are shades of Gray above 128. That means that they will grab from the right, but to a lesser degree than pure White (which is in the middle of the D-Map). So the black circle was actually pulled to the left by the shades of Gray to the left of the center of the D-Map.

Gack. Let's move on with the rest of the basic examples.

Horizontal: -39%
Vertical: 0%

Pulls from the left with negative horizontal and White in the D-Map.

Horizontal: 0%
Vertical: 39%

Pulls from below with positive vertical and White in the D-Map.

Horizontal: 0%
Vertical: -39%

Pulls from above with negative vertical and White in the D-Map.

Are you starting to see how Displace pulls? I hope so. But this has been nothing but White in the D-Map. What happens if the D-Map is Black?

Glad you asked.

Okay, so it's not exactly Black. It's just an Invert of the previous D-Map. Sorry if I confused anybody.

What happens is that the above becomes "upside down" so to speak.

With positive values, Black grabs from the left or from above.

Horizontal: 39%
Vertical: 0%

Pulls from the left with positive horizontal and Black in the D-Map.

Did you catch that? I really hope so. Now, I could go through and show the rest like I did for the first D-Map, but I won't. I'll leave that up to you if you've got the yarbles for it. So, with that said, I won't be taking this one as far as I took Base 1.

I don't know if you've noticed or not, but I've only been using one non-zero value for Displace. Notice that either horizontal or vertical has been 0% in all examples. There is a reason for this. This keeps the Displacement limited to either horizontal or vertical.

Ready to see what happens when we mix it up a bit?

Page 1 - 2 - 3

For those interested, let's chat a bit about 39%.

The graphic that we have been working on here is 200 x 200. The center of the black circle is at 100 x 100. The distance from there to the center of any other circle is 50px. To get Diplace to grab from 50px, use the formula ( 50 / 128 ) * 100. Rounding that off, we get 39%. From there it's just a matter of using positive/negative values for horizontal/veritcal. For a better explaination of the formula, read Math 1 and/or Math2.