Examples / Processing Examples / Calling Functions / Heart

# Heart

example processing  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();

`````` 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

• Change the color of the heart. Make it a random color!
• Add somebody’s name to the middle of the heart. Send them a nerdy Valentine!