1

2 次元キャンバスに絞り染めパターンを作成するためのアルゴリズムを探しているか、アルゴリズムの開発を手伝っています。HTML Canvas (fabric.js 経由) または SVG と JavaScript を使用しますが、Processing などの任意の 2D グラフィック パッケージの例を受け入れます。

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軸に対する（x、y）の角度に基づいて距離を摂動させることができます。たとえば、360エントリのランダムノイズテーブルを生成します（1度に1つ、多かれ少なかれ試してみて、どのように見えるかを確認できます）。したがって、距離を計算した後、次のようにしてみてください。

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 に答える