循环中依次绘制的椭圆固定差异化颜色设置问题

Hey there! Let's break down what's going wrong with your current code and fix it so each monster ellipse has a fixed, unique color that stays consistent even when they reset off-screen.

What's the Issue with Your Current Code? #

Right now, you're reusing a single monster object for all your ellipses. When you draw them in the loop, you're just updating the same object's x position repeatedly—so every ellipse ends up using the exact same monster.color value. Your commented code tried to adjust the color in the loop, but since it's tied to one object, it would change the color for all subsequent draws (not individual ellipses) and even shift colors every frame, which isn't what you want.

The Fix: Individual Monster Instances with Fixed Colors #

The solution is to create separate monster objects (each with their own fixed color) and store them in an array. We'll use the loop index to assign consistent, distinct colors—no random() required, so colors stay fixed forever for each monster.

Here's the modified code with explanations:

var monsters = []; // Array to hold all unique monster instances
var grassColor;
var dirtColor;
var tileSize;
var tileColor;

// Predefine a set of distinct, fixed colors (add more if you want!)
var monsterColorPalette = [
  color(75, 198, 98),   // Soft Green
  color(50, 10, 35),    // Dark Red
  color(0, 200, 155),   // Teal
  color(145, 32, 200),  // Purple
  color(255, 165, 0)    // Orange
];

function setup() {
  createCanvas(400, 400);
  grassColor = color(122, 229, 80, 20);
  dirtColor = color(160, 104, 30);
  tileSize = 25;
  tileColor = color(145, 32, 200);
  
  // Initialize all monsters in setup with fixed positions and colors
  let initialX = 0;
  const startingY = 20;
  const monsterSize = 30;
  const spacing = 50;
  const speed = 1;

  // Spawn monsters until we fill the canvas width
  while (initialX <= width) {
    // Use the array length as an index to pick a fixed color (modulo cycles through the palette)
    const colorIndex = monsters.length % monsterColorPalette.length;
    const newMonster = {
      x: initialX,
      y: startingY,
      size: monsterSize,
      speed: speed,
      color: monsterColorPalette[colorIndex] // Fixed color for this monster
    };
    monsters.push(newMonster);
    initialX += spacing;
  }
}

function draw() {
  background(grassColor);
  stroke(dirtColor);
  strokeWeight(1);
  
  // Draw the tile floor (unchanged)
  for (let tileX = 0; tileX <= width; tileX += tileSize) {
    for (let tileY = 0; tileY <= height; tileY += tileSize) {
      fill(tileColor);
      rect(tileX, tileY, tileSize, tileSize);
    }
  }
  
  // Update and draw each monster individually
  for (let i = 0; i < monsters.length; i++) {
    const monster = monsters[i];
    
    // Move diagonally
    monster.x += monster.speed;
    monster.y += monster.speed;
    
    // Reset position if monster goes off-screen
    if (monster.x > width || monster.y > height) {
      monster.x = 0;
      monster.y = 20;
    }
    
    // Draw the monster with its fixed color
    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);
  }
}

Key Changes Explained: #

1. Monster Array: We replaced the single monster object with an array of unique monster instances. Each has its own x, y, and fixed color property.
2. Fixed Color Assignment: When creating monsters in setup, we use monsters.length % monsterColorPalette.length to pick a color from our predefined palette. The modulo operator cycles through the palette if we have more monsters than colors, ensuring adjacent monsters always have different colors.
3. Independent Movement: Each monster moves and resets on its own, so their positions and colors never interfere with each other.
4. Consistent Colors: Since each monster's color is set once at creation, it stays fixed even when the monster resets off-screen.

Bonus: Custom Color Generation (No Palette Needed) #

If you don't want to predefine colors, you can generate fixed, distinct colors using the monster's index:

// Generate a fixed hue based on the monster's index (smooth color cycle)
const hue = (i * 60) % 360; // Cycles through every 6 monsters
const customColor = color(hue, 100, 70);

内容的提问来源于stack exchange，提问作者D.Quinlan