javascript - 实现Mandelbrot集的平滑着色

重新创建我为Mandelbrot集着色的方式时，我很难用JavaScript实现它。我目前使用常见的“转义时间”算法： for(px = 0; px < a; px+=scale){ for(py = 0; py < b; py+=scale){ x0 = panX + px/zm; y0 = panY + py/zm; var x = 0; var y = 0; var i = 0; var xtemp; var xSquare = x*x; var ySquare = y*y; while (x*x + y*y <= 4 && i < maxI) { xtemp = x*x - y*y + x0 y = 2*x*y + y0 x = xtemp i += 1; } //coloring var shade = pallete.colourAt(i); c.fillStyle = "#"+shade; c.fillRect(px,py,scale, scale); } }这是我要在full code.处找到的此伪代码的上述部分实现的Wikipedia。  对于屏幕上的每个像素（Px，Py），请执行以下操作：{x0 =缩放的x坐标  像素的像素数（缩放为位于Mandelbrot X缩放比例（-2.5，1）内）y0 =  像素的缩放y坐标（缩放为位于Mandelbrot Y缩放比例中  （-1，1））x = 0.0 y = 0.0迭代= 0 max_iteration = 1000 // //  选择N = 2 ^ 8作为合理的救援半径。而（xx + yy   （1   2 * xy + y0 x = xtemp迭代=迭代+ 1} //用于避免  集合内的点的浮点问题。如果（迭代  max_iteration）{//使用日志删除内部术语的sqrt  简化规则。 log_zn = log（xx + y * y）/ 2 nu = log（log_zn /  log（2））/ log（2）//重新排列电位函数。 //除法  用log（2）代替log（N = 1   整个调色板的范围从//中心到半径2，不是我们的  救援半径。迭代=迭代+ 1-nu} color1 =  调色板[floor（iteration）] color2 =调色板[floor（iteration）+ 1] //  迭代％1 =迭代的小数部分。颜色=  linear_interpolate（color1，color2，迭代％1）图（Px，Py，颜色）  }对此：for(px = 0; px < a; px+=scale){ for(py = 0; py < b; py+=scale){ //zoom factors x0 = panX + px/zm; y0 = panY + py/zm; var x = 0; var y = 0; var i = 0; var xtemp; var xSquare = x*x; var ySquare = y*y; while (x*x + y*y <= 4 && i < maxI) { /*ticks++ xtemp = x*x - y*y + x0 y = 2*x*y + y0 x = xtemp i = i + 1*/ y = x*y; y += y; y += y0; x = xSquare - ySquare + x0; xSquare = Math.pow(x,2); ySquare = Math.pow(y,2); i += 1; } if ( i < maxI ) { log_zn = Math.log( x*x + y*y ) / 2 nu = Math.log( log_zn / Math.log(2) ) / Math.log(2) i += 1 - nu } color1 = palette.colourAt(Math.floor(i)) color2 = palette.colourAt(Math.floor(i) + 1) /***************** I dont know how to implement this..... color = linear_interpolate(color1, color2, iteration % 1) *****************/ c.fillStyle = color c.fillRect(px,py,scale, scale); }}但是我不知道如何实现这部分伪代码：color1 = palette[floor(iteration)]color2 = palette[floor(iteration) + 1] // iteration % 1 = fractional part of iteration.color = linear_interpolate(color1, color2, iteration % 1)plot(Px, Py, color)有人可以帮助我理解并给出实现此方法的方法吗？ (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 假设linear_interpolate函数根据线性函数y = mx + b计算两种颜色之间的颜色。要将线性函数应用于颜色，y是输出颜色，m是两种颜色之间的差，b是起始颜色，x是0到1之间的值。当x为0时，此功能输出起始颜色。 x为1时，此功能输出结束色。为了进行此计算，我们需要采用三个数字形式的颜色。如果需要使用十六进制字符串，则必须将其拆分，并将每个两个字符解析为一个16位数字。我将使用已经是数字形式的调色板，因为它更容易。这是我的三种调色板。我不建议您使用这些颜色，仅用于演示：let palette = [{r:255,g:0,b:0},{r:0,g:255,b:0},{r:0,g:0,b:0}]此第一个函数接受迭代，该迭代可能不是整数，并且可能大于1。它占用了迭代的底限，将其转换为数组索引必须为整数。然后，将迭代的余数除以1，得到0到1之间的数字。function interpolation(iteration) { let color1 = palette[Math.floor(iteration)]; let color2 = palette[Math.floor(iteration) + 1]; return linear_interpolate(color1, color2, iteration % 1);}现在，我们需要创建线性插值函数，该函数必须将线性函数应用于每个颜色通道，并使用floor将它们转换为整数。我有它在rgb（）中返回css颜色，但是您可以将其转换为十六进制。function linear_interpolate(color1, color2, ratio) { let r = Math.floor((color2.r - color1.r) * ratio + color1.r); let g = Math.floor((color2.g - color1.g) * ratio + color1.g); let b = Math.floor((color2.b - color1.b) * ratio + color1.b); return 'rgb(' + r + ',' + g + ',' + b + ')';}以下是代码阴影矩形：https://jsfiddle.net/q7kLszud/ (adsbygoogle = window.adsbygoogle || []).push({});