P5JS技术问询：如何为网格中每个像素单元格独立存储并保持颜色值

我一眼就看出问题所在了——你的代码目前只是用storeItem记录了单元格是否被点击（存的是true/false），但没有存储每个单元格对应的颜色值。所以当你切换颜色选择器时，所有被标记为true的单元格都会直接使用当前选中的颜色，自然就全部同步变色了。

核心修改思路 #

我们需要把每个单元格的具体颜色值存储起来，而不是简单的布尔标记。这样绘制时，每个单元格会读取自己存储的颜色，而不是依赖当前颜色选择器的颜色。

修改后的完整代码 #

let sizewidth = 17 
let sizeheight = 17 
let col; // 提前声明变量，代码更规范

function setup() { 
  createCanvas(sizewidth*30, sizeheight*30); 
  col = createColorPicker('#000000'); 
} 

function draw() { 
  background(255); 
  for(let y = 0; y < sizeheight; y++){ // 声明局部变量，避免全局污染
    for(let x = 0; x < sizewidth; x++){ 
      const cellKey = `${x}:${y}`; // 用模板字符串简化key生成
      const cellColor = getItem(cellKey); 
      
      // 有存储颜色则填充对应颜色，否则不填充
      if (cellColor) {
        fill(cellColor); 
      } else {
        noFill();
      }
      
      rect(x*30, y*30, 30, 30); 
    } 
  } 
} 

function mouseClicked(){ 
  // 直接计算点击的单元格坐标，替代双层循环遍历，效率更高
  const x = floor(mouseX / 30);
  const y = floor(mouseY / 30);
  
  // 确保点击在网格范围内
  if(x >= 0 && x < sizewidth && y >=0 && y < sizeheight){
    const cellKey = `${x}:${y}`;
    // 存储当前选择的颜色，而非布尔值
    storeItem(cellKey, col.color()); 
  }
} 

function keyTyped(){ 
  if(key === "c"){ // 严格相等判断更严谨
    clearStorage(); 
  } 
}

关键修改点说明 #

1. 存储颜色而非布尔值：点击单元格时，我们把当前颜色选择器的颜色（col.color()）存入storeItem，替代原来的true。这样每个单元格都有独立的颜色记录。
2. 绘制时读取存储的颜色：在draw循环中，先获取单元格存储的颜色，存在则用该颜色填充，否则保持无填充状态，彻底摆脱对当前颜色选择器的依赖。
3. 优化点击检测逻辑：原来用双层循环遍历所有单元格判断点击位置，现在直接通过mouseX/mouseY计算对应坐标，代码更简洁高效。
4. 规范变量声明：给循环变量加上let声明为局部变量，避免全局变量污染；用模板字符串简化单元格key的生成，可读性更强。

这样修改后，你切换颜色选择器时，已绘制的单元格会保持原有颜色，新绘制的单元格才会使用当前选中的颜色，完美解决你的问题！

内容的提问来源于stack exchange，提问作者Melandin