1

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

4

1 回答 1

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.
于 2013-01-27T21:05:13.700 回答