首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

P5.js我如何从两个地方向鼠标发射圆圈?

P5.js是一个基于JavaScript的创意编程库,用于创建交互式的图形和动画。要从两个地方向鼠标发射圆圈,可以按照以下步骤进行:

  1. 首先,你需要创建一个画布,并设置画布的大小和背景颜色。可以使用createCanvas()函数来创建画布,使用background()函数设置背景颜色。
代码语言:txt
复制
function setup() {
  createCanvas(800, 600);
  background(255);
}
  1. 接下来,你需要定义两个发射圆圈的位置。可以使用两个变量来保存这些位置,例如x1y1表示第一个位置,x2y2表示第二个位置。
代码语言:txt
复制
let x1, y1, x2, y2;

function setup() {
  createCanvas(800, 600);
  background(255);

  x1 = width / 3;
  y1 = height / 2;
  x2 = 2 * width / 3;
  y2 = height / 2;
}
  1. 然后,你需要在画布上绘制两个圆圈,分别表示两个发射位置。可以使用ellipse()函数来绘制圆圈。
代码语言:txt
复制
function draw() {
  background(255);

  // 绘制第一个发射位置的圆圈
  fill(255, 0, 0);
  ellipse(x1, y1, 50, 50);

  // 绘制第二个发射位置的圆圈
  fill(0, 0, 255);
  ellipse(x2, y2, 50, 50);
}
  1. 最后,你需要在鼠标点击时,从两个位置向鼠标位置发射圆圈。可以使用mouseClicked()函数来检测鼠标点击事件,并在该函数中添加发射圆圈的逻辑。
代码语言:txt
复制
function mouseClicked() {
  // 计算鼠标位置与第一个发射位置的距离和角度
  let d1 = dist(mouseX, mouseY, x1, y1);
  let angle1 = atan2(mouseY - y1, mouseX - x1);

  // 计算鼠标位置与第二个发射位置的距离和角度
  let d2 = dist(mouseX, mouseY, x2, y2);
  let angle2 = atan2(mouseY - y2, mouseX - x2);

  // 发射圆圈
  if (d1 < 25) {
    // 从第一个位置发射圆圈
    let dx = cos(angle1) * 5;
    let dy = sin(angle1) * 5;
    x1 += dx;
    y1 += dy;
  }

  if (d2 < 25) {
    // 从第二个位置发射圆圈
    let dx = cos(angle2) * 5;
    let dy = sin(angle2) * 5;
    x2 += dx;
    y2 += dy;
  }
}

通过以上步骤,你可以实现从两个位置向鼠标位置发射圆圈的效果。你可以根据需要调整圆圈的大小、颜色和发射速度等参数。同时,你也可以使用P5.js的其他功能来进一步扩展和美化你的交互式图形。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券