github.com/armen/terraform@v0.5.2-0.20150529052519-caa8117a08f1/website/source/assets/javascripts/app/Engine.Particle.js (about) 1 (function( 2 Engine, 3 Vector 4 ){ 5 6 Engine.Particle = function(width, height){ 7 var side, targetX, targetY; 8 this.accel = Vector.coerce(this.accel); 9 this.vel = Vector.coerce(this.vel); 10 this.pos = new Vector(0, 0); 11 12 this.maxRadius = Engine.getRandomFloat(0.1, 2.5); 13 // this.maxSpeed = Engine.getRandomFloat(0.01, 1000); 14 this.maxSpeed = Engine.getRandomFloat(20, 1000); 15 16 // Pick a random target 17 side = Engine.getRandomInt(0, 3); 18 if (side === 0 || side === 2) { 19 targetY = (side === 0) ? -(height / 2) : (height / 2); 20 targetX = Engine.getRandomInt(-(width / 2), width / 2); 21 } else { 22 targetY = Engine.getRandomInt(-(height / 2), height / 2); 23 targetX = (side === 3) ? -(width / 2) : (width / 2); 24 } 25 26 this.target = new Vector(targetX, targetY); 27 this.getAccelVector(); 28 29 this.maxDistance = this.distanceTo(this.target); 30 31 this.fillA = '#8750c2'; 32 this.fillB = '#b976ff'; 33 this.frameMax = Engine.getRandomInt(1, 5); 34 }; 35 36 Engine.Particle.prototype = { 37 38 radius: 1, 39 40 frame: 0, 41 showA: false, 42 43 accel: { 44 x: 0, 45 y: 0 46 }, 47 48 vel: { 49 x: 0, 50 y: 0 51 }, 52 53 pos: { 54 x: 0, 55 y: 0 56 }, 57 58 opacity: 1, 59 60 maxSpeed: 1500, 61 maxForce: 1500, 62 63 getAccelVector: function(){ 64 this.accel = Vector.sub(this.target, this.pos) 65 .normalize() 66 .mult(this.maxSpeed); 67 }, 68 69 update: function(engine){ 70 var distancePercent, halfWidth, halfHeight; 71 72 this.vel 73 .add(this.accel) 74 .limit(this.maxSpeed); 75 76 this.pos.add(Vector.mult(this.vel, engine.tick)); 77 78 halfWidth = engine.width / 2 + this.maxRadius; 79 halfHeight = engine.height / 2 + this.maxRadius; 80 81 if ( 82 this.pos.x < -(halfWidth) || 83 this.pos.x > halfWidth || 84 this.pos.y < -(halfHeight) || 85 this.pos.y > halfHeight 86 ) { 87 this.kill(engine); 88 } 89 90 distancePercent = (this.maxDistance - this.distanceTo(this.target)) / this.maxDistance; 91 this.radius = Math.max(0.1, this.maxRadius * distancePercent); 92 93 this.frame++; 94 if (this.frame > this.frameMax) { 95 this.frame = 0; 96 this.showA = !this.showA; 97 } 98 99 if (this.showA) { 100 engine.particlesA[engine.particlesA.length] = this; 101 } else { 102 engine.particlesB[engine.particlesB.length] = this; 103 } 104 105 return this; 106 }, 107 108 draw: function(ctx, scale){ 109 if (this.radius < 0.25) { 110 return; 111 } 112 113 if (this.showA) { 114 ctx.fillStyle = this.fillA; 115 } else { 116 ctx.fillStyle = this.fillB; 117 } 118 119 // Draw a square - very performant 120 ctx.fillRect( 121 this.pos.x * scale >> 0, 122 this.pos.y * scale >> 0, 123 this.radius * scale, 124 this.radius * scale 125 ); 126 127 // Draw a circle - far less performant 128 // ctx.beginPath(); 129 // ctx.arc( 130 // this.pos.x * scale, 131 // this.pos.y * scale, 132 // this.radius * scale, 133 // 0, 134 // Math.PI * 2, 135 // false 136 // ); 137 // ctx.fill(); 138 139 return this; 140 }, 141 142 kill: function(engine){ 143 engine._deferredParticles.push(this); 144 return this; 145 }, 146 147 distanceTo: function(target) { 148 var xd = this.pos.x - target.x; 149 var yd = this.pos.y - target.y; 150 return Math.sqrt(xd * xd + yd * yd ); 151 } 152 }; 153 154 })(window.Engine, window.Vector);