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