Pixels [] в p5.js не возвращает правильные значения цвета после Canvas reszize ⇐ Javascript

[Anonymous]

Я работаю над генеративным художественным проектом и, кажется, сталкиваюсь с проблемой с функцией пикселей. Часть алгоритма искусства включает в себя рисование кругов (то есть деревьев) в определенных частях холста, где показывает только цвет фона. Я использую массив пикселей, чтобы сравнить цвета пикселей в холсте с цветом фона для этого. Проблема, которая у меня есть, заключается в том, что когда я изменяю размер холста и впоследствии повторно вытягивает, некоторые круги исчезают, в то время как другие появляются случайным образом. Это даже происходит в областях холста, где абсолютно ясно, что фон существует. Из моего исследования до сих пор кажется, что массив пикселей не возвращает цвета для некоторых пикселей, которые непосредственно соответствуют цвету фона, даже если они явно должны. < /P>
Код для этой конкретной функции приведен ниже. Обратите внимание, что я подтвердил, что вероятность части алгоритма не является виновником здесь. Я также заставляю случайную функцию с последовательным значением, поэтому все должно быть таким же, когда она перепрыгивает после изменения размера. Проблема связана с проверкой цвета. Есть идеи? Lang-HTML PrettyPrint-Override ">

Код: Выделить всё

// Function to draw random trees in areas where the background color exists and
// when a point exists within a certain probability distribution of a line or
// set of lines
// bg: background color
// treeColor: the color of trees to be drawn on the canvas
function drawTrees(bg,treeColor) {

fill(treeColor);
noStroke( );

// Generate an array of lines that will be used to determine where to plot the tree distributions
let numClusters = 0;
if (trees > 0) {
numClusters = Math.floor(random(3,8));
}
let lines = new ArrayList();
for (let l = 0; l < numClusters; l++) {
let p0x = random(0, 1) * canvasMin;
let p0y = random(0, 1) * canvasMin;
let p1x = random(0, 1) * canvasMin;
let p1y = random(0, 1) * canvasMin;
let p0 = new Point(p0x, p0y);
let p1 = new Point(p1x, p1y);
lines.add(new Line(p0,p1));
}

// Iterate through all pixels, per treeSpacing value
loadPixels();
for (let i = 0; i < 10000; i += 1) {

// Set a random point
let xPixP = random(0, 1) * canvasMin;
let yPixP = random(0, 1) * canvasMin;
let xPix = Math.round(xPixP);
let yPix = Math.round(yPixP);

// Check if the pixels around the point are only the background color
let clear = true;
let d = pixelDensity();
let clearance = Math.floor(canvasMin/200);
for (let j = -clearance; j < clearance; j++) {
for (let k = -clearance; k < clearance; k++) {
let index = 4 * d * ((yPix + j) * d * canvasMin + xPix + k);
let cR1 = pixels[index];
let cG1 = pixels[index + 1];
let cB1 = pixels[index + 2];
let cA1 = pixels[index + 3];
let cR2 = red(bg);
let cG2 = green(bg);
let cB2 = blue(bg);
let cA2 = alpha(bg);
if (cR1 != cR2 || cG1 != cG2 || cB1 != cB2) {
clear = false;
}
}
}

// Check closeness to each line
let maxDist = canvasMin / random(4, 40);
let prob = 0;
for (let l = 0; l < lines.size(); l++) {
let distFromL = getDistanceFromLine(lines.get(l), new Point(xPixP,yPixP));
if (distFromL < maxDist) {
prob = min(prob + (1 - (distFromL / maxDist)), 0.7);
}
}

// Draw the tree if the probability is within a certain range and the pixels
// around the point are only colored with the background color
let randomCheck = random(0,1);
if (clear && randomCheck < prob) {

// Draw the trunk
let trunkSize = canvasMin/200;
circle(xPix,yPix,trunkSize);

// Draw the bunches of leaves
for (let i = 0; i < Math.floor(random(4,7)); i++) {
circle(xPix + random(-trunkSize/2,trunkSize/2),yPix + random(-trunkSize/2,trunkSize/2), random(trunkSize,trunkSize*2));
}
}
}
}

Подробнее здесь: https://stackoverflow.com/questions/794 ... vas-resize