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

Scalable detector

Browse Source
This commit is contained in:
Tadej Novak
2014-12-07 11:04:56 +01:00
parent 538aff7312
commit 02f7b18e84
3 changed files with 48 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/detector.js
+35 -31
View File
@@ -86,7 +86,7 @@ var detector =
detector.draw(duration);
},
init: function()
init: function(baseSize)
{
detector.core.canvas = document.getElementById('detector-core');
detector.core.ctx = detector.core.canvas.getContext('2d');
@@ -103,10 +103,16 @@ var detector =
var ratio = devicePixelRatio / backingStoreRatio;
detector.ratio = detector.core.canvas.width / 400;
detector.ratio = baseSize / 400;
detector.width = detector.core.canvas.width;
detector.height = detector.core.canvas.height;
detector.width = baseSize;
detector.height = baseSize;
detector.core.canvas.width = baseSize;
detector.core.canvas.height = baseSize;
detector.events.canvas.width = baseSize;
detector.events.canvas.height = baseSize;
if (devicePixelRatio !== backingStoreRatio) {
var oldWidth = detector.core.canvas.width;
@@ -129,8 +135,8 @@ var detector =
detector.events.ctx.scale(ratio, ratio);
}
detector.core.ctx.scale(detector.ratio, detector.ratio);
detector.events.ctx.scale(detector.ratio, detector.ratio);
// detector.core.ctx.scale(detector.ratio, detector.ratio);
// detector.events.ctx.scale(detector.ratio, detector.ratio);
detector.coreDraw();
detector.animate();
@@ -142,7 +148,7 @@ var detector =
var cx = detector.width / 2;
var cy = detector.height / 2;
ctx.clearRect(0, 0, 400, 400);
ctx.clearRect(0, 0, detector.width, detector.width);
var muSplit = 2/12;
for (var k = 3; k >= 1; k--) {
@@ -150,17 +156,17 @@ var detector =
ctx.fillStyle = detector.colors.mucalDark;
ctx.beginPath();
ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit), cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit));
ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit) * detector.ratio);
for (var i = 1; i <= 13; i++) {
ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit), cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit));
ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit) * detector.ratio);
}
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit), cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit));
ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit) * detector.ratio);
for (var i = 1; i <= 13; i++) {
ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit), cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit));
ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit) * detector.ratio);
}
ctx.stroke();
ctx.fillStyle = detector.colors.mucalLight;
@@ -169,9 +175,9 @@ var detector =
ctx.strokeStyle = detector.colors.mucalDarkLine;
ctx.beginPath();
ctx.moveTo(cx + detector.radius.mucal * Math.cos(Math.PI * muSplit), cx + detector.radius.mucal * Math.sin(Math.PI * muSplit));
ctx.moveTo(cx + detector.radius.mucal * Math.cos(Math.PI * muSplit) * detector.ratio, cy + detector.radius.mucal * Math.sin(Math.PI * muSplit) * detector.ratio);
for (var i = 1; i <= 13; i++) {
ctx.lineTo(cx + detector.radius.mucal * Math.cos(Math.PI * i * muSplit), cx + detector.radius.mucal * Math.sin(Math.PI * i * muSplit));
ctx.lineTo(cx + detector.radius.mucal * Math.cos(Math.PI * i * muSplit) * detector.ratio, cy + detector.radius.mucal * Math.sin(Math.PI * i * muSplit) * detector.ratio);
}
ctx.stroke();
ctx.globalCompositeOperation = 'destination-out';
@@ -182,39 +188,39 @@ var detector =
ctx.beginPath();
ctx.strokeStyle = detector.colors.darkRingLine;
ctx.fillStyle = detector.colors.darkRing;
ctx.arc(cx, cy, detector.radius.darkRing2, 0, Math.PI * 2, true);
ctx.arc(cx, cy, detector.radius.darkRing2 * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.globalCompositeOperation = 'destination-out';
ctx.arc(cx, cy, detector.radius.lightRingSpace, 0, Math.PI * 2, true);
ctx.arc(cx, cy, detector.radius.lightRingSpace * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
ctx.beginPath();
ctx.strokeStyle = detector.colors.lightRingLine;
ctx.fillStyle = detector.colors.lightRing;
ctx.arc(cx, cy, detector.radius.lightRing, 0, Math.PI * 2, true);
ctx.arc(cx, cy, detector.radius.lightRing * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.globalCompositeOperation = 'destination-out';
ctx.arc(cx, cy, detector.radius.darkRing1Space, 0, Math.PI * 2, true);
ctx.arc(cx, cy, detector.radius.darkRing1Space * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
ctx.beginPath();
ctx.strokeStyle = detector.colors.darkRingLine
ctx.fillStyle = detector.colors.darkRing;
ctx.arc(cx, cy, detector.radius.darkRing1, 0, Math.PI * 2, true);
ctx.arc(cx, cy, detector.radius.darkRing1 * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.globalCompositeOperation = 'destination-out';
ctx.arc(cx, cy, detector.radius.ecal, 0, Math.PI * 2, true);
ctx.arc(cx, cy, detector.radius.ecal * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
@@ -224,10 +230,10 @@ var detector =
var calSplit = 20/2;
for (var i = 0; i < 20; i++) {
ctx.beginPath();
ctx.moveTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit), cx + detector.radius.ecal * Math.sin(Math.PI * i / calSplit));
ctx.lineTo(cx + detector.radius.hcal * Math.cos(Math.PI * i / calSplit), cx + detector.radius.hcal * Math.sin(Math.PI * i / calSplit));
ctx.arc(cx, cy, detector.radius.hcal, Math.PI * i / calSplit, Math.PI * (i+1) / calSplit, false);
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit), cx + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit));
ctx.moveTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
ctx.lineTo(cx + detector.radius.hcal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.hcal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
ctx.arc(cx, cy, detector.radius.hcal * detector.ratio, Math.PI * i / calSplit, Math.PI * (i+1) / calSplit, false);
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit) * detector.ratio);
ctx.closePath();
ctx.fill();
ctx.stroke();
@@ -238,10 +244,10 @@ var detector =
var calSplit = 20/2;
for (var i = 0; i < 20; i++) {
ctx.beginPath();
ctx.moveTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * i / calSplit), cx + detector.radius.siliconSpace * Math.sin(Math.PI * i / calSplit));
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit), cx + detector.radius.ecal * Math.sin(Math.PI * i / calSplit));
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit), cx + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit));
ctx.lineTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * (i+1) / calSplit), cx + detector.radius.siliconSpace * Math.sin(Math.PI * (i+1) / calSplit));
ctx.moveTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.siliconSpace * Math.sin(Math.PI * i / calSplit) * detector.ratio);
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit) * detector.ratio);
ctx.lineTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * (i+1) / calSplit) * detector.ratio, cy + detector.radius.siliconSpace * Math.sin(Math.PI * (i+1) / calSplit) * detector.ratio);
ctx.closePath();
ctx.fill();
ctx.stroke();
@@ -250,14 +256,14 @@ var detector =
ctx.beginPath();
ctx.strokeStyle = detector.colors.siliconRingLine;
ctx.fillStyle = detector.colors.siliconRing;
ctx.arc(cx, cy, detector.radius.silicon, 0, Math.PI * 2, true);
ctx.arc(cx, cy, detector.radius.silicon * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = detector.colors.siliconRingLine;
ctx.fillStyle = detector.colors.siliconRing;
ctx.arc(cx, cy, detector.radius.siliconInner, 0, Math.PI * 2, true);
ctx.arc(cx, cy, detector.radius.siliconInner * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
},
@@ -317,5 +323,3 @@ window.requestAnimFrame = (function(){
window.setTimeout(callback, 1000 / 60);
};
})();
(function() { detector.init(); })();
js/event.js
+3 -3
View File
@@ -12,17 +12,17 @@ function ParticleEvent(type, count, external)
switch (this.type.name)
{
case 'electron':
this.length = detector.radius.siliconSpace + Math.round((detector.radius.ecal + 10 - detector.radius.siliconSpace) * Math.random());
this.length = detector.radius.siliconSpace * detector.ratio + Math.round((detector.radius.ecal * detector.ratio + 10 - detector.radius.siliconSpace * detector.ratio) * 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.length = detector.radius.ecal * detector.ratio + Math.round((detector.radius.mucal * detector.ratio - detector.radius.ecal * detector.ratio) * 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.length = detector.radius.mucal * detector.ratio + 3 * detector.radius.mucalDark * detector.ratio + Math.round((4 * detector.radius.mucalLight * detector.ratio + 2 * detector.radius.mucalDark * detector.ratio) * Math.random());
this.direction = Math.random() * Math.PI * 2;
this.radius = 200 + Math.round((600 - 200) * Math.random());
break;
js/ui.js
+10
View File
@@ -36,6 +36,16 @@ var UI = (function () {
$('#upgradesContent').detach().appendTo('#upgradesLarge');
}
}
if ($(window).width() < 992) {
if (detector.width != 300) {
detector.init(300);
}
} else {
if (detector.width != 400) {
detector.init(400);
}
}
}
$(window).resize(resize);