扎染图案需要算法答案

【问题标题】：Need Algorithm for Tie Dye Pattern扎染图案需要算法
【发布时间】：2013-01-10 09:29:16
【问题描述】：

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

【问题讨论】：

... 我想，对实际过程进行建模有点矫枉过正。具有折叠、遮蔽和上墨功能。 ...

标签： graphics svg vector-graphics fabricjs

【解决方案1】：

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

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

现在，要获得偏移量，您可以根据 (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.

【讨论】：

谢谢！我会试试看，看看效果如何。