Drawing Shapes with Quadratic Vertices

Posted on 2013-06-05 by Jan Vantomme
Tags: processing, tutorial

Processing 2 introduces some new functions to draw custom shapes. In Processing 1.x, you could use vertex(), bezierVertex() and curveVertex() to create organic, or geometric shapes. In this article, we'll take a look at a new type of vertex: the quadratic vertex.

To draw a shape with quadratic vertices, you need to start by using a normal vertex, just like you would do with Bézier vertices. The first two parameters are the coordinates of the control point, the last two parameters are the coordinates of the anchor point. This simple piece of code will draw a leaf.

beginShape();
vertex( 20, 20 );
quadraticVertex( 50, 20, 50, 50 );
quadraticVertex( 20, 50, 20, 20 );
endShape();

Let's make drawing with quadratic vertices a little more interesting by creating an interactive shape that transforms from a flower to a curvy pointy star when you move your mouse.

float stepAngle = TWO_PI / 6;
float cr = map( mouseX, 0, width, 20, 200 );

beginShape();
for ( int i = 0; i < 7; i++ ) {

    float x = cos( stepAngle * i ) * 100;
    float y = sin( stepAngle * i ) * 100;

    float cx = cos( stepAngle * i - ( stepAngle / 2 ) ) * cr;
    float cy = sin( stepAngle * i - ( stepAngle / 2 ) ) * cr;

    if ( i == 0 ) {
        vertex( x, y );
    } else {
        quadraticVertex( cx, cy, x, y );
    }
}
endShape( CLOSE );

And finally some images of the sketch. You can hit the D key to toggle debug mode, and show the anchor and control points of the shape. The full source code can be found on GitHub.

A pointy curvy star drawn with quadratic vertices