改变循环中连续椭圆的颜色

Question

所以对于这个项目，我需要更改每个椭圆的颜色，使其与之前的椭圆颜色不同，并保持该颜色，直到它离开 canvas 并重置。我评论了一些我尝试过但似乎没有成功的事情。

这是我的导师给出的提示：当您使用循环创建对象时，每次循环时您的计数变量都是不同的，因此您可以使用它来帮助创建每次循环都不同的颜色出色地。但不要使用随机，因为这会使颜色每次都改变，而不是仅仅确保每个 tile/monster 与其邻居不同但颜色始终相同。例如，如果第一块瓷砖是蓝色的，第二块瓷砖是绿色的，那么它们应该总是蓝色和绿色。

如能提供任何帮助或建议，我们将不胜感激。我已经在这几个小时了，我似乎遇到了障碍，所以我可以用一些新的眼光。

var monster;
var grassColor;
var dirtColor;
var tileSize;
var redDead;
var meanGreen;




function setup () {
  createCanvas(400, 400);

monster = {
    x: 0,
    y: 20,
    size: 30,
    spacing: 50,
    speed: 1,
    color: color(75, 198, 98),
    message: "Moving",
  };


  grassColor = color(122, 229, 80, 20);
  dirtColor = color(160, 104, 30);
  tileSize = 25;
  tileColor = color(145, 32, 200);
 meanGreen = color(0, 200, 155);
 redDead = {
   r: 50,
   g: 10,
   b: 35,
};

}
function draw () {
  background(grassColor);
  stroke(dirtColor);
  strokeWeight(1);

  // #4 Draw a tile floor // Bonus Challenge

for (var tileX = 0; tileX <= width; tileX += tileSize) {
for (var tileY = 0; tileY <= height; tileY += tileSize) {
    fill(tileColor);
  rect (tileX, tileY, tileSize, tileSize);

}
 }




 //#3 Make the monsters move diagonally

monster.x += monster.speed;
monster.y += monster.speed;

if (monster.y > 0){
  monster.x = monster.y;
}


// #2 Use a loop to draw copies of monster along the x-axis


 while (monster.x <= width ) {
  fill (monster.color);
   strokeWeight(1);
   stroke(dirtColor);
   ellipse(monster.x, monster.y, monster.size, monster.size);
  strokeWeight(5);
   stroke(0);
   point(monster.x + 1, monster.y + 3);
   monster.x += monster.spacing;
   //while (monster.x % 3 && monster.x <= width) {
     //monster.color = color(redDead.r, 198, 98);
    //redDead.r += 25;
   //}
 }


if (monster.x > width) {
  monster.x =0;
}

if (monster.y > height){
  monster.y = 0;
}

Answer 1

在您的代码中只有一个 monster。这是一个有属性的对象（x位置，y位置，color，...）你需要的是一个monsters.

的数组

在setup，而不是做

  monster = {
      x: 0,
      y: 20,
      size: 30,
      spacing: 50,
      speed: 1,
      color: color(75, 198, 98),
      message: "Moving",
    };

你应该这样做

monsters = []
spacing = 50
for(var i=0; i < 8; i++) {

  monsters[i] = {
      // each positions will be different
      x: spacing * i,
      y: 20,
      size: 30,
      speed: 1,
      // each colors will be different
      color: color(random(255), random(255), random(255)),
      message: "Moving",
    };
}

现在你有了自己的不同 monsters，在 draw 中，你为 monsters 数组中的每个怪物做你为 monster 对象所做的事情。

for (var i = 0; i < monsters.length; i++) {

  monsters[i].x += monsters[i].speed;
  monsters[i].y += monsters[i].speed;
  // ...
  // all your draw code with monsters[i] insteed of monster
}

很明显，在这个新版本的程序中，您不需要 while 循环和 monster.x += monster.spacing; 行。

这是无需大量修改代码即可实现的方法。但是您真的应该看看 Javascript 中的面向对象编程。这是您正确执行它所需要的，这对于您程序的未来改进非常有用。如果您想对主题有一个简单的概述，请勾选 the 6.1 to 7.3 videos of Daniel Shiffman about it

改变循环中连续椭圆的颜色

Change color of sequential ellipse in a loop

loops

colors

fill

p5.js