shader-art实现爱心彩虹动画效果代码
代码语言:html
所属分类:动画
代码描述:shader-art实现爱心彩虹动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
}
shader-art {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<shader-art role="img" aria-label="An animated valentines illustration" autoplay>
<script type="vert">
precision highp float;
attribute vec4 position;
varying vec2 vPos;
void main() {
vPos = position.xy;
gl_Position = position;
}
</script>
<script type="frag">
precision highp float;
varying vec2 vPos;
uniform vec2 resolution;
uniform float time;
const float PI = 3.141592654;
const float DEG = PI / 180.;
vec2 rotate(in vec2 p, in float a) {
return vec2(p.x * cos(a) - p.y * sin(a),
p.x * sin(a) + p.y * cos(a));
}
vec2 repeat(in vec2 p, in vec2 c) {
return mod(p, c) - 0.5 * c;
}
// function from https://www.shadertoy.com/view/3ll3zr
float sdHeart(in vec2 p, float s) {
p /= s;
vec2 q = p;
q.x *= 0.5 + .5 * q.y;
q.y -= abs(p.x) * .63;
return (length(q) - .7) * s;
}
float sdCircle(in vec2 p, float r) {
return length(p) - r;
}
float sdBox(in vec2 p, in vec2 b) {
vec2 d = abs(p)-b;
return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
}
// 2D Random
float random (in vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898, 78.233)))
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0