# Drawing a heart
**URL:** https://discourse.processing.org/t/drawing-a-heart/8608
**Category:** Coding Questions
**Created:** [February 21, 2019, 11:25pm UTC](https://discourse.processing.org/t/drawing-a-heart/8608 "2019-02-21T23:25:16Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Unstavle](https://discourse.processing.org/u/Unstavle)
#### Post date: [February 21, 2019, 11:25pm UTC](https://discourse.processing.org/t/drawing-a-heart/8608/1 "2019-02-21T23:25:16Z")
Is it possible to draw a heart shape using the ellipse command and setting the diameter to a function of x?
---
### Author:  [@hotfooted](https://discourse.processing.org/u/hotfooted)
#### Post date: [February 21, 2019, 11:35pm UTC](https://discourse.processing.org/t/drawing-a-heart/8608/2 "2019-02-21T23:35:11Z")
[coding train](https://www.youtube.com/watch?v=oUBAi9xQ2X4) just did this. subscribe if you haven’t it’s great.
---
### Author:  [@Kevin](https://discourse.processing.org/u/Kevin)
#### Post date: [February 22, 2019, 2:14am UTC](https://discourse.processing.org/t/drawing-a-heart/8608/3 "2019-02-22T02:14:01Z")
Shameless self-promotion: you can also draw a heart using the `curveVertex()` function:
> **[Valentine's Day Heart](https://happycoding.io/examples/processing/calling-functions/heart)**
>
> Use Processing to draw a heart! ❤
---
### Author:  [@Unstavle](https://discourse.processing.org/u/Unstavle)
#### Post date: [February 22, 2019, 2:25am UTC](https://discourse.processing.org/t/drawing-a-heart/8608/4 "2019-02-22T02:25:08Z")
 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…
---
### Author:  [@Unstavle](https://discourse.processing.org/u/Unstavle)
#### Post date: [February 22, 2019, 2:25am UTC](https://discourse.processing.org/t/drawing-a-heart/8608/5 "2019-02-22T02:25:44Z")
and instead it looks like this 
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?
---
### Author:  [@appas](https://discourse.processing.org/u/appas)
#### Post date: [October 25, 2022, 8:26pm UTC](https://discourse.processing.org/t/drawing-a-heart/8608/6 "2022-10-25T20:26:15Z")
I was just faced with the issue of drawing a heart, and while I realize that there are many solutions, here is mine:
```auto
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:
---
### Author:  [@appas](https://discourse.processing.org/u/appas)
#### Post date: [September 29, 2025, 3:41am UTC](https://discourse.processing.org/t/drawing-a-heart/8608/7 "2025-09-29T03:41:08Z")
I came across a way to draw a heart piecewise out of circle segments, like this:
```auto
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:
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.
---
### Author:  [@appas](https://discourse.processing.org/u/appas)
#### Post date: [February 6, 2026, 3:33am UTC](https://discourse.processing.org/t/drawing-a-heart/8608/8 "2026-02-06T03:33:24Z")
So, I tried implementing filling for the arc heart. After some failures with bezierVertexes and curveVertexes, I became frustrated because simply adding a fill for the shape created by the arcs is so close to being correct - see the image:
Now, I want to ask: is there nothing in Processing, like what I seem to be remembering from OpenGL: an inside/outside “hint” that I can explicitly pass? Or, some other way to manually determine which side of the arc to fill.
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [February 6, 2026, 4:22am UTC](https://discourse.processing.org/t/drawing-a-heart/8608/9 "2026-02-06T04:22:53Z")
As far as I am aware there is no way to fill outside of the arc. I have never seen code for a reverse arc. It sounds like you need a flood fill where everything inside of the lines is filled. I have seen some Processing code for that, but it seems pretty complicated and I always had a difficult time getting it to work correctly. An AI generated example using bezierVertex doesn’t look too bad if you could clean up where the curves meet:
```processing
size(600,600);
beginShape();
strokeWeight(3.0);
fill(color(255, 0, 0));
vertex(50, 70); // Bottom tip
bezierVertex(50, 70, 0, 20, 25, 10); // Left curve
bezierVertex(40, 0, 50, 20, 50, 20); // Top left (center)
bezierVertex(50, 20, 60, 0, 75, 10); // Top right (center)
bezierVertex(100, 20, 50, 70, 50, 70); // Right curve
endShape(CLOSE);
```
Your original idea doesn’t look too bad either. Here’s a resizable example using two arcs and a rotated square:
```processing
int w = 100;
void setup() {
size(600, 600);
noStroke();
fill(color(255, 0, 0));
translate(width/2, height/2);
rotate(radians(45));
arc(0, -w/2, w, w, radians(180), radians(360));
arc(-w/2, 0, w, w, radians(90), radians(270));
rect(-w/2, -w/2, w, w);
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [February 6, 2026, 3:05pm UTC](https://discourse.processing.org/t/drawing-a-heart/8608/10 "2026-02-06T15:05:44Z")
> [@appas](#):
>
> After some failures with bezierVertexes and curveVertexes,
These can be a challenge!
I am comfortable with these now and here is a example to get you started:
```processing
// Author: glv
// Date: 2026-02-06
size(300, 500);
background(0);
// Styles
strokeWeight(4);
stroke(128);
noFill();
textSize(24);
textAlign(CENTER, CENTER);
int idx = 0;
beginShape();
for(int i=0; i<270; i+=16)
{
float th = -TWO_PI/360; // These are in radians = 1 deg. increments
float x = 100*cos(i*th) + 150;
float y = 100*sin(i*th) + 150;
vertex(x, y);
//Generate points. These can also be stored!
int xt = round(x);
int yt = round(y);
println(idx, xt, yt);
idx++;
// Added to show steps
pushStyle();
fill(255, 0, 0);
text(i/16, x, y);
popStyle();
}
for(int i=0; i<180; i+=16)
{
float th = -TAU/360; //
int j = 90-i; // reversed order
float x = 100*cos(j*th)+150;
float y = 100*sin(j*th)+150 +200;
vertex(x, y);
// Generate points. These can also be stored!
int xt = round(x);
int yt = round(y);
println(idx, xt, yt);
idx++;
// Added to show steps
push();
fill(0, 255, 0);
text(i/16, x, y);
pop();
}
endShape();
```
You can modify above to generate:
I later stored the points in an array and plotted one shape:
I did substitute `curveVertex()` for `vertex()` and added extra start and end point (see reference below) and got a smooth heart!
Reference:
_[curveVertex() / Reference / Processing.org](https://processing.org/reference/curveVertex_.html)_
A lot of this was from experience.
`:)`
---
### Author:  [@appas](https://discourse.processing.org/u/appas)
#### Post date: [February 6, 2026, 3:53pm UTC](https://discourse.processing.org/t/drawing-a-heart/8608/11 "2026-02-06T15:53:19Z")
Thank you very much! That’s a nice implementation; I did try a similar approach, with a set of points in an array and a curve running through them, but I guess I gave up before I had the points down pat.
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [February 6, 2026, 3:56pm UTC](https://discourse.processing.org/t/drawing-a-heart/8608/12 "2026-02-06T15:56:10Z")
Hello @appas,
Another approach…
You can create layers:
```processing
size(500, 500);
background(0);
strokeWeight(3);
// Layer 0
//stroke(255, 0, 0);
//left circle
//right circle
// layer 1
translate(100+150, height/2);
fill(255);
noStroke();
rectMode(CENTER);
rect(0, 0, 200, 200 );
// layer 2
// Overlay of rect() + arc()
fill(0);
stroke(255, 0, 0);
ellipseMode(RADIUS);
float R0 = 100;
float x1 = -R0;
float y1 = 3*R0/2.0;
float y2 = -R0/2;
float x3 = R0;
arc(x1, y2+R0+R0/2, R0, R0, -HALF_PI, 0);
arc(x3, y1-R0/2, R0, R0, PI, PI+HALF_PI);
saveFrame("layer.png");
```
Layered on top of circles:
_This can also be done with createGraphics():_
_[createGraphics() / Reference / Processing.org](https://processing.org/reference/createGraphics_.html)_
I’ve picked up plenty of tricks and workarounds over the years!
Have fun!
`:)`
---
### Author:  [@lee](https://discourse.processing.org/u/lee)
#### Post date: [February 8, 2026, 8:16am UTC](https://discourse.processing.org/t/drawing-a-heart/8608/13 "2026-02-08T08:16:55Z")
Hi @svan thanks, I converted your Processing code to [L5](https://l5lua.org) code and it works right out of the box:
```auto
require ‘L5’
w = 100
function setup()
size(600, 600)
noStroke()
fill(255,0,0)
translate(width/2, height/2)
rotate(radians(45))
arc(0, -w/2, w, w, radians(180), radians(360))
arc(-w/2, 0, w, w, radians(90), radians(270))
rect(-w/2, -w/2, w, w)
end
```
