twgljs实现webgl canvas文字圈圈闪烁动画效果代码
代码语言:html
所属分类:动画
代码描述:twgljs实现webgl canvas文字圈圈闪烁动画效果代码
代码标签: twgl webgl canvas 文字 圈圈 闪烁 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; } body { background: #333; overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; display: flex; align-items: center; } canvas { height: 100%; width: 100%; margin: auto; } </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <!-- VertexShader code here --> <script id="vertexShader" type="x-shader/x-vertex">#version 300 es precision highp float; in vec4 position; void main() { gl_Position = vec4( position ); } </script> <!-- FragmentShader code here --> <script id="fragmentShader" type="x-shader/x-fragment">#version 300 es precision highp float; out vec4 fragColor; uniform vec2 u_resolution; uniform float u_time; uniform vec4 u_mouse; #define R u_resolution #define T u_time #define M u_mouse #define PI 3.141592653 #define PI2 6.283185307 #define MIN_DIST 1e-4 #define MAX_DIST 55. // constants const float sz = .425; const float hf = sz/2.; const vec4 bz = vec4(.075,.055,.035,.0); const vec4 bo = vec4(.175,.15,.075,.025); const vec2 oa = vec2(.15,.1); vec3 hue(float t){ return .55 + .45*cos(PI2*t*(vec3(.95,.97,.98)+vec3(1,.5,.2))); } float hash21(vec2 p){return fract(sin(dot(p,vec2(27.619,57.583)))*4358.5453);} mat2 rot(float a){return mat2(cos(a),sin(a),-sin(a),cos(a)); } float box( in vec2 p, in vec2 b ){ vec2 d = abs(p)-b; return length(max(d,0.))+min(max(d.x,d.y),0.); } float rbox( in vec2 p, in vec2 b, in vec4 r ) { r.xy = (p.x>0.)?r.xy : r.zw; r.x = (p.y>0.)?r.x : r.y; vec2 q = abs(p)-b+r.x; return min(max(q.x,q.y),0.)+length(max(q,0.))-r.x; } // special float getdp(vec2 p) { float bt = length(p)-.075; return bt; } // number float get3(vec2 p) { vec2 of = vec2(0,.075); float bt = max( rbox(p-of,oa,bz.xxww), -rbox(p-of+vec2(.05,0),vec2(.15,.05),bz.zzww) ); float bb = max( rbox(p+of,oa,bz.xxww), -rbox(p+of+vec2(.05,0),vec2(.15,.05),bz.zzww) ); return min(bt,bb); } //letters float getA(vec2 p) { vec2 of = vec2(0,.075); float bt = max( rbox(p,vec2(.15,.175),bz.xwxw), -rbox(p+vec2(.0,.05),vec2(.1,.175),bz.zwzw) ); float bb = box(p,vec2(.15,.025)); return min(bt,bb); } float getB(vec2 p) { vec2 of = vec2(0,.075); float bt = max( rbox(p-of,oa,bz.xxww), -rbox(p-of,vec2(.1,.05),bz.zzww) ); float bb = max( rbox(p+of,oa,bz.xxww), -rbox(p+of,vec2(.1,.05),bz.zzww) ); return min(bt,bb); } float getC(vec2 p) { float bt = max( rbox(p,vec2(.15,.175),bz.wwxx), -rbox(p-vec2(.05,0),vec2(.15,.125),bz.wwzz) ); return bt; } float getD(vec2 p) { float bt = max(rbox(p,vec2(.15,.175),bz.xxww), -rbox(p,vec2(.1,.125),vec4(.035,.035,0,0))); return bt; } float getE(vec2 p) { vec2 of = vec2(0,.075); float bt = max( rbox(p-of,oa,bz.wwxx), -rbox(p-of-vec2(.05,0),vec2(.15,.05),bz.wwzz) ); float bb = max( rbox(p+of,oa,bz.wwxx), -rbox(p+of-vec2(.05,0),vec2(.15,.05),bz.wwzz) ); return min(bt,bb); } float getF(vec2 p) { float bt = min( box(vec2(p.x+.125,p.y),vec2(.025,.175)), box(vec2(p.x,abs(p.y-.075)-.075),vec2(.15,.025)) ); return bt; } float getG(vec2 p) { float bt = max( rbox(p,vec2(.15,.175),bz.wwxx), -rbox(p-vec2(.05,0),vec2(.15,.125),bz.wwzz) ); float bf = min( box(vec2(p.x-.125,p.y+.075),vec2(.025,.1)), box(vec2(p.x-.05,p.y),vec2(.1,.025)) ); return min(bt,bf); } float getH(vec2 p) { float bt = min( box(vec2(abs(p.x)-.125,p.y),vec2(.025,.175)), box(p,vec2(.15,.025)) ); return bt; } float getI(vec2 p) { float bt = min( box(p,vec2(.025,.175)), box(vec2(p.x,abs(p.y)-.15),vec2(.15,.025)) ); return bt; } float getJ(vec2 p) { float bt = max( rbox(p,vec2(.15,.175),vec4(.0,.1,0,0)), -rbox(p+vec2(.05,-.05),vec2(.15,.175),vec4(.0,.055,0,0)) ); return bt; } float getK(vec2 p) { float bt = max( rbox(p-vec2(0,.075),oa,vec4(.0,.1,0,0)), -rbox(p-vec2(0,.12),vec2(.1,.095),vec4(.0,.055,0,0)) ); float bb = max( rbox(p+vec2(0,.075),oa,vec4(.1,.0,0,0)), -rbox(p+vec2(0,.12),vec2(.1,.095),vec4(.055,.0,0,0)) ); return min(bt,bb); } float getL(vec2 p) { float bt = min( box(p+vec2(.125,0),vec2(.025,.175)), box(p+vec2(0,.15),vec2(.15,.025)) ); return bt; } float getM(vec2 p) { vec2 of = vec2(.065,0); float bt = max( rbox(p+of,vec2(.085,.175),bz.xwxw), -rbox(p+of+vec2(.0,.05),vec2(.0375,.175),bz.zwzw) ); float bb = max( rbox(p-of,vec2(.085,.175),bz.xwxw), -rbox(p-of+vec2(.0,.05),vec2(.0375,.175),bz.zwzw) ); return min(bt,bb); } float getN(vec2 p) { float bt = max( rbox(p,vec2(.15,.175),bz.xwxw), -rbox(p+vec2(.0,.045),vec2(.1,.175),bz.zwzw) ); return bt; } float getO(vec2 p) { float bt = max( rbox(p,vec2(.15,.175),bz.xxxx), -rbox(p,vec2(.1,.125),bz.zzzz) ); return bt; } float getP(vec2 p) { float bt = max( rbox(p-vec2(.0,.075),oa,bz.xxww), -rbox(p-vec2(.0,.075),vec2(.1,.05),bz.zzww) ); float bb = box(p+vec2(.125,0),vec2(.025,.175)); return min(bt,bb); } float getQ(vec2 p) { float bt = max( rbox(p,vec2(.15,.175),vec4(.075,.11,.075,.075)), -rbox(p,vec2(.1,.125),vec4(.035,.065,.035,.035)) ); vec2 q = (p+vec2(-.0925,.115))*rot(.8); float bb = box(q,vec2(.025,.065)); return min(bt,bb); } float getR(vec2 p) { float bt = max( rbox(p-vec2(.0,.075),oa,bz.xxww), -rbox(p-vec2(.0,.075),vec2(.1,.05),bz.zzww) ); float bb = max( rbox(p+vec2(.0,.075),oa,bz.xwww), -rbox(p+vec2(.0,.12),vec2(.1,.095),bz.zwww) ); return min(bt,bb); } float getS(vec2 p) { float bt = max( rbox(p-vec2(.0,.075),oa,bz.wwxx), -rbox(p-vec2(.075,.075),vec2(.175,.05),bz.wwzz) ); bt = max(bt,-box(p-vec2(.085,.045),vec2(.08,.08))); float bb = max( rbox(p+vec2(.0,.075),oa,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0