A Theory behind Circular Menu

At first I thought it would be very simple to code a circular menu, as there was already a scatterwidget in pymt which would rotate on a gesture, I can shut of translation and scaling gesture and make a simple circular menu out of it, but then how does a rotation work ? well you need two points to rotate a scatter widget to find the angle of rotation, so using a scatterwidget was ruled out.

So i started with a sketch book, and started deciding how my Circular Menu should work and look. Here are the few pointers I noted down

• One finger should be able to rotate the widget, like a swipe
• How do i calculate the angle of rotation when only finger is used ?!!
• Should be a Circular Design which is obvious
• The icons/buttons should be arranged circularly around the circumference of the widget.

I started  with the angle calculation. I thought of the following logical algorithm

1. Save first touch point coordinates
2. For every movement of the same touch point location, find the angle between the first touch point coordinates and the current touch point coordinates with respect to the center of the circle.
3. Add the angle calculated to the total rotation of the widget when you finish the gesture i.e when you remove your touch.
4. Use this total angle calculated to rotate the widget using openGL transformations.

Angle Calculation

The angle calculation can be easily done using pymt’s awesome Vector class, tito showed me how I can use it to do alot of vector calculations which really simplies most of the things i want to do like angle calculation, before using Vector class I intially wrote my own angle calculation code using trignometrics .

Next problem was to arrange the widgets on the circumference. I remembered from my Highschool Trigonometrics that we can find the point on the circumference of a circle given a angle theta using the formula

P(x,y) = (radius*cos(theta), radius*sin(theta))

This worked brilliantly. It arranged the widgets around the Widget in a circular manner, and this would rotate the icons along with the widget. Here is the screenshot of the final widget and here is the final code.

Circular Menu