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

在p5.js中命中另一个圆后,给出圆的随机方向

在p5.js中,当一个圆命中另一个圆后,可以通过生成随机的方向来改变被命中圆的移动方向。以下是一个实现的示例代码:

代码语言:txt
复制
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);
}

在这个示例中,我们创建了两个圆对象,circle1circle2circle1代表被命中的圆,它具有初始位置、半径和方向属性。circle2代表另一个圆,它具有随机位置和半径。

draw()函数中,我们首先更新circle1的位置,然后检测两个圆是否相交。如果相交,我们就生成一个新的随机方向,并将其赋值给circle1的方向属性。

最后,我们使用ellipse()函数绘制两个圆。

这个示例中使用的是p5.js库,它是一个基于JavaScript的创意编程库,用于创建交互式的图形、动画和音频应用。p5.js提供了丰富的绘图和交互功能,适用于前端开发、可视化设计、艺术创作等领域。

腾讯云相关产品和产品介绍链接地址:

请注意,以上只是腾讯云的一些相关产品,其他云计算品牌商也提供类似的产品和服务。

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

相关·内容

领券