Smooth gauge neddle animation

General
1

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

2

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

3

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

4

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

5

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.

6

Yes I am Danish… Nicely spottet and the “und” in your sentence Codeslinger reveils some German roots :wink:

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!

7

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
8

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