nov 25 2008

Efeito de Párticulas caindo em Javascript

  • Autor: IphoneVicious em javascript
  • Sem Comentários. Seja o primeiro a comentar.
Outro ótimo script desenvolvido pelo Elsio Antunes, que simula a ação de partículas quadradas caindo no chão, para ver o exemplo visitem http://byteblog.net/particles.htm a biblioteca Canvas tem muita coisa legal pra usar, pena que o Internet Explorer está muito ultrapassado no desenvolvimento do Canvas:

<html>
   <head>
      <title>particulum quiquorum lepidus et fagueirus</title>
   </head>
   <body>
      <canvas id="cv" width="680" height="480"></canvas>
   </body>
 
 
 
	<script>
 
		canvas=null
		ctx=null
		particles = [];
		NUM_PARTICLES = 40;
 
 
		onload = function() {
			canvas = document.getElementById("cv");
			ctx = canvas.getContext("2d");
 
			for(var i = 0; i < NUM_PARTICLES; i++) {
				particles[i] = new Particle();
			}
 
			loop();
		}
 
 
		function Particle() {
			this.x = Math.random() * canvas.width;
			this.y = Math.random() * canvas.height;
 
			this.xvel = Math.random() * 5 - 2.5;
			this.yvel = Math.random() * 5 - 2.5;
 
			this.r = Math.floor(Math.random() * 256);
			this.g = Math.floor(Math.random() * 256);
			this.b = Math.floor(Math.random() * 256);
 
			this.size = Math.random() * 10;
 
		}
 
 
 
 
		function loop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
 
			for(var i = 0; i < NUM_PARTICLES; i++) {
				particles[i].update();
 
				ctx.strokeStyle = "rgb("+particles[i].r+", "+particles[i].g+", "+particles[i].b+")";
				ctx.lineWidth = particles[i].size;
				ctx.beginPath();
				ctx.moveTo(particles[i].x, particles[i].y);
				ctx.lineTo(particles[i].x - particles[i].xvel,particles[i].y - particles[i].yvel);
				ctx.stroke();
				ctx.closePath();
			}
 
			setTimeout(loop, 10);
		}
 
 
		Particle.prototype.update = function() {
 
			this.yvel += 0.3;
 
			if ((this.y+this.yvel > canvas.height) || (this.y+this.yvel < 0)) {this.yvel = -this.yvel;this.yvel*=.84}
			if ((this.x+this.xvel > canvas.width) || (this.x+this.xvel < 0)) {this.xvel = -this.xvel;this.xvel*=.84}
 
			this.x += this.xvel;
			this.y += this.yvel;
 
		}
 
 
 
 
	</script>
 
	<style>
		body {
			background-color:888888;
			text-align:center;
		}
 
		canvas {
			border:3px solid #eeeeee;
			background-color:black;
		}
	</style>
 
</html>


DEIXE UM COMENTÁRIO

Subscrever

Subscreve o Blog



Publicidade

Comentários Recentes

  • shirley Balazs: Parabéns!! Informações de utilidade publica e de primeira, foi muito útil a mim.Obrigada!!
  • Jefferson Ferreira de brito: eu quero muito
  • thiago valente: Eu quero um para mim
  • Lucas martins balieiro: Eu não fiz o enem mesmo assim eu posso me inscrever no site essa é minha dúvida, só queme...
  • Francisca Marli Oliveira: quero saber quanto tenho no meu fgts

Links

Leitores Recentes

VALE O CLIQUE!

Site Seguro Ocioso

Divulgue o blog Infomaroto em seu site e tenha seu link ou banner aqui.
Blog Infomaroto