html--密集烟花
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
canvas {
position: absolute;
top: 0;
left: 0;
background-color: #111;
}
</style>
</HEAD>
<BODY>
<H1 style="color:red;position:relative;z-index:999;text-align: center;">需要本特效源码加群:557622719</H1>
<canvas id=c></canvas>
<script>
var gl = c.getContext( 'webgl', { preserveDrawingBuffer: true } )
,w = c.width = window.innerWidth
,h = c.height = window.innerHeight
,webgl = {}
,opts = {
projectileAlpha: .8,
projectileLineWidth: 1.3,
fireworkAngleSpan: .5,
baseFireworkVel: 3,
addedFireworkVel: 3,
gravity: .03,
lowVelBoundary: -.2,
xFriction: .995,
baseShardVel: 1,
addedShardVel: .2,
fireworks: 1000,
baseShardsParFirework: 10,
addedShardsParFirework: 10,
shardFireworkVelMultiplier: .3,
initHueMultiplier: 1/360,
runHueAdder: .1/360
}
webgl.vertexShaderSource = `
uniform int u_mode;
uniform vec2 u_res;
attribute vec4 a_data;
varying vec4 v_color;
vec3 h2rgb( float h ){
return clamp( abs( mod( h * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. );
}
void clear(){
gl_Position = vec4( a_data.xy, 0, 1 );
v_color = vec4( 0, 0, 0, a_data.w );
}
void draw(){
gl_Position = vec4( vec2( 1, -1 ) * ( ( a_data.xy / u_res ) * 2. - 1. ), 0, 1 );
v_color = vec4( h2rgb( a_data.z ), a_data.w );
}
void main(){
if( u_mode == 0 )
draw();
else
clear();
}
`;
webgl.fragmentShaderSource = `
precision mediump float;
varying vec4 v_color;
void main(){
gl_FragColor = v_color;
}
`;
webgl.vertexShader = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( webgl.vertexShader, webgl.vertexShaderSource );
gl.compileShader( webgl.vertexShader );
webgl.fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource( webgl.fragmentShader, webgl.fragmentShaderSource );
gl.compileShader( webgl.fragmentShader );
webgl.shaderProgram = gl.createProgram();
gl.attachShader( webgl.shaderProgram, webgl.vertexShader );
gl.attachShader( webgl.shaderProgram, webgl.fragmentShader );
gl.linkProgram( webgl.shaderProgram );
gl.useProgram( webgl.shaderProgram );
webgl.dataAttribLoc = gl.getAttribLocation( webgl.shaderProgram, 'a_data' );
webgl.dataBuffer = gl.createBuffer();
gl.enableVertexAttribArray( webgl.dataAttribLoc );
gl.bindBuffer( gl.ARRAY_BUFFER, webgl.dataBuffer );
gl.vertexAttribPointer( webgl.dataAttribLoc, 4, gl.FLOAT, false, 0, 0 );
webgl.resUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_res' );
webgl.modeUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_mode' );
gl.viewport( 0, 0, w, h );
gl.uniform2f( webgl.resUniformLoc, w, h );
gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
gl.enable( gl.BLEND );
gl.lineWidth( opts.projectileLineWidth );
webgl.data = [];
webgl.clear = function(){
gl.uniform1i( webgl.modeUniformLoc, 1 );
var a = .1;
webgl.data = [
-1, -1, 0, a,
1, -1, 0, a,
-1, 1, 0, a,
-1, 1, 0, a,
1, -1, 0, a,
1, 1, 0, a
];
webgl.draw( gl.TRIANGLES );
gl.uniform1i( webgl.modeUniformLoc, 0 );
webgl.data.length = 0;
}
webgl.draw = function( glType ){
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( webgl.data ), gl.STATIC_DRAW );
gl.drawArrays( glType, 0, webgl.data.length / 4 );
}
varfireworks = []
,tick = 0
,sins = []
,coss = []
,maxShardsParFirework = opts.baseShardsParFirework + opts.addedShardsParFirework
,tau = 6.283185307179586476925286766559;
for( var i = 0; i < maxShardsParFirework; ++i ){
sins[ i ] = Math.sin( tau * i / maxShardsParFirework );
coss[ i ] = Math.cos( tau * i / maxShardsParFirework );
}
function Firework(){
this.reset();
this.shards = [];
for( var i = 0; i < maxShardsParFirework; ++i )
this.shards.push( new Shard( this ) );
}
Firework.prototype.reset = function(){
var angle = -Math.PI / 2 + ( Math.random() - .5 )* opts.fireworkAngleSpan
,vel = opts.baseFireworkVel + opts.addedFireworkVel * Math.random();
this.mode = 0;
this.vx = vel * Math.cos( angle );
this.vy = vel * Math.sin( angle );
this.x = Math.random() * w;
this.y = h;
this.hue = tick * opts.initHueMultiplier;
}
Firework.prototype.step = function(){
if( this.mode === 0 ){
var ph = this.hue
,px = this.x
,py = this.y;
this.hue += opts.runHueAdder;
this.x += this.vx *= opts.xFriction;
this.y += this.vy += opts.gravity;
webgl.data.push(
px, py, ph, opts.projectileAlpha * .2,
this.x, this.y, this.hue, opts.projectileAlpha * .2 );
if( this.vy >= opts.lowVelBoundary ){
this.mode = 1;
this.shardAmount = opts.baseShardsParFirework + opts.addedShardsParFirework * Math.random() | 0;
var baseAngle = Math.random() * tau
,x = Math.cos( baseAngle )
,y = Math.sin( baseAngle )
,sin = sins[ this.shardAmount ]
,cos = coss[ this.shardAmount ];
for( var i = 0; i < this.shardAmount; ++i ){
var vel = opts.baseShardVel + opts.addedShardVel * Math.random();
this.shards[ i ].reset( x * vel, y * vel )
var X = x;
x = x * cos - y * sin;
y = y * cos + X * sin;
}
}
} else if( this.mode === 1 ) {
this.ph = this.hue
this.hue += opts.runHueAdder;
var allDead = true;
for( var i = 0; i < this.shardAmount; ++i ){
var shard = this.shards[ i ];
if( !shard.dead ){
shard.step();
allDead = false;
}
}
if( allDead )
this.reset();
}
}
function Shard( parent ){
this.parent = parent;
}
Shard.prototype.reset = function( vx, vy ){
this.x = this.parent.x;
this.y = this.parent.y;
this.vx = this.parent.vx * opts.shardFireworkVelMultiplier + vx;
this.vy = this.parent.vy * opts.shardFireworkVelMultiplier + vy;
this.starty = this.y;
this.dead = false;
this.tick = 1;
}
Shard.prototype.step = function(){
this.tick += .05;
var px = this.x
,py = this.y;
this.x += this.vx *= opts.xFriction;
this.y += this.vy += opts.gravity;
var proportion = 1 - ( this.y - this.starty ) / ( h - this.starty );
webgl.data.push(
px, py, this.parent.ph, opts.projectileAlpha / this.tick,
this.x, this.y, this.parent.hue, opts.projectileAlpha / this.tick );
if( this.y > h )
this.dead = true;
}
function anim(){
window.requestAnimationFrame( anim )
webgl.clear();
++tick;
if( fireworks.length < opts.fireworks )
fireworks.push( new Firework );
fireworks.map( function( firework ){ firework.step(); } );
webgl.draw( gl.LINES );
}
anim();
window.addEventListener( 'resize', function(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
gl.viewport( 0, 0, w, h );
gl.uniform2f( webgl.resUniformLoc, w, h );
})
window.addEventListener( 'click', function( e ){
var firework = new Firework();
firework.x = e.clientX;
firework.y = e.clientY;
firework.vx = 0;
firework.vy = 0;
fireworks.push( firework );
});
</script>
</BODY>
</HTML>
原文地址：https://blog.csdn.net/stqer/article/details/137795002
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！