p5js preSecond

在p5.js中，preSecond是一个系统变量，它表示上一帧绘制到当前帧之间经过的时间，以秒为单位。preSecond变量的值可用于计算帧速率或更精细的时间控制。例如，可以使用preSecond变量来调整动画的速度，使其在不同计算机上以相同的速度运行。以下是一个简单的示例：

function draw() {
  background(0);
  let speed = 100; // 每秒移动100像素
  let distance = speed * preSecond;
  rect(distance, height/2, 50, 50);
}

在上面的示例中，矩形每秒移动100像素，因此我们将速度设置为100。然后，我们使用preSecond变量计算矩形应该移动的距离，并将其用作矩形的x位置。这样，矩形的移动速度将与计算机性能无关，并在不同计算机上以相同的速度运行。

相关问题

p5js随机noise

p5js中的noise()函数可以生成一系列随机的连续值，可以用于制作自然的纹理和动画效果。

例如，下面的代码将使用noise()函数生成一个随机的波浪形状：

let xoff = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  beginShape();
  for (let x = 0; x <= width; x += 10) {
    let y = map(noise(xoff), 0, 1, 200, 300);
    vertex(x, y);
    xoff += 0.05;
  }
  endShape();
}

在这个例子中，我们使用了一个变量xoff来控制每次调用noise()的输入值，每次增加一个固定的值0.05，以产生连续的随机值。然后使用map()函数将这些值映射到200到300的范围内，作为波浪的y坐标。最终，使用beginShape()和endShape()函数绘制波浪形状。

你可以尝试调整变量xoff的增量和map()函数的参数，来改变波浪的形状和频率。

p5js 控制图片wasd

P5.js 是一个用于创建互动媒体应用程序的 JavaScript 库。使用 P5.js 可以轻松地创建图像、声音和交互式应用程序。要在 P5.js 中控制图片的移动，可以使用键盘监听器来监听用户按键的输入，并在按下相应的键时更新图片的坐标。比如 使用WASD 控制图片上下左右移动.

var img;
var x = 0;
var y = 0;

function preload() {
  img = loadImage("image.jpg");
}

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(255);
  image(img, x, y);
}

function keyPressed() {
  if (key === 'w') {
    y -= 5;
  } else if (key === 's') {
    y += 5;
  } else if (key === 'a') {
    x -= 5;
  } else if (key === 'd') {
    x += 5;
  }
}

上面这段代码是使用 P5.js 中的键盘监听器来控制图片移动的示例，其中预载入了一张名为"image.jpg"的图片，画布大小是 600x400，每次按下 "w" 键时，图片的 y 坐标会减少 5，按下 "s" 键时，图片的 y 坐标会增加 5，按下 "a" 键时，图片的 x 坐标会减少 5，按下 "d" 键时，图片的 x 坐标会增加 5。