webgl实现鼠标跟随曲线弯曲动画效果代码-html代码-BFW代码库

webgl实现鼠标跟随曲线弯曲动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl实现鼠标跟随曲线弯曲动画效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">
  

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  cursor: none;
}
</style>



</head>

<body translate="no">
  <canvas id="canvas" height="370" width="598"></canvas>


<script id="vertex-shader" type="x-shader/x-vertex">
    precision highp float;

    attribute vec2 a_position;

    void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
    }
</script>


<script id="fragment-shader" type="x-shader/x-fragment">
    precision highp float;
    
    #define GREEN vec4(0.4, 0.8, 0.5, 1.0);
    #define WHITE vec4(1.0, 1.0, 1.0, 1.0);
    #define BLACK vec4(0.0, 0.0, 0.0, 1.0);

    uniform float u_canvas_height;
    uniform float u_canvas_width;
    uniform float u_time;
    uniform float u_mouse_x;
    uniform float u_mouse_y;
    
    
    void draw_texture();

    
    void main() {
        draw_texture();
    }

    
    void draw_texture() {
        gl_FragColor = GREEN;
        
        vec2 uv = vec2(
            gl_FragCoord.x / u_canvas_width,
            gl_FragCoord.y / u_canvas_height
        );
        
        float dx = abs(u_mouse_x - gl_FragCoord.x);
        float dy = abs(u_canvas_height - gl_FragCoord.y - u_mouse_y);
        float r2 = dx * dx + dy * dy;
        
        bool is_in_cursor = (r2 < 200.0);
        
        if (is_in_cursor) {
            gl_FragColor = BLACK;
            return;
        }
        
        float sin_1 = sin(3.0 * uv.y + 2.0 * u_time);
        float sin_2 = sin(5.0 * uv.y + 3.0 * u_time);
        float modifier = 0.5 * r2 / min(u_canvas_height, u_canvas_width);
        float translate_x = 0.1;
        
        float line_path_x = (sin_1 + sin_2) / modifier + translate_x;
                
        for (int line_number = 0; line_number < 9; line_number++) {
            bool is_in_line =
                   (uv.x > line_path_x - 0.02)
                && (uv.x < line_path_x + 0.02);
            
            if (is_in_line) {
                gl_FragColor = WHITE;
            }
            
            line_path_x += translate_x;
        }
    }

</script>

  
      <script >
// Template pen without animations: https://codepen.io/sfi0zy/pen/zYoxdbw

const UNIFORMS = Object.freeze({
  canvas_height: 'u_canvas_height',
  canvas_width: 'u_canvas_width',
  time: 'u_time',
  mouse_x: 'u_mouse_x',
  mouse_y: 'u_mouse_y' });



const DEFAULT_UNIFORM_VALUES = Object.freeze({
  u_canvas_height: 1,
  u_canvas_width: 1,
  u_time: 0,
  u_mouse_x: window.innerWidth / 2,
  u_mouse_y: window.innerHeight / 2 });



class Example {
  constructor(options) {
    this.options = options;
    this.canvas = document.getElementById(options.canvas);
    this.gl = this.canvas.getContext(.........完整代码请登录后点击上方下载按钮下载查看