Introduction
Several weeks ago, I need to implement a game screen for user to choose a level. At that time, I read some PID controller is a control loop feedback mechanism which generate an output to a system based on the difference between a measured value and a desired value:
where f(t) is the output apply back to the system, e(t) is the difference between a measured value and a desired value and P, I, D are tuning variable for controlling the behavior. More information can be found on this post.
Using PID Controller
In the UI, the user can drag on the view to choose the level, when the user swipe on the icons, they will scroll according to velocity and acceleration. The output of PID Controller is used to control the acceleration so that there will always be an icon staying in the middle of the screen when the system becomes stable. Below is the screen shot of the ported code into WebGL, you can view the demo here (need a WebGL enabled browser to view).
Tuning the PID variables
The behavior of the scrolling can be controlled by tuning the constants: P, I, D. The effects of changing the 3 constants can be summarized as below:
| Summary of the effects of PID constant from Wikipedia |
You can play around with the 3 Constants with the input text field in the demo if you have a WebGL enabled browser.
Conclusion
Using PID Controller to manage the system is convenient but it is a bit tricky to tune the PID constants. It is easier to tune the constant one by one and referring to the above table. The source code of my implementation can be downloaded here.
Reference:
[1]: /2011/08/07/animation-using-closed-loop-control/
[3]: /2011/02/27/webgl-part-2-in-the-beginning-there-was/
[4]:
