pixi制作水泡效果-html代码-BFW代码库

pixi制作水泡效果

代码语言：html

所属分类：粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Pixi Sprite Bubbles</title>
<style>
    body {
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	overflow: hidden;
}
p {
	position: absolute;
	color: #fff;
	width: 100%;
	bottom: 45%;
	pointer-events: none;
}
  </style>

</head>
<body translate="no">
<p>Drag!</p>

<script>
var Vector = function(_x, _y) {
    this.x = _x || 1;
    this.y = _y || 0;
    this.setAngle = function(angle) {
        var length = this.getLength();
        this.x = Math.cos(angle) * length;
        this.y = Math.sin(angle) * length;
    }
    this.getAngle = function() {
        return Math.atan2(this.y, this.x);
    }
    this.setLength = function(length) {
        var angle = this.getAngle();
        this.x = Math.cos(angle) * length;
        this.y = Math.sin(angle) * length;
    }
    this.getLength = function() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    }
    this.add = function(v2) {
        return {
            x: this.x + v2.x,
            y: this.y + v2.y
        };
    }
    this.sub = function(v2) {
        return {
            x: this.x - v2.x,
            y: this.y - v2.y
        };
    }
    this.mult = function(val) {
        return {
            x: this.x * val,
            y: this.y * val
        };
    }
    this.divide = function(val) {
        return {
            x: this.x / val,
            y: this.y / val
        };
    }
    this.addTo = function(v2) {
        this.x += v2.x;
        this.y += v2.y;
    }
    this.subtractFrom = function(v2) {
        this.x -= v2.x;
        this.y -= v2.y;
    }
    this.multiplyBy = function(val) {
        this.x *= val;
        this.y *= val;
    }
    this.divideBy = function(val) {
        this.x /= val;
        this.y /= val;
    }
};
</script>
<script src='http://repo.bfw.wiki/bfwrepo/js/pixi.min.js'></script>
<script>
      var app, graphics, container;
var mousedown = false,bubbles = [];
var displacementSprite, displacementFilter;
function init() {
  app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x000,
    resizeTo: window,
    antialias: true });

  container = new PIXI.Container();
  graphics = new PIXI.Graphics();
  app.stage.addChild(graphics);
  app.stage.addChild(container);

  document.body.appendChild(app.view);
  for (var i = 0; i < 300; i++) {
    var bubble = new Bubble({
      x: Math.random() * app.screen.width,
      y: Math.random() * app.screen.height });

    container.addChild(bubble.sprite);
    bubbles.push(bubble);
  }
  displacement();
  addEvents();
}

function addEvents() {
  document.addEventListener(&quo.........完整代码请登录后点击上方下载按钮下载查看