Drawing Shapes with Quadratic Vertices

Posted by Jan Vantomme on 05 June 2013.
Tags: ,

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();
vertex2020 );
quadraticVertex50205050 );
quadraticVertex20502020 );
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 mapmouseX0width20200 );

beginShape();
for ( 
int i 07i++ ) {

    float x 
cosstepAngle ) * 100;
    
float y sinstepAngle ) * 100;

    
float cx cosstepAngle - ( stepAngle ) ) * cr;
    
float cy sinstepAngle - ( stepAngle ) ) * cr;

    if ( 
== {
        vertex
x);
    
else {
        quadraticVertex
cxcyx);
    
}
}
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

A flower drawn with quadratic vertices

A pointy curvy star with anchor and control points, drawn with quadratic vertices

A flower star with anchor and control points, drawn with quadratic vertices

Tweet this article