This repository was humourously named the-heart-of-mathematics as a nod to the cardioid being heart shaped and in dedication to my dearly beloved Juno. I love you with all my heart and I'm never letting you go. All my love chellams!
A cardioid is a two-dimensional plane figure that has a heart-shaped curve. The word cardioid originated from a Greek word, which means heart. By what it looks like, it's easy to see why it's called a heart-shaped curve. What's fascinating is that it's also a form of a sinusoidal spiral but more formally defined as an epicycloid having a single cusp.
The following visuals are what inspired me to take on this passion project of visualising a cardioid.
- This image shows the cardioid as an envelope of pencil lines. This is the main logic that's implemented in the visualisation. A series of points are plotted equally spread across the circumference of the circle and are numbered from
0
ton
. Each point is then connected with the point whose index is twice that of it's index. For example, the point indexed at2
is connected with the point indexed at4
. Point5
with10
. Pointn
with2n
. The indexing of points can overlap with previously indexed points as the numbering laps the entire circumference.
- This image shows how cardioids commonly occur in nature as a caustic of light bouncing of the walls of a circular rim like a mug of coffee.
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, and anyone else.
This project is a visualisation of a cardioid using the JavaScript library p5.js with the main script in the sketch.js
JavaScript file.
The project was created with an extension in VSCode to setup a p5.js project with an index.html
, a style.css
and a folder including the p5.js dependency libraries. The sketch.js
is run using the Live Server extension on VSCode to start a localhost:5000
server to host the script.
- https://p5js.org/ - The best place to learn about p5.js for visualisations using JavaScript.
- https://en.wikipedia.org/wiki/Cardioid - Can't ever go wrong with Wikipedia, am I right? (You most definitely can. The page is legit however.)