[HELP] Calculate a color red to yellow to green based on scroll 0 to 200

[TrapiS]

For starters, sorry for the mistakes in English, I'm from Brazil.

I am trying to create a Freeroam in DX with the theme of Forza Horizon, in this freeroam I am creating a system of reputation of the player, of standard the reputation will be 100 points a neutral reputation, as it makes friendships within the server the reputation of it will rise, being able go up to 200 points, but if he arranges many discussions between players, his reputation will be decreased and can reach up to 0.

https://prnt.sc/ktm4bc

I wanted to make the "neutral (100)" string change color according to its reputation, being 0 red, 100 yellow, and 200 green, and the space between 0 and 100 is a mixture between red and yellow and so on but I do not know where I could start to make it work.
Could someone help me by showing me some calculation bases or functions that I can use?

Note: I am not using anything gui in the panel, everything being done in dx.

[pa3ck]

Hi, I think the best option would be to use an image instead of dx function.. you can still create the arrow and text with dx functions, but the base gradient would be an image. If you really want to use pure dx, I put together some code that would create the same gradient effect using dxGetTexturePixels & dxSetPixelColor & interpolateBetween

See code below:

addEventHandler ("onClientResourceStart", resourceRoot, 
    function () 
        texture = dxCreateTexture (300, 25)
        local pixels = dxGetTexturePixels (texture)
        for i=0,300 do	 
			local progress = 100 / 300 * i / 100
			local r, g, b = interpolateBetween ( 255, 0, 0, 255, 255, 0, progress, "Linear")
            for j=0,25 do
                dxSetPixelColor (pixels, i, j, r, g, b, 255)
            end
        end
        dxSetTexturePixels (texture, pixels)
		texture2 = dxCreateTexture (600, 25)
        local pixels2 = dxGetTexturePixels (texture2)
        for i=0,300 do	 
			local progress = 100 / 300 * i / 100
			local r, g, b = interpolateBetween ( 255, 255, 0, 0, 255, 0, progress, "Linear")
            for j=0,25 do
                dxSetPixelColor (pixels2, i, j, r, g, b, 255)
            end
        end
        dxSetTexturePixels (texture2, pixels2)
	end)

addEventHandler ("onClientRender", root,
    function ()
         dxDrawImage (300, 300, 300, 25, texture)
		 dxDrawImage (600, 300, 300, 25, texture2)
    end)
	
	
	
	

If you need explanation let me know, I can go into detail, but I think it's pretty straight forward. 

[TrapiS]

Thanks for the answer.

I've already created the gradient texture for the reputation bar, but I'm not sure how to get it to see the color code in a specific position that would be the position where the bookmark would be, I'd have to use dxCreateTexture and dxGetTexturePixels for this?

Gradient Texture:

https://prnt.sc/ktpkoh

Part of the reputation code:

dxDrawText("Sua reputação: " .. localPlayer:getData("reputation_rank") .. "(" .. localPlayer:getData("reputation") .. ")", 1115 + 1, 440 + 1, 1605 + 1, 465 + 1, tocolor(50, 50, 50, 100), 0.60, g_MenuSettings['default']['text']['font_c'], "left", "center", false, false, true, true)
dxDrawText("Sua reputação: #FFC800" .. localPlayer:getData("reputation_rank") .. "(" .. localPlayer:getData("reputation") .. ")", 1115, 440, 1605, 465, tocolor(50, 50, 50), 0.60, g_MenuSettings['default']['text']['font_c'], "left", "center", false, false, true, true)
dxDrawLine(1110 - 1, 485 - 1, 1110 - 1, 500, tocolor(200, 200, 200), 1, true)
dxDrawLine(1590, 485 - 1, 1110 - 1, 485 - 1, tocolor(200, 200, 200), 1, true)
dxDrawLine(1110 - 1, 500, 1590, 500, tocolor(200, 200, 200), 1, true)
dxDrawLine(1590, 500, 1590, 485 - 1, tocolor(200, 200, 200), 1, true)
dxDrawImage(1110, 485, 480, 15, "assets/buttons/tab1_reputation.png", 0, 0, 0, tocolor(255, 255, 255), true)

 

[iMr.WiFi..!]

I made function for you. so from this function you get both of red, green ( Use it with RGB System )
 

function netural( rep )
	local red, green;
	local m_rgb = 255;
	if( rep == 100 )then
		red = m_rgb
		green = m_rgb
	elseif( rep < 100 )then
		red = m_rgb
		green = math.ceil ( ( rep * 2.55 ) )
	elseif( rep > 100 )then
		red = 255 - math.ceil ( ( rep - 100 ) * 2.55 )
		green = m_rgb
	end
	return red, green;
end

 

Edited September 13, 2018 by iMr.WiFi..!

[pa3ck]

I'm not 100% sure I understand what you are looking for, but as far as I can understand, you want to get the color code of a specific percentage.. for example you have a scale of 0-500 reputation, you would need to know the color when the player for example has 350 reputation?

[Jayceon]

local screenX, screenY = guiGetScreenSize()

local repBarTexture = dxCreateTexture("reputation.png")
local barWidth, barHeight = dxGetMaterialSize(repBarTexture)

local maxRep = 200
local currentRep = 100
local repBarPosX = currentRep * (barWidth - 1) / maxRep

local repBarPixels = dxGetTexturePixels(repBarTexture)
local r, g, b = dxGetPixelColor(repBarPixels, math.floor(repBarPosX), barHeight / 2)

outputChatBox("HEX: " .. string.format("#%.2X%.2X%.2X", r, g, b) .. ", R: " .. r .. ", G: " .. g .. ", B: " .. b)

local barX = (screenX - barWidth) / 2
local barY = (screenY - barHeight) / 2

addEventHandler("onClientRender", getRootElement(),
	function ()
		dxDrawImage(barX, barY, barWidth, barHeight, repBarTexture)

		dxDrawRectangle(barX + repBarPosX - 2, barY - 3, 4, barHeight + 6, tocolor(255, 255, 255))
	end
)

 

[TrapiS]

Thanks everyone for the help, but I've already managed to achieve the result I expected using the interpolateBetween function to calculate the color values

local multiplier = sX/820
local scrollPosition = localPlayer:getData("reputation")*multiplier
local progress = 100 / (200*multiplier) * scrollPosition / 100
if progress <= 0.5 then
  rR, rG, rB = interpolateBetween(255, 0, 25, 255, 200, 0, progress*2, "Linear")
elseif progress > 0.5 then
  rR, rG, rB = interpolateBetween(255, 200, 0, 0, 255, 25, progress-0.5, "Linear")
end
local hex = RGBToHex(rR, rG, rB)