rounded corners with jit.gl.gridshape plane or jit.gl.sketch


    Nov 26 2012 | 10:17 pm
    Hi!
    I got two questions:
    QUESTION 1: I want to draw: 2 rectangles
    rectangle 1: rectangle with rounded corners, edges stroked with blue and with transparent fill rectangle 2: rectangle with rounded corners, edges stroked with blue and filled with a red color
    QUESTION 2: which way is it the best way of doing this? with jit.gl.gridshape with the plane and setting size with scale or with jit.gl.sketch
    thanks!
    P

    • Nov 27 2012 | 10:37 am
      I had this task with GL. After scouring a all the OpenGL forums I could find, it turns out the GL approach is to draw a lot of triangles.
      I was using jit.gl.sketch and JavaScript anyway, so that's how I implemented the task. For better or worse I do not own the code, so I can't simply post it.
      The basic approach is to divide the rounded rectangle into (1) an inscribed rectangle (with square corners); (2) four rectangles along the edges of the inscribed rectangle; and (3) quarter-circles at the four corners. The last component is where the OpenGL idiom tri_fan is your friend. Otherwise it's a bit of tedious math and a couple of for loops.
      All of this did make me shed a brief tear for QuickDraw, which did all the heavy lifting for RoundRects.
      Hope this is of some help.