How would I calculate a progress bar that has numbers going down? Distance wise

Charl_iey · March 20, 2021, 3:23am

I’m working on a payload system for one of my personal projects and the progress bar that displays how far along the payload is isn’t working how I want it to. I’m confused on how I would make it go up when the distance is going down. Is this possible? If so how would I do it?

What’s happening: https://gyazo.com/c314b9c88353e28a739716572b6639ea (I do understand why this is happening, but how would I ‘reverse it’)

Values are based on the original distance and it getting closer: https://gyazo.com/fd9320b671f1e03c35aceb23a22376de

Client script that handles the UI:

Connections.main["Distance"] = objValues.Stage2.Prog:GetPropertyChangedSignal("Value"):Connect(function()
	stageGui.Prog.Holder.Bar:TweenSize(UDim2.new(objValues.Stage2.Prog.Value/objValues.Stage2.Prog.Max.Value,0,1,0),"Out","Sine",0.3,true)
end)

Any help is appreciated.

dthecoolest · March 20, 2021, 3:34am

You can play around with a linear formula to get the result.

For this it should be:

Progress bar = max distance - current distance to goal

Where Max distance is a constant based on how far the payload is initially from it’s goal.

This makes the relation so that when the current distance towards the goal decreases, the right side will increase in value until a maximum value.

Forgot what this is called but it should work.

chexburger · March 20, 2021, 3:38am

@dthecoolest has a close answer, but not quite. What you want is the distance between two points. For this you’re going to use a Magnitude.
Magnitudes require Vector3 values.

local distance = (Vector3 - Vector3).Magnitude

That will provide you the distance between two Vector3 points. Think of it using Pythagorean Theorem on a 2D surface.

If you don’t know much about magnitude or are new to programming, the following additional information may be difficult to comprehend with how it’s worded.

If you want to use a distance to an axis (if you’re not trying to get to a very small point and rather a wall), you can create a Vector3 with Vector3.new() and supply a specific axis location along with the two other axis pieces of the part. Here’s an example of what I did for a distance to the end of a race.

-- Where v = character/player object
local distance = (Vector3.new(v.Position.X,2,99999) - v.Position).Magnitude

In the above example, 99999 is so even passing the line (straight line track) will still put you in first (see how I’m not using the position of the line itself. For your use case, you would use the position of your target point). The Y-position is since the up and down doesn’t matter. You can leave this as the v.Position.Y if you want. The X-position is set based on the object moving to the destination point.
You can switch these around as needed for your certain use case.

dthecoolest · March 20, 2021, 4:02am

Thanks for the explanation for measuring the distance between two points, but if you watched the gyazo and I don’t blame you please don’t use gyazo it doesn’t embed into the dev forum share x is better @Charl_iey has already measured the distance towards the goal.

The question is making a value that goes 0-1 rather than the distance value which goes 1(some distance)-0.

And I believe the official term for it is linear curve fitting:

You plot the points and numbers you want and connect them in order to create a relationship of values that you want.

For this case at the start with the payload a 500 studs away or 20 studs in this desmos graph for visual clarity you would want your gui bar X size to be equal to 0. This leads to your first point: (20,0) x axis = distance of payload from goal, y axis = progress bar x size.

Then the next point is for when the payload reaches the goal 0 studs away, then we would want to set the progress bar to 1 or 100%. This is the next set of points (0,1)

Then using the line equation we can find the equation to get the value of the progress bar depending on where the distance is:

and there’s your formula.

If you notice and multiple the right hand side equation by the max distance 20 you will get this:

which is similar to what I was trying to explain it here