[Fireworks code], Valentine’s Day, birthday gift code for lovers

[Fireworks code], Valentine’s Day, birthday gift code for lovers

Same old rule. Renderings first



The picture is accelerated, and the position of the cherry blossoms is completely controlled by the click.

1 Initialize the particle system

	var Particle = function(x, y, hue){
		this.x = x;
		this.y = y;
		this.coordLast = [
			{x: x, y: y},
			{x: x, y: y},
			{x: x, y: y}
		];
		this.angle = rand(0.360);
		this.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0)?1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance));
		this.friction = 1 - self.partFriction/100;
		this.gravity = self.partGravity/2;
		this.hue = rand(hue-self.hueVariance, hue+self.hueVariance);
		this.brightness = rand(50.80);
		this.alpha = rand(40.100) /100;
		this.decay = rand(10.50) /1000;
		this.wind = (rand(0, self.partWind) - (self.partWind/2)) /25;
		this.lineWidth = self.lineWidth;
	};
Copy the code

Update of 2 particle systems

	Particle.prototype.update = function(index){
		var radians = this.angle * Math.PI / 180;
		var vx = Math.cos(radians) * this.speed;
		var vy = Math.sin(radians) * this.speed + this.gravity;
		this.speed *= this.friction;
						
		this.coordLast[2].x = this.coordLast[1].x;
		this.coordLast[2].y = this.coordLast[1].y;
		this.coordLast[1].x = this.coordLast[0].x;
		this.coordLast[1].y = this.coordLast[0].y;
		this.coordLast[0].x = this.x;
		this.coordLast[0].y = this.y;
		
		this.x += vx * self.dt;
		this.y += vy * self.dt;
		
		this.angle += this.wind;				
		this.alpha -= this.decay;
		
		if(! hitTest(0.0,self.cw,self.ch,this.x-this.radius, this.y-this.radius, this.radius*2.this.radius*2) | |this.alpha < .05){					
			self.particles.splice(index, 1); }};Copy the code

3 drawing of particle system

	Particle.prototype.draw = function(){
		var coordRand = (rand(1.3) -1);
		self.ctx.beginPath();								
		self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));
		self.ctx.lineTo(Math.round(this.x), Math.round(this.y));
		self.ctx.closePath();				
		self.ctx.strokeStyle = 'hsla('+this.hue+'and 100%,+this.brightness+'%,'+this.alpha+') ';
		self.ctx.stroke();				
		
		if(self.flickerDensity > 0) {var inverseDensity = 50 - self.flickerDensity;					
			if(rand(0, inverseDensity) === inverseDensity){
				self.ctx.beginPath();
				self.ctx.arc(Math.round(this.x), Math.round(this.y), rand(this.lineWidth,this.lineWidth+3) /2.0.Math.PI*2.false)
				self.ctx.closePath();
				var randAlpha = rand(50.100) /100;
				self.ctx.fillStyle = 'hsla('+this.hue+'and 100%,+this.brightness+'%,'+randAlpha+') '; self.ctx.fill(); }}};Copy the code

4 Create a fireworks example

self.createParticles = function(x,y, hue){
	var countdown = self.partCount;
	while(countdown--){						
		self.particles.push(newParticle(x, y, hue)); }};Copy the code

5 Bind the mouse time, mouseDown, mouseup

	self.bindEvents = function(){$(window).on('resize'.function(){			
			clearTimeout(self.timeout);
			self.timeout = setTimeout(function() {
				self.ctx.lineCap = 'round';
				self.ctx.lineJoin = 'round';
			}, 100);
		});
		
		$(self.canvas).on('mousedown'.function(e){
			var randLaunch = rand(0.5);
			self.mx = e.pageX - self.canvasContainer.offset().left;
			self.my = e.pageY - self.canvasContainer.offset().top;
			self.currentHue = rand(self.hueMin, self.hueMax);
			self.createFireworks(self.cw/2, self.ch, self.mx, self.my);	
			
			$(self.canvas).on('mousemove.fireworks'.function(e){
				var randLaunch = rand(0.5);
				self.mx = e.pageX - self.canvasContainer.offset().left;
				self.my = e.pageY - self.canvasContainer.offset().top;
				self.currentHue = rand(self.hueMin, self.hueMax);
				self.createFireworks(self.cw/2, self.ch, self.mx, self.my);									
			});	
			
		});
		
		$(self.canvas).on('mouseup'.function(e){
			$(self.canvas).off('mousemove.fireworks');									
		});
					
	}
Copy the code

… Complete source code, please pay attention to the public number, background reply to receive