Значения для цветовых каналов должны находиться в диапазоне [0, 255].Результат f
фрактальной функции Мандельброта - любое число, большинство результатов - числа ниже 1,0, но функция также возвращает даже очень большие числа.
Вы должны сопоставить эти значения сa цвета пикселя.
Рекомендую рассчитать значения цвета в диапазоне [0,0, 1,0]:
cR = Math.min(sqrt(f/100.0), 1);
cG = Math.min(sqrt(f/50.0), 1);
cB = Math.min(sqrt(f/10.0), 1);
Окончательно сопоставить их с диапазоном [0, 255]:
pixels[(x+y*width)*4] = cR * 255;
pixels[(x+y*width)*4+1] = cG * 255;
pixels[(x+y*width)*4+2] = cB * 255;
См. Пример, где я применил изменения к оригинальному коду:
function setup() {
createCanvas(600, 600);
background(200);
noLoop();
}
function draw() {
translate(width/2, height/2);
loadPixels();
for (let x=0; x<=width; x++) {
for (let y=0; y<=height; y++) {
a=map(x, 0, width, -2.5, 1);
b=map(y, 0, height, -1, 1);
z=new Complex(a, b);
f = (mand(z))
//i = map(f,1,100,0,255);
cR = Math.min(sqrt(f/100.0), 1);
cG = Math.min(sqrt(f/50.0), 1);
cB = Math.min(sqrt(f/10.0), 1);
pixels[(x+y*width)*4] = cR * 255;
pixels[(x+y*width)*4+1] = cG * 255;
pixels[(x+y*width)*4+2] = cB * 255;
}
}
updatePixels();
}
var Complex = function(a, b) {
this.re=a;
this.im=b;
this.modSq=(a*a+b*b);
}
Complex.prototype.square = function() {
a=sq(this.re)-sq(this.im);
b=2*this.re*this.im;
return new Complex(a, b);
}
function mand(c) {
oldZ=new Complex(0, 0);
for (let i=1; i<=100; i++) {
newZ=oldZ.square();
newZ.re+=c.re;
newZ.im+=c.im;
//newZ.re+= -0.70176;
//newZ.im+= -0.3842;
oldZ=newZ;
if (oldZ.modSq>=4) {
return i
}
}
return 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>