Need Algorithm for Tie Dye Pattern

Question

I am looking for an algorithm or help developing one for creating a tie-dye pattern in a 2-dimensional canvas. I will be using HTML Canvas (via fabric.js) or SVG and JavaScript, but I'm open to examples in any 2D graphics package, like Processing.

Answer 1

I would draw concentric rings of different colors, and then go around radially and offset them. Here's some pseudo-code for drawing concentric rings:

const kRingWidth = 10;
const centerX = maxX / 2;
const centerY = maxY / 2;
for (y = 0; y < maxY; y++)
{
    for (x = 0; x < maxX; x++)
    {
        // Get the color of a concentric ring - assume rings are 10 pixels wide
        deltaX = x - centerX;
        deltaY = y - centerY;
        distance = sqrt (deltaX * deltaX + deltaY * deltaY);
        whichRing = int(distance / kRingWidth);
        setPixel(x, y, myColorTable [ whichRing ]); // set the pixel based on a color look-up table
    }
}

Now, to get the offsets, you can perturb the distance based on the angle of (x, y) to the x axis. I'd generate a random noise table with, say 360 entries (one per degree - you could try more or fewer to see how it looks). So after calculating the distance, try something like this:

angle = atan2(y, x); // This is arctangent of y/x - be careful when x == 0
if (angle < 0) angle += 2.0 * PI; // Make it always positive
angle = int(angle * 180 / PI); // This converts from radians to degrees and to an integer
distance += noiseTable [ angle ]; // Every pixel at this angle will get offset by the same amount.