# Have a heart...❤️

**URL:** <https://discourse.processing.org/t/have-a-heart/47881>\
**Category:** Gallery\
**Created:** [February 14, 2026, 2:29pm UTC](https://discourse.processing.org/t/have-a-heart/47881 "2026-02-14T14:29:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 14, 2026, 2:29pm UTC](https://discourse.processing.org/t/have-a-heart/47881/1 "2026-02-14T14:29:44Z")

</div>

![Have a Heart](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/2/b2189e6f7ba4b01cae472af1ca5eeda0cdaf2f6f.gif)

```processing
  // heart
  float x = 16 * pow(sin(angle), 3);
  float y = 13 * cos(angle)
          - 5 * cos(2 * angle)
          - 2 * cos(3 * angle)
          - cos(4 * angle);

```

> **Code**
>
> ```processing
> // glv
> // 2026-02-14
> // Have a heart
> 
> void setup()
> {
> size(600, 600);
> noStroke();
> frameRate(30);
> }
> 
> void draw()
> {
> background(0);
> translate(width/2, height/2);
> 
> fill(255, 0, 0);
> sequence(2, 50);
>   
> // Optional for creating animated gif
> //saveFrame("/data/line-######.png");
> }
> 
> // framesPerStep: how many frames to wait before increasing the heart detail
> // maxSteps: stop once stepIndex exceeds this value
> 
> void sequence(int framesPerStep, int maxSteps)
> {
> int frameIndex = frameCount - 1;
> int stepIndex = frameIndex / framesPerStep; // advances every N frames
> println(stepIndex);
> 
> makeHeart(stepIndex, 15);
> 
> if (stepIndex > maxSteps)
> {
> makeHeart(150, 15);
> fill(255, 255, 0);
> textSize(60);
> textAlign(CENTER, CENTER);
> text("Happy Valentine's Day!", 0, -240);
> noLoop();
> }
> }
> 
> void makeHeart(int sampleCount, int scale)
> {
> beginShape();
> 
> for (int sampleIndex = 0; sampleIndex < sampleCount - 1; sampleIndex++)
> {
> strokeWeight(2);
> 
> PVector p = heartPoint(sampleCount, sampleIndex, scale);
> vertex(p.x, p.y);
> }
> endShape(CLOSE);
> }
> 
> PVector heartPoint(int sampleCount, int sampleIndex, int scale)
> {
> float angle = sampleIndex * (TAU / (sampleCount - 1));
> 
> // heart
> float x = 16 * pow(sin(angle), 3);
> float y = 13 * cos(angle)
> - 5 * cos(2 * angle)
> - 2 * cos(3 * angle)
> - cos(4 * angle);
> 
> float xScaled = scale * x;
> float yScaled = -scale * y;
> return new PVector(xScaled, yScaled);
> }
> 
> ```

Reference:  
_[Valentine's Day - Wikipedia](https://en.wikipedia.org/wiki/Valentine%27s_Day)_  
_[Parametric equation - Wikipedia](https://en.wikipedia.org/wiki/Parametric_equation)_  
_[Heart symbol - Wikipedia](https://en.wikipedia.org/wiki/Heart_symbol)_

❤

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 26, 2026, 4:44pm UTC](https://discourse.processing.org/t/have-a-heart/47881/2 "2026-03-26T16:44:32Z")

</div>

p5.js version:

https://editor.p5js.org/glv/full/4uY1FovLE

`:)`