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

Question

我试图查看 7.8: Objects and Images - p5.js Tutorial to recreate 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

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

预加载图片
设置canvas尺寸
（渲染帧）
将背景设置为 (42, 44, 45)
使用CENTER图像模式
测试鼠标是否在某个矩形内
如果在矩形外，就在中心绘制图像
如果它在矩形内，请执行以下操作：
随机设置this.y和this.x的值，介于height/2和width/2
将 this.speed 的值设置为 0.0001 * mouseX / mouseY（请注意，此值的最大值为 0.0001 * 899 / 251，约为 0.00036）
将this.x和this.y增加-this.speed和this.speed
增加x和y（我不知道你为什么要这样做，x和y在程序中从来没有用过）
在坐标(this.x + (mouseX / height), this.y + (mouseY / width))
（永远重复步骤 3-13）

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

我建议查找有关变量作用域的教程。据我所知，Coding Train 在处理中有一个，但 none 在 p5.js 中。我仍然建议观看他的 Processing variable scope 教程，尽管情况会略有不同。

这是我会做的：

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) {
  //...
}

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

Tickle Example: p5.js - use image rather than text

javascript

processing

p5.js