examples / processing / calling-functions / heart

Heart

example processing

:heart::heart:

This program uses the curveVertex() function to draw a heart:

size(300, 300);

background(64);

fill(255, 0, 0);

beginShape();
curveVertex(150, 600);
curveVertex(150, 270);
curveVertex(30, 150);
curveVertex(75, 75);
curveVertex(150, 100);
curveVertex(150, 300);
endShape();

beginShape();
curveVertex(150, 300);
curveVertex(150, 100);
curveVertex(225, 75);
curveVertex(270, 150);
curveVertex(150, 270);
curveVertex(150, 600);
endShape();

heart

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The curveVertex() is a little weird, because it’s not exactly a “direct” drawing function like the ellipse() or rect() functions. With the ellipse() and rect() functions, you pass in parameters and Processing draws a shape at those coordinates. But with the curveVertex() function, it’s more like you’re steering the curves than directly drawing them. The first call to curveVertex() sets up an anchor point, but the curve doesn’t actually start drawing until the second call to curveVertex(). It will curve around the points you pass in, and the last call to curveVertex() is another guiding point that determines which direction the line should curve.

If none of that makes sense, that’s okay. It takes me a long time to understand curves too (you should have seen all the misshapen hearts I drew trying to figure this example out). As always, try passing in different parameters to see what happens!

Tweak Ideas