# Smooth gauge neddle animation

I was wondering why my animation of a gauge neddle is smooth even if my angle step is 5-10 deg from frame to frame.
This is of course exactly what my aim is, but trying the same thing in other coding enviroments will make a very noticeable chopped up animation.
Re Peter

Hard to say without seeing the code. Could you post it?

Here it goes, from the draw() function

A class is involved as it shows, but result should be the same

Calculation is for a part circle, so the neddle has a limited movement

I use smooth but this is for the graphics itself I would imagine

``````status[self.id] = status[self.id] + 5
stroke(20, 20, 20, 111)
strokeWidth(5)
lineCapMode(ROUND)
smooth()
v = math.rad((self.v1 - self.v0)/self.range * status[self.id] + self.v0)
line(self.x, self.y ,self.x+self.length*math.cos(v), self.y+self.length*math.sin(v))
``````

Re Peter

Edit. How do you post code ? Paste works not very good

Could you give the values for `self.v1`, `self.v0`, `self.range`, `status[self.id]`?

I assume v is for vinkel und you are Danish.

So much for the small talk.

Analysis:

``````
This is an angle:

v = math.rad((self.v1 - self.v0)/self.range * status[self.id] + self.v0)

Abstraction:

v = delta_v * p + v0

``````

Interpretation: You have a gauge with left stop and a right stop, e.g. with stops at v0 = 210° and v1 = -30° it would look like a common speed gauge (0° points to the right). A step further you have a left stop v0 = 210° and an angle difference to the end stop delta_v = -240°.

Now look at p (like percentage) in my abstraction. p can range from 0 to 1 (or from 0 to 100%). From your formula:

``````
p = status[self.id] / self.range

``````

This means that status[self.id] has a range from 0 to self.range. If you set self.range to delta_v then status[self.id] will correspond to actual angle values, so increasing self[self.id] by 5 will make a 5° step. If range is much larger that delta_v the steps will become smaller. So if you simply chose self.range = 1000 because you just fiddled around, the example gauge would make steps of a bit more than 1°.

Or as Andrew said: Give us the values.

Yes I am Danish… Nicely spottet and the “und” in your sentence Codeslinger reveils some German roots My code is not finished. The neddle just keep on moving beyond the limit so it is just a try out.
The issue, and this is really not an issue since it works perfect, is that there is a very smooth animation even if the step is a 5 deg angle from frame to frame. I do of course change that angle into radians before using it in the sin and cos.
What I would have expected was that the increment should have been 0.1-1 deg to make the animation smooth and depending on the speed wanted.

It just got me puzzeled since I have not been able to do this in the RealBasic or Processing code I have worked on before.
So my question is if there are some sort of in between animation (unlikely I would say) to make this happen.

After all, my calculation is just a simple sin and cos, so nothing fancy should be going on.

For clarification it can be sized down these lines in the draw() function:

v = v+5
Line( x, y, x+ Lmath.cos(math.rad(v)), y+Lmath.sin(math.rad(v)) )

Where L is the length of the line (neddle)

Re Peter

Edit: it should be L times math.cos… etc. but the asterix wil not show!

I’m going for persistence of vision. Here’s my test code.

``````
function setup()
x = WIDTH/2
y = HEIGHT/2
v = 0
L = 100
frame = 0
iparameter("fps",1,60,20)
iparameter("dang",1,180,5)
end

function draw()
frame = frame + 1
background(69, 69, 69, 255)
strokeWidth(5)
stroke(153, 141, 26, 255)
if frame%fps == 0 then
v = v+dang
end
line( x, y, x+ L*math.cos(math.rad(v)), y+L*math.sin(math.rad(v)) )
end
``````

Change that to the code below and you have a more or less smooth animation by the incliment of angle 3:

``````
function setup()
x = WIDTH/2
y = HEIGHT/2
v = 0
L = 100
frame = 0
end

function draw()
background(69, 69, 69, 255)
strokeWidth(5)
stroke(153, 141, 26, 255)
v = v+3
line( x, y, x+ L*math.cos(math.rad(v)), y+L*math.sin(math.rad(v)) )
end
``````