wassname/cardsforscience
1
0
Fork 0
mirror of https://github.com/wassname/cardsforscience.git synced 2026-07-11 00:49:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add event display and animation

Browse Source
This commit is contained in:
Tadej Novak
2014-08-02 18:11:46 +02:00
parent 3082f9d0c1
commit 45dcdc9d01
5 changed files with 177 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+14
View File
@@ -5,6 +5,20 @@ body {
#detector {
cursor: pointer;
margin: 0 auto;
position: relative;
width: 400px; height: 400px;
}
#detector canvas {
position: absolute; left: 0; top: 0;
}
#detector-core {
z-index: 0;
}
#detector-events {
z-index: 1;
}
.bar rect {
index.html
+9 -4
View File
@@ -31,10 +31,14 @@
</nav>
<div class="container-fluid">
<div class="col-xs-6" ng-controller="DetectorController as dc">
<canvas ng-click="dc.click()" id="detector" width="400" height="400">
Your detector. Click on it to generate events.
</canvas>
<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>
</div>
<div class="scrollable col-xs-3" id="Research" ng-controller="ResearchController as rc">
@@ -71,6 +75,7 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="js/event.js"></script>
<script src="js/detector.js"></script>
<script src="js/histogram.js"></script>
<script src="js/game.js"></script>
js/detector.js
+102 -39
View File
@@ -1,7 +1,20 @@
var detector =
{
canvas: {},
ctx: {},
core:
{
canvas: null,
ctx: null
},
events:
{
canvas: null,
ctx: null,
list: [],
},
width: 400,
height: 400,
ratio: 1,
@@ -26,68 +39,86 @@ var detector =
radius:
{
siliconInner: 5,
silicon: 25,
siliconSpace: 30,
ecal: 40,
hcal: 70,
darkRing1: 73,
darkRing1Space: 78,
lightRing: 90,
lightRingSpace: 92,
darkRing2: 95,
siliconInner: 10,
silicon: 30,
siliconSpace: 35,
ecal: 50,
hcal: 80,
darkRing1: 83,
darkRing1Space: 86,
lightRing: 92,
lightRingSpace: 94,
darkRing2: 100,
mucal: 105,
mucalLight: 10,
mucalDark: 20
mucal: 107,
mucalLight: 8,
mucalDark: 18
},
animate: function()
{
requestAnimFrame(detector.animate);
detector.draw();
},
init: function()
{
detector.canvas = document.getElementById('detector');
detector.ctx = detector.canvas.getContext('2d');
detector.core.canvas = document.getElementById('detector-core');
detector.core.ctx = detector.core.canvas.getContext('2d');
detector.events.canvas = document.getElementById('detector-events');
detector.events.ctx = detector.events.canvas.getContext('2d');
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = detector.ctx.webkitBackingStorePixelRatio ||
detector.ctx.mozBackingStorePixelRatio ||
detector.ctx.msBackingStorePixelRatio ||
detector.ctx.oBackingStorePixelRatio ||
detector.ctx.backingStorePixelRatio || 1;
var backingStoreRatio = detector.core.ctx.webkitBackingStorePixelRatio ||
detector.core.ctx.mozBackingStorePixelRatio ||
detector.core.ctx.msBackingStorePixelRatio ||
detector.core.ctx.oBackingStorePixelRatio ||
detector.core.ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
detector.ratio = detector.canvas.width / 400;
detector.ratio = detector.core.canvas.width / 400;
detector.width = detector.core.canvas.width;
detector.height = detector.core.canvas.height;
if (devicePixelRatio !== backingStoreRatio) {
var oldWidth = detector.canvas.width;
var oldHeight = detector.canvas.height;
var oldWidth = detector.core.canvas.width;
var oldHeight = detector.core.canvas.height;
detector.canvas.width = oldWidth * ratio;
detector.canvas.height = oldHeight * ratio;
detector.core.canvas.width = oldWidth * ratio;
detector.core.canvas.height = oldHeight * ratio;
detector.core.canvas.style.width = oldWidth + 'px';
detector.core.canvas.style.height = oldHeight + 'px';
detector.canvas.style.width = oldWidth + 'px';
detector.canvas.style.height = oldHeight + 'px';
detector.events.canvas.width = oldWidth * ratio;
detector.events.canvas.height = oldHeight * ratio;
detector.events.canvas.style.width = oldWidth + 'px';
detector.events.canvas.style.height = oldHeight + 'px';
// now scale the context to counter
// the fact that we've manually scaled
// our canvas element
detector.ctx.scale(ratio, ratio);
detector.core.ctx.scale(ratio, ratio);
detector.events.ctx.scale(ratio, ratio);
}
detector.ctx.scale(detector.ratio, detector.ratio);
detector.core.ctx.scale(detector.ratio, detector.ratio);
detector.events.ctx.scale(detector.ratio, detector.ratio);
detector.draw();
detector.coreDraw();
detector.animate();
},
draw: function()
coreDraw: function()
{
var ctx = detector.ctx;
var cx = 200;
var cy = 200;
var ctx = detector.core.ctx;
var cx = detector.width / 2;
var cy = detector.height / 2;
//ctx.scale(2,2);
ctx.strokeRect(0,0,400,400);
ctx.clearRect(0, 0, 400, 400);
ctx.strokeRect(0, 0, 400, 400);
var muSplit = 2/12;
for (var k = 3; k >= 1; k--) {
@@ -205,7 +236,39 @@ var detector =
ctx.arc(cx, cy, detector.radius.siliconInner, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
},
addEvent: function()
{
var event = new ParticleEvent('electron')
detector.events.list.push(event);
},
draw: function()
{
detector.events.ctx.clearRect(0, 0, 400, 400);
var del = 0;
for (var e in detector.events.list) {
if (detector.events.list[e].alpha > 0) {
detector.events.list[e].draw();
} else {
del = e;
}
}
}
};
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
(function() { detector.init(); })();
js/event.js
+50
View File
@@ -0,0 +1,50 @@
function ParticleEvent(type)
{
this.type = type;
this.length = 0;
this.radius = 0;
this.direction = 0;
this.alpha = 1;
switch (this.type)
{
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;
}
this.draw(true);
};
ParticleEvent.prototype.draw = function(init)
{
init = typeof init !== 'undefined' ? init : false;
var ctx = detector.events.ctx;
var cx = detector.width / 2;
var cy = detector.height / 2;
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#000000";
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.stroke();
ctx.restore();
if (!init) {
this.alpha -= 0.02;
}
console.log(this.alpha);
};
js/game.js
+2
View File
@@ -98,6 +98,8 @@
app.controller('DetectorController', function () {
this.click = function () {
lab.acquire(1);
detector.addEvent();
};
});