Heart


Heart


February 14, 2017

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

  • 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!

Calling Functions Examples

Comments

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!