在p5.js中,当一个圆命中另一个圆后,可以通过生成随机的方向来改变被命中圆的移动方向。以下是一个实现的示例代码:
let circle1, circle2;
function setup() {
createCanvas(400, 400);
// 创建两个圆对象
circle1 = {
x: width / 2,
y: height / 2,
radius: 50,
direction: createVector(random(-1, 1), random(-1, 1)).normalize() // 随机生成一个单位向量作为初始方向
};
circle2 = {
x: random(circle1.radius, width - circle1.radius),
y: random(circle1.radius, height - circle1.radius),
radius: 30
};
}
function draw() {
background(220);
// 更新圆的位置
circle1.x += circle1.direction.x;
circle1.y += circle1.direction.y;
// 检测两个圆是否相交
if (dist(circle1.x, circle1.y, circle2.x, circle2.y) <= circle1.radius + circle2.radius) {
// 生成新的随机方向
circle1.direction = createVector(random(-1, 1), random(-1, 1)).normalize();
}
// 绘制圆
fill(255, 0, 0);
ellipse(circle1.x, circle1.y, circle1.radius * 2);
fill(0, 0, 255);
ellipse(circle2.x, circle2.y, circle2.radius * 2);
}
在这个示例中,我们创建了两个圆对象,circle1
和circle2
。circle1
代表被命中的圆,它具有初始位置、半径和方向属性。circle2
代表另一个圆,它具有随机位置和半径。
在draw()
函数中,我们首先更新circle1
的位置,然后检测两个圆是否相交。如果相交,我们就生成一个新的随机方向,并将其赋值给circle1
的方向属性。
最后,我们使用ellipse()
函数绘制两个圆。
这个示例中使用的是p5.js库,它是一个基于JavaScript的创意编程库,用于创建交互式的图形、动画和音频应用。p5.js提供了丰富的绘图和交互功能,适用于前端开发、可视化设计、艺术创作等领域。
腾讯云相关产品和产品介绍链接地址:
请注意,以上只是腾讯云的一些相关产品,其他云计算品牌商也提供类似的产品和服务。
领取专属 10元无门槛券
手把手带您无忧上云