Add some more track types

index.html

@@ -33,12 +33,11 @@
     <div class="container-fluid">
       <div id="detector" class="col-xs-6" ng-controller="DetectorController as dc">
         <canvas id="detector-core" width="400" height="400">
-            Your detector. Click on it to generate events.
-          </canvas>
-          <canvas ng-click="dc.click()" id="detector-events" width="400" height="400">
-            Your detector. Click on it to generate events.
-          </canvas>
-        </div>
+          Your detector. Click on it to generate events.
+        </canvas>
+        <canvas ng-click="dc.click()" id="detector-events" width="400" height="400">
+          Your detector. Click on it to generate events.
+        </canvas>
       </div>
 
       <div class="scrollable col-xs-3" id="Research" ng-controller="ResearchController as rc">

js/detector.js

@@ -55,6 +55,24 @@ var detector =
         mucalDark: 18
     },
 
+    tracks:
+    [
+        {
+            name: 'electron',
+            color: '#0016EA'
+        },
+
+        {
+            name: 'jet',
+            color: '#0B7700'
+        },
+        
+        {
+            name: 'muon',
+            color: '#775400'
+        }
+    ],
+
     animate: function()
     {
         requestAnimFrame(detector.animate);
@@ -240,7 +258,8 @@ var detector =
 
     addEvent: function()
     {
-        var event = new ParticleEvent('electron')
+        var index = Math.round(Math.random() * (detector.tracks.length - 1));
+        var event = new ParticleEvent(detector.tracks[index]);
 
         detector.events.list.push(event);
     },
@@ -249,7 +268,7 @@ var detector =
     {
         detector.events.ctx.clearRect(0, 0, 400, 400);
 
-        var del = 0;
+        var del = -1;
         for (var e in detector.events.list) {
             if (detector.events.list[e].alpha > 0) {
                 detector.events.list[e].draw();
@@ -257,6 +276,10 @@ var detector =
                 del = e;
             }
         }
+
+        if (del >= 0) {
+            detector.events.list.splice(0, del + 1);
+        }
     }
 };
 

js/event.js

@@ -6,13 +6,23 @@ function ParticleEvent(type)
     this.direction = 0;
     this.alpha = 1;
 
-    switch (this.type)
+    switch (this.type.name)
     {
         case 'electron':
             this.length = detector.radius.siliconSpace + Math.round((detector.radius.ecal - detector.radius.siliconSpace) * Math.random());
             this.direction = Math.random() * Math.PI * 2;
             this.radius = 20 + Math.round((100 - 20) * Math.random());
             break;
+        case 'jet':
+            this.length = detector.radius.ecal + Math.round((detector.radius.mucal - detector.radius.ecal) * Math.random());
+            this.direction = Math.random() * Math.PI * 2;
+            this.radius = 40 + Math.round((200 - 40) * Math.random());
+            break;
+        case 'muon':
+            this.length = detector.radius.mucal + 3 * detector.radius.mucalDark + Math.round((4 * detector.radius.mucalLight + 2 * detector.radius.mucalDark) * Math.random());
+            this.direction = Math.random() * Math.PI * 2;
+            this.radius = 200 + Math.round((600 - 200) * Math.random());
+            break;
     }
 
     this.draw(true);
@@ -29,15 +39,15 @@ ParticleEvent.prototype.draw = function(init)
     ctx.save();
 
     ctx.globalAlpha = this.alpha;
-    ctx.strokeStyle = "#000000";
-    ctx.fillStyle = "#000000";
+    ctx.strokeStyle = this.type.color;
+    ctx.fillStyle = this.type.color;
 
     ctx.translate(cx, cy);
     ctx.rotate(this.direction);
     ctx.translate(-cx, -cy);
 
     ctx.beginPath();
-    ctx.arc(cx + this.length / 2, cy + Math.round(Math.sqrt(this.radius * this.radius - this.length * this.length / 4)), this.radius, -Math.PI / 2 - Math.asin(this.length / (2 * this.radius)), -Math.PI / 2 +  Math.asin(this.length / (2 * this.radius)), false);
+    ctx.arc(cx + this.length / 2, cy + Math.round(Math.sqrt(Math.abs(this.radius * this.radius - this.length * this.length / 4))), this.radius, -Math.PI / 2 - Math.asin(this.length / (2 * this.radius)), -Math.PI / 2 +  Math.asin(this.length / (2 * this.radius)), false);
     ctx.stroke();
 
     ctx.restore();
@@ -45,6 +55,4 @@ ParticleEvent.prototype.draw = function(init)
     if (!init) {
         this.alpha -= 0.02;
     }
-
-    console.log(this.alpha);
 };