基本分形着色问题

Question

我正在努力让分形着色背后的数学变得更加舒适，并更好地理解着色算法。我是以下论文：

http://jussiharkonen.com/files/on_fractal_coloring_techniques%28lo-res%29.pdf

论文给出了每个函数的具体参数，但是当我使用相同的参数时，我的结果并不完全正确。我不知道会发生什么。

我正在使用迭代计数着色算法启动并使用以下 julia 集：

c = 0.5 + 0.25i and p = 2 

使用着色算法：

The coloring function simply returns the number of
elements in the truncated orbit divided by 20

还有调色板功能：

I(u) = k(u − u0),
where k = 2.5 and u0 = 0, was used.

调色板在 0 和 1 处为白色，并在中间插入黑色。

并遵循这个算法：

1. 设置z0对应复平面中像素的位置。
2. 通过迭代公式 zn = f(zn−1) 开始计算截断轨道 从 z0 直到 • |zn| > M，或 • n = Nmax， 其中 Nmax 是最大迭代次数。
3. 使用着色和颜色索引函数，映射生成的截断 轨道到颜色索引值。
4. 使用调色板函数确定像素的 RGB 颜色

使用这个我的代码如下所示：

float izoom = pow(1.001, zoom );

vec2 z = focusPoint + (uv * 4.0 - 2.0)  * 1.0 / izoom;

vec2 c = vec2(0.5f, 0.25f) ;


const float B = 2.0;
float l;

for( int i=0; i<100; i++ )
{
     z = vec2( z.x*z.x - z.y*z.y, 2.0*z.x*z.y ) + c;

     if( length(z)>10.0) break;
     l++;

}
float ind = basicindex(l);
vec4 col = color(ind);

并具有以下索引和着色功能：

float basicindex(float val){
    return val / 20.0;
}

vec4 color(float index){

    float r  = 2.5 * index;
    float g = r; 
    float b = g;
    vec3 v = 0.5 - 0.5 *  sin(3.14/2.0 + 3.14 * vec3(r, g, b));
    return vec4(1.0 - v, 1.0) ;

}

论文提供了以下图片： https://imgur.com/YIZMhaa

虽然我的代码生成： https://imgur.com/OrxdMsN

我通过使用 k = 1.0 而不是 2.5 得到了正确的结果，但是我更愿意了解为什么我的结果不正确。当将此扩展到平滑着色算法时，我的结果仍然不正确，所以我想先弄清楚这一点。

如果这不是此类问题的正确位置，请告诉我，我可以将其移至数学堆栈交换。我不确定哪个地方更合适。

Answer 1

您的图像完美地实现了论文中的图 3.3。您发布的另一张图片使用了不同的例程。

您的人物似乎在顶部有那一点透视代码，但删除它，它们应该是相同的。

如果您的反对意见是您使用代码的“0.5 - 0.5 * ...”部分设置的颜色极端。这使得最暗的黑色最初为 0.5，而在示例图像中，您尝试复制最暗的黑色应该是 1，最亮的白色应该是 0。

您正在使白度等于距 0.5 的距离

---

如果你忽略了分形，你会得到一堆可以在 0 和 1 之间归一化的值，并且你会以某些特定的方式为它们着色。显然，您要复制的图像在 0 和 1 之间是线性的，因此将黑色设置为 0.5 是不正确的。

o = {
    length : 500,
    width : 500,
    c : [.5, .25], // c = x + iy will be [x, y]
    maxIterate : 100,
    canvas : null
}

function point(pos, color){
    var c = 255 - Math.round((1 + Math.log(color)/Math.log(o.maxIterate)) * 255);
    c = c.toString(16);
    
    if (c.length == 1) c = '0'+c;
    o.canvas.fillStyle="#"+c+c+c;
    o.canvas.fillRect(pos[0], pos[1], 1, 1);
}

function conversion(x, y, R){
    var m = R / o.width;
    var x1 = m * (2 * x - o.width);
    var y2 = m * (o.width - 2 * y);
    return [x1, y2];
}

function f(z, c){
    return [z[0]*z[0] - z[1] * z[1] + c[0], 2 * z[0] * z[1] + c[1]];
}

function abs(z){
    return Math.sqrt(z[0]*z[0] + z[1]*z[1]);
}

function init(){
    var R = (1 + Math.sqrt(1+4*abs(o.c))) / 2,
        z, x, y, i;

    o.canvas = document.getElementById('a').getContext("2d");
    for (x = 0; x < o.width; x++){
        for (y = 0; y < o.length; y++){
            i = 0;
            z = conversion(x, y, R);
            while (i < o.maxIterate && abs(z) < R){
                z = f(z, o.c);
                if (abs(z) > R) break;
                i++;
            }
            

            if (i) point([x, y], i / o.maxIterate);
        }
    }
}

init();

<canvas id="a" width="500" height="500"></canvas>

通过：http://jsfiddle.net/3fnB6/29/