glea实现表白爱心旋转动画效果

代码语言:html

所属分类:表白

代码描述:glea实现表白爱心旋转动画效果

代码标签: 爱心 旋转 动画 效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body
{
 
height: 100vh;
 
margin: 0;
}

canvas
{
 
display: block;  
 
width: 100vw;
 
height: 100vh;
}
</style>

</head>
<body translate="no">
<canvas></canvas>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/glea.js"></script>
<script >
const vert = `
precision highp float;
attribute vec2 position;

void main() {
  gl_Position = vec4(position, 0, 1.0);
}
`;

const frag = `
precision highp float;
uniform float time;
uniform vec2 resolution;

vec2 coords() {
  float vmin = min(resolution.x, resolution.y);
  return vec2((gl_FragCoord.x - resolution.x * .5) / vmin,
              (gl_FragCoord.y - resolution.y * .5) / vmin);
}

vec2 rotate(vec2 p, float a) {
  return vec2(p.x * cos(a) - p.y * sin(a),
              p.x * sin(a) + p.y * cos(a));
}

float symmetricDiff(float a, float b)
{
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0