canvas实现水母游动可交互跟随鼠标动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas实现水母游动可交互跟随鼠标动画效果代码

代码标签: canvas 水母 游动 交互 跟随 鼠标 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
   
<meta charset="UTF-8">

<style>
    html
, body {
 
width:  100%;
 
height: 100%;
 
margin: 0;
 
background: rgb(0,30,60);
 
overflow: hidden;
}

#C{
}
</style>
</head>

<body>
   
<!-- partial:index.partial.html -->
   
<canvas id="C"></canvas>
   
<!-- partial -->
   
<script >
       
        window.onload = function () {
  let ctx = document.getElementById("C"),
    c = ctx.getContext("2d"),
    w,
    h;
  fitCanvas();

  function limit(vec, b) {
    this.d = Math.sqrt(Math.pow(vec.x, 2) + Math.pow(vec.y, 2));
    this.ang = Math.atan2(vec.y, vec.x);
    if (this.d > b) {
      return {
        x: b * Math.cos(this.ang),
        y: b * Math.sin(this.ang)
      };
    } else {
      return {
        x: this.d * Math.cos(this.ang),
        y: this.d * Math.sin(this.ang)
      };
    }
  }
  function setmag(a, m) {
    this.ang = Math.atan2(a.y, a.x);
    return {
      x: m * Math.cos(this.ang),
      y: m * Math.sin(this.ang)
    };
  }

  let mouse = { x: false, y: false },
    last_mouse = {},
    pi = Math.PI,
    seaMargin = 1000,
    boids = new Array(100);

  class boid {
    constructor() {
      this.opacity = Math.random() * 0.5 + 0.05;
      this.ang = Math.random() * 2 * Math.PI;
      this.mf = 0.1;
      this.ms = Math.random() * 0.1 + 0.9;
      this.vm = Math.random() * 1 + 0.5;
      this.pos = {
        x: Math.random() * w,
        y: Math.random() * h
      };
      this.vel = {
        x: this.vm * Math.cos(this.ang),
        y: this.vm * Math.sin(this.ang)
      };
      this.acc = {
        x: 0,
        y: 0
      };
    }
    flock(other) {
      this.aa = {
        x: 0,
        y: 0
      };
      this.ap = {
        x: 0,
        y: 0
      };
      this.as = {
        x: 0,
        y: 0
      };
      this.count = 0;
      for (var ot of other) {
        if (ot != this) {
          this.dis = Math.sqrt(
            Math.pow(ot.pos.x - this.pos.x, 2) +
              Math.pow(ot.pos.y - this.pos.y, 2)
          );
          if (this.dis < 40) {
            this.aa.x += ot.vel.x;
            this.aa.y += ot.vel.y;
            this.ap.x += ot.pos.x;
            this.ap.y += ot.pos.y;
            this.as.x += this.pos.x - ot.pos.x;
            this.as.y += this.pos.y - ot.pos.y;
            this.count++;
          }
        }
      }
      if (this.count != 0) {
        this.aa.x /= this.count;
        this.aa.y /= this.count;
        this.ap.x /= this.count;
        this.ap.y /= this.count;
        this.as.x /= this.count;
        this.as.y /= this.count;

        this.as = setmag(
          this.as,
          4 / Math.sqrt(Math.pow(this.as.x, 2) + Math.pow(this.as.y, 2))
        );

        this.aa.x -= this.vel.x;
        this.aa.y -= this.vel.y;
        this.ap.x -= this.vel.x;
        this.ap.y -= this.vel.y;
      }

      this.aa = limit(this.aa, this.mf);
      this.ap = limit(this.ap, this.mf);
      this.as = limit(this.as, 4 * this.mf);
    }
    move() {
      this.acc = {
        x: 0,
        y: 0
      };

      this.acc.x += this.aa.x;
      this.acc.y += this.aa.y;
      this.acc.x += this.ap.x;
      this.acc.y += this.ap.y;
      this.acc.x += this.as.x;
      this.acc.y += this.as.y;
      this.pos.x += this.vel.x;
      this.pos.y += this.vel.y;
      this.vel.x += this.acc.x;
      this.vel.y += this.acc.y;

      this.vel = limit(this.vel, this.ms);
      this.ang = Math.atan2(this.vel.y, this.vel.x);

      if (this.pos.x > w + seaMargin) {
        this.pos.x -= w + seaMargin;
      }
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0