Tickle 示例：p5.js - 使用图像而不是文本

Question

我试图查看7.8: Objects and Images - p5.js Tutorial 以重新创建This example

我想从鼠标悬停时随机移动的图像开始。 有人可以指导我如何实现这一目标吗？

我尝试过的东西，但它根本不是同一种互动。示例交互简单，超级好，振荡幅度很平滑。

function preload() {
  stone = loadImage("stone.png");
  imageMode = center;
}
function setup() {
  createCanvas(1200, 800);

}

function draw() {
  background(42,44,45);


 if((200<mouseX)&&(900>mouseX)&&(250<mouseY)&&(650>mouseY)){
 this.x = random(width*0.5, height*0.5);
    this.y = random(height*0.5, width*0.5);

    this.speed = 0.0001 * (mouseX/ mouseY);

    this.x += random(-this.speed, this.speed);
    this.y += random(-this.speed, this.speed)
   x += random(-3, 3);
    y += random(-3, 3);

  image(stone,this.x + (mouseX / (height)) ,this.y + (mouseY / width), 400, 300);
 }
  else{
  image(stone,width*0.5,height*0.5, 400, 300); }
}

Answer 1

您在编辑器链接中的代码与您问题中的代码略有不同。我将根据编辑器中的代码进行回答。这是您的代码正在执行的操作：

1. 预加载图片
2. 设置画布大小
3. （渲染帧）
4. 将背景设置为 (42, 44, 45)
5. 使用CENTER图片模式
6. 测试鼠标是否在某个矩形内
7. 如果在矩形之外，就在中间画图
8. 如果它在矩形内部，请执行以下操作：
9. 随机设置this.y和this.x的值，介于height/2和width/2之间
10. 将this.speed 的值设置为0.0001 * mouseX / mouseY（注意最大值是0.0001 * 899 / 251，大约是0.00036）
11. 将this.x 和this.y 增加-this.speed 和this.speed 之间的（独立）随机值
12. 递增 x 和 y（我不知道你为什么要这样做，x 和 y 从未在程序中使用）
13. 在坐标(this.x + (mouseX / height), this.y + (mouseY / width))处绘制图像
14. （永远重复步骤 3-13）

这里有几个问题，但您的代码不起作用的主要原因是当鼠标在矩形中时，您只需将位置重置为随机位置。我建议对位置使用全局变量，并在鼠标位于正确位置时将其递增。关于递增的另一件事：当您递增 this.x 和 this.y 时，将它们递增 1 以上。这将确保它们实际移动，因为目前它们至少需要 2500 帧才能移动单个像素（这只是如果他们每次都向同一个方向移动最大量，那么概率非常低）。

我建议查找有关变量范围的教程。据我所知，编码火车在处理中有一个，但在 p5.js 中没有。我仍然建议观看他的处理变量范围教程，尽管情况会略有不同。

我会这样做：

let x, y, speed;

//your preload...

function setup() {
  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);
  x = random(width / 2, height / 2);
  y = random(height / 2, width / 2);
  speed = 5
}

function draw() {
  background(42, 44, 45);
  if (200 < mouseX && 900 > mouseX && 250 < mouseY && 650 > mouseY) {
    x += random(-speed, speed);
    y += random(-speed, speed);
  }
  image(stone, x, y);
}

你可能注意到我在开头使用了let。这称为变量声明。使用变量分为三个步骤：声明、初始化和使用（请参阅 The Coding Train 的 video，虽然有点过时，但想法仍然存在）。在某些语言（如 Python）中，您不需要使用关键字来声明变量。在其他语言（如 Java）中，不使用关键字将发送错误。在 JavaScript（以及 p5.js）中，不使用关键字不会给您带来错误，但会降低行为的可预测性，并且更难知道出了什么问题。

在这种状态下，图像会平滑移动，但没有轨迹，也不跟随光标。追踪实际上很简单：只需给background() 提供第四个输入（用于 alpha 或透明度）。命令background(42, 44, 45, 255) 与background(42, 44, 45) 具有相同的结果：完全不透明的背景，没有痕迹。命令background(42, 44, 45, 0) 无效：完全透明的背景。如果你给第四个输入一个大约 30 的值，它将给出类似于示例中的轨迹。

为了跟随光标，您需要调整您的if 语句。目前，它测试鼠标相对于静态（不变）矩形的位置。因此，当石头移动时，矩形保持在原处。该示例所做的是在文本周围定义一个矩形，并针对它测试鼠标的位置。以下是您可能使用的条件：

if (abs(mouseX - x) < stone.width / 2 && abs(mouseY - y) < stone.height / 2) {
  //...
}