justlib+webgl实现炫酷动画背景效果代码-html代码-BFW代码库

justlib+webgl实现炫酷动画背景效果代码

代码语言：html

所属分类：动画

代码描述：justlib+webgl实现炫酷动画背景效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
    margin: 0;
    overflow: hidden;
}
</style>




</head>

<body>
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/justlib.js"></script>
      <script >
const ratio = innerWidth / innerHeight;
palette(['#faf1dc', '#ff871f', '#b80000', '#41764b', '#29293d']);

const canvas = createCanvasWebgl(ratio);
appendCanvas();

const redraw = webglProgram(`

    uniform vec2 resolution = [canvas.width, canvas.height];
    uniform float time = [Date.now()%5000/5000];
    const float TAU = ${2 * PI};
    const float PI = ${PI};
    
    vec4 flower(vec2 uv, vec2 c, float n){
        float ring = length(uv) * n + 0.5;
        float ringId = floor(ring);
        if (ringId < 1.0)
            return vec4(uv*n, vec2(0.));
        
        // uv
        float dir = sign(mod(ringId, 2.0) - 0.5);
        float m = floor(TAU * ringId);
        float sector = dir*time + (atan(uv.y, uv.x)) / TAU*m;
     
        // center
        float r = ringId/n;
        float a = (floor(sector)-time*dir)/m*TAU+PI/m;
        vec2 cellCenter.........完整代码请登录后点击上方下载按钮下载查看