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() {
          gl_Position = vec4(position, 0.0, 1.0);
        }
        `;
        
        let fragmentSource = `
        
          precision mediump float;
        
          uniform float width;
          uniform float height;
          uniform int order;
          uniform float frequency;
        //  uniform vec2 mousePos;
        
          uniform vec2 p[${MAXORDER}];
        
          vec2 iResolution;
          vec2 z, znum, zden;
        
        vec2 mult(vec2 z1, vec2 z2) {
          return vec2(z1.x * z2.x - z1.y * z2.y, z1.x * z2.y + z1.y * z2.x);
        } // dmult
        
        vec2 div( vec2 z1, vec2 z2) {
          return vec2(z1.x * z2.x + z1.y * z2.y, z1.y * z2.x - z1.x * z2.y) / (z2.x * z2.x + z2.y * z2.y);
        } // div
        
        void main(){
        
          iResolution = vec2(width, height);
          float r,g,b;
        
        // z = -1...+1 on shortest dimension
        
          z = (gl_FragCoord.xy - 0.5 * iResolution ) / min(width, height) * 2.0 ;
          zden = vec2(1.0, 0);
          znum = z - p[0];
          if (order > 1)  zden = z - p[1];
        
          for (int k = 2; k < ${MAXORDER}; k += 2) {
            if (k >= order) break;
            znum = mult(znum, z - p[k]);
            if (k + 1 < order) {
              zden = mult(zden, z - p[k + 1]);
            }
            if (k + 2 >= order) break;
          }
          z = div(znum, zden);
        
        //  r = atan(z.x + length(z), z.y) / 3.14159265; // thanks to wikipedia!
        
          r = mod(log(length(z))*frequency * 1.0,1.0);
          g = mod(log(length(z))*frequency * 1.3333,1.0);
          b = mod(log(length(z))*frequency * 1.6667,1.0);
        
          gl_FragColor = vec4(r,g,b, 1.0);
        }
        `;
        
        //************** Utility functions **************
        
        //Compile shader and combine with source
        function compileShader(shaderSource, shaderType) {
          let shader = gl.createShader(shaderType);
          gl.shaderSource(shader, shaderSource);
          gl.compileShader(shader);
          if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
          }
          return shader;
        }
        
        //From https://codepen.io/jlfwong/pen/GqmroZ
        //Utility to complain loudly if we fail to find the attribute/uniform
        function getAttribLocation(program, name) {
          let attributeLocation = gl.getAttribLocation(program, name);
          if (attributeLocation === -1) {
            throw 'Cannot find attribute ' + name + '.';
          }
          return attributeLocation;
        }
        
        function getUniformLocation(program, name) {
          let attributeLocation = gl.getUniformLocation(program, name);
          if (attributeLocation === null) {
            throw 'Cannot find uniform ' + name + '.';
          }
          return attributeLocation;
        }
        
        
        //--------------------------------------------------------------------
        // used to switch softly beetween free and controle positions
        // 0 for free
        function SmoothTransition(startValue = 0, defaultDuration = 2000) {
          this.startValue = this.targetValue = this.currentValue = startValue;
          this.startTime = performance.now();
          this.defaultDuration = defaultDuration;
          this.duration = 1;
        } // SmoothTransition
        
        
        SmoothTransition.prototype.setValue = function (value, duration = this.defaultDuration) {
          // duration MUST be > 0
          this.startValue = this.currentValue;
          this.targetValue = value;
          this.duration = duration;
          this.startTime = performance.now();
        };
        
        SmoothTransition.prototype.getValue = function () {
          let alpha = mmin(1, mmax(0, (performance.now() - this.startTime) / this.duration)); // 0..1
          alpha = (2 - alpha) * alpha; // ease function - starts fast, ends slowly
     .........完整代码请登录后点击上方下载按钮下载查看