Creative Coding Blog

Maths, coding and art

Creating string art cardioid curves in Processing - variations II

In this article, we will look at some other variants of cardioid curves, following from the previous cardioid curve article.

Concentric circles

This curve is created in exactly the same way as a cardioid curve, but it is formed by connecting each point n to the point n*26. In code terms, we just change one line in the draw function:

void draw()
{
    clear();
    background(32);
    noFill();
    strokeWeight(1);
    
    stroke(255, 0, 0);
    PVector[] p = circlePoints(300, 300, 250, 200);
    joinPoints(p, 26);
}

Here are a couple of others using values of 51 and 76:

These cases are slightly different to the examples in the previous articles. For the cardioid and nephroid curves, it doesn’t matter how many points there are in the circle - we are using 200, but whether we use 50 points or 500 points (or anywhere in between) we would get a similar image. The important thing is that n is 2 (for a cardioid) or 3 (for a nephroid). So long as we don’t have a ridiculously large or small number of points we will get more or less the same image.

For the curves in this section, the things that gives the their character is the fact that 26, 51 and 76 are very close to a simple fraction of the number of points in the circle. If we change the number of points from 200 to, say, 201, we get a very different results. It is worth bearing this in mind as you experiment.

More variants

Here are a couple of other variants that combine concentric circles with cardioid or nephroid curves.

The first uses 199 points in the circle, with a mul value of 51.

The first uses 200 points in the circle, with a mul value of 34.

You can play with different value. You can even use non-integer values for the mul value!