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