shader-art实现爱心彩虹动画效果代码-html代码-BFW代码库

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)))
                    * 43758.5453123);
            }

            // 2D Noise based on Morgan McGuire @morgan3d
            // https://www.shadertoy.com/view/4dS3Wd
            float noise(in vec2 st) {
                vec2 i = floor(st);
                vec2 f = fract(st);

                // Four corners in 2D of a tile
                float a = random(i);
                float b = random(i + vec2(1.0, 0.0));
                float c = random(i + vec2(0.0, 1.0));
                float d = random(i + vec2(1.0, 1.0));

                // Smooth Interpolation

                // Cubic Hermine Curve.
                vec2 u = smoothstep(0., 1., f);

                // Mix 4 coorners percentages
                return mix(a, b, u.x) +
                (c - a)* u.y * (1.0 - u.x) +
                (d - b) * u.x * u.y;
            }

            // cosine based palette, 4 vec3 params, by IQ
            vec3 palette(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d) {
                return a .........完整代码请登录后点击上方下载按钮下载查看