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

Jitter
Per's icon

Per

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

Peter Castine's icon

Peter Castine

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.