So the 3D rounded rect bug seems it might be much more complicated than I thought…
I thought I would achieve it similar to how the 2D rounded rectangle was done:
// Translate the stroke by (0.5, 0.5) to draw a crisp border
if (!doFill || doStroke) {
curContext.translate(0.5, 0.5);
}
curContext.beginPath();
curContext.moveTo(x + tl, y);
curContext.lineTo(x + width - tr, y);
curContext.quadraticCurveTo(x + width, y, x + width, y + tr);
curContext.lineTo(x + width, y + height - br);
curContext.quadraticCurveTo(x+width,y+height,x+width-br,y+height);
curContext.lineTo(x + bl, y + height);
curContext.quadraticCurveTo(x, y + height, x, y + height - bl);
curContext.lineTo(x, y + tl);
curContext.quadraticCurveTo(x, y, x + tl, y);
if (!doFill || doStroke) {
curContext.translate(-0.5, -0.5);
}
executeContextFill();
executeContextStroke();
It basically takes the parameter for the radius of the roundness passed by the user (tl) and then uses it to draw the 2d rectangle one step at a time. So it moves the index to a specific point. Then draws a line to another point, then a curve, then a line…and so on. It uses the parameters passed by the user to calculate the length of the line or the curve etc.
I thought the 3D rounded rectangle could be done the same way…
First, draw a 2D rectangle with rounded borders, just as in the code above. Then duplicate it and transpose it by the width of the 3d shape, and then draw the curved borders between the vertices just as in the code above.
Well, it turns out its not so simple. Processing-js, as one would imagine, uses OpenGL for 3D rendering. The way it handles 3D shapes is completely different from the way it handles 2D shapes, and so drawing a 3D rounded rectangle is a much more complicated bug. Suffice to say its out of my league, at-least for the purposes of this semester.
So I’ve selected 2 other bugs to work on – #1606 and #1392 More to come in next blog post.
Trackbacks