How to keep array-data exclusive in p5.js-CodePudding

I have 3 arrays key_1, key_2, key_3 they each have 2 values that serve as x & y coordinates. When I run the code I expect 9 circles of 3 different colours but instead the colours get mixed up. I dont know why or how to fix it, any clues

let key_1 = [], key_2 = [], key_3 = [];

function setup() {

  createCanvas(790, 800);

  for (let i = 0; i < 5; i  ) {
    let x = random(0, width);
    let y = random(0, height);
    key_1.push([i, x, y]);
  };

  for (let i = 0; i < 3; i  ) {
    let x = random(0, width);
    let y = random(0, height);
    key_2.push([i, x, y]);
  };

  for (let i = 0; i < 3; i  ) {
    let x = random(0, width);
    let y = random(0, height);
    key_3.push([i, x, y]);
  };
};



function draw() {
  background(0);

  for (let i = 0; i < 5; i  ) {
    //expect 3 red circles, I'll get  2 red circles and 1 either green or blue
    ellipse(key_1[i][1], key_1[i][2], 5, 5);
    fill('rgba(100,0,0,1)'); noStroke()
  };

  for (let i = 0; i < 3; i  ) {
    //expect 3 green circles, I'll get  2 green circles and 1 either green or blue
    ellipse(key_2[i][1], key_2[i][2], 10, 10);
    fill('rgba(0,100,0,1)'); noStroke();
  };

  for (let i = 0; i < 3; i  ) {
    //expect 3 blue circles, I'll get  2 blue circles and 1 either green or blue
    ellipse(key_3[i][1], key_3[i][2], 30, 30);
    fill('rgba(0,0,100,1)'); noStroke();
  };

};

CodePudding user response：

There are a couple issues with this code, first off I recommend having a read at how fill and noStroke work in p5.js.

The issue with noStroke() is that you're repeating yourself multiple times for no reason. Unless a noStroke() is followed by a stroke() or wrapped in a push/pop then it is going to remove all the strokes for all shapes you draw within the draw() loop.

So simply adding noStroke() in your setup() function once should suffice:

function setup() {

  createCanvas(790, 800);
  ...
  noStroke();
};

Next, you are also repeating yourself with the fill(), the same principles apply here. Anything below a fill() will be filled with that colour unless another fill() is added afterwards. So you only need to write it once before you're looping through to draw the circles:

  ...
  fill('rgba(100,0,0,1)');
  for (let i = 0; i < 3; i  ) {
    ellipse(key_1[i][1], key_1[i][2], 200,200);
  };

  fill('rgba(0,100,0,1)'); 
  for (let i = 0; i < 3; i  ) {
    ellipse(key_2[i][1], key_2[i][2], 200, 200);
  };
 ...

Lastly, there's quite a lot of repetition and the i in your arrays doesn't really serve a purpose. One way to solve this would be to create an array of objects which has the colour as well as the x and y. Something like the following:

let circles = [];

function setup() {
  createCanvas(790, 800);
  const red = "rgba(100,0,0,1)";
  for (let i = 0; i < 3; i  ) {
    circles.push({
      x: random(0, width),
      y: random(0, height),
      color: red,
    });
  }

  const green = "rgba(0,100,0,1)";
  for (let i = 0; i < 3; i  ) {
    circles.push({
      x: random(0, width),
      y: random(0, height),
      color: green,
    });
  }

  const blue = "rgba(0,0,100,1)";
  for (let i = 0; i < 3; i  ) {
    circles.push({
      x: random(0, width),
      y: random(0, height),
      color: blue,
    });
  }
  noStroke();
}

function draw() {
  background(0);
  for (let circle of circles) {
    fill(circle.color);
    ellipse(circle.x, circle.y, 200, 200);
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

CodePudding user response：

The code I used:

...
ellipse(key_1[i][1], key_1[i][2], 5, 5);
fill('rgba(100,0,0,1)'); noStroke()
...

Correct method of calling it:

...
fill('rgba(100,0,0,1)'); noStroke();
ellipse(key_1[i][1], key_1[i][2], 5, 5);
...

credit: ggorlen