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