Drawing Hollow Circle.

[Loveasparagus]

[IMG]http://i.imgur.com/twCS2aK.jpg[/IMG]

The image above is an example of something I would like to achieve. My only issue I'm having is with the circle, I'm unsure on how to draw a hollow circle with such quality even so I don't know how to make the circumsrance of it grow as the velocity of the player changes.

I plan to use something like this to define its progression:

	if ply and ply:IsValid() and ply:GetVelocity() then
		local defSpeedWidth = (math.min(velocity,2000))/2000
		speedWidth = math.Round(defSpeedWidth*200)
	end

I've made a post like this but it had no response, any help would be greatly appreciated.

[TomatoSoup]

The default drawCircle method is ass. You'll have to develop your own workaround. You should lookup the drawPoly function and parametric formulas.

If you want to draw a hollow circle of inner radius R1, outer radius R2, going from angle 0 to angle 100, centered at position ScrX ScrY, then I'd do something like:

local polys={}
for i=0,100 do
    table.insert(polys, {x = R1*math.cos(i*180/pi)+ScrX, y = R1*math.sin(i*180/pi)+ScrY})
end
for i=100,0,-1 do
    table.insert(polys, {x = R1*math.cos(i*180/pi)+ScrX, y = R1*math.sin(i*180/pi)+ScrY})
end

Then set the color and draw the poly. Although I believe this will start at the horizontal position and then draw down. So you'll want to start it at -90 and go to 10, and vice-versa. I can't do all your work for you.

So basically what you want to do is draw the outer limb of the circle, then draw the inner limb going back around the other side. Think about it like a connect-the-dots page.

[Bobblehead]

[url]https://dl.dropboxusercontent.com/u/104427432/Scripts/drawarc.lua[/url]

Use it like this:
[lua]
local x,y = 20,20 --The center of the circle.
local radius = 10 --Width/2 of the circle.
local thickness = 2 --How thick the hollow circle will be.
local startang,endang = 0,360 --one full circle.
local roughness = 1 --the quality of the cirle. between 1 and 25, with 25 being like a polygon
local color = Color(255,255,255) --color of the circle.

draw.Arc(x,y,radius,thickness,startang,endang,roughness,color)
[/lua]

[editline] Given example [/editline]
Example:
[lua]
r = 200,
t = 20,
x = 400,
y = 400,
sa = 0,
ea = 360,
rough = 1,
c = Color(math.random(255),math.random(255),math.random(255),255)

draw.Arc(x,y,r,t,sa,ea,rough,c)
[/lua]
Output:
[t]http://cloud-4.steampowered.com/ugc/545262558732251258/565D9A1733769F14466480902A68D9CAF783B4AF/[/t]

[Loveasparagus]

[QUOTE=bobbleheadbob;46533574][url]https://dl.dropboxusercontent.com/u/104427432/Scripts/drawarc.lua[/url]

Use it like this:
[lua]
local x,y = 20,20 --The center of the circle.
local radius = 10 --Width/2 of the circle.
local thickness = 2 --How thick the hollow circle will be.
local startang,endang = 0,360 --one full circle.
local roughness = 1 --the quality of the cirle. between 1 and 25, with 25 being like a polygon
local color = Color(255,255,255) --color of the circle.

draw.Arc(x,y,radius,thickness,startang,endang,roughness,color)
[/lua]

[editline] Given example [/editline]
Example:
[lua]
r = 200,
t = 20,
x = 400,
y = 400,
sa = 0,
ea = 360,
rough = 1,
c = Color(math.random(255),math.random(255),math.random(255),255)

draw.Arc(x,y,r,t,sa,ea,rough,c)
[/lua]
Output:
[t]http://cloud-4.steampowered.com/ugc/545262558732251258/565D9A1733769F14466480902A68D9CAF783B4AF/[/t][/QUOTE]

Thank you for all your effort but there's a problem. Im not sure how I would use this to show velocity, I guess I could make a single degree a part but thats all.

[CrashLemon]

Start Angle and End Angle.

[Loveasparagus]

Its works fine, however no matter what start angle I set it is always 270. I need it to start and 0 and finish at 360

[TomatoSoup]

[QUOTE=Loveasparagus;46534610]Its works fine, however no matter what start angle I set it is always 270. I need it to start and 0 and finish at 360[/QUOTE]

You have to tell us more than that. Either his code is broken (which it does not appear to be) or you are using it wrong.

Show us how you are using it.

[AIX-Who]

Is there a way to stop the circle from spinning around when the end angle is smaller than 360?

[Loveasparagus]

[QUOTE=TomatoSoup;46535485]You have to tell us more than that. Either his code is broken (which it does not appear to be) or you are using it wrong.

Show us how you are using it.[/QUOTE]

I have defined the start angle as 0 and the end angle as speedWidthC in this code:

	if ply and ply:IsValid() and ply:GetVelocity() then
		local defSpeedWidth = (math.min(velocity,2000))/2000
		speedWidth = math.Round(defSpeedWidth*200)
		speedWidthC = math.Round(defSpeedWidth*360)
	end

I expect the circle to grow form 0 to 360 to create the full circle. But it grows clockwise from 270 to 270

	local x,y = ScrW()/2,ScrH()/2
	local radius = 100 
	local thickness = 20 
	local startang,endang = 0, speedWidthC
	local roughness = 1 
	local color = Color(50,150,255)
	draw.Arc(x,y,radius,thickness,startang,endang,roughness,color)

[Bobblehead]

[QUOTE=AIX-Who;46535801]Is there a way to stop the circle from spinning around when the end angle is smaller than 360?[/QUOTE]

Yeah, just modify the code for surface.PrecacheArc on line 9-20 of that file. Removing it should do the trick but I haven't tried that.

[QUOTE=Loveasparagus;46535976]I have defined the start angle as 0 and the end angle as speedWidthC in this code:

	if ply and ply:IsValid() and ply:GetVelocity() then
		local defSpeedWidth = (math.min(velocity,2000))/2000
		speedWidth = math.Round(defSpeedWidth*200)
		speedWidthC = math.Round(defSpeedWidth*360)
	end

I expect the circle to grow form 0 to 360 to create the full circle. But it grows clockwise from 270 to 270

	local x,y = ScrW()/2,ScrH()/2
	local radius = 100 
	local thickness = 20 
	local startang,endang = 0, speedWidthC
	local roughness = 1 
	local color = Color(50,150,255)
	draw.Arc(x,y,radius,thickness,startang,endang,roughness,color)

[/QUOTE]

Your code should look something like this:
[lua]
local x,y = ScrW()/2,ScrH()/2
local radius = 100
local thickness = 20
local roughness = 1
local color = Color(50,150,255)
local clockwise = true --Forgot to mention that this is an option.

local velocity = LocalPlayer():GetVelocity():Length2D() --or just length if you want to include falling/rising in the velocity.
local maxVelocity = 2000
local clamped = math.min(velocity,maxVelocity)

local startang = 0
local endang = (velocity/maxVelocity)*360 -- (velocity/maxVelocity) gives a parcent, such as .43; multiply that by 360 to give you the percent that the circle is filled.

draw.Arc(x,y,radius,thickness,startang,endang,roughness,color,clockwise)

[/lua]

[editline] derp [/editline]
I'm testing it and I see what you mean. Let me do some debug.

[editline] derp2 [/editline]
Updated code. I used velocity instead of clamped to calculate the percent. :zoid:

[editline] lerp [/editline]
You could make it look much smoother if you add some math.Approach() or Lerp() to it so it smooths out the changes.

[editline] lerp2 [/editline]
Final code with math.Approach:
[lua]
local oldvelocity = 0
hook.Add("HUDPaint", "arcTest", function()
local x,y = ScrW()/2,ScrH()/2
local radius = 100
local thickness = 20
local roughness = 1
local color = Color(50,150,255)
local clockwise = true --Forgot to mention that this is an option.

local velocity = math.Approach(oldvelocity,LocalPlayer():GetVelocity():Length2D(),36) --or just length if you want to include falling/rising in the velocity.
--local velocity = Lerp(36,oldvelocity,LocalPlayer():GetVelocity():Length2D()) --lerp for the prettiness. I couldn't tell a difference.
local maxVelocity = 800
local clamped = math.min(velocity,maxVelocity)

local startang = 0
local endang = (clamped/maxVelocity)*360 -- (velocity/maxVelocity) gives a parcent, such as .43; multiply that by 360 to give you the percent that the circle is filled.

draw.Arc(x,y,radius,thickness,startang,endang,roughness,color,clockwise)
oldvelocity = clamped
end)
[/lua]