Drawing a heart

Processing Coding Questions
1

Is it possible to draw a heart shape using the ellipse command and setting the diameter to a function of x?

1 Like
2

coding train just did this. subscribe if you haven’t it’s great.

2 Likes
3

Shameless self-promotion: you can also draw a heart using the curveVertex() function:

1 Like
4

image I am trying to draw this heart using the coding train video you suggested and substituting the formulas with the ones in the image, but it seems like the frequency of the corner/triangle thingies is too low…

5

and instead it looks like this Screenshot%20(1)
I’ve tried changing some coefficients in the formula and stuff but nothing seems to work, any ideas on how I could make it look like the original one?

6

I was just faced with the issue of drawing a heart, and while I realize that there are many solutions, here is mine:

void heart(float x, float y, float s) {
  pushMatrix();
  rotate(radians(45));
  rect(x, y, s, s);
  circle(x, y - s/2, s);
  circle(x - s/2, y, s);
  popMatrix();
}

The result:

heart
heart843×623 3.66 KB

2 Likes
7

I came across a way to draw a heart piecewise out of circle segments, like this:

   ellipseMode(RADIUS);
   float R0 = 150;
   float x1 = -R0;
   float y1 = 3*R0/2;
   float x2 = -R0;
   float y2 = -R0/2;
   float x3 = R0;
   float y3 = -R0/2;
   arc(x1, y1, R0, R0, -PI/2, 0);
   arc(x1, y2, R0, R0, HALF_PI, PI);
   arc(x1, y2, R0, R0, PI, PI+HALF_PI);
   arc(x1, y2, R0, R0, -HALF_PI, 0);
   arc(x3, y3, R0, R0, -PI, HALF_PI);
   arc(x3, y1, R0, R0, PI, PI+HALF_PI);

It looks like this:

heart2
heart2802×827 11.7 KB

Maybe some day I will re-implement this so that it’s an actual shape (that can be filled), but for now, I didn’t want to try and wrap my head around bezierVertex or curveVertex or whatever of that family would be best for this.

1 Like