我正在寻找一种算法或帮助开发一种用于在二维画布中创建扎染图案的算法。我将使用HTML Canvas(通过fabric.js)或SVG和JavaScript,但我愿意接受任何2D图形包中的示例,例如Processing。
答案 0 :(得分: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.