使用p5.js画出动画滑稽碰撞图

使用p5.js做了一个动态碰撞的滑稽笑脸，效果如图
使用p5.js画出动画滑稽碰撞图首先是定义了一个画滑稽的函数，其中参数分别是滑稽的横纵坐标、大小以及眼珠的朝向，L可取-1和1两个值，-1向右，1向左。脸用了两个填充的圆重叠（也可一个圆加边框）。嘴和眼睛以及眉毛是分别画两个圆弧相重叠而成。

function huaji(x,y,size,l){
	noStroke();
	fill(237,148,14);
	ellipse(x,y,1.06*size);
        fill(252,222,12);
        ellipse(x,y,size);//脸
	
	fill(173,91,10);
	arc(x, y, 0.8*size, 0.8*size, 0, PI, CHORD);
	fill(252,222,12);
	arc(x, y-0.01*size, 0.8*size, 0.7*size, 0, PI, CHORD);//笑
	
	fill(254,240,205);
	arc(x-0.25*size, y, 0.8*size, 0.6*size, 1.3*PI,1.7* PI, PIE);
	fill(252,222,12);
	arc(x-0.25*size, y, 0.8*size, 0.5*size, 1.3*PI,1.7* PI, PIE);
	
	
	fill(254,240,205);
	arc(x+0.25*size, y, 0.8*size, 0.6*size, 1.3*PI,1.7* PI, PIE);
	fill(252,222,12);
	arc(x+0.25*size, y, 0.8*size, 0.5*size, 1.3*PI,1.7* PI, PIE);//眼壳子
	if(l==-1){
	    fill(173,91,10);
  	    ellipse(x-0.34*size,y-0.28*size,0.1*size);
	    ellipse(x+0.16*size,y-0.28*size,0.1*size);//眼珠
	}
       if(l==1){
	    fill(173,91,10);
  	    ellipse(x-0.1*size,y-0.28*size,0.1*size);
	    ellipse(x+0.35*size,y-0.28*size,0.1*size);//眼珠
	}
	
	fill(58,43,1);
	arc(x-0.28*size, y-0.35*size,0.20*size, 0.20*size, 1.1*PI,2.1* PI, OPEN);
	fill(252,222,12);
	arc(x-0.28*size, y-0.35*size, 0.21*size, 0.16*size, 1*PI,2.2* PI, OPEN);
	
	fill(58,43,1);
	arc(x+0.28*size, y-0.35*size,0.20*size,0.20*size, 0.9*PI,1.9* PI, CHORD);
	fill(252,222,12);
	arc(x+0.28*size, y-0.35*size, 0.21*size, 0.15*size, 0.9*PI,1.9* PI, CHORD);//眉毛

	
	fill(241,74,56);
	ellipse(x-0.25*size,y-0.18*size,0.25*size,0.07*size);
	ellipse(x+0.25*size,y-0.18*size,0.25*size,0.07*size);
}

接下来是碰撞，

var numBalls = 10;
var spring = 0.05;
var gravity = 0.03;
var friction = -0.9;
var balls = [];


function setup() {
  createCanvas(720, 400);
  for (var i = 0; i < numBalls; i++) {
    balls[i] = new Ball(
      random(width),
      random(height),
      random(30, 100),
      i,
      balls
    );
  }
  noStroke();
  fill(255, 204);
}

function draw() {
  background(0);
  balls.forEach(ball => {
    ball.collide();
    ball.move();
    ball.display();
  });
}

以上可以看出，定义了一些变量以及初始化了画布，并初始化了十个ball。
对每一个ball执行碰撞、移动和展示。我们接下来看看这三个函数分别是怎样的。
首先，第一个函数colide中，对每一个球求距离并与两球半径和进行比较，当小于两球半径之和的时候，证明两球相撞了，求出加速度，对两球速度进行改变。
第二个函数move中，如果球撞到墙，将其速度*-0.9,即反向并略减少速度，而且每次都有个向下的加速度。所以后来的滑稽会慢慢停下。在前两个函数中都对m进行取反的操作，即可每次碰撞都变化眼珠的朝向，而当速度非常小的时候，将m的值固定。
第三个函数display则是调用滑稽函数。

function Ball(xin, yin, din, idin, oin) {
  this.x = xin;
  this.y = yin;
  var vx = 0;
  var vy = 0;
  var m=1;
  this.diameter = din;
  this.id = idin;
  this.others = oin;

  this.collide = function() {
    for (var i = this.id + 1; i < numBalls; i++) {
      var dx = this.others[i].x - this.x;
      var dy = this.others[i].y - this.y;
      var distance = sqrt(dx * dx + dy * dy);
      var minDist = this.others[i].diameter / 2 + this.diameter / 2;
      if (distance < minDist) {
        var angle = atan2(dy, dx);
        var targetX = this.x + cos(angle) * minDist;
        var targetY = this.y + sin(angle) * minDist;
        var ax = (targetX - this.others[i].x) * spring;
        var ay = (targetY - this.others[i].y) * spring;
        vx -= ax;
        vy -= ay;
        this.others[i].vx += ax;
        this.others[i].vy += ay;
	m*=-1;
      }
    }
  };

  this.move = function() {
    vy += gravity;
    this.x += vx;
    this.y += vy;
    if (this.x + this.diameter / 2 > width) {
      this.x = width - this.diameter / 2;
      vx *= friction;
			m*=-1;
    } else if (this.x - this.diameter / 2 < 0) {
      this.x = this.diameter / 2;
      vx *= friction;
			m*=-1;
    }
    if (this.y + this.diameter / 2 > height) {
      this.y = height - this.diameter / 2;
      vy *= friction;
			m*=-1;
    } else if (this.y - this.diameter / 2 < 0) {
      this.y = this.diameter / 2;
      vy *= friction;
			m*=-1;
    }
		if((vx<0.1&&vx>-0.1)&&(vy<=0.1&&vy>-0.1)){
			 m=-1;}
  };

  this.display = function() {
    huaji(this.x, this.y, this.diameter, m);
  };
}

运行效果：https://editor.p5js.org/weihao/sketches/SyvVYveam

参考文献：p5.js官方文档
https://p5js.org/zh-Hans/examples/motion-bouncy-bubbles.html

使用p5.js画出动画滑稽碰撞图

相关推荐