canvas粒子文字

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let canvas = document.createElement('canvas');
canvas.style.background = '#000'
document.body.appendChild(canvas);
let gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});

let particles = program({
    type: gl.POINTS,
    vertexSize: 4,
    vertices: createVertices(),
    uniforms: {time: '1f', resolution: '2f'},
    shaders: [`
            uniform float time;
            uniform vec2 resolution;
            attribute vec4 pt;
            varying float i;
            void main() {

float t = smoothstep(0.0, 1.0, fract(time*0.3));
                t += mod(floor(time*0.3), 2.0);
                t *= 3.1415;
                i = fract(pt.x*pt.y*pt.z*pt.w);
                vec2 c = (pt.xy + pt.zw)/2.0;
                float a = atan(pt.y - c.y, pt.x - c.x);
                float r = length(vec2(pt.x - c.x, pt.y - c.y));
                r -= sin(t*3.)*0.005; 
                c += vec2(cos(a+t), sin(a+t)) * r;
                gl_Position = vec4(c, 0., 1.);
                gl_PointSize = 10.0;
            }`, `
            uniform float time;
            varying float i;
            float ch(vec2 uv) {
                float d = length(uv - 0.5);
                return smoothstep(0.2, 0.00, d);
            }
            void main() {
                float d = length(gl_PointCoord.xy-0.5);
                d = smoothstep(0.5, 0.00, d);
                gl_FragColor = vec4(
                    ch(gl_PointCoord.xy-0.25*sin(time+i)),
                    ch(gl_PointCoord.xy),
                    ch(gl_PointCoord.xy+0.25*sin(time+i)), 
                    0.01
                 );
            }`]
});

gl.enable(gl.BLEND);

requestAnimationFrame(function draw(t) {
    
    gl.blendFunc(gl.ONE, gl.ONE); // additive
    particles.bind();
    if (canvas.width != innerWidth || canvas.height !== innerHeight) {
        particles.uniforms.resolution([innerWidth, innerHeight]);
        gl.viewport(0, 0, canvas.width = innerWidth, canvas.height = innerHeight);
    }
    particles.uniforms.time([t/3000]);
    particles.draw();
    
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 
    clearPass.bind();
    clearPass.draw();
    
    requestAnimationFrame(draw);
    
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg