在 p5.js 中随机分配数组中的颜色

Question

我一直在尝试重新创作 Vera Molnar 的一幅画作，为了增加一点变化，我想在将鼠标拖到 canvas 上时随机化数组中的颜色。但是，我终生无法弄清楚如何做到这一点。以下是对此的许多尝试之一。我可能做错了什么？

关于颜色，颜色的初始顺序是我想保留的，因为它是直接模仿原画的，但是随着鼠标移入canvas/frame，我想触发随机颜色。

感谢您的帮助！

const width = 700;
const height = 700;

let radius = 58;
let len = 8;
let color;
let colors;

function setup() {
  createCanvas(width, height);

  colors = [
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#d31a22",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#e2592f",
    "#d31a22",
    "#9bd6ff",
    "#9bd6ff",
    "#e2592f",
    "#9bd6ff",
    "#9bd6ff",
    "#000000",
    "#000000",
    "#9bd6ff",
    "#9bd6ff",
    "#000000",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#000000",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#d31a22",
    "#e2592f",
    "#000000",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#000000",
    "#9bd6ff",
    "#e2592f",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#9bd6ff",
    "#d31a22",
    "#000000",
    "#000000",
    "#9bd6ff",
  ];
}

function draw() {
  background(255);

  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len; j++) {
      let x = i * 80;
      let y = j * 80;
      color = colors.shift();
      if (color === undefined) {
        color = "white";
      }
      fill(color);
      noStroke();
      ellipse(y + 65, x + 65, radius);
    }
  }

  noLoop();
}

function mouseDragged() {
  color = random(colors);
}

Answer 1

如果要更改特定椭圆的颜色，可能需要根据 mouseX 和 mouseY 坐标计算位置。

在此草图中 - https://editor.p5js.org/yeren/sketches/7SCNsEMo_，当鼠标移到 canvas 上时，我只是简单地洗牌颜色数组。

此外，如果可能，请避免改变数组。

在 p5.js 中随机分配数组中的颜色

Randomize assigned colors in an array in p5.js

javascript

p5.js