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

canvas可调节Florent变换动画效果代码

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看