P5.js是一个基于JavaScript的创意编程库,用于创建交互式的图形和动画。要从两个地方向鼠标发射圆圈,可以按照以下步骤进行:
createCanvas()
函数来创建画布,使用background()
函数设置背景颜色。function setup() {
createCanvas(800, 600);
background(255);
}
x1
和y1
表示第一个位置,x2
和y2
表示第二个位置。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;
}
ellipse()
函数来绘制圆圈。function draw() {
background(255);
// 绘制第一个发射位置的圆圈
fill(255, 0, 0);
ellipse(x1, y1, 50, 50);
// 绘制第二个发射位置的圆圈
fill(0, 0, 255);
ellipse(x2, y2, 50, 50);
}
mouseClicked()
函数来检测鼠标点击事件,并在该函数中添加发射圆圈的逻辑。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的其他功能来进一步扩展和美化你的交互式图形。
领取专属 10元无门槛券
手把手带您无忧上云