如何为p5.js代码添加mouseClicked函数实现点击生成猫图印章

我是编程新手，正在用p5.js做项目，想加个mouseClicked函数，实现点击画布任意位置就生成彩色猫图印章，替代原来随机生成图像的效果。我尝试写了mouseClicked函数，把draw里的代码移过去，把随机位置改成mouseX、mouseY，但没成功。下面是原代码和我改后的代码，求指导：

原代码 #

let img;

function preload() {
  img = loadImage('cat.png');
}

function setup() {
  createCanvas(500, 500);
  img.resize(img.width / 4, img.height / 4);
  
  background(32);
}

function draw() {
  const scalar = .5; 
  const pg = colorize();
  image(pg,
        random(-pg.width, width),
        random(-pg.height, height),
        pg.width * scalar,
        pg.height * scalar);
  pg.remove();
}

function colorize(){
  const pg = createGraphics(img.width, img.height);
  const randomColor = color(random(255), random(255), random(255));
  
  img.loadPixels();
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++){
      let i = (y * 4) * img.width + x * 4;

      if(img.pixels[i + 3] > 0){    
        pg.set(x, y, randomColor);
      }
    }
  }
  pg.updatePixels();
  return pg;
}

尝试修改后的代码 #

let img;

function preload() {
  img = loadImage('sillybandz.png');
}

function setup() {
  createCanvas(500, 500);
  img.resize(img.width / 8, img.height / 8);
  background(50);
  frameRate(60);
}

function draw() {
  const scalar = .5; 
  const pg = colorize();
  // i added another element
  // one image flashing colours in the same place as a center point
  image(pg,
  // middle image loaded will be bigger 
    width / 2 - pg.width / 2,
    height / 2 - pg.height / 2)
    
 image(pg,
        random(-pg.width, width),
        random(-pg.height, height),
        pg.width * scalar,
        pg.height * scalar);
  pg.remove();
}

function colorize(){
  const pg = createGraphics(img.width, img.height);
  const randomColor = color(random(255), random(255), random(255));
  
  img.loadPixels();
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++){
      let i = (y * 4) * img.width + x * 4;

      if(img.pixels[i + 3] > 0){  
        pg.set(x, y, randomColor);
      }
    }
  }
  pg.updatePixels();
  return pg;
}

// attempted to add a mouse click function
function mouseClicked(){
 image(mouseX, mouseY, 5, 5);
 return false;
}

问题分析与修改建议 #

你的修改有两个核心问题：

1. mouseClicked里的image调用参数错误：image()的第一个参数必须是要绘制的图像对象，你只传了位置和大小，没传彩色猫图。
2. draw函数还在持续自动生成图像，这会覆盖你点击生成的内容，也不符合“点击才生成”的需求。

修正后的完整代码 #

let img;

function preload() {
  img = loadImage('cat.png'); // 注意替换成你的图像路径
}

function setup() {
  createCanvas(500, 500);
  img.resize(img.width / 4, img.height / 4);
  background(32);
}

// 去掉自动生成逻辑，画布只在点击时更新
function draw() {
  // 空函数即可，不需要自动绘制
}

function colorize(){
  const pg = createGraphics(img.width, img.height);
  const randomColor = color(random(255), random(255), random(255));
  
  img.loadPixels();
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++){
      let i = (y * 4) * img.width + x * 4;

      if(img.pixels[i + 3] > 0){    
        pg.set(x, y, randomColor);
      }
    }
  }
  pg.updatePixels();
  return pg;
}

function mouseClicked(){
  const scalar = 0.5; // 保持原代码的缩放比例
  const pg = colorize();
  // 让图像中心对准点击位置，更符合直觉
  const drawX = mouseX - (pg.width * scalar) / 2;
  const drawY = mouseY - (pg.height * scalar) / 2;
  image(pg, drawX, drawY, pg.width * scalar, pg.height * scalar);
  pg.remove();
  return false;
}

关键修改点说明 #

• 清空draw函数：不再自动生成随机图像，画布仅在点击操作时更新内容。
• 修复mouseClicked逻辑：调用colorize()生成彩色猫图，按image()的参数要求传入图像对象、位置和大小，同时计算坐标让图像中心与点击位置重合。
• 保留原colorize函数：确保生成的猫图保留透明通道且颜色随机。

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