特效描述：html5 canvas 抽象模糊 烟雾动画特效。html5 canvas绘制彩色模糊的烟雾动画、抽象模糊的烟雾动画特效

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

void main() {

gl_Position = vec4( position, 1.0 );

}

uniform vec2 u_resolution;

uniform float u_time;

const int octaves = 10;

const int octavesWarp = 3;

const float seed = 43758.5453123;

const float seed2 = 73156.8473192;

const float PI = 3.14159265359;

const float TAU = 6.28318530718;

float random(float val) {

return fract(sin(val) * seed);

}

vec2 random2(vec2 st, float seed){

st = vec2( dot(st,vec2(127.1,311.7)),

dot(st,vec2(269.5,183.3)) );

return -1.0 + 2.0*fract(sin(st)*seed);

}

float random2d(vec2 uv) {

return fract(

sin(

dot( uv.xy, vec2(12.9898, 78.233) )

) * seed);

}

// Value Noise by Inigo Quilez - iq/2013

// https://www.shadertoy.com/view/lsf3WH

float noise(vec2 st, float seed) {

vec2 i = floor(st);

vec2 f = fract(st);

vec2 u = f*f*(3.0-2.0*f);

return mix( mix( dot( random2(i + vec2(0.0,0.0), seed ), f - vec2(0.0,0.0) ),

dot( random2(i + vec2(1.0,0.0), seed ), f - vec2(1.0,0.0) ), u.x),

mix( dot( random2(i + vec2(0.0,1.0), seed ), f - vec2(0.0,1.0) ),

dot( random2(i + vec2(1.0,1.0), seed ), f - vec2(1.0,1.0) ), u.x), u.y);

}

vec3 plotCircle(vec2 pos, vec2 uv, float size) {

return vec3(smoothstep(size, size + 0.05, length(uv - pos)));

}

// FBM function courtesy of Patricio Vivo

float fbm (in vec2 st, float seed) {

// Initial values

float value = 0.0;

float amplitude = .5;

float frequency = 0.;

// Loop of octaves

for (int i = octaves; i > 0; i--) {

value += amplitude * noise(st, seed);

st *= 2.;

amplitude *= .5;

}

return value;

}

// FBM function courtesy of Patricio Vivo

float fbmWarp (in vec2 st, float seed) {

// Initial values

float value = 0.0;

float amplitude = .5;

float frequency = 0.;

// Loop of octaves

for (int i = octavesWarp; i > 0; i--) {

value += amplitude * noise(st, seed);

st *= 2.;

amplitude *= .5;

}

return value;

}

float fbm2 ( in vec2 _st, float seed) {

float v = 0.0;

float a = 0.5;

vec2 shift = vec2(100.0);

// Rotate to reduce axial bias

mat2 rot = mat2(cos(0.5), sin(0.5),

-sin(0.5), cos(0.50));

for (int i = 0; i < octaves; ++i) {

v += a * noise(_st, seed);

_st = rot * _st * 2.0 + shift;

a *= 0.5;

}

return v;

}

mat2 rotate2d(float _angle){

return mat2(cos(_angle),sin(_angle),

-sin(_angle),cos(_angle));

}

void main() {

vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;

uv *= 5.;

uv.x += cos(u_time / 5000.) * 1000.;

uv.y -= sin(u_time / 3000.) * 500.;

uv /= 5.;

vec2 noiseuv = uv;

noiseuv.x -= u_time/100.;

float offsetVal = fbmWarp(noiseuv, seed);

vec2 direction = normalize(vec2(1.));

direction = rotate2d(offsetVal * TAU) * direction;

vec2 uvN = uv * 2. + direction * sin(u_time / 10.) * 1.;

vec2 uvN2 = uv * 2. + direction * sin(1. + u_time / 10.) * 1.;

float noiseVal = fbm2(uvN, seed2);

float noiseVal2 = fbm2(uvN2, seed);

vec3 colour = vec3(noiseVal + noiseVal2);

colour.rg += noiseVal2;

colour.r += .1;

colour.gb += noiseVal;

// colour.b += mix(noiseVal, noiseVal2, sin(u_time / 20.)) * 5.;

colour += 0.1;

// colour *= noiseVal * noiseVal;

// colour.gb += uvN / 5.;

gl_FragColor = vec4(colour, 1.);

}