cardsforscience/js/detector.js

'use strict';
(function () {
  var detector =
  {
      canvas: {},
      ctx: {},

      colors: 
      {
          siliconRing: '#FFF371',
          siliconRingLine: '#EAC918',
          ecal: '#C5FF82',
          ecalLine: '#9EFF28',
          hcal: '#E1FF79',
          hcalLine: '#C9FF2D',
          lightRing: '#A0B3FF',
          lightRingLine: '#A0B3FF',
          darkRing: '#7280B8',
          darkRingLine: '#7280B8',

          mucalLight: '#FFDFB7',
          mucalLightLine: '#FFDFB7',
          mucalDark: '#EA301F',
          mucalDarkLine: '#C5291A'
      },

      radius:
      {
          siliconInner: 10,
          silicon: 30,
          siliconSpace: 35,
          ecal: 50,
          hcal: 80,
          darkRing1: 83,
          darkRing1Space: 88,
          lightRing: 100,
          lightRingSpace: 102,
          darkRing2: 105,

          mucal: 120,
          mucalLight: 10,
          mucalDark: 20
      },

      init: function()
      {
          detector.canvas = document.getElementById('detector');
          detector.ctx = detector.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 ratio = devicePixelRatio / backingStoreRatio;

          if (devicePixelRatio !== backingStoreRatio) {
              var oldWidth = detector.canvas.width;
              var oldHeight = detector.canvas.height;

              detector.canvas.width = oldWidth * ratio;
              detector.canvas.height = oldHeight * ratio;

              detector.canvas.style.width = oldWidth + 'px';
              detector.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.draw();
      },

      draw: function()
      {
          var ctx = detector.ctx;
          var cx = 250;
          var cy = 250;

          //ctx.scale(2,2);

          ctx.strokeRect(0,0,500,500);

          var muSplit = 2/12;
          for (var k = 3; k >= 1; k--) {
              ctx.strokeStyle = detector.colors.mucalDarkLine;
              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));
              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.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));
              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.stroke();
              ctx.fillStyle = detector.colors.mucalLight;
              ctx.fill();
          }

          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));
          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.stroke();
          ctx.globalCompositeOperation = 'destination-out';
          ctx.fill();
          ctx.globalCompositeOperation = 'source-over';


          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.fill();
          ctx.stroke();

          ctx.beginPath();
          ctx.globalCompositeOperation = 'destination-out';
          ctx.arc(cx, cy, detector.radius.lightRingSpace, 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.fill();
          ctx.stroke();

          ctx.beginPath();
          ctx.globalCompositeOperation = 'destination-out';
          ctx.arc(cx, cy, detector.radius.darkRing1Space, 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.fill();
          ctx.stroke();

          ctx.beginPath();
          ctx.globalCompositeOperation = 'destination-out';
          ctx.arc(cx, cy, detector.radius.ecal, 0, Math.PI * 2, true);
          ctx.fill();
          ctx.globalCompositeOperation = 'source-over';


          ctx.strokeStyle = detector.colors.hcalLine;
          ctx.fillStyle = detector.colors.hcal;
          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.closePath();
              ctx.fill();
              ctx.stroke();
          }

          ctx.strokeStyle = detector.colors.ecalLine;
          ctx.fillStyle = detector.colors.ecal;
          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.closePath();
              ctx.fill();
              ctx.stroke();
          }

          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.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.fill();
          ctx.stroke();
      }
  }
  detector.init();
})();