canvas可调节Florent变换动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：canvas可调节Florent变换动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
          background-color: #000;
          margin: 0;
          overflow: hidden;
          background-repeat: no-repeat;
        }
        canvas {
          position : absolute;
        }
        #menu {
          font-size: 80%;
          margin: 0;
          padding: 5px;
          position: absolute;
          left: 5px;
          top: 5px;
          border-radius: 10px;
          background-color: rgba(255, 255, 128, 0.9);
          color: black;
          z-index: 10
        }
        
        
        #menu.hidden #showhide{
          display: none;
        }
        
        #controls {
          margin-top: 4px;
          margin-bottom: 4px;
        }
        #menu button {
          margin-right: 5px;
          margin-left: 5px;
        }
        
        /*
        #menu input[type=range] {
          width : 15em;
        }
        */
        #huesample {
          display: inline-block;
          margin-left: 1em;
          width: 3em;
          height:1em;
          background-color: #f00;
          border: 1px solid black;
        }
    </style>



</head>

<body>
    <div id="menu">
        <p id="controls">close controls</p>
        <div id="showhide">
            <hr>
            <p><input type="range" min=1 max=2 0 value=5 id="order"> order</p>
            <p><input type="range" min=0 .1 max=3 value=1 step="any" id="frequency"> frequency</p>
            <p><input type="range" min=0 max=4 step="any" value=1 id="speed"> speed</p>
            <p><input type="checkbox" id="interact"> mouse / touch interaction</p>
        </div>
        <!-- showhide -->
    </div>

    <script>
        "use strict";
        
        /* based on complex 07a */
        
        let canv, gl;
        let animState;
        let maxx, maxy;
        let midx, midy;
        
        let order;
        let speed;
        let frequency;
        
        let widthHandle, heightHandle;
        let frequencyHandle, freq;
        let pHandle, orderHandle, f;
        let p = [];
        let st; // smooth transition
        
        let ui, uiv; // unser interface elements and values
        const MAXORDER = 20;
        // timing for mouse interaction
        const CATCHTIME = 2000;
        const RELEASETIME = 5000;
        
        //let timeHandle;
        
        let mousePos = {};
        
        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;
        
        //-----------------------------------------------------------------------------
        // 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 distance(p0, p1) {
        
          /* distance between points */
        
          return mhypot(p0[0] - p1[0], p0[1] - p1[1]);
        
        } // function distance
        
        /*	============================================================================
        	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
        	============================================================================
        */
        /* This function returns a hash function depending on a seed.
        
        if no seed is provided (or a falsy value), Math.random() is used.
        The returned function always returns the same number in the range [0..1[ for the
        same value of the argument. This argument may be a String or a Number or anything else
        which can be 'toStringed'
        Two returned functions obtained with two equal seeds are equivalent.
        */
        
        function hashFunction(seed) {
          let n0 = 0xefc8249d;
          let n = n0;
          mash(seed || Math.random()); // pre-compute n for seed
          n0 = n; //
        
          function mash(data) {
            data = data.toString() + 'U';
            n = n0;
            for (let 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
            } // for
            return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
          } // mash
          return mash;
        } // hashFunction(seed)
        
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        
        function Noise1D(period, min = 0, max = 1, hash) {
          /* returns a 1D noise function.
             the (mandatory) hash function must return a value between 0 and 1. The hash function
             will be called with an integer number for a parameter.
            the returned function takes one parameter, and will always return the same value if called with the same parameter
            period should be > 1. The bigger period is, the smoother the output noise is
          
          suggestion : the hash parameter could be a function returned from a call to hashFunction above
          
          */
        
          let currx, y0, y1; // cached valued, to reduce number of calls to 'hash'
          let phase = hash(0); // to shift the phase of different generators between each other;
        
          return function (x) {
            let xx = x / period + phase;
            let intx = mfloor(xx);
        
            if (intx - 1 === currx) {// next integer interval
              ++currx;
              y0 = y1;
              y1 = min + (max - min) * hash(currx + 1);
            } else if (intx !== currx) {// unrelated interval
              currx = intx;
              y0 = min + (max - min) * hash(currx);
              y1 = min + (max - min) * hash(currx + 1);
            }
            let frac = xx - currx;
            let z = (3 - 2 * frac) * frac * frac;
            return z * y1 + (1 - z) * y0;
          };
        } // Noise1D
        
        //-----------------------------------------------------------------------------
        //-----------------------------------------------------------------------------
        
        //************** Shader sources **************
        let vertexSource = `
        attribute vec2 position;
        
        
        void main() .........完整代码请登录后点击上方下载按钮下载查看