多彩泡泡效果-html代码-BFW代码库

代码语言：html

所属分类：粒子

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

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


</head>
<body translate="no">

<script>
"use strict";

/* initially inspired by the ideas given by Louis Hoebregts in his pen :
              https://codepen.io/Mamboleoo/full/XWJPxpZ */

window.addEventListener("load", function () {

  let idAnim;

  const initSpeed = 1;
  const rMin = 15;
  const rMax = 55;
  let canv, ctx; // canvas and context : global variables (I know :( )
  let maxx, maxy; // canvas sizes (in pixels)
  let particles;
  let click;
  let initDir;
  let noiseInitDir;
  let initHue;
  let noiseInitHue;
  let mouseX = -100,mouseY = -100; // init to unreachable value

  /*	============================================================================
  	This is based upon Johannes Baagoe's carefully designed and efficient hash
  	function for use with JavaScript.  It has a proven "avalanche" effect such
  	that every bit of the input affects every bit of the output 50% of the time,
  	which is good.	See: http://baagoe.com/en/RandomMusings/hash/avalanche.xhtml
  	============================================================================
  */
  /*
     function Mash() {
     	var n = 0xefc8249d;
     	var mash = function(data) {
     		if ( data ) {
     			data = data.toString();
     			for (var i = 0; i < data.length; i++) {
     				n += data.charCodeAt(i);
     				var h = 0.02519603282416938 * n;
     				n = h >>> 0;
     				h -= n;
     				h *= n;
     				n = h >>> 0;
     				h -= n;
     				n += h * 0x100000000; // 2^32
     			}
     			return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
     		} else n = 0xefc8249d;
     	};
       return mash;
     }
     
       const mrandom = (function () {
         let mash = Mash(); return () => mash(1);
       })();// Math.random;
     */
  // shortcuts for Math.…

  const mrandom = Math.random;
  const mfloor = Math.floor;
  const mround = Math.round;
  const mceil = Math.ceil;
  const mabs = Math.abs;
  const mmin = Math.min;
  const mmax = Math.max;

  const mPI = Math.PI;
  const mPIS2 = Math.PI / 2;
  const m2PI = Math.PI * 2;
  const msin = Math.sin;
  const mcos = Math.cos;
  const matan2 = Math.atan2;

  const mhypot = Math.hypot;
  const msqrt = Math.sqrt;

  const rac3 = msqrt(3);
  const rac3s2 = rac3 / 2;
  const mPIS3 = Math.PI / 3;

  //-----------------------------------------------------------------------------
  // miscellaneous functions
  //-----------------------------------------------------------------------------

  function alea(min, max) {
    // random number [min..max[ . If no max is provided, [0..min[

    if (typeof max == 'undefined') return min * mrandom();
    return min + (max - min) * mrandom();
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function intAlea(min, max) {
    // random integer number [min..max[ . If no max is provided, [0..min[

    if (typeof max == 'undefined') {
      max = min;min = 0;
    }
    return mfloor(min + (max - min) * mrandom());
  } // intAlea

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  function NoiseGen(rndFunc, period, nbHarmonics, attenHarmonics, lowValue = 0, highValue = 1) {

    /* this function returns a function which can be used as a noise generator
                                                                                                   the returned functions takes no parameter : it is supposed to be called for
                                                                                                   consecutive, evenly spaced points of time or space.
                                                                                                - rndFunc is the random generator function used. It must return a value in the range
                                                                                                [0..1[. If a falsy value is provided (0, false, null, undefined..) Math.random will be used.
                                                                                                - period determines the speed of variation of the returned value. The higher
                                                                                                period is, the slowlier the value will change in the noise signal. It must be
                                                                                                a positive, non zero value (typically a few hundreds).
                                                                                                - nbHarmonics is an integer giving the number of harmonics used to generate the signal.
                                                                                                With 0 or 1, a single, smooth signal will be generated
                                                                                                With 2 or more, internally generated signals of periods up to period / 2, period / 3, will be added.
                                                                                                nbHarmonics should be kept as low as possible, since every added harmonic increases the
                                                                                                computation time significantly.
                                                                                                - attenHarmonics is a float number which should stay in the interval 0..1.
                                                                                                During harmonics generation, the amplitude of the signal is multiplied by
                                                                                                attenHarmonics, with respect to the immediatly lower level harmonic.
                                                                                                attenHarmonics = 0 results in no harmonics at all. attenHarmonics > 1 results in
                                                                                                harmonics greater than the fundamental, whith the highest harmonics beeing the
                                                                                                most important. This is not usually the desired behaviour.
                                                                                                lowValue and highValue are optional floating values. Despite the names, it
                                                                                                it is not required that highValue > lowValue. The
                                                                                                returned value will be scaled to the range lowValue..highValue
                                                                                                (without strict warranty about the limits beeing reached or exceeded, due to
                                                                                                the finite precision of floating numbers)
                                                                                                
                                                                                                */

    let arP0 = []; // 'preceeding value' for each harmonic
    let.........完整代码请登录后点击上方下载按钮下载查看