Sorry for the delayed blog post, I’ve been busy shifting our house and getting adjusted to the environment here. First of all I would like to say that i passed the mid terms. Now im coding for the next milestone, The Final Evaluation. I will be writing about a report about my mid terms and a complete blogpost on Layering system that I implemented, how my mentor Matheiu showed me ideas to think in terms of software engineering. He guided me about using Design Patterns for layering system. Stay tuned for that blog 🙂
It’s been long since I last posted about my GSOC work, so today I’ll be writing about how I achieved the color picker. There are several points that comes to the mind when we thing about the colorpicker.
- How to achieve the gradient color selection area
- Use a pre-rendered image ?
- Generate using computer algorithm ? If what are the appropriate opengl calls?
- What is the algorithm for picking the color from the location ?
- Use opengl methods to pick the pixel from the point where the user touches ?
- Or use some algorithmic technique to determine where the user is touching local to the gradient and then calculate the appropriate RGB values
There is a humongous list of resources available for Color pickers especially AJAX based, but my problem was different, I wanted a Quarter Circle Color Picker 🙂 , nowhere in the internet did i find one single open-source quarter circle color pickers, but hey no pain no gain :), so I set out to create a Opengl rendered quarter circle color picker with algorithmic based color picking.
1. Rendering the Gradient Circle
So my first goal was to create a opengl rendered quarter circle, well its very easy to generate a single color circles in opengl like the ones that I have used in my previous widgets, Rendering a gradient one is a very hard task. I know that opengl allows to blend colors by specifying different colors at different vertices of a polygon, but how can one do the same in a circle ?!!, circle has no vertex edges.
I did not find any way to get around this problem using Circle render, so the alternative solution was to render thin triangles and arrange it in the form of a fan, and when i looked around the net for this one, to my surprise there was one opening call to make such a polygon using triangle fan.
def drawPartialCircle(pos=(0,0), radius=100): with gx_begin(GL_TRIANGLE_FAN): glColor3f(0,0,1) glVertex2f(0,0) for angle in range (90,185,5): glColor3f(sin(radians(angle-90))*sqrt(2),cos(radians(angle-90))*sqrt(2),0) glVertex2f(int(cos(radians(angle))*radius),int(sin(radians(angle))*radius))
So in the above algorithm i’ve chosen the angle range from 90 to 185 because i want it to appear at the bottom right corner. So what the algoritm does it,
- It generates 5 degree triangles to form a quater circle.
- The center of the circle is blue so the other two edges of the two radii will be red and green respectively.
- The mid way of the circumference must be yellow that is RGB =>(1,1,0) , so to we know that only at 45 degrees sin 45 = cos 45.
- sin 45 = 1/sqrt(2), so to obtain 1 at the center we multiply it by sqrt(2), so we get (1,1,0) at the center.
If you have any queries regarding this algo, feel free to comment.
2. Calculating color at the touch point
I used the similar sine cos formula to calculate the RGB values, The R and G values varies according to the angle made by the line joining the center and the touch point with the horizontal line. Whereas the blue value is a function of the distance touch point from the center. So here goes the algorithm
def calculate_color(self): b = 1-self.point_distance/self.size r = (sin(radians(self.point_angle))-b)*sqrt(2) g = (cos(radians(self.point_angle))-b)*sqrt(2)
where self.size is the radius of the circle.
3. Hue and Saturation
As you can see in the rendered quarter circle above there is no range of black nor white, so this posed a new challenge to use a slider to make a hue saturation variation, HSV[Hue, Saturation, Value] is an alernative representation of RGB color space, something similar to Rectangular to Polar coordinates conversion.
Since I need to vary the color from White>>Color>>Black, the variation has to be done in two steps
- White >> Color variation, which is nothing but variation of the Saturation, here saturation = 0 implies White
- Color >> Black which is variation of the Value field
Thomas (My mentor) pointed me to this really nifty function in core python rgb_to_hsv and hsv_to_rgb , which converts between the colorspaces with ease. So I divide the slider into two portions lower limit to middle value for saturation, middle value to upper limit for Value. I chose to take 2 as the maximum range of the slider, so it varies from 0 to 2, and middle i get 1. I developed the following algorithm.
value = rgb_to_hsv(self.slider.slider_color,self.slider.slider_color,self.slider.slider_color)
h,s,v = value,value,value
if self.slider._value <= 1.0: s = self.slider._value else: v = 2-self.slider._value self.slider.slider_color = hsv_to_rgb(h,s,v) [/sourcecode] Overall this entire widget was very complex to build, but I got to learn alot from this tiny project. If you have queries regarding any of the algorithm that I developed, or if you have suggestions of better algorithm, or anything at all feel free to comment :), it will definitely help me make this project better
Sliders are very nifty UI control tool, they provide some sort of natural feedback to the user visually when they interact with it. Especially in a touch user interface sliders are very useful. In PyMT we already have Horizontal and Vertical rectangular sliders.
But I needed something different, a circular slider for the next widget that I wanted to develop a Quarter Circle color picker. So I sat down with the sketchbook again and noted down the following pointers
- The Slider must provide a way to limit the angle of the slider i.e not full 360 always, meaning it should provide me a way to select 60 Degree Circular sliders too.
- Must be rotatable so that it can be set in any direction.
- Must provide a way for customizations like color, size etc.
- Must provide all features of a regular rectangular slider.
The three main things that i had to take care when designing the algorithm was that
- Drawing the Ring in Opengl
- Angle Calculation to fill in the slider as you touch it
- Collision detection, as the existing collision detection code was for rectangular widgets
Let start with each part one at a time
1. OPENGL Ring
I was wondering how I can make a ring like structure in opengl, I thought maybe make two circles one of the outer radius another of the inner radius, with the difference between the two being the thickness of the ring. But a bit of browsing on the internet revealed that there is a OPENGL call to draw the exact same thing, and its very customizable too.
void gluPartialDisk( GLUquadric* quad, GLdouble inner, GLdouble outer, GLint slices, GLint loops, GLdouble start, GLdouble sweep )
you can read more about gluPartialDisk here. This really simplified the drawing part of the slider.
2. Angle Calculation
The angle calculation was easy once i found out how to do it,
- First Make a vector of the one edge of the slider w.r.t the center.
- Now as the touch is moved on the slider, take one more vector at the current touch location w.r.t to the center
- Find the angle between the two vector, this is the fill angle for the slider
3. Collision Detection
Next problem was collision detection algorithm, since the sliders where in a arc form, the collision detection has two boundary conditions and which itself formed the algorithm for collision detection.
- The distance of touch from the center of the slider must be lesser than the outer radius and lesser than the outer radius-thickness of the slider
- The Angle created by the current touch location and the vertical axis must be greater than the angle of the start edge of the slider with the vertical axis and lesser than the angle of the end edge of the slider with the vertical axis
Using the above two conditions I wrote the following code which works very nicely
def collide_point(self, x, y): #A algorithm to find the whether a touch is within a semi ring point_dist = Vector(self.pos).distance((x, y)) point_angle = Vector(self.radius_line).angle((x - self.pos, y - self.pos)) if point_angle < 0: point_angle=360+point_angle if point_angle <= self.sweep_angle and point_angle >=0: return point_dist<= self.radius and point_dist > self.radius-self.thickness
Here is a screenshot of the circular sliders, this was taken by my other mentor Thomas, see how they can be stacked over one another and still the collision detection algorithm can work flawlessly
You can read more about the widget here. In the next blog i’ll be posting about Color Wheel, and that involves alot of trigometric equations 🙂 .
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
- Save first touch point coordinates
- 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.
- Add the angle calculated to the total rotation of the widget when you finish the gesture i.e when you remove your touch.
- Use this total angle calculated to rotate the widget using openGL transformations.
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.
Lately I’ve been coding a lot, especially on NUIPaint, but I couldn’t blog because of my Final exams and plus blogging uses up too much of precious development time 😛 , so I tend to blog less. Anyways in the next few days I’ll be posting about all the theory behind the new widgets that I developed. The Opengl Algorithms, Trigonometric equations and other stuff. Hopefully this will be useful for somebody, as i dint now find much information and had to code on my own. Following are the widgets of which I’ll be blogging about
- A Circular Menu
- A Circular Slider
- A Quarter Circle Color Picker
So Last three days i’ve been working continously on the GSOC project. I Manage to achieve the following
- A toolbar with dummy icons in place, but two of the buttons zoom and brush are activated. They are used to switch between the two modes of the canvas Widget
- A Canvas Widgets, its a FBO based workarea/canvas, it has two modes of operation
- Zoom mode: In this mode the canvas can be altered using multitouch gestures, it can be translated,rotated and scaled
- Paint Mode: In this mode any touch on the canvas draws a circle using a default brush and color
- I also developed a file browser widget, its a file browser with kinetics and it generates appropriate icons for each file type. There is alot to improve on this widget, like provide filters, several buttons, and generate events on launch and exit as suggested by my mentor Matheiu.
I’m getting the hang of this, several new kinds of widget requirements are coming into picture which is great 🙂 . I have attached a screenshot of the work in progress
Finally i’m over with the college project and now on i can concentrate on GSOCing, i’m relieved no more h/w work is involved. There are several updates which occured during the long absense of my posting on this blog.
- Mathieu Virbel a.k.a tito is also my GSOC mentor wohoo. So i got the two best Computer Graphics mentors a student can get. Now i call myself double lucky 😉 . I have already know them very well, and i’ve been learning under them for nearly 3+ months now. Wohhoo
- Got a free gift from Google, a years subscriptions to ACM digital library. thank you google.
As for coding, The source code is here http://code.google.com/p/nuipaint/source/checkout, i’ll keep this blog updated regarding my endevours as usual now that my college project is done 😛