Wpf/WinRT points to draw a heart

Question

I've been drawing various shapes on a canvas and I have managed to figure out the math to do things like hexagons, octagons, and even stars. I can't seem to figure out how to draw a heart. Does anyone have an example of the points needed to draw a heart shape?

Answer 1

I'm not sure if there's a really easy way to plot equations straight on to the Canvas (although you could certainly create the Path from an equation programmatically. .depending on what you want to do with the shape, and where you want to use it, you could just define a Path using the Path Markup Syntax and use some of the built in arcs and curves.

e.g. (quickly threw this one together):

<Canvas>
    <Path Stroke="Red" StrokeThickness="3" 
        Data="M 241,200 
              A 20,20 0 0 0 200,240
              C 210,250 240,270 240,270
              C 240,270 260,260 280,240
              A 20,20 0 0 0 239,200
              " />
</Canvas>

Will create something that looks like this:

Which uses 2 arcs and 2 cubic Bezier curves.

You can read more about the syntax link, but by way of a small explanation (the following draws half the heart, from the dip at the top of the heart to the point at the bottom, counter-clockwise):

M 241,200             // Move to (241, 200)
A 20,20 0 0 0 200,240 // Draw an arc from current position to (200,240), with a size of 20x20 pixels
C 210,250 240,270 240,270 // Draw a cubic Bezier to point (240,270) with control points at (210,250), (240,270).

The next curve, then arc are drawn, arriving back at the top, completing the shape.

You may have to play around a bit to get the result you're after.

Answer 2

There are a number of mathematical equations for heart shapes - some polar, some parametric.

One particularly convincing one is:

x = 16sin^3(t)
y = 13cos(t) - 5cos(2t) - 2cos(3t) - cos(4t)

There's a list of some good ones on the Woflram website.