用p5js绘制一个20毫米的球在界面跳动并且会留下轨迹

在p5.js中，可以使用createCanvas()函数创建一个画布，使用ellipse()函数绘制球体，使用background()函数清除画布，使用frameRate()函数设置帧速率，使用random()函数生成随机数，使用mousePressed()函数获取鼠标点击事件，并使用push()和pop()函数保存和恢复绘图状态。

下面是一个使用p5.js绘制跳动球的示例代码：

let x, y; // 球的位置
let vx, vy; // 球的速度
let trail = []; // 轨迹数组

function setup() {
  createCanvas(400, 400); // 创建400x400的画布
  x = width / 2; // 将球的初始位置设置为画布中心
  y = height / 2;
  vx = random(-1, 1); // 随机生成x轴速度
  vy = random(-1, 1); // 随机生成y轴速度
  frameRate(60); // 设置帧速率为60帧/秒
}

function draw() {
  background(220); // 清除画布
  ellipse(x, y, 20); // 绘制球体

  x += vx; // 更新球的位置
  y += vy;

  trail.push({ x: x, y: y }); // 将当前位置添加到轨迹数组中

  if (trail.length > 100) {
    trail.splice(0, 1); // 如果轨迹数组长度超过100，删除最旧的一个位置
  }

  for (let i = 0; i < trail.length; i++) {
    let alpha = map(i, 0, trail.length - 1, 255, 0); // 根据位置的索引计算透明度
    fill(0, alpha); // 设置填充颜色
    noStroke(); // 不绘制边框
    ellipse(trail[i].x, trail[i].y, 20); // 绘制轨迹上的球体
  }

  // 当球碰到画布边缘时，反弹
  if (x <= 10 || x >= width - 10) {
    vx *= -1;
  }
  if (y <= 10 || y >= height - 10) {
    vy *= -1;
  }
}

function mousePressed() {
  // 当鼠标点击时，重新设置球的位置和速度
  x = mouseX;
  y = mouseY;
  vx = random(-1, 1);
  vy = random(-1, 1);
  trail = []; // 清空轨迹数组
}

在以上代码中，我们使用trail数组来保存球在画布上的轨迹位置。每次绘制球体时，都根据trail数组中的位置绘制多个球体，根据位置的索引计算透明度，从而形成轨迹效果。

你可以将以上代码复制到p5.js的在线编辑器(https://editor.p5js.org/)中运行，观察球在界面上的跳动和轨迹效果。