How to make the progress for interpolateBetween

[Dzsozi (h03)]

Hello!

I would like to get the progress for an interpolation, but I don't know how to do it.

I would like to make a rectangle green when an indicator going through it, so when the indicator is not at the rectangle I would like it to change color to red, and when it's getting closer to the rectangle then make it green. My only problem is that the rectangle is being on the middle and the indicator is going from left to right and then backwards, right to left. Here's what I would like to achieve, I created a gif for this, so it is easier to understand.

I would like to reach this, but can't seem to find a solution. Here's what I currently have:

local sx, sy = guiGetScreenSize()
local sizeX, sizeY = 230, 30
local centerX, centerY = sx / 2 - sizeX / 2, sy / 2 - sizeY / 2
local posX, posY = centerX, centerY
local barRange = 30
local barLeftSide, barRightSide = posX + sizeX/2 - barRange/2, posX + sizeX/2
local barMiddle = (barLeftSide + barRightSide)/2
local indicatorSize = 20
local indicatorX = posX - indicatorSize
local indicatorState = true

local colorProgress = 0

-- inside the render function

if indicatorState then
  indicatorX = indicatorX + 5
else
  indicatorX = indicatorX - 5
end

if indicatorX >= posX + sizeX then
  indicatorState = false
end

if indicatorX <= posX - indicatorSize then
  indicatorState = true
end

-- colorProgress = ?
local colorR, colorG, colorB = interpolateBetween(125, 20, 20, 20, 125, 20, colorProgress, "Linear")

dxDrawRectangle(posX + 2, posY + 2, sizeX - 4, sizeY - 4, tocolor(0, 0, 0, 150))
dxDrawRectangle(barLeftSide, posY + 2, barRange, sizeY - 4, tocolor(colorR, colorG, colorB, 255))

dxDrawImage(indicatorX, posY - indicatorSize, indicatorSize, indicatorSize, "files/indicator.png", 180)

So, how can I get the colorProgress to get the same effect as on the gif?

Edited September 26, 2017 by Dzsozi (h03)

[pa3ck]

I would use the easing type SineCurve, this way probably:

| ---------------- | ----------------- | your line

0,,,,,,,,,,,,,,,,,,150px,,,,,,,,,,,,,,,,,,300px the arrow pointer

0,,,,,,,,,,,,,,,,,,,,,,,,1,,,,,,,,,,,,,,,,,,,,,,,,0 color progress

Red - > Green -> Red  

Red < - Green < - Red

In theory if you start the interpolation from Red to Green (with half the duration of the interpolation of the arrow pointer) with SineCurve, it should automatically start reversing back to 0 (Red) from 1 (Green). Then it should start over. Also, the little arrow pointer should have an interpolation for itself, you can get the progress by using the variable you set up as the progress parameter and when you click, you'd check if the progress is between 0.4 and 0.6, confirming that the pointer is in the green zone. 

So let's say if the arrow pointer takes 5 seconds to reach the end, you'd have the color interpolation set to 2.5 half second with SineCurve going from 255, 0, 0 (red) to 0, 255, 0 (green) and it should reverse from 0, 255, 0 (green) to 255, 0, 0 (red) by itself. You can use the same SineCurve for the arrow, from 0px to 300px (or w/e size you bar is) then it should reverse from 300px to 0px by itself. 

Edited September 27, 2017 by pa3ck

[Dzsozi (h03)]

After I made the topic I was thinking about using math.abs function and making it work with -1, 0 and 1 value, I don't know if this would be easier to do, also, I didn't test it since I made the post. What do you think?

[MaurO^]

On 25/9/2017 at 21:11, Dzsozi (h03) said:

¡Hola!

Me gustaría obtener el progreso para una interpolación, pero no sé cómo hacerlo.

Me gustaría hacer un rectángulo verde cuando un indicador que pasa a través de él, por lo que cuando el indicador no está en el rectángulo me gustaría que cambie de color a rojo, y cuando se está acercando al rectángulo a continuación, lo hacen verde. Mi único problema es que el rectángulo está en el centro y el indicador va de izquierda a derecha y luego hacia atrás, de derecha a izquierda. Esto es lo que me gustaría lograr, he creado un gif para esto, por lo que es más fácil de entender.

Me gustaría llegar a esto, pero no puedo encontrar una solución. Esto es lo que tengo actualmente:

Entonces, ¿cómo puedo obtener el colorProgress para obtener el mismo efecto que en el gif?

this example is from the wiki:

local start = getTickCount()
function dxDrawLoading (x, y, width, height, x2, y2, size, color, color2, second)
    local now = getTickCount()
    local seconds = second or 5000
	local color = color or tocolor(0,0,0,170)
	local color2 = color2 or tocolor(255,255,0,170)
	local size = size or 1.00
    local with = interpolateBetween(0,0,0,width,0,0, (now - start) / ((start + seconds) - start), "Linear")
    local text = interpolateBetween(0,0,0,100,0,0,(now - start) / ((start + seconds) - start),"Linear")
    dxDrawText ( "Loading ... "..math.floor(text).."%", x2, y2 , width, height, tocolor ( 0, 255, 0, 255 ), size, "pricedown" )
    dxDrawRectangle(x, y ,width ,height -10, color)
    dxDrawRectangle(x, y, with ,height -10, color2)
 end

for use: 

sx ,sy = guiGetScreenSize()
        function dxLoad ()
		    local now = getTickCount()
        dxDrawLoading(196*sx/800, 482*sy/600,422*sx/800, 58*sy/600, 196*sx/800 , 450*sy/600 ,1.00*sx/800,tocolor(0,0,0,170),tocolor(0,255,0,170),10000)
		if now > start + 10000 then
		start = getTickCount()
		outputChatBox("Done Downloading",0,255,0)
		removeEventHandler("onClientRender",root,dxLoad)
        end
        end
	addEventHandler("onClientRender",root,dxLoad)

[Dzsozi (h03)]

32 minutes ago, Xero~ said:

this example is from the wiki:

local start = getTickCount()
function dxDrawLoading (x, y, width, height, x2, y2, size, color, color2, second)
    local now = getTickCount()
    local seconds = second or 5000
	local color = color or tocolor(0,0,0,170)
	local color2 = color2 or tocolor(255,255,0,170)
	local size = size or 1.00
    local with = interpolateBetween(0,0,0,width,0,0, (now - start) / ((start + seconds) - start), "Linear")
    local text = interpolateBetween(0,0,0,100,0,0,(now - start) / ((start + seconds) - start),"Linear")
    dxDrawText ( "Loading ... "..math.floor(text).."%", x2, y2 , width, height, tocolor ( 0, 255, 0, 255 ), size, "pricedown" )
    dxDrawRectangle(x, y ,width ,height -10, color)
    dxDrawRectangle(x, y, with ,height -10, color2)
 end

for use: 

sx ,sy = guiGetScreenSize()
        function dxLoad ()
		    local now = getTickCount()
        dxDrawLoading(196*sx/800, 482*sy/600,422*sx/800, 58*sy/600, 196*sx/800 , 450*sy/600 ,1.00*sx/800,tocolor(0,0,0,170),tocolor(0,255,0,170),10000)
		if now > start + 10000 then
		start = getTickCount()
		outputChatBox("Done Downloading",0,255,0)
		removeEventHandler("onClientRender",root,dxLoad)
        end
        end
	addEventHandler("onClientRender",root,dxLoad)

I don't think that this is what I need, also I didn't read your code carefully since I got it working.

Here's the solution (or at least the way I made it working):

if indicatorState then
    indicatorX = indicatorX + indicatorSpeed
else
    indicatorX = indicatorX - indicatorSpeed
end

if indicatorX >= posX + sizeX - indicatorSize/2 then
    indicatorState = false
end

if indicatorX <= posX - indicatorSize/2 then
    indicatorState = true
end

local changeValue = (indicatorSpeed)/(sizeX)
colorProgress = indicatorState and math.min(colorProgress + changeValue, 1) or math.max(colorProgress - changeValue, 0)

local colorR, colorG, colorB = interpolateBetween(150, 0, 0, 75, 150, 20, colorProgress, "SineCurve")

It is working, when the colorProgress is 0.5 (green color) the indicator is at the middle of the bar, no matter what the bar X size is.

Thank you for your help pa3ck and I appreciate you trying to help Xero~.

Edited September 28, 2017 by Dzsozi (h03)