pixi实现随音乐舞动的多彩圆点粒子动画效果代码-html代码-BFW代码库

pixi实现随音乐舞动的多彩圆点粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：pixi实现随音乐舞动的多彩圆点粒子动画效果代码

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

<html>

<head>
    <style>
        html, body {
                margin:0;
          overflow:hidden;
          background:#000;
          color:white;
          font-family:Arial;
        }
        
        .message{
          padding:20px;
          position:absolute;
          top:50%;
          left:50%;
          transform:translate(-50%, -50%);
          background:black;
          cursor:pointer;
          font-size:14px;
          border:1px solid white;
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.1.6.1.js"></script>
</head>

<body>
    <h2 class="message">PLAY</h2>
    <script>
        (function() {
          var AUDIO_URL, TOTAL_BANDS, analyser, analyserDataArray, arrCircles, audio, build, buildCircles, canplay, changeMode, changeTheme, circlesContainer, cp, createCircleTex, gui, hammertime, init, initAudio, initGUI, initGestures, isPlaying, k, message, modes, mousePt, mouseX, mouseY, params, play, renderer, resize, stage, startAnimation, texCircle, themes, themesNames, update, v, windowH, windowW;
        
          AUDIO_URL = "//repo.bfw.wiki/bfwrepo/sound/5e148aa3821f2.mp3";
        
          modes = ["cubic", "conic"];
        
          themes = {
            pinkBlue: [0xFF0032, 0xFF5C00, 0x00FFB8, 0x53FF00],
            yellowGreen: [0xF7F6AF, 0x9BD6A3, 0x4E8264, 0x1C2124, 0xD62822],
            yellowRed: [0xECD078, 0xD95B43, 0xC02942, 0x542437, 0x53777A],
            blueGray: [0x343838, 0x005F6B, 0x008C9E, 0x00B4CC, 0x00DFFC],
            blackWhite: [0xFFFFFF, 0x000000, 0xFFFFFF, 0x000000, 0xFFFFFF]
          };
        
          themesNames = [];
        
          for (k in themes) {
            v = themes[k];
            themesNames.push(k);
          }
        
          // PARAMETERS
          params = {
            // public
            mode: modes[0],
            theme: themesNames[0],
            radius: 3,
            distance: 600,
            size: .5,
            // private
            numParticles: 5000,
            sizeW: 1,
            sizeH: 1,
            radiusParticle: 60,
            themeArr: themes[this.theme]
          };
        
          TOTAL_BANDS = 256;
        
          cp = new PIXI.Point();
        
          mouseX = 0;
        
          mouseY = 0;
        
          mousePt = new PIXI.Point();
        
          windowW = 0;
        
          windowH = 0;
        
          stage = null;
        
          renderer = null;
        
          texCircle = null;
        
          circlesContainer = null;
        
          arrCircles = [];
        
          hammertime = null;
        
          message = null;
        
          // audio
          audio = null;
        
          analyser = null;
        
          analyserDataArray = null;
        
          isPlaying = false;
        
          canplay = false;
        
          // gui
          gui = null;
        
          init = function() {
            initGestures();
            message = $(".message");
            message.on("click", play);
            resize();
            build();
            resize();
            mousePt.x = cp.x;
            mousePt.y = cp.y;
            $(window).resize(resize);
            startAnimation();
            return initGUI();
          };
        
          play = function() {
            if (isPlaying) {
              return;
            }
            initAudio();
            message.css("cursor", "default");
            if (canplay) {
              message.hide();
            } else {
              message.html("LOADING MUSIC...");
            }
            audio.play();
            return isPlaying = true;
          };
        
          initGUI = function() {
            var modeController, sizeController, themeController;
            gui = new dat.GUI();
            // if window.innerWidth < 50.........完整代码请登录后点击上方下载按钮下载查看