Graphics 扎染图案的需求算法

我正在寻找一个算法或帮助开发一个在二维画布上创建扎染图案。我将使用HTMLCanvas（通过fabric.js）或SVG和JavaScript，但我对任何2D图形包（如处理）中的示例都持开放态度

我会画不同颜色的同心环，然后沿径向旋转并偏移它们。下面是一些绘制同心环的伪代码：

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
    }
}

const kRingWidth=10；
常数centerX=最大x/2；
常数中心Y=最大Y/2；
对于（y=0；y

现在，要获得偏移，可以基于（x，y）到x轴的角度扰动距离。我会生成一个随机噪声表，比如说360个条目（每度一个——你可以尝试更多或更少的次数来查看它的外观）。因此，在计算完距离后，尝试以下方法：

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.

angle=atan2（y，x）；//这是y/x的反正切-当x==0时要小心
如果（角度<0）角度+=2.0*PI；//让它总是积极的
角度=int（角度*180/PI）；//这将从弧度转换为度并转换为整数
距离+=可噪声[角度]；//在这个角度上的每个像素将获得相同的偏移量。

我会画出不同颜色的同心环，然后沿径向旋转并偏移它们。下面是一些绘制同心环的伪代码：

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
    }
}

const kRingWidth=10；
常数centerX=最大x/2；
常数中心Y=最大Y/2；
对于（y=0；y

现在，要获得偏移，可以基于（x，y）到x轴的角度扰动距离。我会生成一个随机噪声表，比如说360个条目（每度一个——你可以尝试更多或更少的次数来查看它的外观）。因此，在计算完距离后，尝试以下方法：

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.

angle=atan2（y，x）；//这是y/x的反正切-当x==0时要小心
如果（角度<0）角度+=2.0*PI；//让它总是积极的
角度=int（角度*180/PI）；//这将从弧度转换为度并转换为整数
距离+=可噪声[角度]；//在这个角度上的每个像素将获得相同的偏移量。

。。。我想，对实际的过程进行建模未免太过分了。带折叠、遮盖和着墨。。。。。。我想，对实际的过程进行建模未免太过分了。用折叠、蒙版和墨水。。。谢谢我来试试看，谢谢！我会试试看它的样子。