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

代码语言：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 < 500
            gui.close();
            modeController = gui.add(params, 'mode', modes);
            modeController.onChange(function(value) {
              return changeMode(value);
            });
            themeController = gui.add(params, 'theme', themesNames);
            themeController.onChange(function(value) {
              return changeTheme(params.theme);
            });
            gui.add(params, 'radius', 1, 8);
            gui.add(params, 'distance', 100, 1000);
            sizeController = gui.add(params, 'size', 0, 1);
            return sizeController.onChange(function(value) {
              return resize(value);
            });
          };
        
          initAudio = function() {
            var context, source;
            context = new (window.AudioContext || window.webkitAudioContext)();
            analyser = context.createAnalyser();
            //   analyser.smoothingTimeConstant = 0.5
            source = null;
            audio = new Audio();
            audio.crossOrigin = "anonymous";
            audio.src = AUDIO_URL;
            return audio.addEventListener('canplay', function() {
              var bufferLength;
              if (isPlaying) {
                message.hide();
              }
              canplay = true;
              source = context.createMediaElementSource(audio);
              source.connect(analyser);
              source.connect(context.destination);
              analyser.fftSize = TOTAL_BANDS * 2;
              bufferLength = analyser.frequencyBinCount;
              return analyserDataArray = new Uint8Array(bufferLength);
            });
          };
        
          startAnimation = function() {
            return requestAnimFrame(update);
          };
        
          initGestures = function() {
            return $(window).on('mousemove touchmove', function(e) {
              if (e.type === 'mousemove') {
                mouseX = e.clientX;
                return mouseY = e.clientY;
              } else {
                mouseX = e.originalEvent.changedTouches[0].clientX;
    .........完整代码请登录后点击上方下载按钮下载查看