Pixel Array Will Not Work

p5.js Coding Questions
1

We want this game to count the pixels of the red and the blue strokes to see who has more pixels at the end of the game and then display who wins. But for some reason we can only get it to say Blue Wins and it is now lagging. Does anyone know how to get this to properly work?

1 Like
2

Hi,

Regarding your question, this loop is weird:

for (var x = 0; x <= width; x++) {
  for (var y = 0; y <= height; y++) {
    var loc = x + y * width;
    if (pixels[loc] === red(pixelRed) &&
      (pixels[loc + 1]) === green(pixelRed) &&
      (pixels[loc + 2]) === blue(pixelRed) &&
      (pixels[loc + 3]) === alpha(pixelRed)) {
      pixelRedCount++;
    } else if (pixels[loc] === red(pixelBlue) &&
      (pixels[loc + 1]) === green(pixelBlue) &&
      (pixels[loc + 2]) === blue(pixelBlue) &&
      (pixels[loc + 3]) === alpha(pixelBlue)) {
      pixelBlueCount++;
    }
  }
}

Each pixels correspond to 4 elements of the pixels array so you want to multply the loc variable by 4 to have the real starting index of your pixels information.

var loc = (x + y * width) * 4;

Not sure it will solve the problem but it can only improve it :slight_smile:

Regarding the slow down, you are counting the number of pixels on every frame. It is really low performance. Instead, just count the number of pixels at the end of your timer.

EDIT:

The same goes here:

for (var i = 0; i < 801; i++) {
  pixels[i] = red(pixelRed);
  pixels[i + 1] = green(pixelRed);
  pixels[i + 2] = blue(pixelRed);
  pixels[i + 3] = alpha(pixelRed);
}

For the same reason explain above, i should be incremented by 4 at each loop not just by one. Otherwise, you are writing red information on green information and so on and so on

2 Likes
3

This should work:

I changed the things explained above plus add loadPixels() before counting them:

var txt;

function PixelCount(_x, _y, _width, _height) {
	this.x = _x;
	this.y = _y;
	this.width = _width;
	this.height = _height;

	pixelDensity(1);
	loadPixels();

	this.display = function() {
		console.log(pixels.length);
		//align text
		textAlign(this.x, this.y);

		//create black text for pixel count
		fill(0);
		textSize(50);
		text(txt, this.width, this.height);

		var pixelBlueCount = 0;
		var pixelRedCount = 0;
		
		loadPixels();
		
		for (var i = 0; i < 801; i+=4) {
			pixels[i] = red(pixelRed);
			pixels[i + 1] = green(pixelRed);
			pixels[i + 2] = blue(pixelRed);
			pixels[i + 3] = alpha(pixelRed);
		}

		for (var i = 0; i < 801; i+=4) {
			pixels[i] = red(pixelBlue);
			pixels[i + 1] = green(pixelBlue);
			pixels[i + 2] = blue(pixelBlue);
			pixels[i + 3] = alpha(pixelBlue);
		}

		for (var x = 0; x <= width; x++) {
			for (var y = 0; y <= height; y++) {
				var loc = (x + y * width) * 4;
				if (pixels[loc] == red(pixelRed) &&
					(pixels[loc + 1]) == green(pixelRed) &&
					(pixels[loc + 2]) == blue(pixelRed) &&
					(pixels[loc + 3]) == alpha(pixelRed)) {
					pixelRedCount++;
				} else if (pixels[loc] == red(pixelBlue) &&
					(pixels[loc + 1]) == green(pixelBlue) &&
					(pixels[loc + 2]) == blue(pixelBlue) &&
					(pixels[loc + 3]) == alpha(pixelBlue)) {
					pixelBlueCount++;
				}
			}
		}

		console.log(pixelBlueCount);
		console.log(pixelRedCount);

		//different conditions 
		if (pixelBlueCount > pixelRedCount && timer === -1) {
			stroke(77, 81, 255);
			text('BLUE WINS!', 400, 500);

		} else if (pixelBlueCount < pixelRedCount && timer === -1) {
			stroke(255, 81, 77);
			text('RED WINS!', 400, 500);

		} else if (pixelBlueCount === pixelRedCount && timer === -1) {
			noStroke();
			text('TIE!', 400, 500);
		}
	}
}
2 Likes