Tutorials

/

Processing Tutorials

/

Using Variables

/

Scaling Heart

Previous:

Using Variables

Scaling Heart

❤

This program uses the width and height variables along with the curveVertex() function to draw a heart:

size(300, 300);

background(64);

fill(255, 0, 0);

//left half of heart
beginShape();
curveVertex(width/2, height*2);
curveVertex(width/2, height*.9);
curveVertex(width*.1, height/2);
curveVertex(width/4, height/4);
curveVertex(width/2, height/3);
curveVertex(width/2, height);
endShape();

//right half of heart
beginShape();
curveVertex(width/2, height);
curveVertex(width/2, height/3);
curveVertex(width*.75, height/4);
curveVertex(width*.9, height/2);
curveVertex(width/2, height*.9);
curveVertex(width/2, height*2);
endShape();

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!

Previous:

Using Variables