gsap+webgl实现鼠标交互早餐煎鸡蛋液态融合动画效果代码

代码语言:html

所属分类:动画

代码描述:gsap+webgl实现鼠标交互早餐煎鸡蛋液态融合动画效果代码

代码标签: gsap webgl 鼠标 交互 早餐 鸡蛋 液态 融合 动画

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

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

<head>
 
<meta charset="UTF-8">

 
 
<style>
body
, html {
   
margin: 0;
   
padding: 0;
   
background-color: #bfd1e5;
   
font-family: "Georgia", serif;
}

canvas
#eggs {
   
position: fixed;
   
top: 0;
   
left: 0;
   
display: block;
   
width: 100%;
   
pointer-events: none;
}

.page-title {
   
position: absolute;
   
top: 50%;
   
left: 50%;
   
transform: translate(-50%, -50%);
   
user-select: none;
   
pointer-events: none;
   
width: 95%;
   
max-width: 700px;
   
opacity: .7;
}

.page-title > * {
   
font-size: 6vh;
   
padding: 0;
   
margin: 0;
}

.page-title h1 {
   
font-size: 14vh;
}

.page-title .sub-title {
   
font-size: 4vh;
   
font-style: italic;
}
</style>


 
 
</head>

<body translate="no">
 
<div class="page-title">
   
<h1>Breakfast</h1>
   
<p>&#47;&#712;br&#x025B;kf&#x0259;st&#47;</p>
   
<p class="sub-title">noun</p>
   
<p>a meal eaten in the morning, the first of the day.</p>
</div>

<canvas id="eggs"></canvas>

<script type="x-shader/x-fragment" id="vertShader">
    precision mediump
float;

    varying vec2 vUv
;
    attribute vec2 a_position
;

   
void main() {
        vUv
= .5 * (a_position + 1.);
        gl_Position
= vec4(a_position, 0.0, 1.0);
   
}
</script>

<script type="x-shader/x-fragment" id="fragShader">
    precision mediump float;

    varying vec2 vUv;
    uniform float u_time;
    uniform float u_ratio;
    uniform float u_resolution_scale;
    uniform sampler2D u_click_data_texture;

    #define TWO_PI 6.28318530718

    float rand(float n){ return fract(sin(n) * 43758.5453123); }

    vec3 mod289(vec3 x) { return x - floor(x * (1. / 289.)) * 289.; }
    vec2 mod289(vec2 x) { return x - floor(x * (1. / 289.)) * 289.; }
    vec3 permute(vec3 x) { return mod289(((x*34.)+1.)*x); }
    float snoise(vec2 v) {
        const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
        vec2 i = floor(v + dot(v, C.yy));
        vec2 x0 = v - i + dot(i, C.xx);
        vec2 i1;
        i1 = (x0.x > x0.y) ? vec2(1., 0.) : vec2(0., 1.);
        vec4 x12 = x0.xyxy + C.xxzz;
        x12.xy -= i1;
        i = mod289(i);
        vec3 p = permute(permute(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.));
        vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.);
        m = m*m;
        m = m*m;
        vec3 x = 2. * fract(p * C.www) - 1.;
        vec3 h = abs(x) - 0.5;
        vec3 ox = floor(x + 0.5);
        vec3 a0 = x - ox;
        m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
        vec3 g;
        g.x = a0.x * x0.x + h.x * x0.y;
        g.yz = a0.yz * x12.xz + h.yz * x12.yw;
        return 130. * dot(m, g);
    }

    vec2 hash(vec2 p) {
        p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
        return fract(sin(p)*18.5453);
    }

    vec2 rotateUV(vec2 uv, float angle) {
        float s = sin(angle), c = cos(angle);
        return mat2(c, -s, s, c) * uv;
    }

    float get_cell_sectors(float angle, vec2 radomizer, float t) {
        float sectors = .5 * (1. + sin((2. + floor(radomizer.y * 2.)) * angle));
        sectors *= (.7 + .5 * sin(angle - 2. * t + radomizer.x));
        sectors *= (.5 + .5 * cos(angle + t));
        return sectors;
    }

    float get_area_around_yellow(float old_area_around_yellow, float dist, float angle, float sectors) {
        float area_around_yellow = max(old_area_around_yellow, .3 * dist * (1. + sin(angle - .6)));
        area_around_yellow += .1 * smoothstep(.0, .3, dist * (1. + 10. * sectors));
        return area_around_yellow;
    }

    float get_yellow(float dist, float radomizer) {
        return (.8 + .6 * radomizer) * dist;
    }

    float get_yellow_hit_area(float old_yellow_hit_area, float dist, float scale) {
        float yellow_hit_area = max(old_yellow_hit_area, dist);
        yellow_hit_area -= .12 * scale * dist;
        return yellow_hit_area;
    }

    float get_yellow_light(float dist, float angle, float radius, float radomizer) {
        float side_arc_light = dist;
        side_arc_light *= (.5 * (1. + sin(angle - .6)));
        side_arc_light *= (1. - smoothstep(.999, 1., radius));
        return radomizer * side_arc_light;
    }

    float get_blick(float old_yellow_blick, float dist, float angle, float radius) {
        float side_arc_blick = dist;
        side_arc_blick *= (.5 * (1. + sin(angle + 3.)));
        side_arc_blick *= (1. - smoothstep(.9994, 1., radius));
        return max(old_yellow_blick, side_arc_blick);
    }

    void main() {

        vec2 uv = vUv;
        uv *= u_resolution_scale;
        uv.y = 1. - uv.y;

        float white = 0.;
        float white_shadow = 0.;
        float area_around_yellow = 0.;
        float yellow = 0.;
        float yellow_hit_area = 0.;
        float yellow_light = 0.;
        float yellow_blick = 0.;

        uv.x *= u_ratio;
        uv.x *= .9;

        float t = u_time;

        for (int i = 0; i < 4; i++) {

            vec2 layer_randomizer = hash(vec2(10. * float(i), 200. * float(i)));
            vec2 layer_offset = hash(vec2(-100. * float(i), 2. * float(i))) - .5;
            float layer_scale = 1.1 - .1 * layer_randomizer.x;

            vec2 layer_uv = rotateUV(uv, layer_randomizer.y * TWO_PI);
            layer_uv +.........完整代码请登录后点击上方下载按钮下载查看

网友评论0