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>/ˈbrɛkfəst/</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